본문 바로가기

포토샵 / 강좌 및 자료/이미지 편집/자료

안드로이드 나인패치 이미지 만들기 [나인패치 영역선택 및 수정]



안드로이드 나인패치(9 patch) 이미지 만들기

오늘은 나인패치(9patch) 이해하기에 이어 제작강좌를 진행해 드리도록 하겠습니다. 이 포스팅을 보시기 전에 만드시 이전 강좌를 먼저 봐주세요. 이미지 만들기 강좌를 바로 보시면 이해가 안됩니다. 오늘은 포스팅해드리도록 하겠습니다. 나인패치 이미지 만드는 방법은 원리만 이해하면 너무나 쉽습니다. 그리고 이미지 사이즈는 중요하지 않습니다. 나인패치 이미지에 정보영역을 어떻게 설정하느냐에 따라 형태가 틀려지고 나인패치 영역을 잘못 수정하면 스마트폰 기기에서는 인식을 못합니다. 오늘 작업 방법을 간단하게 설명해드리면


포토샵으로 나인패치 영역을 수정하고 xUltimate-d9pc을 이용하여 이미지를 apkmanager로 컴파일하는 효과와 같은 변환을 해주는 방법에 대해서 알아볼께요. 작업하시기전에 꼭 명심하셔야하는 부분은 9patch가 적용되어 있는 테두리 1픽셀의 영역은 블랙 or None입니다. 다른색이 들어가서는 절대 안됩니다. 이미지 편집할 때 나인패치 정보영역을 건드리지 않는 부분을 유심히 봐주세요. 정보영역 부분이 조금이라도 잘못되면 png이미지를 나안패치로 굽는과정에서 무조건 오류납니다. 조금만 주의 하시면 건드릴 이유가 전혀 없으니 걱정은 안 하셔도 됩니다^^ 그럼 이제 시작해 볼께요. 



나인패치(9 patch) 어떻게 수정할까요?

사실 나인패치 이미지는 자기 맘대로 만드시면 됩니다. 아이콘을 만들고 외곽에 정보영역과 스케일부분을 자신이 만들어주면 되는데 처음하시는 분들은 그냥 해당되는 이미지를 편집하시는게 가장 편합니다. 그리고 처음에는 너무 많은 변화를 주시지 마시고 간단하게 색상수정 정도부터 시작해서 어느정도 자신감이 붙은 이후에 스케일 부분과 정보영역을 같이 수정해 보세요. 처음부터 여러 부분을 수정하다 보면 이게 어디가 틀려서 오류나는지 알 수 없게 되어버립니다. 기초부터 튼튼하게 다져가시는 좋습니다.^^


그럼 오늘은 메세지 어플에서 말풍선을 기준으로 설명해 드릴께요. 가장많이 수정하시는 부분이고 나인패치에 대한 개념을 설명하기에는 가장 좋은 재료입니다. 오늘은 나인패치 영역분리 및 이미지 색상 변경하는 강좌를 먼저하고 다음 강좌에서 xUtimate-d9pc사용법에 대한 포스팅을 진행하겠습니다. 이후 나인패치 관련 강좌에서 나인패치 영역 내맘대로 수정하기를 따로 진행해 드릴께요. 한번에 다 설명해드리면 복잡하기만 합니다.^^


그럼 Skt 갤럭시노트1 문자어플(SEC_MMS_UI.apk)파일 기준으로 설명해 드리겠습니다. 나인패치 영역이보이는 파일을 얻기 위해서는 apkmanager로 디컴파일 하셔야지만 그 정보영역을 보실 수 있습니다. 그냥 알집, 7zip으로 풀어서는 정보영역 수정이 불가능합니다. 그럼 SEC_MMS_UI.apk 파일을 디컴파일 해주세요



아래 포스팅 자료를 참조해주세요.

[☆ 테마제작관련 ☆/테마제작강좌] - [APK Manager] Compile & Decompile 강좌 #1





나인패치 정보영역이 표시되는 순정 이미지 추출 및 수정

SEC_MMS_UI.apk 디컴파일 하신 후에 SEC_MMS_UI.apk\res\drawable-xhdpi경로로 들어가보세요.

아래와 같이 나인패치 영역이 표시되는 이미지 파일을 확인 하실 수 있습니다.



오늘은 모든 이미지 수정을 할 수는 없으니까 샘플로 메세지 발신과 수신에 나타나는 말풍선 색상만을 변경해 보겠습니다. 안드로이드 apk파일을 디컴파일 해보시면 파일이명이 무식하게 만들어 놓은게 아니고 이미지 기능에대한 설명을 많이 담고 있습니다. 그래서 디컴파일해 보면 해당이미지를 어렵지 않게 찾을 수 있는게 많습니다. 가끔 정말 찾기 힘든것도 나오긴 하지만^^ 오늘은 아래 스샷처럼 노란색과 파란색 말풍선 배경화면을 그레이 톤으로 색상만 바꿔보도록 하겠습니다.


   







나인패치 이미지 수정하기 (#1 나인패치 영역 분리)

SEC_MMS_UI.apk 디컴파일 하신 후에 SEC_MMS_UI.apk\res\drawable-xhdpi경로로 들어가보세요.

이미지들을 가만히 보시면 순정 말풍선과 비슷하게 생기 파일을 어렵지 않게 찾으실 수 있을겁니다.

저 부분의 파일은  생긴걸로 보면 아래 두개의 파일이 맞을 겁니다^^  (msg_bubble_outbox & inbox)


          





그럼 우선 두개의 파일 중 Out box를 열어볼까요? 포토샵으로 열어본 화면입니다.


보이시죠? 외곽에 1픽셀의 검은 실선들이 저 검은실선 아래이미지와 같은 의미입니다.

벌써 잊어먹으셨다고요? 그럼 아래 강좌 다시 한번 잠깐 보고 와주세요^^






위에 설명대로 대입하게 되면 저희가 수정 할 OutBox의 영역은 아래와 같이 됩니다.





이제 저 OutBox 나인패치 이미지를 수정해볼께요. 제일 먼저 하실 작업은 나인패치 정보영역이 있는 부분과 이미지부분을 분리하는 작업 입니다. 나인패치 정보영역을 임의로 수정해도 되지만 일정한 규칙이 있습니다. 정보영역의 색상은 "Black or None"이여야지 합니다. 블랙이 변색되서도 안되도 다른색이 들어와서도 안됩니다.

그리서 미리 나인패치 영역을 분리해놓는 겁니다.^^ 그럼 아래 순선를 따라해 보세요.

나인패치영역과 이미지 영역을 레이어로 나눠서 분리하는 방법입니다. 아래 방식대로 하시면 나인패칭 영역을 쉽제 잡으실 수 있습니다.[포토샵작업]


Step1. 신규레이서 생성 [Ctrl+Shift+N or 스샷참조]



관련 포토샵 포스팅 자료




Step2 이미지 전체 선택하기 [ 단축키 Ctrl+A, 상단탭 메뉴 Select=>All]




Step3-1.  1픽셀 테두리(Stroke) 생성 [ Edit==>Stroke]



Step3-2. 아래와 같이 Width 1px, Inside를 체크해주세요 Color는 아무거나 설정하셔도 됩니다.



Step3-3. 그럼 아래와 같은 레이어 구조로 구성이 됩니다. 원본 나인패치 이미지위에 Stroke레이어





아무 의미없는 Stroke 1px는 단지 영역이 쉽게 잡기 위해서 만들어놓은 이미지 입니다.

나인패치 수정이미지와는 관계없이 이 후 작업에서 영역을 어떻게 빨리 잡는지 알아볼까요?


레이어0과 레이어1의 순서에 주목해주세요.






Step4-1. 나인패치 영역선택하기.[Layer1에서 Ctrl을 누른 상태에서 아래 그린발광 박스 부분을 클릭해보세요]


Step4-2. 나인패치 영역선택하기.[아래 스샷 처럼 테두리 부분의 영역만 잡힙니다.]



Step5-1. 나인패치 영역 분리하기 [테두리 영역이 잡힌 상태에서 레이어0을 선택해주세요.]

이 상태가 되면 수정할 이미지의 나인패치 영역만 선택이 되어져 있는 상태입니다.


영역은 Layer1에서 잡고 작업은 Layer2에서 하게 됩니다.


Step5-2. 이 상태에서 Ctrl+X를 누른 후에 Shift+Ctrl+V를 눌러주세요

 [상단메뉴에서 Edit=>CutEdit=>Paste Special=>Paste In Place 를 눌러준 효과와 똑같습니다. 나인패치 영역을 잘라서 나인패치 영역만 잘라진 레이어를 생성한 과정이였습니다.]



이젠 Layer1, Layer2를 숨긴후에 Layer0만을 보이게 한 스크린 샷입니다.




   이젠 Layer0을 선택하신 후 수정해주시면 됩니다.  

간단하게 채도만 제거해볼까요? 





나인패치 이미지 수정하기 (#2 나인패치 영역 분리후 이미지 수정하기)

Ctrl+U를 눌러서 Hue/Saturation 팝업창을 나오게 합니다, 명도와 채도 조절 옵션인데요. 

(해당 메뉴는 상단탭 Image=>adjustments안에 서 찾을 수 있습니다.)



Saturation 부분을 최하로 수정해서 색상을 모두 그레이로 바꿔 봤습니다.



그리고 이전에 숨겨두었던 Layer2(나인패치 영역을 보이게 설정해 봤습니다.)


이 상태에서 Save as에서 파일명을 msg_bubble_outbox.9.png로 저장을 해주시면 

나인패치 이미지 수정은 완료된 상태가 됩니다. 

Inbox도 똑같이 작업해 주시면 됩니다.




아래 이미지는 같은 방식으로 수정한 이미지 입니다. 

다음 강좌에 이 나인패치 이미지 수정하는 방법에 대해 소개해 드리도록 하겠습니다.


   






나인패치 수정과정을 소개하면서 나인패치 영역 쉽게 선택하기까지 하다보니

생각보다는 시간이 많이 흘렀네요. 그래서 나인패치 이미지 수정하기 강좌는 2개로 나눠지게 됩니다.ㅜㅜ


이 상태에서 바로 apk에 넣으실 수는 없습니다. 나인패치 정보영역을 안 보이게 

컴파일 과정이 필요한데 그 부분은 다음 강좌를 통해서 소개해 드리도록 하겠습니다.



오늘은 포스팅해드리도록 하겠습니다.역시 보시기엔 엄청 복잡해 보시시겠지만

나인패치 영역분리하는 시간은 단축키를 익히시면 약 10초 안으로 가능합니다.

그래서 단축키 기준으로 포스팅을 해드린겁니다.





제가 이미지 수정하면서 터득한 노하우 입니다. 가장 빠르게 가장 정확한

테두리 1픽셀, 나인패치 영역 잡는 방법은...

이전에는 눈금자를 통해서 수정도 했는데 이미지가 커지면 그것도 너무 불편해 지더라고요^^




이상으로  안드로이드 나인패치 이미지 만들기 포스팅을 마치도록하겠습니다.





포스팅 내용이 유익하셨다면 아래 ViewOn버튼 꾹 눌러주시고 

응원의 댓글 부탁드립니다.^^


조금이나마 테마작업하는데 도움이 되어드리고자 포스팅 하고 있는  Azdesign™ 입니다.^^






* 필  독 *

- 블로그내 모든 포스팅 내용 도용 및 2차배포는 금지합니다. -

루팅관련 자료 사용으로 인한 소프트웨어,하드웨어 오류에 대한 책임은 전적으로 본인에게 있습니다.

(항상 자료 사용하시기 전에 백업을 필수로 해주시고 자신의 기종과펌웨어 버젼을 확인하세요)