웹디자인 강의
Photoshop 펜으로 그려지는 듯한 배너 만들기..
2002.12.05 23:41
안녕하세요..^^
우선 저 같은 허접의 강좌를 클릭해주셔서 감사합니다.
이건 솔직히 강좌라고 할 것까진 없지만, 제가 이 강좌게시판에서 실력을 키워온 때를 생각하며..
(물론 당연히 지금도 키우고 있구요..^-^;;)
NZEO인으로써.. 강좌를 써봅니닷...^^
---------------------------------------------------------------------------------------
이 배너는 상당히 간단한 배너 입니다. 제가 초보시절 만든것이라 배경도 간단한 그라데이션으로
처리하였고, 사용된 색도 배경 외에는 검은색밖에 없습니다.
지금생각해보니, 이 애니메이션Gif파일에 사용된 Gif파일수가 30개가 넘어감에도 불구하고 최종적인
배너 용량은 30Kb밖에 되지않은 이유가 그 때문이 아닌가 싶네요. ^^
![smileru_b.gif](/files/attach/images/19360728/249/406/019/smileru_b.gif)
이것이 배너입니다. 진짜 볼것 없죠? ㅠㅠ
얼핏보아도 많은 파일이 사용되었을꺼라 생각되는 배너입니다...
"=>"모양(스마일 이라고 하죠. ^^)을 만드는 방법을 알려드릴껀데요...
'=>"모양의 핵심은, "=>"모양을 부드럽게 만들어 나가는 것인데요. 눈부터 그려나가는 식으로 노가다를 하다간,
나중에 파일들을 연결했을때 삐뚤삐뚤하게 움직이는것이 티가나고 시간도 많이 걸립니다.
그래서 우선..
![newbanner18.gif](/files/attach/images/19360728/249/406/019/newbanner18.gif)
포토샵에서 이 그림에서부터 시작합니다. 여기서 '지우개'툴을 이용하여 입에서 부터 지워줍니다.
(다른그림이 그려지는 걸 원하신다면 역시 완성작을 우선 그려줍니다.)
![newbanner18.gif](/files/attach/images/19360728/249/406/019/newbanner18.gif)
![newbanner17.gif](/files/attach/images/19360728/249/406/019/newbanner17.gif)
![newbanner16.gif](/files/attach/images/19360728/249/406/019/newbanner16.gif)
![newbanner15.gif](/files/attach/images/19360728/249/406/019/newbanner15.gif)
:
:
![newbanner5.gif](/files/attach/images/19360728/249/406/019/newbanner5.gif)
![newbanner4.gif](/files/attach/images/19360728/249/406/019/newbanner4.gif)
![newbanner3.gif](/files/attach/images/19360728/249/406/019/newbanner3.gif)
이렇게요... 다시 말씀드리지만 그려나가지 않고 완성작에서 지워나가는 이유는,
전체적인 모양이 흔들리지 않게 되어 나중에 애니매이션으로 만들었을때 어색하지 않고,
조금씩 지워나감으로써 부드러운 효과를 줄수 있기 때문이죠. ^^
지울때의 간격은 일정하게 하시구요.. 변화를 주는것도 어쩌면 하나의 효과일지도 모르겠네요. ^^
이렇게 해서 만든 파일들을 연결할때는 순서를 반대로 하여 애니메이션으로 만들면 '스마일'그림이 '생기는' 배너가 되겠죠? ^^
위의 그림이 나열된 순서로 연결하게되면 지워지는 효과가 될꺼구요.
참고로.. 이 스마일을 그리는데는 총 15개의 gif파일이 사용되었습니다.
혹시 화려하게 하여 더욱 멋진그림을 만들고자 하신다면 유의하셔야 합니다.
부드러운 효과를 내기 위해서는 많은 그림이 필요할테고, 나중에 완성된 배너는 큰 용량을 가질테니까요.
그때는 살며시 플래쉬로 눈을 돌리시는것이..
그리고 나머지 글씨들은 포토샵에서 '투명도', 즉 Opecity를 이용하였습니다.
읽어주셔서 감사합니다~~ (감사감사~~)
우선 저 같은 허접의 강좌를 클릭해주셔서 감사합니다.
이건 솔직히 강좌라고 할 것까진 없지만, 제가 이 강좌게시판에서 실력을 키워온 때를 생각하며..
(물론 당연히 지금도 키우고 있구요..^-^;;)
NZEO인으로써.. 강좌를 써봅니닷...^^
---------------------------------------------------------------------------------------
이 배너는 상당히 간단한 배너 입니다. 제가 초보시절 만든것이라 배경도 간단한 그라데이션으로
처리하였고, 사용된 색도 배경 외에는 검은색밖에 없습니다.
지금생각해보니, 이 애니메이션Gif파일에 사용된 Gif파일수가 30개가 넘어감에도 불구하고 최종적인
배너 용량은 30Kb밖에 되지않은 이유가 그 때문이 아닌가 싶네요. ^^
![smileru_b.gif](/files/attach/images/19360728/249/406/019/smileru_b.gif)
이것이 배너입니다. 진짜 볼것 없죠? ㅠㅠ
얼핏보아도 많은 파일이 사용되었을꺼라 생각되는 배너입니다...
"=>"모양(스마일 이라고 하죠. ^^)을 만드는 방법을 알려드릴껀데요...
'=>"모양의 핵심은, "=>"모양을 부드럽게 만들어 나가는 것인데요. 눈부터 그려나가는 식으로 노가다를 하다간,
나중에 파일들을 연결했을때 삐뚤삐뚤하게 움직이는것이 티가나고 시간도 많이 걸립니다.
그래서 우선..
![newbanner18.gif](/files/attach/images/19360728/249/406/019/newbanner18.gif)
포토샵에서 이 그림에서부터 시작합니다. 여기서 '지우개'툴을 이용하여 입에서 부터 지워줍니다.
(다른그림이 그려지는 걸 원하신다면 역시 완성작을 우선 그려줍니다.)
![newbanner18.gif](/files/attach/images/19360728/249/406/019/newbanner18.gif)
![newbanner17.gif](/files/attach/images/19360728/249/406/019/newbanner17.gif)
![newbanner16.gif](/files/attach/images/19360728/249/406/019/newbanner16.gif)
![newbanner15.gif](/files/attach/images/19360728/249/406/019/newbanner15.gif)
:
:
![newbanner5.gif](/files/attach/images/19360728/249/406/019/newbanner5.gif)
![newbanner4.gif](/files/attach/images/19360728/249/406/019/newbanner4.gif)
![newbanner3.gif](/files/attach/images/19360728/249/406/019/newbanner3.gif)
이렇게요... 다시 말씀드리지만 그려나가지 않고 완성작에서 지워나가는 이유는,
전체적인 모양이 흔들리지 않게 되어 나중에 애니매이션으로 만들었을때 어색하지 않고,
조금씩 지워나감으로써 부드러운 효과를 줄수 있기 때문이죠. ^^
지울때의 간격은 일정하게 하시구요.. 변화를 주는것도 어쩌면 하나의 효과일지도 모르겠네요. ^^
이렇게 해서 만든 파일들을 연결할때는 순서를 반대로 하여 애니메이션으로 만들면 '스마일'그림이 '생기는' 배너가 되겠죠? ^^
위의 그림이 나열된 순서로 연결하게되면 지워지는 효과가 될꺼구요.
참고로.. 이 스마일을 그리는데는 총 15개의 gif파일이 사용되었습니다.
혹시 화려하게 하여 더욱 멋진그림을 만들고자 하신다면 유의하셔야 합니다.
부드러운 효과를 내기 위해서는 많은 그림이 필요할테고, 나중에 완성된 배너는 큰 용량을 가질테니까요.
그때는 살며시 플래쉬로 눈을 돌리시는것이..
그리고 나머지 글씨들은 포토샵에서 '투명도', 즉 Opecity를 이용하였습니다.
읽어주셔서 감사합니다~~ (감사감사~~)
댓글 11
-
락
2002.12.06 02:38
오호....서플라이즈~ -
AT4u
2002.12.06 07:12
배경이 똑같으니 배경을 1프레임에 깔아주고 2프레임부터는 투명 gif로 깔아주면 용량 절약이 되..지 않나요? -_-; -
지진;)
2002.12.06 15:55
강좌와 상관없어 죄송합니다만은,
스마일러유(?)님 서명에 '그래. 난 언제나..' 그 부분의 폰트는 무엇인가요? 알고싶스비다. -
soul
2002.12.06 17:02
지진/ 윤고딕2xx 일겁니다^^ -
tnstn
2002.12.07 00:24
오호~감샤~신기하다 생각했는데 알고 나니까 후련하네요~! -
ⓧ-ⓣⓨⓛⓔ。
2002.12.06 23:22
이미지 레디를 쓰는것도 좋은 방법일껏같은데... -
Smileru™
2002.12.06 23:42
soul / 그렇습니다!! ^^ 윤고딕220입니다. 앗. 아닌가??
ⓧ-ⓣⓨⓛⓔ。/ 이미지레디는 그림을 이어줄때 사용하겠죠? 그것외에도...
더런 효과를 만들기 위해 이미지레디에서 간편하게 할수 있는 방법이
있는것 같던데 전 잘 몰라서요..^^ -
んLㄹ♪
2002.12.07 11:04
ㅋㅋ 스마일루님이당
저 ultrash-0-;; -
Rozz
2002.12.07 12:21
아하; 지워가는 방법이 있었군요 +_+ -
Aya★
2002.12.18 19:49
음음 그렇군요 플래쉬는 어려버용 ㅠㅠ -
정진영
2004.02.12 22:12
마지막에 투명도도 좋지만 가우시안으로 처리하는것도 좋을듯^^;;
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] | Eccen | 2004.12.15 | 48031 |
88 | [gam+zign] 줄무늬 소용돌이 만들기. [12] | -릭a | 2002.10.31 | 3740 |
87 | Exclude 필터 꽁수! [6] | madito.징퓬 | 2003.01.28 | 3737 |
86 | 사각으로 이미지 자르기 9 | 문학의향기 | 2006.07.28 | 3721 |
85 |
이번엔 지우개 틀에 대해서 배워볼까합니다
[3]
![]() | 정진혁 | 2003.01.29 | 3718 |
84 |
허접한 모양만들기 -_-
[11]
![]() | Marine | 2003.02.14 | 3698 |
83 |
(기초강의)포토샵시작하기
![]() | 최승철 | 2005.04.28 | 3696 |
82 |
(왕초보용) 스타일 팔레트에 나만의 스타일 만들고 저장하기
[11]
![]() | 리체 | 2002.12.13 | 3686 |
81 |
돌멩이 문자 만들기
![]() | wwolf | 2008.09.21 | 3681 |
80 | [라인디자인]방사형사선만들기 - 2 [3] | knowkorea | 2002.08.09 | 3665 |
79 |
레이어 분석해보기
[6]
![]() | Narcissus∏ | 2003.02.24 | 3658 |
78 |
dong성이의 뽀로샵 강좌 - 3 - 볼록 질감..
[3]
![]() | dong성이 | 2003.01.10 | 3644 |
77 |
(기초강의)포토샵시작하기
![]() | 최승철 | 2005.04.28 | 3633 |
76 | Pen툴의 모든것. (1) [4] | 포토샵 | 2002.05.15 | 3627 |
75 | 포토샵 단축키 모음 1 | 문학의향기 | 2006.07.26 | 3605 |
74 | 모자이크 처리하기 15강 | 문학의향기 | 2006.07.28 | 3568 |
73 |
달마시안무늬
[10]
![]() | 프레 | 2002.08.11 | 3568 |
72 |
폴라로이드 효과
[1]
![]() | wwolf | 2008.09.21 | 3561 |
71 | 글자모양 마음대로~ 4 | 문학의향기 | 2006.07.26 | 3551 |
70 |
[한글버젼]색상/채도/밝기 변경하기
[7]
![]() | (づεど)**♡** | 2003.01.20 | 3520 |
69 | [질문] 포토샵에러에 관해서... [7] | cx2ip140 | 2003.02.26 | 3504 |