[You must be registered and logged in to see this image.]












웹
디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,일러스트디자인,웹디자인,포트
폴리오,포토샵,이미지보정,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,
일러스트디자인,웹디자인,포트폴리오,포토샵,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스
터,일러스트레이터,일러스트디자인,웹디자인,포트폴리오,포토샵,



일단 배너의 배경이 될 이미지를 포토샵으로 불러와주세요.





[You must be registered and logged in to see this image.]










웹
디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,일러스트디자인,웹디자인,포트
폴리오,포토샵,이미지보정,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,
일러스트디자인,웹디자인,포트폴리오,포토샵,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스
터,일러스트레이터,일러스트디자인,웹디자인,포트폴리오,포토샵,

STEP 01.



그리고 원하시는 문구를 각 레이어마다 따로따로 3개 정도 써주세요. 그러면 텍스트가 써진

레이어의 수도 총 3개가 될 겁니다. 전 글자에 약간의 효과를 주고 준비해봤어요.





[You must be registered and logged in to see this image.]








웹
디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,일러스트디자인,웹디자인,포트
폴리오,포토샵,이미지보정,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,
일러스트디자인,웹디자인,포트폴리오,포토샵,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스
터,일러스트레이터,일러스트디자인,웹디자인,포트폴리오,포토샵,



STEP 02.





각 텍스트가 써진 레이어를 선택하시고 ctrl + j 를 누르셔서 레이어 복사를 하시고 텍스트 모드에서는

블러 효과를 줄 수 없기 때문에 복제된 레이어를 선택하신 상태에서 우클릭 하셔서 "문자 레스터화"나

상단 메뉴에서 "레이어 > 레스터화 > 문자 (Layer>rasterize>type) 이렇게 하시면 텍스트 레이어가

이미지 레이어로 변해요.








웹
디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,일러스트디자인,웹디자인,포트
폴리오,포토샵,이미지보정,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,
일러스트디자인,웹디자인,포트폴리오,포토샵,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스
터,일러스트레이터,일러스트디자인,웹디자인,포트폴리오,포토샵,



STEP 03.





이미지 레이어로 변한 것을 모션 블러 효과를 주시면 됩니다. 필터 > 흐림 효과 > 동작 흐림을 선택하셔서

아래와 같이 각도 없이 그냥 50정도 주세요.





[You must be registered and logged in to see this image.]







이렇게 세 가지 문구들을 레이어 레스터화 + 블러 효과를 주어서 각각 3장씩 준비합니다.

그럼 레이어가 아래와 같이 되지요! 눈 부릅 뜨고 보세요~





[You must be registered and logged in to see this image.]









STEP 04.





자~ 그럼 이제 바탕을 모두 준비가 되었구요. 아래와 같이 배너 바탕과 제일 첫번째 문구의 눈만

제외하시고 모두 눈을 꺼주세요. 눈은 애니메이션 창을 열어서 본격적으로 움직이는 화면을

만들어 보겠습니다. cs3는 애니메이션창이 상단 메뉴의 창> 애니메이션 누르시면 있구요.

하위 버전은 아마 좌측 툴 파랫트 아래 있을거에요.





[You must be registered and logged in to see this image.]







애니메이션 창이 열리면 첫번째 텍스트 글자만 딱 보일꺼에요. 그러면 새 프레임을 추가하시고

첫번째 글자 블러 처리한 레이어의 눈만 켜줍니다.





[You must be registered and logged in to see this image.]













STEP 05.





그리고 그대로 다음 프레임을 추가하시고 블러 처리한 글자의 레이어의 불투명도(opacity)를 80%로 설정해줍니다.

또 그대로 다음 프레임을 추가하시고 불투명도 60%... 이런 식으로 20%씩 줄이면서 20%까지 프레임을 만들어 주세요.





[You must be registered and logged in to see this image.]









STEP 06.





그리고 선명한 텍스트가 써진 프레임이 시간을 3초, 블러 효과가 들어간 프레임들의 시간을 0.05초로 설정해주세요.

여기까지 정상적으로 따라하셨으면 애니메이션 프레임의 수는 총 6장이 됩니다.





[You must be registered and logged in to see this image.]







제가 설명드린대로 잘 만드셨다면 아마 선명한 텍스트에서 서서히 텍스트가 흐려지면서

스피드하게 사라지는 모습을 보실 수 있을 겁니다.




<blockquote class="vview_quote01" style="margin: 14px 15px 20px; width: 100%;">

point : 텍스트 레이어가 있는 프레임이 3초니까 처음에는 3초 동안 텍스트만 선명하게 보이고 3초가 지나면 100% 선명도의 블러 텍스트레스터화한 이미지가 0.05초 보이고 그 다음에는 80% 선명도의 레이어가 0.05초... 이런 식으로 보이게 되는데 0.05초가 워낙 순식간이니까 우리들 눈에는 저렇게 샤르륵~ 움직이면서 보이는 거지요~

</blockquote>







STEP 07.





이제 다시 프레임을 하나 추가하시고 이번에는 다음 문구가 써진 레이어의 눈만 켜주시고 위에서 했던

과정을 그대로 해줍니다. 세번째도 마찬가지고요. 그럼 아래와 같은 모양의 프레임이 나와야 합니다.

프레임 수는 총 18개 입니다. 루핑 옵션을 "계속"으로 설정하시고 플레이 버튼을 누르시면 스피디하게

사라지며 문구가 바뀌는 배너의 모습을 보실 수 있습니다.





[You must be registered and logged in to see this image.]



[ 이런 식으로 쭉~ 프레임이 만들어 집니다! ]







이제 ctrl + shift + alt + s를 누르셔서 저장방식을 gif로 설정하신 후 저장하시면 끝입니다!

강좌 쫓아 오시느라고 수고하셨어요 ^^






웹
디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,일러스트디자인,웹디자인,포트
폴리오,포토샵,이미지보정,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스터,일러스트레이터,
일러스트디자인,웹디자인,포트폴리오,포토샵,웹디자인,포토샵,포토샵강좌,일러스트,웹디자이너,MBC아카데미디지털교육원,웹사이트,웹마스
터,일러스트레이터,일러스트디자인,웹디자인,포트폴리오,포토샵,



************ 강좌로 만들어진 다양한 색상의 배너들 ************





[You must be registered and logged in to see this image.]





**********************************************************

[출처] [포토샵 강좌] 스피디하게 글자가 바뀌는 gif배너 만들기|작성자 금키
]