위로

자유게시판

원본사이트를 보려면 본문하단에 <제목>이나<출처>를 클릭 하십시오.

포토샵 gif 애니메이션 공감마녀 빗자루 만드는 방법?Part 7

0.gif



보통 포스팅을 하신 후

공감과 덧글을 어필할 수 있는 이미지를

글 하단에 삽입하는 잇님들 많죠?


움직이는 gif 애니메이션을 사용할 경우

심심하지 않고 재미요소를 줄 수 있어서

시선이 집중되는 장점이 있습니다.

너무 요란하면 어지럽겠지만요 .


평소.. 공감마녀 빗자루에

관심이 있는 잇님들이 제법 있으셔셔

오늘은 포토샵 강좌을 통해 모두

하나씩 만들수 있도록 우리 같이

 포토샵 gif를  만들어 볼께요^^


leonard_special-34


혹 오늘 강좌가 어려우시더라도

망은 NO!!


오늘 강좌를 통해 만든 gif를

필요하신 잇님들이 사용할 수 있도록

첨부파일로 올려드리니 원하신다면

GO!!GO

 


자, 그럼 시작해볼까요?

공감마녀의 포토샵은 CS5 영문버전입니다.

1.소스만들기​

먼저 하단배너로 사용될 이미지의

사이즈를 정합니다.
0.gif



공감마녀는

500 * 120px로 만들어 볼거예요

이번에는 이미지에 들어갈

나만의 문구가 있어야겠죠^^

가로문자툴을 사용하여

나만의 문구를 적어주시면 됩니다.

누구나 사용할 수 있도록

무난한 문구로 적어 넣었습니다~

"여러분의 소중한 공감과 덧글은

저에게 큰 힘이 됩니다~!"


leonard_special-11


저뿐만 아니라 모든 블로거분들은

공감과 덧글이 소중하죠?


이제 쓱싹쓱싹 움직일

연필을 만들어 보아야죠~

gif 애니메이션을 위해

연필은 최대한 간단하게 만들어 볼게요



위의 이미지를 캡쳐후

펜툴로 따라 그리셔도 되구요

어려우신 분들은 포스팅 스크랩하신후에

이미지 저장하시면 된답니다. ^^

펜툴이 기억안나는 분들을 위해

http://blog.naver.com/zencstory/220320197251


​위의 포스팅을 참고하시면 되겠습니다.


leonard_special-9 

다음으로 글자 아래 부분에 

그림자를 넣어볼건데요~

새로운 레이어를 만든 후에

레이어의 이름을 그림자로 바꿔줍니다.



다음으로 원형 선택툴을 사용하여

타원을 길고 납작하게 만들어주심요



전경색을 검정으로 바꾼 뒤

Alt+백스페이스를 눌러서

선택영역에 전경색을 채워주세요


색을 입히셨다면 선택해제!!

선택해제는 Ctrl+D!


sally_and_friends-4

이제 실제 그림자 처럼

뿌옇게 만들어 볼건데요~

가장 많이 쓰는 효과중에 하나가

Gaussian Blur라는 거에요


Filter > Blur > Gaussian Blur

선택해주세요~~

옵션창에서 수치를 8px로 설정!

수치가 커질수록 더 뿌옇게 되니

입맛에 맛게

조절하시면 되겠습니다.^^

어떠세요?

나름 그림자 느낌이 살짝 나죠?

그런데 너무 진한듯 하죠 ㅋㅋ

그림자는

좀 은은한 맛이 있어야되는데..

sally_and_friends-14


Opacity

투명도를 설정하는 옵션인데요~

요것을 20%정도로 줄여보죠.

그리고 Ctrl+T를 사용하여

그림자를 더 납작하게 조절해주세요


정확한 수치라는 것은 없답니다.

그냥..

누가보아도 그림자다운 느낌으로

조절해주시면 된답니다.


​그림자가 완성되었다면..

필요한 소스가 다 만들어 졌네요

이런게 완성된 화면이

포토샵 gif의 첫 이미지입니다.

여기서 조금씩 변형하면

금방 애니메이션을 만들 수 있죠~


moon_and_james-7

​그럼, 애니메이션을 만들러 고고!

2.애니메이션

먼저

Window > Animation을 클릭하여

Animation 창을 열어주세요~


오늘 알아볼 gif 애니메이션의

원리는 글자를 가리고 있는 가리개가

연필과 함께 오른쪽으로 이동하면서

한글자씩 보여지는 방식입니다.


가리개가

이 애니메이션의 핵심인거죠?



먼저 ..

연필레이어과 글자레이어 사이에

새로운 레이어를 만들어주시고

가리개라고 이름을 바꿔주세요~


sally_special-14

다음으로 사각선택툴로

텍스트가 있는 영역을 선택!!





이제 전경색을 흰색으로 바꾼 뒤

선택영역을 흰색으로 채워주세요

만약 배경이 검정이라면

선택영역도 검정으로 바꿔주셔야겠죠?

이해되시나요? ^^

sally_special-23


색을 채우셨다면 선택해제~

선택해제는 Ctrl+D!



이번에는..

애니메이션의 속도를 설정해보아야죠~

정확히는 프레임의 재생속도입니다.



0.1초로 설정하신다면

0.1초 후에 ...

다음 프레임으로 넘어가게 됩니다.

공감마녀는 0.1초로 설정해볼게요

edward_special-30


드디어 ..

두번째 화면을 만들어 볼텐데요~

먼저 애니메이션 프레임을 복사해주심^^



하단의 버튼을

클릭하면 프레임이 복사됩니다.



연필레이어와 가리개레이어를

같이 선택하시고

새로 생성된 2번 프레임에서

오른쪽으로 살짝 이동시켜주세요


이동하실 때

Shift 키를 누른 채로 이동해야

수평으로 이쁘게 이동할 수 있답니다. ^^



같은 방식으로 새로운 애니메이션

프레임을 만들어 주시고

다시...

오른쪽 방향으로 조금 이동해주세요


한글자가 보일정도로만

이동해주시면 된답니다. ^^

어떠세요? 쉽죠?


edward_special-2


그렇게 마지막 글자가 보일때까지

무한반복!

1.프레임생성

2.오른쪽으로 이동

.

.

.


그렇게 글자가 다 보일때까지 만드셨다면


마지막프레임의 재생속도를

1초로 설정해주세요^^

만약

0.1초로 설정되어 있으면

글을 읽지도 못하고 빠르게

첫프레임으로 넘어가버리거든요~

마지막 화면은 잠시 멈춰있는 것이

좋답니다. ^^


edward_special-10



다 만드셨다면 두근거리는 마음으로

재생버튼을 눌러볼까요?


포스팅의 내용대로 잘따라오셨다면

gif가 생각대로 잘 나올거에요


여기서 주의하실 점..

 만약

프레임 수가 많은 애니메이션이라면

꼭 중간에 재생버튼을 눌러서

이상이 없는지 확인해주셔야 합니다.


edward_special-17


다 만든후에 오류가 생긴다면

문제가 되는 프레임을 모두 바꿔줘야 해서

수정이 까다롭답니다. ㅜㅜ




다 완성되었다면 이제 GIF로 저장해야겠죠?

저장은 간단합니다.

File > Save for Web & Devices

누르시면

GIF로 저장하는 창이 뜨는데요


단축키는..

Alt + Ctrl + Shift + S



옵션에서 포토샵 gif를 확인하시고



저장을 해주시면 끝~


포스팅 하단에 적용하면

이런 모습으로 나오게 된답니다. ^^


오늘은 gif 애니메이션에 대해서

알아봤는데요~

어떠세요 도움이 좀 되셨나요?


오늘 포토샵 강좌를 통해 만들어본

생동감있는 gif가 필요하신 잇님들은

언제든 비댓해주세요~

바로 비번으로 답해드립니다 ㅋㅋ


나만의 하단배너를 만들어 보는 것도

블로그를 꾸밀 수 있는

좋은 방법중에 하나라는 생각이 드네요^^


번호 제목 글쓴이 날짜 조회 수
295 [컴퓨팅] 마이크론, Micron 2200 PCIe NVMe SSD 공개 bjc1111 2019.03.21 22
294 [IT애정남] 그래픽 드라이버 업데이트 하면 정말로 성능이 향상? file bjc1111 2018.09.13 54
293 윈도우10 ,MS오피스 정품인증 file bjc1111 2018.05.07 255
292 가정용과 사무용으로 적합한 4베이 NAS, 넷기어 레디나스 file bjc1111 2018.04.17 15
291 금값 자랑하던 그래픽카드 가격 내려갔다, 3월 평균 25% 하락 2018/04/06 bjc1111 2018.04.08 47
290 기가바이트 최고의 GTX1070 Ti, 기가바이트 지포스 bjc1111 2018.03.24 44
289 SATA 3를 넘어선 NVMe SSD들 bjc1111 2016.10.22 67
288 M.2 SSD 쓰면 SATA SSD가 죽는다? bjc1111 2016.10.14 58
287 [SSD 구매가이드] 여자친구 노트북 업그레이드, 어떤 SSD로 해줄까? bjc1111 2016.10.12 58
286 MS 엣지(edge) 기본검색엔진 변경하는 법 file bjc1111 2015.12.17 355
» 포토샵 gif 애니메이션 공감마녀 빗자루 만드는 방법?Part 7 file bjc1111 2015.12.14 147
284 MS 엣지(edge) 기본검색엔진 변경하는 법 file bjc1111 2015.12.13 165
283 윈도우 10 사용기 (2) - 프로그램/앱 제거하기 file bjc1111 2015.12.11 88
282 드라이브 포맷 안하고 내부 파일 안깨지면서 파티션 재설정을 할 수 있나요?? bjc1111 2015.10.24 93
281 MS, 오피스2016 프리뷰 공개 bjc1111 2015.02.10 84
280 고객님~당황하셨어요? 하스웰 지원 파워 쉽게 고르기! bjc1111 2015.02.10 67
279 현재년도 자바태그 file bjc1111 2013.12.04 258
278 JAVA 현재 연도, 날짜, 시간 출력프로그램 bjc1111 2013.12.04 377
277 외부페이지 최근 게시물 넣기(위젯) 관리자 2013.10.27 28233
276 XE 데이터 이전하기 관리자 2013.10.26 1215