낚시제목 말고 정확한 제목을 굳이 적자면
‘디더링된 그라디언트를 그대로 나인패치로 쓰지마세요’ 임.

포토샵에서는 그라디언트툴에 기본적으로 dithering 옵션이 있는데, 켜져있는 경우가 간혹 있음.

image

▲ dither 옵션이 켜져있을 때

 

이 옵션이 켜져있을 때의 그라데이션은 아래 그림의 왼쪽과 같고, 옵션이 없을때는 오른쪽과 같다.

image

쉽게 말하자면 좀 더 눈에 자연스러운 계조를 만들기 위해서 각각의 색과 색 사이를 병치혼합으로 표현하는 걸 말하는데, 특히 그라디언트 양쪽 색상의 차이가 별로 없을 경우 dithering 의 힘이 크게 나타난다.

문제는 이게 눈에 쉽게 보이지 않기 때문에, 나인패치로 따올 때 별 생각없이 따오는 경우가 많다. 하지만 dithering 된 그라데이션은 사실 확대해보면 위 그림의 왼쪽같이 되어 있으므로, 이걸 나인패치로 만들면 이상한 줄무늬가 생기게 된다. (눈이 민감한 사람에게만 ㅡ,.ㅡ)

 

image 

▲ dithering 먹은 그라데이션으로 만든 나인패치

image

▲  나인패치가 적용되었을때.

image

▲  이 나인패치를 고대비로 효과를 줘보면 뭐가 문제인지 보이기 시작…

 

사실상 왠만큼 눈으로 봐서는 모를 일이지만… 거슬리는 사람들을 위해서.

이 문제를 해결하는 방법은 1) dithering 끄고 그냥 만든 그라데이션으로 나인패치를 만들거나 2) dithering 들어간 그라데이션을 나인패치로 만들게 아니라 그냥 타일링 해버리는 것.

AND

이전 포스팅에서 (http://zamar.tistory.com/162) 한 번 얘기한 적 있는 ‘5/6/5 디코딩’ 이슈. 32bit 이미지로 아무리 만들어도, 기기에서 256 컬러로 강제로 다운시켜버리는 현상이다. 이렇게 되면 넓은 면적에 그라데이션이 들어간 부분이나, 그라데이션이 있는 나인패치 들은 아주 절망적인 계단현상을 볼 수 있다.

이게 딱히 방법이 없어서 그 동안 깨나 골치를 썩였는데, 나인패치에 꼼수를 조금 부리면 기기에서 강제로 디코딩 하는 것을 막을 수 있다.

안드로이드는 이미지에 투명도가 조금이라도 들어가면, transparency 를 구현하기 위해서 32bit 이미지로 디코딩을 하게 되는데, 이걸 활용하는 것이다.

디자이너: 안드로이드님 여기 방금 만든 따끈한 나인패치입니다. 그라데이션 들어가 있으니 조심히 다뤄주세요.

안드로이드: 엇? 이 이미지는 그라데이션이 조금 있긴 하지만… 보자… 여긴 투명도가 없잖아. 뭐 이런거 따위에 32bit 디코딩을 해서 아까운 메모리를 쓰나. 됐어! 너는 그냥 256 컬러로 디코딩 해줘버리겠다!

디자이너: 흑흑흑… 내 그라데이션 안습 ㅠㅠ 

자, 아래의 방법으로 안드로이드를 속이고, 32bit 디코딩을 쟁취하자.

 

▲ 이것이 원본 나인패치

 

     

▲ 맨 위에 한 픽셀만 뜯어내자. delete 해서 아예 지워버린다.

▲ 여기가 핵심. 방금 잘라낸 곳과 거의 비슷한 컬러로

100% 가 아닌 99% 불투명도로 채워넣는다.

 

▲ 99% 불투명도로 채워넣어서 원래 나인패치와 비슷하게 만들어진 나인패치


디자이너: 안드로이드님 여기 방금 만든 따끈한 나인패치입니다. 한번 보시죠.

안드로이드: 흠. 보자, 흔한 나인패치 따위인 거 같은… 헛? 투명도가 있잖아? 어이쿠. 그럼 32bit 디코딩 해줘야지. 옛다.

디자이너: 오예! 땡큐땡큐~~ 나이스 그라데이션!

 

AND