메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요,

희민닷컴( http://www.heemin.com 1년에 걸친 운영 끝에 지금 리뉴얼 중입니다)의 민이입니다.

전 웹 및 클라이언트 프로그램 디자이너 5년차이구요,

올해 웹기획자로 변신(ㅡ.ㅡ;)했습니다.

웹기획자 하고 나니까 디자이너 때 별 거 아니지만 몇 가지 노하우를 쌓은 게 있어서 잊어버리고 나면 아까우니까... 어딘가 남기고 싶더군요.

그래서 몇 편 올려볼까하구요.

제가 올리는 내용은 주로 클라이언트 프로그램 디자인이라던지, 머... 결국은, 백지에서 그럴듯한 하나의 그림을 그려내는 방법들을 주로 쓰겠습니다.

그럼, 시작하겠습니다.

참고 : 몇 가지 기본 필터까지 쓰시는 분을 대상으로 적기 때문에 누락된 설명이 많을 겁니다. 이해가 잘 안 가시는 분은 다른 훌륭하신 분들의 강좌가 많이 올라와 있으니까 참고하세요~

 

아래는 최종 결과물입니다.

좀 큽니다. 보시기 어려울까봐 이미지 사이즈만 줄였는데, 다른이름으로 저장해서 보세요. 크게봐야 제대로 보입니다.

이것은 포카판입니다. 기본적인 부분만 그려봤습니다.

이걸 순수 포토샵만으로 그려보겠습니다.

먼저 보라색 바닥부터 그립니다. 보라색으로 레이어를 채운뒤, 노이즈를 적당히 주고, 가우시안블루어를 주었습니다.

그 다음으로는 기본적인 라인을 그립니다. 이것은 마큐로 적당한 타원을 잡은 다음, 타원을 색칠 후, 그 타원을 다시 선택해서 위로 조금 이동 시켜 원래의 타원을 잘라냈습니다. (타원 바깥쪽으로는 배경을 잘라내고, 검은색을 칠해줍니다.

간단히 말하자면, 타원 하나를 그리고 나서 그 타원을 선택한 영역을 위로 조금 옮겨 삭제한 것입니다.

( 이 부분이 제일 중요한 부분입니다. 나머지도 다 그렇게 만들어 집니다 )

위와 같은 방법으로 조금 더 얇은 선을 만들어 낸 후, Litness를 -100으로 해서, 검은색을 만듭니다.

그 다음 그 검은색 라인에 가우시안 블루어를 적당히 주고, 그려질 부분(위에서 그린 하얀색에 가까운 타원형 선)을 마스크로 씌워주면 아래와 같이 됩니다. (어둡게 그림자가 지는 부분이지요.


 

자, 이제 아래의 그림을 봅니다.

1번이 2번 위에 있는 레이어 입니다. 위와 마찮가지 방법으로 흰색(빛에 반사된 부분)을 그려 줍니다.

이런 식으로 만들어진 이미지들을 위, 아래로만 적당히 움직여 주고, 레이어를 순서대로 배열하면 아래와 같은 그림이 나옵니다.

여기에 현실감을 더 주기 위해서, 전체 화면에 대한 빛의 강약을 줍니다.

이런 레이어를 만들어서 전체 화면에 최상위 레이어에 두고, Multifly 정도를 해주면 되겠군요..(Opacity 조절을 통해 적당히 현실감 있게 만듭니다.

그러고 나면 이제 맨 위의 그림처럼 됩니다.

 

생각보다 쉬우시죠?

특별히 많은 필터를 사용하지 않아도, 마큐와 기본 필터들 그리고, 레이어창을 쓰는 것만으로 이렇게 그림을 그릴 수 있습니다.

 

P.S : 설명히 너무 단순하고 미흡해서 죄송합니다. 그리고, 영단어를 한글로 대강 휘갈겨 놓은 점도 사과드립니다. 나중에 고치도록 할께요~ ^^;

참, 여기를 누르면, PSD 화일을 압축한 화일을 받을 수 있습니다.

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48031
815 일반디카사진 로모사진처럼 만들기!! [22] file Wings 2003.01.15 9672
814 쓰레기 글자 만들기 [18] file torayo 2003.01.15 7886
813 [ All User? ] #04. 홈페이지 짜임새있는 레이아웃 짜기. - 2부 - [8] Nersion 2003.01.15 11712
812 아래 가이드 선 그리는 것에 대한 보충강의 [5] 리쯔:) 2003.01.15 3749
811 [ Easy ] 가이드선을 나눌때 Shift 키 활용법. [7] Nersion 2003.01.15 10184
810 [ All User? ] #03. 홈페이지 짜임새있는 레이아웃 짜기. - 1부 - [6] Nersion 2003.01.15 15873
809 간단하고 심플한 문자디자인.. [8] file Darkness 2003.01.14 12071
808 [ All User? ] #02. 개인홈페이지를 구성해보자. [8] Nersion 2003.01.13 11396
807 브러쉬만으로 흑백이미지 칼라로 바꾸기.. [23] file 엘프º 2003.01.13 5640
806 초간단 염색하기 (다른방법) [24] file puki 2003.01.13 17732
805 [ All User? ] #01개인홈피편. 웹디자인을 좀더 멋지게하려면 - 1부 - [7] Nersion 2003.01.13 6657
804 - 색채우기 단축키 [4] file 푸리 2003.01.13 3177
803 #.....합성으로.....신비한 이미지만들기!!..:..:..:..신비한가....;;..:..:..:.. [17] file 엘프º 2003.01.13 14545
802 액션스크립트를 이용한 쉬운 커튼효과 만들기(수정스크립트설명) [15] 이광민 2003.01.13 16802
801 이름아이콘 만들기(그림자 생기는것) [16] file prettymom 2003.01.12 10808
800 알록달록한 무늬 만들기 [6] file 마리아 2003.01.12 9298
799 이쁜동글이 버튼만들기 [6] file 이광민 2003.01.12 15434
798 [Wesley]크레이지 아케이드 홈페이지 따라하기 [19] Wesley 2003.01.12 8732
797 포토샵7.0 타이틀 화면 바꾸기(me,98도 됩니다. 리소스해커 사용.) [15] file 열혈악튜 2003.01.12 7242
796 그라디언트에 관한 간단한 팁 [5] file 무어 2003.01.12 7692