메뉴 건너뛰기

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
695 [나모웹 초보자] 책갈피를 만들어 보자.~! file 나만의길 2004.07.18 2766
694 [나모웹 초보자] 스크립트 마법사① file 나만의길 2004.07.18 3974
693 [나모웹 초보자] 스크립트 마법사② file 나만의길 2004.07.18 2607
692 [나모웹 초보자] 스크립트 마법사③ file 나만의길 2004.07.18 3074
691 [나모웹 초보자] 레이어를 만들어 보자.~! [2] file 나만의길 2004.07.18 4422
690 쉬드와 함께하는 노프래임 홈페이지 5분만에 만들기 [38] file 쉬드 2004.07.18 12636
689 [Tany_A의 도트강의]분홍색 토깽이!! [3] file Tany_A™ 2004.07.19 5698
688 swf 파일을 fla 파일로 [25] file 조으니 2004.07.20 20288
687 [초급]태양만들기 [16] file 안상수 2004.07.20 11277
686 반투명 롤오버 이미지 만들기 - [난이도下] [3] file 박효진 2004.07.21 11693
685 1 워밍업 (포토샵 구하기, 파일열고 저장하기 같은 단순한 것들) file 박진 2004.07.21 5933
684 2 사진 밝게하기(전체적으로 사진 밝게 하고 보정하기) file 박진 2004.07.21 7720
683 3 부분적으로 사진보정하기 1편 (보너스 - 히스토리 기능배우기) file 박진 2004.07.21 5162
682 4 부분적으로 사진보정하기 2편 (보너스 - 빨간눈 보정하기) [2] file 박진 2004.07.21 6474
681 5 뽀샤시하게 블러효과 주기(보너스 - 화질 안좋은 사진 보정하기 file 박진 2004.07.21 14167
680 6 성형수술 1편 (지존 턱,볼살깍기 코세우기) [2] file 박진 2004.07.21 12053
679 7 성형수술 2편 (눈키우기) [5] file 박진 2004.07.21 11725
678 8 뒷배경 흐리게 하기(아웃포커스 효과) [2] file 박진 2004.07.21 15763
677 9 이미지 사이즈 조절(사진 키우고 줄이고 회전시키기) file 박진 2004.07.21 8641
676 10 이미지 트리밍(원하는 사이즈로 사진 오려내기) [2] file 박진 2004.07.21 9913