나인패치 포토샵 수정

나인패치 되어 있는 이미지를 포토샵에서 수정해보았다. 결과는 만족.
간혹 .9.png로 끝나는 이미지인데 컴파일이 안되는 이미지가 있다고 해서 포토샵에서 생성은 불가능한가 생각했는데 그건 아닌듯하다.

일단 포토샵에서의 수정법을 올려본다.

아래와 같은 이미지가 있다. 이 이미지를 상하 좌우로 늘리고 가운데에 텍스트를 넣는다고 가정해보자.

이미지 늘어남

1. 왼쪽 가로의 1px 을 기준으로 초록색 1px 라인이 위아래로 넓어지며 이미지가 늘어나게 된다.
2. 위쪽 라인을 기준으로 파란색 공간이 옆으로 넓어지며 이미지가 늘어나게 된다.
   

 

텍스트의 위치

1. 오른쪽 라인과 아래 라인의 교집합 부분(회색박스공간)이 텍스트가 위치하는 공간이다.
2. 텍스트는 왼쪽 라인과 위쪽 라인을 기준으로 위치하기 때문에 라인이 한쪽으로 치우치면 회색박스 안에서 한쪽으로 치우칠수 있다. 그 부분도 고려해주자.

위의 개념을 이해하면 수정이 쉽다. 이미지를 기준으로 위아래 좌우 여백1px 안에 검은선을 넣어주고 xxx.9.png로 저장한다.