[제작가이드]보드박스 아이콘

흔히보는 보드박스이다. 펜툴을 이용하는 작업이 있기에 박스의 모양 및 깊이감을 주는 색감을 잘 파악하여야 하나, 실제 박스이미지를 포토샵에 올려놓고 그대로 따라 그려도 상관 없기에 각각의 레이어로 쉐이프만 잘 분리한다면 쉽게 만들 수 있다.

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

02.위의 그림처럼 쉐이프를 만들고 direct Select툴을 이용하여 입체감을 줄 박스 앞면 쉐이프를 만든다.

03.만들어진 박스앞면에 위의 Gradient Overlay 레이어스타일을 적용한다.

04.구글 이미지등을 이용하여 오래된 종이느낌을 이미지를 찾은 뒤 다시 포토샵에 가져와 블랜딩모드를 Soft Light로 변경하고 선택영역을 이용해 나머지 필요없는 부분은 삭제한다.

05.박스에 스티커등의 택을 붙이기 위해 같은방법으로 구글에서 이미지를 검색하여 블랜딩모드를 적당히 섞어 위치 시키거나, 직접 만들어서 분위기를 낸다.

06.앞쪽 박스의 커버(front_cover)를 만들 차례다. 펜툴과 직접선택툴(Direct Select Tool)을 이용하여 앞쪽커버가될 쉐이프를 만들고 위의 Gradient Overlay를 적용한다.

07.똑같이 종이질감을 입히기 위해 종이레이어를 가져온뒤, 블렌딩 모드는 Multiply, 투명도는 40%정도 준다.(아래 박스보다 커버가 더 밝아야 입체감을 더 잘 나타낼 수 있다)

08.커버(front_cover)의 두께를 표현하기 위해 똑같은 레이어를 하나더 복사한 뒤, 레이어스타일을 제거하고, 짙은 회색계열의 색깔을 입히고 키보드방향키를 이용하여 살짝만 두께가 느껴질 정도로 아래로 위치시킨다.

09.커버와 박스 사이에 그림자를 표현하기위하여 위의그림처럼 쉐이프를 만들고 Gaussian Blur를 적용하고 레이어 위치를 가운데로 옮긴다.

10.박스 뒷면을 만들 차례다. 박스 앞면의 쉐이프를 그대로 복사하여 레이어를 뒤로 위치시키고, 트랜스폼(command + T)을 이용하여 크기를 살짝 줄인뒤, 같은 방법으로 종이재질을 입힌다.

11.뒷쪽 커버(back_cover)역시 앞쪽 커버와 같은 방법으로 쉐이프를 그리고 종이질감을 입힌다.

12.쉐이드를 주기위하여 기존작업했었던 뒷쪽박스(back_box)그룹에 새레이어를 하나 생성하고(shade), 블랜딩 모드는 Multiply로 주고 2%의 짙은 브라운 브러쉬로 선택영역을 잡고 가장자리 부분에 위의 그림처럼 쉐이드를 준다.(필요하다면 다른 부분에도 같은 방법으로 적용한다)

13.같은 방법으로 오른쪽 커버(right_cover)도 완성시키되, 레이어 스타일의 Gradient Overlay 각도를 방향에 맞게 수정한다.

14.모두 같은 방법으로 남은 왼쪽커버, 왼쪽박스, 오른쪽박스를 완성 시킨다.

▲그룹화 하여 정리한 레이어의 모습

▲그림자 까지 추가하여 완성된 보드박스

만들어진 박스안에 이것저것 담고, 그림자와 쉐이드를 조금더 디테일하게 주면 보다 완벽한 상자 아이콘을 만들 수 있다. 사실은 실제 박스를 생각한다면 위의 완성형 처럼 표시나는 사다리꼴 모양이 되기는 힘들지만, 역시나 아이콘이기에 조금은 더 과장하여 표현하는것도 좋은 방법이 될 것이다.

cardboard box.psd