메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요,

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

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

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

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

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

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

그럼, 시작하겠습니다.

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

 

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

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

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

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

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

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

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

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

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

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


 

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

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

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

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

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

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

 

생각보다 쉬우시죠?

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

 

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

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

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48031
1635 7 성형수술 2편 (눈키우기) [5] file 박진 2004.07.21 11725
1634 프리젠테이션 참고 이미지 [4] 이지원 2004.06.15 11716
1633 볼록한 텍스트 간단하게 만들기 [10] file rainstormz☆ 2003.04.29 11715
1632 일러스트 효과로 이쁜 효과내기 [3] file 포샵럽 2005.07.30 11713
1631 [ All User? ] #04. 홈페이지 짜임새있는 레이아웃 짜기. - 2부 - [8] Nersion 2003.01.15 11712
1630 붓으로그린듯한느낌내기♡ [11] file 입픙체리냥♬ 2003.02.24 11709
1629 물흐르듯 흐르는 문자 [6] file 여어자 2003.05.06 11705
1628 청(?)질감 흉내내보기 [10] file sexyboom 2004.01.21 11702
1627 반투명 롤오버 이미지 만들기 - [난이도下] [3] file 박효진 2004.07.21 11693
1626 이미지 뽀사시? 표백하기!! [12] file 카라 2002.02.22 11682
1625 속비치는 투명한 글씨 만들기 쉬운 버전;; [13] file Eccen 2002.10.17 11681
1624 입체적인 글자만들기 [11] file 은하수 2003.01.27 11679
1623 직물느낌의 텍스쳐 만들기. [2] file 정형준 2005.01.12 11668
1622 [웹디황용] 청바지느낌그대로 ~~ 4 [마지막] file 웹디황용 2006.08.03 11654
1621 플래시 기본적인 에니메이션 만들어보기. [2] file 꼬냐닷컴 2005.09.19 11651
1620 Chals's 핸드폰 도트!!! [27] file 임철수 2002.05.09 11642
1619 외부필터없이 이미지에 말림효과주기 [15] file 앵두..。 2003.09.29 11641
1618 Smudge툴의 응용..;;; [8] file Smileru 2004.11.26 11626
1617 플래시,동영상 목록만들기 윤선미320 2007.12.01 11613
1616 테두리가 둥근 아이프레임 홈페이지 만들기(나모편) [2] 로베 2004.05.10 11597