[제작가이드]카본입체아이콘

언제부턴가 이런 형태로 윗쪽, 아랫쪽 또는 위아래 전체가 움푹패이거나 나온느낌으로 두깨감을 주어 입체(3D)형태의 아이콘이 빈번하게 보여지곤 했는데 가장 중요한것은 두깨감을 표현하는 부분의 그라데이션을 어떻게 주냐에 따라서 아이콘의 퀄리티가 결정 된다고 해도 과언이 아니다.  또한 가운데 배경 부분에 카본 느낌의 텍스쳐를 입혀 조금더 입체감을 준다면 더욱이 질감이 느껴지는 아이콘이 될것이다.

순서를 알아보자.

01.시작은 항상 도화지 부터 깔기.  가로세로 512px의 캔버스를 만든다.

02.모서리가 둥근 쉐이프툴을 이용하여 캔버스 가운데쯤에 위와 같은 도형을 만든다.(Radius는 20px을 준다 - 흔히 앱스토어 아이콘의 Radius값이다.)

03.같은 쉐이프를 미리 하나더 복사(두께를 표현할 레이어)하여 그림과 같이 키보드 방향키로 적당하게 레이어를 위치 시킨다.

04.box레이어에 위와 같은 레이어 스타일을 적용 한다.(중요한 것은 Style을 Reflected로 할것)

'box'레이어에 Gradiend Overlay 및 Stroke가 적용 됨

05.이제 두깨깜을 표현할 box_under레이어에 위와같이 Gradient Overlay를 준다.(역시나 중요한것은 스타일에 Reflected를 주는것이며 Angle을 0도를 줌으로써 양쪽으로 똑같이 반사된 그라디언트를 볼 수 있다. - 따라해보면 이해가 갈것이다)

06.안쪽 부분의 두깨를 줄 레이어를 만들 차례이다. 다시 쉐이프툴로 대략 8px정도 안으로 들어온 쉐이프틀 만들 때 Radius값을 20px가 아닌 15px로 준다.(이런 사소함이 잘 만든 아이콘이 나오게 하는 힘이 될것이다)

07.계속하여 안쪽 두깨를 줄 레이어이다. box_top레이어를 잡은 상태에서 쉐이프툴 옵션창에 보면 위와같이 Subtract Front Shape 라는 것이 있다. 이걸 이용하여 윗쪽 부분과 양옆으로 두깨감을 표현할 레이어의 만든다(마치 선택영역을 빼서 잡는것과 같은 역할이다)

직접 선택툴을 이용하여 포인트 하나하나씩 잡고 키보드 방향키로 이동하며 작업을 하면 된다.(윗쪽 코너 부분에도 조금씩 변형을 준다)

위와 같이 하면 된다.(빨간색 부분이 안쪽부분 두께가 표현 될 부분이다)

08.안쪽 부분이 두께를 표현할 레이어에서 위와같이 Gradient Overlay를 준다.(직접 줘도 되고 위에서 미리 만들었던 레이어 스타일을 복사하여 붙여넣어도 된다)

09.이제 카본재질의 텍스쳐를 입히기 위해 가로세로 4px의 새캔버스를 만들고 위와같이 2개의칸을 기준으로 같은듯 하지만 다른 8개의 색상을 입힌다.(색상은 위에 그림을 포토샵에서 스포이드툴로 확인할 것 총 8개의 색상)

Edit - Define Pattern 에서 패턴을 저장한다.

10.카본재질을 입힐 레이어를 만들고(기존의 틀을 잘 보며 정확하게 쉐이프를 만든다)아래의 레이어 스타일을 준다.

Pattern Overlay(카본질감표현)

Stroke

Inner Shadow(좀더 자연스러운 입체 감을 표현하기 위한 안쪽 그림자)

안쪽 카본배경까지 입히고 나면 이렇게 아이콘 틀이 완성 될 것이다.

이제 안쪽에 원하는 쉐이프를 넣고 똑같은 방법으로 레이어 스타일을 주면..

이런씩으로 하나의 질감과 입체감이 표현된 아이콘을 만들 수 있다.

IOS7이 올 가을쯤에 정식 업데이트 될 예정이다. 이번 IOS7에서는 특히나 기본 앱들 디자인이 확 바뀐걸 볼 수 있는데, 애플이 이번 IOS7에서는 좀더 평면적인 단순한 형태의 디자인으로 트렌드를 옮겨 간듯 하다.  어찌보면 이런 입체 아이콘이 또다시 유행을 타고 가는듯 하지만 어찌 됬건 중요한것은 이제, 더이상 기계의 디자인 뿐만 아니라 보여지는...  즉, 사소한 아이콘 하나하나도 문화를 창조하는데 큰 몫을 한다는 것이다.

다시, 아이콘 이야기로 돌아가자면 위에서 말한것과 같이 두께감을 표현하는데 있어서 그라데이션을 주는것이 제일 중요한 부분이다. 흔히들 실제로 보이는 물건들을 자세히 보면 구부러 지는 부분에는 색상이 어두웠다가 밝아 지는 느낌을 많이 볼 것이다. 이러한 점을 아이콘에도 배려한다면 보다 정성이 담긴 아름다운 아이콘이 탄생 될 것이다.

이번 포스팅은 시간이 조금오래 걸렸다.

PSD파일을 같이 첨부 하였으나 용량문제상 캔버스 크기를 줄였음을 알린다.

긴 글 읽어주시느라 감사합니다.

carbonbox icon.psd