[제작가이드]전원버튼

앞서 말한 바와 같이 전원 버튼 만드는 과정을 알아보겠다.

가운데 심볼에 파워 버튼 말고 다른 심볼이 들어간다면 많은 아이콘을 만들 수 있다.

01.가로세로 512px의 캔버스를 만들고 작업을 시작한다.

02.가이드라인을 센터에 맞춰놓고 원형 쉐이프툴로 정원을 하나 그린 뒤 약간 회색느낌의 색을 입힌다.

03. 베이스 레이어 위에 글로시한 효과를 주기위하여 베이스 레이어를 그대로 하나 복제한다음 위와같이 Gradient Overlay 를 설정한다.

04.under glow 레이어에 그라디언드 스타일을 다 주고 난뒤에 반드시 Fill 부분을 0% 만들어 준다.(Fill 부분이 0% 되면 도형의 원색은 사라지고 오로지 레이어 스타일만 보여지게 된다)

05.under glow레이어를 또 복사한뒤 레이어스타일을 다 제거 하고 top glow레이어에 아래와 같이 레이어 스타일을 준다.(역시나 Fill은 0%로 한다)

high glow레이어에 두가지 레이어스타일을 주었다.

06.또다시 아래 레이어를 복제한뒤 highlight레이어에 레이어스타일을 제거하고 Fill을 0% 준뒤 레이어 스타일을 준다.(테두리 부분에 흰색 링을 추가하는 과정)

high light레이어의 Inner Glow 스타일 내용(똑같이 할 필요는 없으나 블렌드 모드를 Linear Dodge(Add)로 한다.

07.이제 제일 중요한 부분의 레이어를 만들 차례다. 우선 역시나 아래 레이어를 하나 복사한뒤 레이어스타일을 모두 제거하고 위의그림처럼 트랜스폼(command + T)으로 기존에 있던 원보다 안쪽으로 위치하게 크기를 조금 줄인다.

08.안쪽 부분에 패턴을 입힐 차례다. 우선 가로세로 3px크기의 새 캔버스를 만든뒤 위의 그림처럼 연필툴로 점3개를 찍는다. 그리고 Edit - Define patterns 에서 패턴을 저장한다.

저장한 패턴을 이용하여 texture 레이어에 Pattern Overlay 스타일 적용

패턴을 만들어 질감을 입힌 모습이다.

다음엔 패턴입은 레이어에 글로시한 효과를 준다.

09.같은 texture레이어에 Gradient Overlay를 준다. 여기서 제일 중요한건 아래 사진처럼 다른 느낌의 색깔이 서로 정확하게 2등분 시키는 것이다. 윗쪽 그라디언트 부분에 빨간색 동그라미 친 부분을 보면 색상마커(색연필)가 2개 겹쳐져 있는것이 보일 것이다. 그리고 스케일을 조절하여 가이드라인을 보며 센터를 찾는다.

그라디언트 오버레이로 글로시 효과를 준 모습

10.다음은 Shadow를 이용하여 또한번 도형이 모서리 부분에 글로시한 효과를 더 준다.

Stroke도 자연스럽게 준다.

사실 그냥봐서는 스타일이 들어갔는지 아닌지 차이는 느끼기 힘들지만 확실한것은 스타일이 들어간것은 없는것과 확연히 다르긴 다르다는 것이다.

11.만들어놓은 심볼(전원모양)을 센터에 위치 시키고 적당히 들어간것처럼 보이기위에 스타일을 준다.

12.이제 마지막으로 전원버튼이 어딘가에 박혀있는 느낌을 주기위해 base레이어를 복사한뒤 젤 아래에 깔고 크기를 조금더 키운뒤 위에 그림처럼 스타일을 준다.

그리하여 완성된 전원버튼..

솔직히 레이어스타일을 세세하게 만지는것이 조금 어려울 수도 있으나 가장 중요한건 많이 해보고 많이 따라하다보면 쉽게 만들 수 있을것이다. 그리고 평소에 Opacity 개념은 익히고 있을진 몰라도 Fill을 처음 다뤄보는 분들도 있을 수 있다. Fill을 잘 이용하면 레이어스타일만 해당 레이어에 표현할 수 있으니 Fill을 잘 활용해 보자. 역시나 PSD파일을 첨부하니 모자란 부분은 다운받아서 직접 하나하나 보면 이해하기 쉬울 것이다.

추가적으로 제작한 전원버튼 누르기전 / 누를 때 / 누르고난 뒤 이렇게 3가지 아이콘도 만들어 보았다.

powerbutton icon.psd