메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요 윙스입니다^-^)/
저번강의에 이어 "#2볼록하고이쁜곡선그리기" 시간입니다.
이번 강의는 지난강의 내용과 겹치는 부분이 있으므로
이미 지난 강의 "#1선그리기의기본상식" 에서 언급했던 내용은 그냥 넘어가도록 하겠습니다.
지난 강의를 먼저 보신후에 이번 강의를 봐주세요^-^*
이미 보셨다구요? 그럼 2번째 특집강의 시작해볼게요~^-^)/

이번강의는 말그대로 볼록하고 이쁜곡선을 그려보는 시간입니다.
도트그림을 그리실때 곡선이 이쁘게 안 그려지셔서 걱정이셨죠?
이번 강의만 충실하게 따라오신다면 이제 곡선그리기도 문제 없답니다^-^!
자 강의 시작할게요~

음.. 어떤그림으로 강의를 해볼까하다가 물방울을 그려보기로했습니다^^
먼저 물방울을 이렇게 대충 그려볼까요?
im1_resize.gif
음 원래크기대로 축소시켜보겠습니다.

im1.gif
앗! 저 깔끔하지 못한 라인들을보라!! 아!! 화가 치밀어오르는군요!!
너무 안 이쁘다앗~-_-;; 어..어떻게 하냐구요?
첫번째 강의를 보셨다면 충분히 해결할 수 있습니다.
그래도 모르시겠다구욧? +_+;; 그런분들을 위해 준비했습니다.^^
아래 큰 그림을 보시면im5_b_red.gif이런 붉은색점으로 보이시는 부분을 지워주시면 됩니다.
im2_resize.gif

자 다 지워주셨으면 이런 결과물이 나옵니다^-^;
im3_resize.gif

이런im5_b_red.gif부분들을 지우기 전과 후를 비교해볼게요.
    전             후
im1.gifim3.gif

어떻습니까~ 훨씬 깔끔해졌죠?
자.. 여기까지는 첫번째특집 강의에서 배웠던 내용들입니다.
이제 본격적으로 두번째 강의로 들어가봅시다~^-^

앞에서 완성했던 결과물을 다시 한번볼까요?
im3.gif
음.. 이거군요~ 한번 찬찬히 살펴봅시다.
라인상태는 깔끔하고..음 괜찮은데~ 물방울모양이 이쁘지가 않죠?
어떤 부분이 안 이쁜지 잘 모르시겠다구요?
아래 그림의 붉은색 박스안을 봐주세요.
im4.gif
눈이 나쁘신분들을 위해 확대~
im4_resize.gif

여기저기 울퉁불퉁한 것이 보이시죠? ^-^;
이를 어떡한담=_=;; 이쁜 물방울 모양을 그리려면 어떻게 하냐구요?

자.. 여기서 2번째강의가 필요한것입눼다!
im3_resize.gif
자, 아까 완성했던 결과물입니다. 역시 울퉁불퉁 제멋대로죠?
수정해보겠습니다.

im5_resize.gif
im5_b_red.gif부분은 지워주시고,
im5_b_gray.gif부분은 더해주세요.(검은색으로 칠해달라는 말입니다)

이렇게 하고 나시면..아래의 결과물이 나옵니다.
im6_resize.gif

잠..잠깐!! 그.런.데. 왜!왜!왜! 어떤부분은 지우고 어떤부분은 더해야 이쁜 모양이 나오냐,하고 물으실껍니다.
비법을 알려드리죠~홍홍홍~^-^;
아래 그림을 잘봐주세요.
im5_resize_number.gif
위 그림을 보시면 3, 2, 1 같은 숫자들이 보이시죠?
위의 숫자들이 무얼 의미하느냐~ 물으신다면, 바로 픽셀의 수를 말하는겁니다.
픽셀이3개로 이루어진 라인위에는 3라고 써있고
픽셀이2개로 이루어진 라인위에는 2라고 써있는 것입니다.
1도 마찬가지 경우입니다.
자, 이게 무슨 말이냐 하실텐데요, 자세히 살펴보시면 숫자의 배열이
3-2-1 의 순서로 되어있는 것을 발견하실꺼에요.
그러니까 곡선이 이어지는 부분을 중심으로 3-2-1 순서대로죠.
즉, 픽셀의 수가 많은 선분부터 적은 선분차례로 이어진다는 말입니다.
3→2→1 의 순서대로 선을 그어 달라는 뜻입니다.
3→1 이나 2→1 등도 상관없습니다. 어쨋든 픽셀수가 많은 선분에서부터
픽셀수가 적은 선분의 순서대로 찍어주시면됩니다.
만약에 1→2 로 가시거나 2→4 이런식으로 순서를 어기고 새치기를 하려는 녀석들이 있다면
울퉁불퉁한 효과가 나타나게됩니다-_-;;

약간 이해가시나요? 아직도 이해가 잘 안가신다구요?
그렇다면 다시 아래의 그림의 붉은 박스 안을 봐주세요
im4_resize.gif
위의 그림을 자세히 보시면 아까와는 달리 3-2-1 순서가 아니라
제멋대로 2-3-1인 부분도 있고 1-2-1 인 부분이라거나;;
아뭏튼 규칙적이지 않은 부분들이 많죠?

바로 이런 부분들 때문에 볼록하고 이쁜 곡선이 그려지지 않고
울퉁불퉁하고 못난 곡선이 되는겁니다 그려~
붉은네모안의 불규칙적인 부분들을 규칙적이게 3-2-1의 순서로 고쳐주는 것이
바로 이번 강의의 Key Point! 입니다^^
이번 강의에서 배운 것을 적용시키지 전과 후의 그림을 비교해보겠습니다.

     전            후
im3.gifim6.gif
어떠십니까? 이제 확실히 다르게 보이시는걸 느끼시죠?
바로 이렇게 해주시면 좀더 볼록하고 자연스러우면서도~ 이쁜 곡선이 완성되는겁니다^-^



완성된결과물을 이용한 응용작입니다.
그냥 결과물에 색깔을 입혔을 뿐입니다^^
확대시킨그림이구요..
im7_resize.gif
원래 사이즈입니다.
im7.gif

어떠세요? 도트그림이란거.. 별로 어렵지 않죠?
처음부터 천천히 따라만 하신다면 더욱 멋지고 세련된 솜씨를 가지실수 있을꺼에요^^



이번강의는 조금 난이도가 있는 강의였는데요. 설명이 부족하다거나
잘 모르겠다.. 하시는분들은 jets1004@hotmail.com으로 메일주시거나 댓글 달아주시구요
http://wings.new21.net 오셔서 글 남기시면 성의껏 답변해 드리겠습니다^^
열심히 배우시구요 좋은 결과있기를 바래요~^-^ ㅋㅋ

p.s아참~ Wings가 이번에 웹디자인 게시판 부운영자가 되었답니다^^(아직 권한은 안 받았지만)
하하;; 축하해주시구요~^^;; 좀더 열심히 하라는 뜻으로 알고 더욱 자주 찾아뵐게요.
그럼 많이 부족한 강좌 끝까지 봐주셔서 감사드립니다~^^ 댓글 마니 달아주세요~^^
See you later~(- -)(_ _)
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
415 [토요무] 마우스로 토요돌이 아바타 그려보기..^^; [23] file toyomu 2002.08.18 7165
414 [빛]스포트라이트 [18] [М ΙDΘR] 2002.08.17 3780
413 스포트라이트으;;+_+)b [21] file 엔케 2002.08.17 4464
412 [일러스트페이지]일러스트의 포토샵 리터칭 [10] file 현주 2002.08.17 19774
411 허접강좌1::글씨를 쉽게 붙여보자! [8] file 엔케 2002.08.17 4415
410 [요청] Archi*님이 요청하신 pixel borders 만들기.. [10] 스노 2002.08.16 3248
409 [Photoshop+Gif Animation] 번쩍이는 글씨 만들기...^^; [16] Smileru™ 2002.08.16 14570
408 [키르] 오래된 필름효과 +ㅁ+ 멋져요 ㆀ [14] 키르(SP) 2002.08.16 9939
407 joins.com 에 나오는 메뉴바만들기 [6] {동준짱} 2002.08.16 9168
406 [왕초보버젼]플래쉬 폰트 깔끔하게 처리하기 [14] 인묘정 2002.08.15 11950
405 티모시의 도트강좌 2탄 {캐릭터 그리기} [18] 티모시 2002.08.15 12414
404 동심원 만들기 [9] file 엘핀 2002.08.15 3908
403 [절대고급]eccen님 마크 따라하기 [29] file [М ΙDΘR] 2002.08.15 4676
402 정삼각형 그리기 [15] file Eccen 2002.08.15 13744
401 아주쉬운 화염 만들기(2탄) [6] file 판타랏사 2002.08.14 4354
400 알파채널을 이용한 물방울 만들기&굴절시키기 [19] 마녀 2002.08.14 14084
» [특집]픽셀아트(도트그림)의 기본기 닦기2 !! #2볼록하고이쁜곡선그리기 [20] file Wings 2002.08.14 17975
398 [요청강좌]누가 갈켜달라해서리 -_-; [18] file 미스디쟌 2002.08.14 6412
397 이쁜 배경만들기 강좌 [6] 아이별 2002.08.14 12569
396 [키르] 이미지에 붙어있는 저작권을 없애버리자 -ㅁ- [18] 키르(SP) 2002.08.14 5780