[펌] 개발자를 위한 그래픽 강좌 #1 - 버튼편

안녕하세요? 비니아빠입니다.

 

늘 안펍에서 도움만 받다가 제가 받은 도움을 돌려드릴 방법이 없어 고민하던 차에

 

그래픽 강좌를 원하시는 개발자님들이 의외로 좀 계신거 같아 부족한 실력이나마 제가 아는 한도 내에서

 

강좌를 진행하려고 합니다.

 

우선은 2D 그래픽 강좌로 실제 앱 개발에 필요한 내용들 위주로 강좌를 하려고 해요.

 

숙지하실 것은 제가 그래픽 디자이너가 아닌데다 포토샵이나 3DMAX를 독학으로 배웠습니다.

 

정식으로 배운게 아니기 때문에 툴을 사용하는 방법이나 방식이 정식과는 많이 다를수도 있습니다.

 

제가 어떤 이미지를 보고 이건 이 기능을 이용하면 되겠다 생각하고 쓴게 많이 있습니다.

 

이점 참고하시고 이미 포토샵이나 3DMAX에 대해 익숙하신 분들은 그냥 제 강좌를 참고만 하시면 되겠습니다.

 

 

그럼 오늘은 그 첫번째 시간으로 포토샵을 이용한 버튼 만들기를 해보겠습니다.

 

물론 안드로이드에 이미 Button View가 있긴 합니다만 이미지를 입히면 훨씬 퀄리티가 높아지는 효과가 있겠지요.

 

이렇게 Button View에 자신이 만든 버튼 이미지를 입히고 싶으신 분들에게 필요한 내용이 되겠습니다.

 

이미지를 많이 준비 했으니까 그대로 따라하시다 보면 금방 하실 수 있을 겁니다.

 

강좌에서는 포토샵 CS5 버전을 썼습니다만, CS2 버전 이상이면 거의 비슷하게 쓰실 수 있습니다.

 

 

1. 포토샵의 실행

 

  

 

버전마다 차이는 좀 있습니다만, 대략 포토샵을 실행하면 이런 화면이 나타납니다.

 

좌측은 도구 아이콘 영역이고 상단에는 각종 풀다운 메뉴가 마련되어 있습니다.

 

우선 File 메뉴에서 새로운 작업 영역을 선택해 보도록 하지요.

 

 

 

File 메뉴에서 New 기능을 선택합니다.

 

 

 

이런 화면이 나타나면 Width, Height에 적당히 640, 480 정도를 입력합니다.

 

 

 

여기까지 나오면 작업할 준비가 끝난 겁니다.

 

사실 이 정도는 이미 다 알고 계시리라고 보는데 처음하시는 분들을 위해 이 과정까지 설명해봤습니다.

 

 

2. 버튼 영역 그리기

 

자 작업 영역이 만들어졌으니 그 위에 버튼을 그리도록 해보겠습니다.

 

일단 포토샵에서 버튼을 만드는 방법은 얼추 수십가지는 될겁니다. 여기 소개한 방법은 제가 쓰는 방법일 뿐인거죠.

 

어느정도 익숙해지시면 여러분들이 편하신 방법으로 얼마든지 더 다양한 버튼들을 만드실 수 있습니다.

 

제 방법이 반드시 정석은 아니라는걸 염두에 두시고 읽어주시기 바랍니다.

 

 

우선 포토샵에서 버튼을 만들려면 버튼 영역을 먼저 그려줘야 합니다.

 

이때 가장 편리한 툴은 펜툴(Pen Tool)이 있겠습니다.

 

 

 

 

위 화면과 같이 좌측의 도구 아이콘 모음에서 펜툴 아이콘을 선택해줍니다.

 

 

펜툴을 선택하면 화면 위쪽에 펜툴에 관련된 추가 아이콘들이 더 나타납니다.

 

각기 다양한 기능들이 있습니다만, 이것은 포토샵 강좌가 아니라 개발자들을 위한 버튼을 만드는 강좌이므로

 

이 부분은 생략하고 필요한 부분만 짚고 넘어가겠습니다.

 

 

 

나타난 도구들에서 붉은색 사각형으로 표시된 버튼들만 따로 클릭합니다.

 

Radius는 사각형의 모서리를 얼만큼 둥글게 만들 것인지 설정하는 것인데 디폴트 값인 10을 쓰겠습니다.

 

 

펜툴의 값을 설정한 후에 위 화면처럼 마우스를 드래그 해서 적당한 크기의 사각형을 그려줍니다.

 

 

 

 

사각형을 그리고 나면 화면 오른쪽에 있는 레이어 윈도우(역시 구체적 설명은 생략)에 Shape 1이란 레이어가 추가될 겁니다.

 

그럼 이제 사각형 내부의 색상과 모양을 변형시켜줘야 하는데요.

 

이것은 레이어 스타일 기능을 이용하면 됩니다.

 

위 화면에서 빨간점이 표시된 부분을 더블 클릭하면 아래와 같은 레이어 스타일 윈도우가 나타날 겁니다.

 

 

 

레이어 스타일 윈도우의 좌측 메뉴에서 Color Overlay를 선택한 후 화면 오른쪽 상단에 있는

 

빨간색 사각형 부분을 더블 클릭합니다. 디폴트 값은 빨간색으로 되어 있을 겁니다.

 

 

 

칼라 선택 윈도우가 나오면 원하는 색상을 선택합니다.

 

 

 

색상을 선택할 때마다 설정해두었던 버튼 내부의 색상이 변하는 것을 볼 수 있습니다.

 

저는 노란색을 썼습니다만, 여러분들이 좋아하는 색상을 하시면 됩니다.

 

 

 

Color Overlay 설정이 끝난 후에는 Bevel and Emboss 메뉴를 선택합니다.

 

이 메뉴는 버튼을 입체감 있게 보여주는 기능을 합니다.

 

사실 이것보다 더 다양한 기능을 갖고 있습니다만, 지금은 버튼 제작에 한정해서 말씀드린 겁니다.

 

화면에 보여진대로 값을 입력하시면 좌측에 노란색 버튼 이미지가 입체감 있게 변하는 것을 볼 수 있습니다.

 

많이 이뻐진걸 볼 수 있죠?

 

 

 

그 다음 Inner Glow 메뉴를 선택합니다.

 

이건 이미지의 안쪽에 Glow 효과를 주는 기능을 합니다.

 

Blend Mode를 Normal로 설정하고 색상을 약간 어두운 붉은색으로 설정하면

 

위 화면처럼 좀더 고급스럽게 버튼이 바뀌는 것이 보입니다.

 

자 여기까지 하셨으면 버튼 내부 이미지는 다 만들어진 겁니다.

 

레이어 스타일을 이용하면 이렇게 쉽게 버튼 이미지가 만들어 집니다.

 

그럼 이제 버튼 위에 글을 써보도록 하죠.

 

 

 

좌측 도구 아이콘에서 텍스트 입력 아이콘을 누릅니다.

 

 

적당한 폰트와 사이즈를 설정합니다.

 

폰트는 윈도우 폰트를 사용하므로 마땅한 폰트가 없으면 인터넷에서 검색해서 맘에 드는 폰트를 설치하시면 됩니다.

 

 

텍스트 설정이 끝난 후에 화면에 마우스를 대고 클릭하면 글자를 입력할 수 있게 됩니다.

 

저는 SAMPLE이란 글자를 입력해 봤습니다.

 

 

입력을 마치고 나면 화면 오른쪽에 텍스트 레이어가 추가된 것을 볼 수 있습니다.

 

그런데 흰색으로만 된 글자는 좀 밋밋한 느낌이 드는군요. 버튼 색상에 묻혀서 인식율도 안좋고요.

 

그렇다면 텍스트에 레이어 스타일을 적용해서 좀더 이쁘게 꾸며 보겠습니다.

 

 

 

 

텍스트 레이어를 더블 클릭해서 레이어 스타일 윈도우를 다시 불러옵니다.

 

아까는 버튼 내부 이미지에 대한 레이어 스타일였다면 이번엔 글자에 대한 스타일이 되겠습니다.

 

Stroke 메뉴를 눌러서 적당한 색상을 고르고 OK를 해줍니다.

 

자 그럼 이제 글자도 선명하게 보이고 만족스럽게 나왔군요.

 

 

그런데 버튼 자체가 좀 심심합니다. 그림자를 넣어서 좀더 입체감 있게 보이도록 해봅시다.

 

화면 오른쪽 하단의 레이어 윈도우에서 Shape 1 레이어를 다시 더블 클릭해서 Layer Style 윈도우를 엽니다.

 

 

 

맨 위쪽 메뉴에 있는 Drop Shadow 버튼을 누릅니다.

 

Blend Mode는 Multiply로 하시고, Opacity는 20%, Angle은 130, Distance는 5, Spread는 0, Size는 2로 설정 합니다.

 

적당히 그림자가 생기는 것을 볼 수 있습니다.

 

 

이렇게 기본적인 버튼이 완성되었습니다.

 

그럼 이제 버튼이 눌렸을때 이미지를 만들어 보겠습니다.

 

 

 

레이어 윈도우에서 Shape 1를 선택한 후에 CTRL키를 누른 상태로 Sample의 텍스트 레이어를 선택합니다.

 

그럼 위 화면처럼 두개의 레이어가 동시에 선택된 상태가 됩니다.

 

이 상태에서 화면의 버튼 이미지에 마우스를 대고 CTRL+ALT+SHIFT를 누른 상태로 마우스를 오른쪽으로 이동합니다.

 

 

 

그러면 이 화면과 같이 똑같은 레이어 2개가 복사되어 버튼이 하나 더 만들어 낼 수 있습니다.

 

레이어 윈도우에는 Shape 1 copy, SAMPLE copy 레이어가 자동으로 추가돼 있습니다.

 

이제 Shape 1 copy 레이어를 더블 클릭해서 레이어 스타일 윈도우를 엽니다.

 

 

 

원래 설정돼 있던 Inner Glow, Bevel and Emboss의 체크박스를 꺼버리고 Inner Shadow를 설정해줍니다.

 

Blend Mode는 Multiply로 Opacity는 75%로, Angle은 130으로 설정합니다.

 

이때 색상은 내부의 노란색보다 좀 어두운 오렌지색을 설정해줘야 이쁘게 나옵니다. 버튼이 들어간거처럼 표현하는거죠.

 

Distance와 Size는 각각 5 정도로 해주시면 됩니다.

 

 

축하 드립니다. 기본 버튼과 눌렸을때 버튼 2개가 모두 완성 되었습니다.

 

이제 완성된 버튼을 각각 2개의 PNG 이미지로 저장해 볼까요?

 

PNG 이미지로 저장하려면 레이어 윈도우의 Background를 삭제해야 합니다.

 

 

 

Background 레이어를 선택한 후 화면 오른쪽 하단의 휴지통 아이콘을 클릭하면

 

해당 레이어를 삭제하겠냐고 물어오는데 OK를 누릅니다.

 

이렇게 하면 하얀색 배경 이미지가 사라지고 바둑판 모양의 배경이 나탄 것을 보실 수 있을 겁니다.

 

이 바둑판 무늬는 실제로 이미지에 저장되지 않는 투명색을 의미합니다.

 

그럼 이제 Shape 1, SAMPLE, Shape 1 copy, SAMPLE copy 4개의 레이어를 CTRL 키를 누른 상태로 모두 선택합니다.

 

 

 

선택이 끝났으면 CTRL+SHIFT+E키를 눌러 1장의 레이어로 합쳐줍니다.

 

 

 

 

최종 완성된 버튼 이미지입니다.

 

 

 

 

자 그럼 이제 각각의 버튼 이미지를 PNG 파일로 저장해 봅시다.

 

 

 

우선 기본 버튼을 셀렉션 도구툴을 이용하여 버튼 전체를 포함하도록 적당한 영역을 선택해 줍니다.

 

 

CTRL키를 누르고 버튼 이미지를 살짝 드래그 해주면 셀렉션 영역이 이미지 영역에 맞게 수정됩니다.

 

이 상태에서 CTRL+C키를 눌러 클립 보드로 복사한 후, 다시 File 메뉴의 New 메뉴를 누릅니다.

 

 

Width, Height가 자동으로 선택한 이미지 영역의 크기대로 고정돼 있습니다.

 

이대로 OK를 누르고, 새로운 작업 영역이 생기면 CTRL+V를 눌러 클립 보드에 있던 버튼을 복사합니다.

 

그리고 난 후, Background 레이어를 삭제하고 PNG 파일로 저장하면 끝입니다.

 

    그럼 이런 이미지를 얻게 되는 것이죠.

 

 

   버튼이 눌렸을때 이미지도 같은 방법으로 저장하면 됩니다.

 

 

이 이미지를 Button View에 적용하면 모든 작업이 끝납니다.

 

후아~ 온라인 상태에서 글을 썼더니 상당히 길어지네요. 이미지가 있음에도 불구하고 타자도 많이 치게 됩니다.

 

하지만 몇분이라도 도움이 되신 분이 있다면 정말 큰 보람이 있겠네요.

 

 

다음편은 구름이나 꽃, 바위 등 자연물을 그리는 방법을 소개해 보도록 하겠습니다.

http://www.androidpub.com/1579030

[비니아빠] 펌