메뉴 건너뛰기

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 48031
2035 플래시만으로 깔끔한 버튼 만들기 ~ [2] file kim's 2007.03.24 15658
2034 [액션] 별을 이용한 예술적인 무비클립 [10] 이희덕 2003.01.26 15652
2033 이미지의 특정부분을 정교하게 선택해서 색바꾸기 [9] file 이오르 2003.09.24 15648
2032 [케이] 제목은 심플하게 Feather effects [37] Kei 2003.10.09 15627
2031 물방울 만들어 보기 [2] file 박원 2004.08.10 15626
2030 모자이크 기능을 이용한 테두리 만들기 [10] file 테이 2003.07.27 15625
2029 모자이크효과로 이미지 꾸미기 (허접함) [6] file 태풍주의보 2004.04.16 15616
2028 분위기 있는 풍경 연출하기 [2] file 포샵럽 2005.08.08 15585
2027 문자디자인 [8] file Free-i^^/ 2004.01.28 15584
2026 붓으로 칠한듯한 이미지 만들기.. [18] file WalkCabbage 2003.12.12 15574
2025 바느질한 느낌의 테두리 만들기(스티치 효과) [7] file endless 2006.09.28 15572
2024 저의 아바타 제작 방식 (움찔) [21] file 정의진 2003.10.23 15562
2023 웹디자인의 필수!! 바탕색에 관계없는 투명이미지 만들기 [20] file 아키닷컴 2002.12.21 15514
2022 햇빛이 비추는 효과내기 [9] file SeasonSonata 2003.10.21 15508
2021 [홈레이아웃] 나모로 작업한 홈 레이아웃 [8] file 여어자 2003.08.21 15501
2020 우리 모두 합성을 해보아요!!! [9] file We'zle 2002.10.27 15472
2019 눈오는 효과 [5] file 유성매직 2007.11.20 15471
2018 [중급?] 눈내리를 효과주기!! [2] file 태풍주의보 2004.04.17 15465
2017 [중급?] 눈내리를 효과주기!! [2] file 태풍주의보 2004.04.17 15452
2016 간단한 이미지 보정법-gradient map이용 [2] file 이선미 2004.07.24 15439