메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요,

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

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

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

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

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

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

그럼, 시작하겠습니다.

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

 

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

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

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

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

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

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

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

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

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

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


 

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

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

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

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

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

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

 

생각보다 쉬우시죠?

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

 

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

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

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48031
2415 [MN] 이미지 X-ray효과내기 [7] mewnew 2002.09.10 236
2414 [나모웹 초보자] 이미지 맵을 만들어 보자~! [1] file 나만의길 2004.07.18 325
2413 [도트] 집 만들기?? [7] file (_*_) 2002.02.25 482
2412 [ XML 소켓 채팅 ] [2] file Fc 2004.02.26 514
2411 3D SHEET 만들기 [5] file 카라 2002.02.21 536
2410 [나모 FX] 이미지맵 간편하게 나모로 하기 ( 처음하는 강좌 ;;; ) [14] file 박한웅 2003.12.07 602
2409 [프로모션]제4회 달리는 애니메이션 만들기 [13] 정현석 2002.08.27 646
2408 [페인트샵8.0]합성!!나도 함 해보자!! 간단하게 합성하기! [4] file 대현 2003.12.13 715
2407 구름만들기; [27] Nㆍzna 2002.02.21 757
2406 [바비의 일러스트]일러 갤러리-1 [21] file 바비인형 2002.04.26 853
2405 플래시 무비의 프레임률이 막 떨어질때, [16] 유군-_-)/ 2002.02.21 860
2404 [퍼니페인트]도장 만들기 [1] funnyPSP 2002.02.23 925
2403 햇볕이 비추는듯한....음...태양의 코로나 같은 효과...^^ [24] file 천민수 2002.02.21 979
2402 네모난 사진 동그랗게 만들기 강의입니다. [6] file 이형진 2003.10.09 987
2401 간단하게 폰트 이쁘게 하기 [3] file 4u4u 2007.09.06 1004
2400 [동영상] 제5강 max 건축 인테리어 개요 인테리어뱅크 2006.04.11 1064
2399 [PHOTOSHOP]금속성 문자 만들기 [6] file (_*_) 2002.02.21 1073
2398 킴스웹에듀 ~~ 플래시 강좌사이트 입니다. kim's 2007.07.30 1263
2397 굿 웹 디자인 사이트들 링크 [11] 박성렬 2002.04.05 1305
2396 포토샵강좌 - 별만들기 [1] file IamAndy 2007.07.11 1373