[제작가이드]테이크아웃 커피 컵

테이크아웃 커피 컵.. 불과 몇년 전만 하더라도 이런 테이크아웃컵을 보면 이게 뭔가 했을 수 도있지만 이제는 누구나 보면 커피컵이구나 하는걸 알 수 있다.

테이크 아웃 커피컵을 만들기 전, 일단은 이런씩의 Skeuomorphism(스큐어모피즘) 디자인은 원래 도구의 형태를 그대로 따라간다는 큰 내용을 담고 있다. 그러므로 스큐어모피즘의 아이콘에서 일단 가장 중요한 것은 아이콘등으로 만들 객체의 실제모습을 참고 하는것이 제일 좋다. 어찌됬건 아래의 과정을 보며 따라해보자.

01.가로세로 512px의 캔버스를 만든다.

02.테아크아웃커피컵의 몸체가 될 부분을 만들어야 한다. 쉐이프툴을 이용하여 직사각형 모양의 쉐이프를 만든다.

03.테이크아웃커피컵의 몸통부분을 만들기 위해 위의 그림과 같이 가이드선을 이용하여 미리 제도를 그려놓는다.

▲Direct Selection Tool

04.Direct Selection툴을 이용하여 미리 그어놓은 가이드선을 보며 위의 그림처럼 아래의 두 꼭지점을 서로 모은다.

05.Subract Front Shape옵션을 선택하고 미리그어놓은 가이드라인을 참고하여 그림과 같이 원형의 쉐이프를 만들어 기존의 쉐이프에서 라인을 뺀다.

06.아랫쪽에 둥근감을 나타내기 위해 같은 방법이지만, Combine Shape옵션을 선택해 기본 바디 레이어에 아랫쪽에 둥근 원형의 쉐이프를 추가한다.

07.계속하여 완성된 body레이어에 위의 레이어 스타일을 추가한다.(기본적으로 쉐이프 자체에 색상이 어두운 갈색이 입혀져있으며, Gradient Overlay색상에는 양 옆에 짙은 갈색의 색상을 입히고, 가운데에는 투명도를 0% 주었다)

08.커피컵의 아랫부분에 쉐이드 느낌을 주기위해 새레이어를 만들고 body레이어를 선택영역으로 잡고(body레이어의 썸네일 부분을 command키를 누른채로 클릭)검정색 브러쉬로 쉐이드 느낌을 주고 레이어의 블랜딩 모드는 Multiply 투명도는 대략 80%정도 준다.

09.다음은 커피컵의 바디에 깊이감을 주기위해 역시나 빈레이어를 하나 만들고 흰색브러쉬로 위의그림처럼 모양을 낸뒤, 블랜딩모드는 Sofr Light, 투명도는 60%정도 준다.

▲바디레이어에 깊이감까지 추가 된 이미지

10.계속하여 바디레이어에 재질(texture)을 입힐 차례다. 빈레이어를 하나 생성하고 흰색으로 색상을 채운뒤, Filter - Convert For Smart Filters를 적용시킨다.(향후 필터를 쉽게 수정하기 위한 과정) 스마트필터를 적용시키면 위의 그림과 같이 레이어의 썸네일에 스마트아이콘이 표시된다.

11.스마트레이어로만든 texture레이어에 재질을 입히기 위해 Filter - Render - Fibers를 위의 그림과 같이 적용하고, 블랜딩 모드는 Soft Light, 투명도는 6%정도 준다.

▲바디에 Fiber가 적용된 모습

12.바디부분은 끝났으며 이제 테이크아웃커피컵의 캡부분을 만들 차례다. 위의 그림처럼 펜툴을 이용하여 캡이 될 부분의 쉐이프를 만들고 아래의 레이어스타일을 적용한다.

▲캡이될 레이어에 두가지 레이어 스타일 적용

13.위의 그림과 같이 캡이 될 레이어에 추가적으로 원형 쉐이프를 하나 더 그리고 아래의 레이어 스타일을 적용한다.(Gradient Overlay가 따로 적용된게 아니라 기본 쉐이프의 색상이 회색계열이다)

▲상단부분에 레이어 스타일이 적용된 모습

14.캡부분에 안쪽으로 패인느낌을 주기위해 같은방법으로 원형 쉐이프를 하나 만들고 아래의 레이어 스타일을 적용한다.

▲두가지 레이어 스타일 적용

▲대략적으로 캡의 모습이 나오고 있다.

15.캡의 윗쪽에 한번더 안으로 들어간 느낌을 주기위해 또다시 원형 쉐이프를 하나 더 만들고 아래의 레이어 스타일을 적용하여 깊이감을 준다.

▲레이어 스타일 적용

16.다음은 캡 모서리에 들어가있는 부분을 나타내기 위해 펜툴을 이용하여 쉐이프를 그리고 역시나 아래의 레이어 스타일을 적용한다.

▲두가지 레이어 스타일 적용

▲여기까지 완성된 모습

17.이제, 캡의 아랫쪽 부분을 만들 차례다. 위의 그림처럼 역시나 펜툴을 사용하여 아랫쪽부분이 될 쉐이프를 만든 다음, 위의 레이어 스타일을 적용한다.(모두다 만들 필요없이 반틈만 만들어서 복사한뒤 쉐이프를 서로 합치면 된다)

18.캡이 전체적으로 완성 되었다면, 하이라이트를 주어서 느낌을 조금더 살려야 한다. 또다시 펜툴로 자유롭게 하이라이트가 될 부분을 쉐이프로 그리고 Gaussian Blur적용 및 투명도를 조절하여 자연스럽게 하이라이트를 준다.

19.캡과 바디사이에 그림자를 추가하기 위하여 가이드라인을 보며 원형 쉐이프를 하나 그리고 Gausian Blur를 주고 투명도를 낮춘뒤, 레이어 위치를 캡아래 바디위에 위치 시킨다.

▲캡과 바디 사이에 그림자까지 넣고 기본적인 틀이 완성된 모습

여기 까지 작업을 마쳤다면 테이크아웃컵아래에 그림자도 추가하고 로고등의 글자도 추가한다면 테이크아웃컵의 모습이 완성된다. 이번에도 자유롭게 펜툴로 그려야 하는 부분이 많아서 다소 어려울 수도 있으나, 실제 이미지를 보면서 작업하다 보면 쉽게 펜툴로 쉐이프를 그릴 수 있을 것이다. 다음에 Photoshop Tip에 커피컵처럼 둥근 원형에 글자를 넣는 방법에 대해서 포스팅 하겠다.

● [포토샵]라운드 텍스트(원통에 자연스럽게 글자넣기)

takeoutcoffee cup.psd