메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요..^^

우선 저 같은 허접의 강좌를 클릭해주셔서 감사합니다.

이건 솔직히 강좌라고 할 것까진 없지만, 제가 이 강좌게시판에서 실력을 키워온 때를 생각하며..
(물론 당연히 지금도 키우고 있구요..^-^;;)

NZEO인으로써.. 강좌를 써봅니닷...^^
---------------------------------------------------------------------------------------

이 배너는 상당히 간단한 배너 입니다. 제가 초보시절 만든것이라 배경도 간단한 그라데이션으로
처리하였고, 사용된 색도 배경 외에는 검은색밖에 없습니다.

지금생각해보니, 이 애니메이션Gif파일에 사용된 Gif파일수가 30개가 넘어감에도 불구하고 최종적인
배너 용량은 30Kb밖에 되지않은 이유가 그 때문이 아닌가 싶네요. ^^

smileru_b.gif

이것이 배너입니다. 진짜 볼것 없죠? ㅠㅠ

얼핏보아도 많은 파일이 사용되었을꺼라 생각되는 배너입니다...  

"=>"모양(스마일 이라고 하죠. ^^)을 만드는 방법을 알려드릴껀데요...  

'=>"모양의 핵심은, "=>"모양을 부드럽게 만들어 나가는 것인데요. 눈부터 그려나가는 식으로 노가다를 하다간,

나중에 파일들을 연결했을때 삐뚤삐뚤하게 움직이는것이 티가나고 시간도 많이 걸립니다.

그래서 우선..

newbanner18.gif

포토샵에서 이 그림에서부터 시작합니다. 여기서 '지우개'툴을 이용하여 입에서 부터 지워줍니다.

(다른그림이 그려지는 걸 원하신다면 역시 완성작을 우선 그려줍니다.)

newbanner18.gif
newbanner17.gif
newbanner16.gif
newbanner15.gif
:
:
newbanner5.gif
newbanner4.gif
newbanner3.gif

이렇게요...  다시 말씀드리지만 그려나가지 않고 완성작에서 지워나가는 이유는,

전체적인 모양이 흔들리지 않게 되어 나중에 애니매이션으로 만들었을때 어색하지 않고,

조금씩 지워나감으로써 부드러운 효과를 줄수 있기 때문이죠. ^^

지울때의 간격은 일정하게 하시구요.. 변화를 주는것도 어쩌면 하나의 효과일지도 모르겠네요. ^^

이렇게 해서 만든 파일들을 연결할때는 순서를 반대로 하여 애니메이션으로 만들면 '스마일'그림이 '생기는' 배너가 되겠죠? ^^

위의 그림이 나열된 순서로 연결하게되면 지워지는 효과가 될꺼구요.


참고로.. 이 스마일을 그리는데는 총 15개의 gif파일이 사용되었습니다.

혹시 화려하게 하여 더욱 멋진그림을 만들고자 하신다면 유의하셔야 합니다.

부드러운 효과를 내기 위해서는 많은 그림이 필요할테고, 나중에 완성된 배너는 큰 용량을 가질테니까요.

그때는 살며시 플래쉬로 눈을 돌리시는것이..

그리고 나머지 글씨들은 포토샵에서 '투명도', 즉 Opecity를 이용하였습니다.

읽어주셔서 감사합니다~~ (감사감사~~)

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48031
1308 패턴을 이용한 예쁜 테두리 만들기 [1] 문학의향기 2006.08.01 14206
1307 이미지 집중효과 29강 [1] 문학의향기 2006.07.31 10505
1306 꽃물방울 만들기 28강 문학의향기 2006.07.31 8478
1305 이미지모서리 윗부분 둥글게 만들기 27강 문학의향기 2006.07.31 9812
1304 별이 떨어지는 이미지 만들기 26강 [1] 문학의향기 2006.07.31 7021
1303 문자효과 (플라스틱 문자) 25강 문학의향기 2006.07.31 7671
1302 글자에 빛이 지나가는 이미지 만들기 24강 [1] 문학의향기 2006.07.31 7188
1301 스탠드불빛 만들기 23강 문학의향기 2006.07.30 7632
1300 안개 낀 이미지 만들기 22강 문학의향기 2006.07.30 4959
1299 찢어진 듯한 테두리 만들기 21강 [1] 문학의향기 2006.07.30 6731
1298 형태도구 이용해서 예쁜 무늬 만들기 19강 문학의향기 2006.07.30 3819
1297 약간 아쿠아틱한 버튼 만들기 file X-Type 2006.07.30 8650
1296 투명이미지 만들기 18강 문학의향기 2006.07.29 6026
1295 전통조각보 느낌주는 이미지 만들기 17r강 문학의향기 2006.07.29 4790
1294 이미지 겹쳐돌리기 16강 문학의향기 2006.07.29 3950
1293 모자이크 처리하기 15강 문학의향기 2006.07.28 3568
1292 이미지 뽀샤시 하게 만들기 14강 문학의향기 2006.07.28 4992
1291 그라디언트를 이용한 축전 만들기 13강 문학의향기 2006.07.28 3486
1290 글자 좌우로 움직이기 12 문학의향기 2006.07.28 5638
1289 글자에 그림자효과 넣기 11 문학의향기 2006.07.28 4239