[제작가이드]라운드 스위치 버튼

누르면 '똑딱'하고 소리가 날거같은 버튼을 만들어 보겠다. 참고로 전원의 On과 Off를 알리는 O와 I는 컴퓨터의 이진법인 숫자 1과 0에서 유래가 되었다 한다. 어찌됬거나 여기선 저 심볼(I/O)이 빠지면 뭔가 허전한 버튼이 되었을 수도.. 아니면 버튼인지도 모를 수도 있을 것이다. 그만큼 무언가를 상징하는 심볼을 중요한 것이라 생각한다. 

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

02.가이드라인을 이용하여 미리 센터를 맞춰 놓고, 위의 그림처럼 원형쉐이프툴을 이용하여 쉐이프를 그린뒤, 아래의 레이어 스타일을 적용한다.

▲button_01레이어의 3가지 레이어 스타일

03.레이어 스타일을 적용하고 난뒤,  투명도를 20%로 낮춘다.(버튼의 가장 아랫부분으로써, 뒷배경에따라 자연스럽게 보이기 위해 투명도를 낮추었다)

04.버튼의 뒷배경을 만들었으니 이제 버튼안쪽으로 이미지를 만들 차례다. 기본 레이어(button_01)를 그대로 하나더 복사하여 해당레이어에서 마우스 오른쪽 버튼 - Clear Layer Style을 적용해 레이어 스타일을 모두 제거한뒤 트랜스폼(command + T)를 이용하여 크기를 안쪽으로 조금 줄인다.  크기를 맞췄다면 아래의 레이어 스타일을 적용한다.

▲button_02레이어의 레이어 스타일

▲button_02레이어에 스타일이 적용된 모습

05.이제 위의 텍스쳐 이미지를 이용하여 button_02레이어에 텍스쳐를 입히기 위해 위의 그림을 포토샵으로 Place(가져오기) 한다.

06.가져온 texture이미지와 button_02레이어 간에 서로 Clipping Mask를 적용 시킨다.

07.또다시 button_02레이어를 복사하여 레이어 스타일을 제거하고 크기를 위의그림처럼 줄여 아래의 레이어 스타일을 적용 시킨다.(button_03레이어 과정)

▲buttin_03레이어의 레이어 스타일

▲지금까지의 이미지 모습

08.다음은 흰색 브러쉬를 이용하여 디테일을 줄 차례다. 위의 그림처럼 새레이어를 생성하고 button_03레이어의 선택영역을 잡고(command + 레이어썸네일클릭), 새레이어에 브러쉬를 칠한뒤, 블랜딩 모드는 Soft Light, 투명도는 80%를 준다.

09.같은 방법으로 또다시 새레이어를 생성하고, 이번엔 검정색 브러쉬로 아래쪽에 그림자 느낌을 추가하기 위해 위의 그림처럼 브러쉬를 칠하고 나머지 필요없는 부분은 선택영역을 반전하여 삭제하고 블랜딩 모드는 Soft Light, 투명도는 90%를 주었다.(배경등에 따라서 black레이어의 투명도를 더 낮추어도 된다)

10.이제 실제로 버튼이 될 부분(button_04)을 만들 차례다. 역시나 레이어를 하나 더 복사하고, 레이어 스타일을 제거한뒤, 위의 그림처럼 직접선택툴을 이용하여 제일 아래쪽의 포인트만 잡고 위로 올려 베지어를 조절한다. 그리고 아래의 레이어 스타일을 적용한다.

▲button_04의 레이어 스타일

▲button_04레이어에 스타일이 적용된 모습

11.과정05~06과 같이 button_04레이어에 클리핑마스크를 이용하여 텍스처를 입힌다.

12.입체감을 주기위해 새레이어를 생성하고 흰색 브러쉬로 위의 그림처럼 칠한뒤, 블랜딩 모드를 Soft Light로 적용하고, 역시나 button_04레이어에 클리핑 마스크 시킨다. (전체적인 틀이 완성된다)

13.틀을 완성했다면 이제 텍스트에서 알파벳 I와 O를 활용하여 위의 그림처럼 심볼을 만들고 각각의 심볼에 Inner Shadow 및 트랜스폼을 이용하여 디테일을 살린다.

▲라운드 스위치 버튼이 완성된 모습

이제, 배경을 적용하면 위와 같이 이미지를 얻을 수 있다. 앞서 말한것과 같이, 심볼(I/O)이 주는 영향력은 참으로 대단하다.. 예를 들면 주유소 심볼만 보더라도 우리는 멀리서도 주유소가 있다는걸 알 수 있듯이.. 기본적인 어떠한 심볼이 상징하는 의미에 배경등(아이콘)을 활용한다면 보다 멋진 심볼을 만들 수 있을 것이다.

round switch button.psd