[제작가이드]카메라 렌즈 아이콘

이번 시간에는 카메라 렌즈 모양 아이콘을 제작해 보겠다. 렌즈 아이콘 역시 수많은 레이어와 레이어 스타일.. 그리고 픽셀단위의 정교한 작업이 필요한데, 제일 중요한건 수치에 맞게 정확하게 쉐이프를 완성해야 한다. 렌즈 원통이 삐둟다면 보기가 싫을 뿐더러 실제 렌즈도 그렇지 않다. 작업하기에 앞서 실제 렌즈를 유심히 살펴보며 작업 한다면 조금더 이해 하기 쉬울 것이다.

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

02.적당한 배경에 캔버스 센터에 가이드라인을 표시해둔다음에 쉐이프툴로 정원을 그린다. 그리고 위와같이 레이어 스타일을 준다.(렌즈 밖의 테두리 과정)

스트로크도 위와 같이 준다. (여기서 스트로크는 모서리 부분의 입체감을 준다)

03.기존 쉐이프레이어를 복사한뒤 레이어의 빈 부분에 마우스 우클릭을 하고 Clear Layer Style을 하여 레이어스타일을 초기화 시킨다.

04.복사한 원형레이어를 그림과 같이 command + T를 이용하여 적당히 안쪽으로 줄여서 위치 시킨다.(여기서 가장 중요한 것은 도형을 줄일 때 반드시 alt + shift를 같이 눌러 가운데를 기준으로 정확하게 도형을 줄여야 한다)

두번째 쉐이프 레이어에 그림과 같이 레이어 스타일을 준다.

Stroke와 Gradient Overlay를 주었다.

04.역시나 레이어를 하나더 복사한뒤 레이어스타일을 제거하고 위의 두 그림과 같이 레이어 스타일을 준다.

05.또다시 제일 상단 레이어를 복사하고 레이어스타일을 제거 후 2개를 더 복사하고,(총3개 - circle_in, circle_middle, circle_out) circle_in 레이어와  circle_middle레이어를 5px정도 안으로 들어가게 각각 쉐이프를 줄여서 넣는다.

06.circle_out레이어에 레이어 스타일을 준다.

07.circle_out레이어에 레이어스타일을 다 주었으면 레이어스타일을 카피한다.

08.카피한 circle_out레이어스타일을 circle_middle레이어에 위의 그림과 같이 레이어스타일을 붙여 넣는다.

위와 같이 두단계의 테두리가 생긴것을 볼 수 있다.

09.이제 circle_in레이어에 레이어 스타일을 그림과 같이 준다.

circle_in 레이어의 레이어스타일

10.또다시 안쪽링을 만들어야 한다. 위의 그림의 레이어 처럼 기존에 있던 최상단 레이어(circle_in레이어)를 복사한뒤 레이어 스타일을 제거하고 circle_01, circle_02, circle_03 레이어를 역시나 command + T 를 이용하여 안쪽으로 그림과 같이 크기를 줄여서 위치 시킨다. 그리고 circle_01레이어를 위의 그림과 같이 레이어스타일을 준다.

11.circle_02레이어도 위와같이 레이어스타일을 준다.

circle_02레이어에 레이어 스타일을 다 주었으면 Opacity를 50%정도로 낮춘다.

12.다음은 circle_03레이어에 레이어 스타일을 준다.

여기까지 circle_01,circle_02,circle_03 에 모두 레이어 스타일을 주면 위의 그림처럼 렌즈 이미지가 어느 정도 완성 되어 간다. 이제 한번만 더 위와 비슷한 과정을 거치면 된다.

13.총4개의 in_circle레이어를 만들고 위의 그림처럼 역시나 5px정도 안으로 줄여서 위치 시킨다. (반드시 크기를 줄일 때는 alt + shift를 같이 눌러 중심을 기준으로 도형을 줄여야 한다)

14.위의 두 레이어 스타일을 in_circle_01레이어에 적용 시킨뒤 레이어 스타일을 복사하고 in_circle_02와 in_circle_03레이어에 레이어 스타일을 붙여 넣는다.

in_circle_01, in_circle_02, in_circle_03 레이어에 같은 레이어 스타일이 적용 되었다면 위와 같을 것이다.

15.이제, 제일안쪽 레이어인 in_circle_04 레이어에 위의 스타일을 적용한다.

안쪽 레이어 까지 적용 시켰다면 이제 어느정도 렌즈 모양이 갖춰줬다.

16.마지막으로 안쪽에 적당한 크기의 렌즈눈이될 레이어를 만들고 위와 같이 레이어 스타일을 적용 시킨다.(end_circle)

end_circle(렌즈의 눈)까지 완성 하였다면 위의 그림 처럼 된다. 이제 여기에 렌즈가 유리에 비치는 듯한 느낌을 더해 준다면 완벽한 렌즈가 될 것이다.

렌즈 안쪽에 하이라이트를 주었다.

렌즈 테두리에 하이라이트를 주었다.

이렇게 하여 완성된 카메라 렌즈 아이콘..  거듭 말하지만 제일 중요한 것은 수치에 맞게 최대한 정확한 원으로 계속하였는가와 의외로 Stroke가 많이 들어간것을 볼 수 있는데 모두다 1px의 Stroke가 들어가있다. 1px의 Stroke가 있고 없고의 느낌은 정말 확연히 차이가 나며 Gradient를 줄 때 Angle의 각도를 주므로써 좀더입체감 있는표현을 할 수 있었다. 완성본에서는 지난번에 게시했던 애플스타일 배경에 테두리에 글자까지 추가 하므로써 조금더 카메라 렌즈 모양에 가까워 졌다.  많은 레이어에 햇갈릴 수도 있겠지만 역시나 이번 강좌도 굳이 레이어 스타일에 이만큼의 수치를 줘야 한다. 이런법은 없으며 내가 보기에 이 색상과 이정도면 될거 같다면 충분한 것이다.

● [배경제작]애플스타일 배경만들기

cameralens icon.psd