2.테마강좌 - Mode 9 Patch <9.PNG>

앞서 강좌에서 말씀드린듯이 9.PNG는 좀 다른 습성을 갖고 있습니다.

제가 9.PNG를 수정하는 방법은 좀 어려울수도 있습니다.

다만 좀더 접근하기 쉽게 적어드리고저 강좌를 적으니 양해부탁드리겠습니다.

제 블로그에 적었던 그림파일을 다시 활용하겠습니다.

그림 파일을 보면서 설명드리는게 쉽겠네요.

좌측은 우리가 수정한 아이콘입니다.

기본으로 되어진 아이콘인데 이 파일이 설명드리기 쉬울것 같아 이 파일을 선택했습니다.

좌측이 우리가 수정한 아이콘이라면 저 우측에 많이 일그러진 못생긴 아이콘은 무엇이냐?

9.PNG의 경우 좌측의 아이콘을 임의적으로 늘려서 사용하게 됩니다.

즉, 같은 모양의 아이콘을 크기만 조절해서 사용해야 할때...(ex 가로모드와 세로모드)

매번 아이콘을 더 추가해서 사용하게 되면 파일들이 적어도 가로모드와 세로모드2개씩은 갖고 있어야 합니다.

하지만 9.png를 이용해서 늘리면서 사용하게 되면 적어도 가로모드와 세로모드에 들어갈 그림파일들을 한번에 해결할수 있겠죠.

그런데 임의적으로 늘려버리게 되서 모양이 이쁘지 않게 되는 경우가 생기죠..

이 경우 이쁘게(?) 늘리는 방법을 이제 설명드리겠습니다.

먼저 이 프로그램을 설명드려야 겠네요.

앞 강좌에 sdk를 설치하시면 sdk/tools/draw-9-patch.bat이라는 프로그램입니다.

실행후 드래그 앤 드랍으로 떨궈주시면 됩니다.

이 프로그램에서는 그림파일을 수정하지는 못합니다. 직접 포토샵이나 일러스트에서 작업하신 파일을 가져오게 됩니다.

그러면 원래 사이즈.. 예를들어 54x54 px짜리 아이콘을 작업해서 여기에 떨구시면 좌우상하 1px씩 확장시켜줍니다.

즉 55x55 px이 되어 나옵니다. 그 이유인 즉슨... 9.png는 상하좌우 4 부분의 1px되는 곳에 Solid Black.. 쌔카만 점을 어떻게 찍어주냐에 따라

아이콘의 확장 혹은 Text작성되어지는 부분을 지정해줄수 있습니다.

위의 그림에서 파란 화살표로 찍은 부분.. 즉, 좌측과 상단의 지나치는 부분에서 겹쳐지는 부분...

그 겹쳐지는 부분만을 확장시켜줍니다. 반대로 빨간 화살요의 부분은 Text 혹은 다른 icon이 들어서게 될 자리를 정해줍니다.

먼저 파란화살표 부분을 그림으로 설명드리겠습니다.

좌측과 상단에 임의적으로 한군대씩 점을 찍었습니다. ( 이 점은 원하는 부분을 전체적으로 찍을수도 있습니다.)

좌측의 점과 상단의 점을 일직선상으로 그었을때 만나는 부분... 빨간화살표가 가르키는 부분을 임의적으로 늘려주게 됩니다.

우측의 그림을 보시면 이해가 쉽겠네요..

그럼 점을 어떻게 찍느냐.... 이 점을 찍는것은 그림에 따라 아주 다양하게 다르겠습니다.

예를 들어 이 그림을 깔끔하게 보존하기 위해서는..

저는 이런 방법을 선택했습니다. 아이콘이 없는 부분만 확장을 시켜서 아이콘을 보존시키는 방법이죠.

물론 이 방법도 좋긴하지만 간혹 전체적으로 늘려주어야 할때도 있고 어느 일정부분만 늘려줘야 하는 부분도 있습니다.

이런것은 직접 이리저리 적용해보시면서 오른쪽 부분을 확인해보면 좋겠죠..

이 다음 우측과 하단부분에 대해 설명드리겠습니다.

제 허접한 테마를 빌려와야 겠네요 ㅡ.ㅜ

우측상단 빨간화살표로 표시하는 박스를 보시면 "지우기"란 글이 위로 치우쳐져 있습니다.

이것을 제가 임의적으로 draw-9-patch에서 설명을 드리겠습니다.

이 경우 우측과 하단만 본다면.. 제가 이정도면 될것이다.. 라고 생각하며 포인트를 줬습니다.

하지만 여기 박스에 들어올 폰트크기를 고려하지 않아서 우측이 시작하는 맨위쪽부터 채워지기 때문에 위로 쏠리는 경향이 생긴거죠..

그래서 이 경우 아래 그림과 같이 조정을 해주는 작업이 필요하죠..

(여기 지우기는 제가 일부러 적어넣은겁니다.. 원래는 지우기라는 글이 들어가지 않습니다.)

이렇게 draw-9-patch프로그램을 더불어 사용하시면서 어떻게 적용되는지 알아두시면 감이 오시게 될겁니다.

이후에는 포토샵에서 RGB(0,0,0) Solid Black으로 좀 더 편하게 점을 찍어가면서 쓰시면 좋습니다.

주의하실점은 4모퉁이에는 점을 찍을 경우 Compile작업시에 오류가 납니다. 

그리고 간혹 아이콘이 저렇게 공간이 많이 남는게 아니라 fit하게 나오는 아이콘의 경우

반경1px씩 지우개로 한번 정리를 해주고 난뒤에 Solid Black으로 찍어주시는게 좋습니다.