[제작가이드]앱아이콘 틀 만들기

아이콘의 틀(박스)을 만들어 보았다. 그냥 만들면 심심하니까 종이말린 효과도 들어가고 나무 재질의 패턴도 들어 갔다.  아래의 제작과정을 보자.

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

02.Radius가 있는 쉐이프툴을 이용하여 가로세로 400px, Radius 30px의 도형을 미리 그어놓은 가이드라인의 가운데를 기준으로 만든다.

03.위의 그림처럼 만들어 놓은 패턴을 이용하여도 좋고(글하단 패턴파일첨부), 또는 내가 원하는 이미지를 다운받아 마스크를 입혀도 좋다.

Stroke도 준다.

04.다음은 총 3단계로 구성되어진 종이느낌의 레이어를 깔 차례다. 우선, 바탕레이어보다는 안쪽으로 위치하는 적당한 크기의 쉐이프를 만든다.

05.위의 그림과 같이 Gradient Overlay를 주되, Angle은 45도 미리 설정해놓고 색상을 입힌다. 그림상의 빨간색 줄그어놓은 부분이 나중에 종이가 말린 효과를 나타낼 위치이므로 임의의 선을 생각하여 그라데이션을 주면 된다.

같은레이어에 Drop Shadow도 준다.

06.앞전에 만든(1층) 종이느낌 레이어를 하나더 복사한 뒤, 키보드 방향키를 이용하여 살짝만 올려 위치 시킨다.(2층)

07.마찬가지로 2층종이 레이어를 복사하여 똑같이 위치만큼 위로 올리고 레이어스타일을 모두 없앤다.(종이느낌 레이어의 3층이 될 레이어)

▲레이어 스타일 제거 방법(해당레이어 마우스 우클릭 - Clear Layer Style)

▲Path Selection Tool

▲Pen Tool

08.Path Selection 툴과 Pen툴을 활용하여 일단 위의 그림과 같이 상단 4개의 포인트를 잡고 2층종이느낌 레이어와 높이가 똑같아 지게 4개의 포인트를 잡고 아래로 내린다.

09.종이가 말린부분(밑바닥)을 나타내기 위하여 역시나 Path Selection 툴과 Pen툴을 활용하여 위의 그림과 같이 나타낸다.

10.종이느낌의 레이어중 최상단레이어(3층)에 위와 같은 Gradient Overlay를 적용한다.

11.이제 실제로 종이가 말린 부분을 제작해야한다. Pen툴을 이용하여 위의 그림과 같이 종이가 말렸을때의 도형을 그린다.(필자는 기존3층 레이어를 활용하여 쉽게 그렸으며, 펜툴은 많이 사용해봐야 익숙해질 수 있다)

12.말린 종이레이어에 위의 두가지 레이어 스타일을 적용한다.

여기까지 작업을 하였다면 위와같은 이미지를 얻을 수 있을 것이다. 물론, 여기서 완성을 시켜도 되지만 살짝의 그림자를 입혀 조금더 입체감 있게 표현해 보겠다.

13.위의 그림상에 빨간색 원안에 있는 총 3가지의 그림자를 추가하였으며 그림자는 쉽게 원형 쉐이프툴로 그림자가 될 부분을 일단 그린뒤 filter -Blur -Gaussian Blur를 준뒤, 그림자 레이어를 아래로 내린다.

▲그림자까지 추가한 아이콘의 모습

이렇게 하여 아이콘의 배경이 될 기본틀을 만들어 보았다. 이제 마음대로 도형을 그려넣든 글자를 입력하든 배경틀위에 마음껏 원하는 이미지를 활용하면 된다. 이번 아이콘은 그림자(Drop Shadow)없이는 표현 하기 힘든 부분이 꾀나 있었으며, 말린 종이부분을 펜툴을 이용하여 그리는것도 아무래도 많이 해보지 않으면 생각 보다 쉽지 않을 것이다.

carboard.pat

appbox.psd