03. 이미지 버튼 만들기 #1 (포토샵으로 이미지 만들기)

어느 툴에서든지 기본으로 제공되는 회색 버튼은 너무 안이쁘다. 안드로이드도 역시 예외는 아니었다...

그래서, 현재의 이미지에 알맞는 나만의 버튼을 만들어보자.
여기서는 안드로이드 뿐 아니라 약간의 포토샵 에 대해서도 다뤄볼 예정이다.
(나 역시도 전문적으로 배운게 아니라 찾아보거 만든거라 100% 신뢰할 수는 없지만 아쉬운 분들만 보기 바란다. 하다보니 지금은 자주 사용하는 단축기를 외울 정도로... ㅋㅋㅋ)

지금 만들어 볼 화면은 아래와 같다.
"아현이와 성현이는요" 라는 첫번째 버튼을 누르게 되면 눌려진 효과처럼 그림자는 사라지고 약간의 좌표이동으로 처리 한것을 알수 있다.

기본 이미지 버튼 화면	눌렀을때 이미지 버튼 화면

이미지 버튼은 2개로 만들어야 한다.
우선 포토샵을 실행하고 기본 버튼을 만든다. 색상을 잘 모를때는

 을 사용하여 유사한 색상을 가져오면 아주 편리합니다.

사각형을 그리면 끝이 뾰족한데 이 끝 부분을 다듬을 때 자주 사용되는 방법을 소개합니다.

전체 크기보다 1pixel 이상 작게

 를 사용하여 영역을 선택한다. (물론 Select → Modify → Border 를 사용하는 방법도 있으니 참고하기 바란다.)

 
그런다음 Select → Modify → Smooth 를 사용하여 Sample Radius의 값을 10 pixels 정도 주면 아래와 같이 각 모서리가 둥근 예쁜 버튼 틀이 만들 수 있다.

이제는 여기에 알맞는 아이콘 및 문구로 꾸미면 되는데 그림자 효과 및 테두리 효과는 fx로 쉽게 설정이 가능하다.
아이콘이나 텍스트 모두 동일하게 적용이 가능하나 문구에는 테두리와 그림자 모두 적용이 되어있어 텍스트만 설명한다.
텍스트를 입력한 다음 우측에 보이는 LAYERS 창에서 아래의 fx 버튼을 선택한 다음 맨 아래 항목인 Stroke...를 선택한다.

선택하게 되면 Layer Style 창이 뜨는데 여기서 직접 값을 조절 해 보면서 자신에게 맞는 값으로 적용을 하면 된다.

테두리 설정화면 : 기본적으로 Size의 값과 Color 만 변경하여 적용하였다.

그림자 설정화면 : 기본 Opacity와 Angle, Distance, Spread, Size를 조절하였다.

이렇게 설정이 끝나면 아래와 같이 그럴싸한 버튼 이미지를 만들 수 있다. 이 이미지는 버튼이 눌려졌을 때의 이미지라고 생각하면 된다.

그러면 눌려지지 않은 Normal 이미지의 경우에는 전체 이미지의 위치를 윗쪽과 왼쪽으로 3~5 pixels 씩 이동시킨 다음 버튼전체에 그림자 효과를 주면 누르기 전 이미지를 만들 수 있다.

Layer에서 이미지의 이동을 위해

 버튼을 클릭한 다음 이동 시키고자 하는 Layer를 아래와 같이 모두 선택한 다음 키보드의 방향키로 왼쪽으로 3~5회, 윗쪽으로 3~5회 눌러 위치를 이동시킨다음 버튼 틀만 선택하여 그림자 효과를 준다.

지금까지의 과정을 거치게 되면 아래의 두 이미지를 만들 수 있다.

누르지 않은 버튼 이미지 (파일명: menubar_normal_profile.png)	눌려진 버튼의 이미지  (파일명: menubar_pressed_profile.png)

그런데 이런 이미지를 메뉴 버튼의 갯수만큼 만들어야 한다는 사실은 잊지말자...^^;
여기서 가장 좋은 방법은 포토샵에서는 Layer라는 멋진 기능이 있어 기본 버튼의 틀은 유지하고 각각의 Layer에 메뉴별 아이콘과 이미지를 만들어 해당 아이콘과 이미지만 View하여 버튼을 만들면 좀 더 통일된 버튼을 만들 수 있다.