[제작가이드]게이지 아이콘

한번씩 맥 유저라면 광고창에서 '맥이 느려졌나요?'라면서 게이지 아이콘이 나와서 게이지가 움직이는 아이콘을 볼 수 있다. 간단하게 게이지 아이콘 만드는 방법에 대해서 알아보자.

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

02.원형쉐이프툴을 이용하여 미리 그어놓은 가이드라인 가운데에 그림과 같이 쉐이프를 그린다.(alt + shift를 같이 누르면 중심을 기준으로 정원이 그려진다)

03.원형쉐이프에 위의 그림과 같이 Gradient와 Stroke 그리고 기본 Drop Shadow의 레이어 스타일을 적용한다.

원형 쉐이프에 레이어 스타일을 적용하면 위와 비슷한 이미지를 얻을 수 있다.

04.다음, 기존에 있던 Elipse레이어를 하나더 복사하여 레이어스타일을 모두 제거 한뒤 command + T를 이용하여 크기를 줄여 위치시킨다.

05.안쪽 원형 레이어에 위와 같은 레이어 스타일을 적용 시킨다.

06.안쪽레이어를 하나더 복사하여 pattern을 입힐 레이어를 하나 더 만든뒤 패턴을 입힌다.(픽셀 패턴에 관하여 곧 포스팅하여 올리도록 하겠습니다 -글하단 링크 첨부함)

07.pattern레이어에 패턴을 입혔다면 레이어위에 마우스 오른쪽 버튼을 누르고 Rasterize Layer Style 시킨다.

08.pattern레이어에 레이어스타일을 레스터라이징 시켰다면 블랜딩 모드는 Multiply, Opacity는 대략 25%정도 준다.

09.패턴 스타일을 모두 다 적용 했다면 위의 그림과 같이 보기좋게 기존 pattern레이어를 안쪽으로 조금 크기를 줄인다.

10.다음은 게이지표시가 될 레이어를 만들 차례다. 선택툴을 이용하여 그림과 같이 도넛모양의 쉐이프를 만든다.(기본 원형 선택영역에서 빼기선택영역을 한뒤 도넛모양의 선택영역이 잡혔다가 전경색을 채워 넣는다. alt + delete)

11.게이지바의 아랫쪽부분을 잘라내기 위하여 빈레이어를 하나 만든뒤 정사각형의 선택영역을 잡고 아무 색상을 입혀 그림과 같이 도형을 위치시키고 선택영역을 잡아, 기존 도넛모양의 게이지바 레이어를 잡고 delete시킨다.(레이어 선택영역 잡는법:레이어의 썸네일 부분에 command키를 누른채 클릭)

12.게이지바 레이어에 위와 같은 레이어 스타일을 적용 시킨다.

13.가운데 링을 만들어 줄 차례다. 가이드 라인을 보며 가운데에 정원을 하나 그린뒤 위와같이 메탈느낌이 나는 그라디언트를 입힌다.

마찬가지로 가운데링이 될 레이어에 Drop Shadow도 준다.

14.바늘이 될 쉐이프를 만들고 위의 그림과 같이 Gradient를 준다.

여기 까지 작업을 완료 했다면 위와같은 게이지(Gauge) 아이콘을 만들 수 있다. 약간의 쉐도우만 입혀도 입체감이 느껴지는 아이콘을 만들 수 있는데, 안쪽 바탕에 패턴을 입히는 과정이 오늘 글에는 설명이 있지 않다. 위의 그림을 참조하여 직접 패턴을 만들어도 되지만, 픽셀 패턴에 관하여는 다음글에 정리하여 포스팅 하도록 하겠다.

● [포토샵]픽셀을 이용한 픽셀패턴 제작

gauge icon.psd