본문 바로가기

Design

9-patch 나인패치

---9.png



저용량의 안드로이드 비트맵 이미지로 늘어나는 영역을 정의.

이미지의 원본을 유지하며 컨텐츠의 크기에 따라 대응해주는 방법.


쉽게 말하자면 일반적인 png 이미지에 늘어날수있는 영역을 지정하는것.


배경에 이미지가 들어가고 그 위에 글씨가 얹어지는 '버튼'과 '타이틀' 부분에 많이 사용됨.





나인패치 이미지 구조




늘어나는 스케일러블 영역과, 텍스트가 채워지는 영역으로 나눠져있음.


만들어 놓은 png 이미지에서 상하좌우를 1px씩 늘린다음


왼쪽과 상단부분에는 스케일러블 영역을


오른쪽과 하단부분에는 텍스트가 채워지는 영역을 표시

 



* 다양한 사이즈 변화에도 라운드 각도가 고정됨.





* 상하좌우 여백을 벗어나지않으면서 텍스트가 채워짐을 볼수있음.


* 나인패치 제작시 늘어나는 영역은 최소 2px 이상 만들어야함. 




Asset Studio

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

'Design' 카테고리의 다른 글

web typographic tip  (0) 2016.08.11
마이뮤직테이스트를 통해 찾아보는 UI 용어  (0) 2016.07.28
FONT 확장자 - OTF / TTF  (0) 2016.07.28
typography 구성  (0) 2016.07.09
DP 와 DPI 그리고 PX  (0) 2016.07.06