마크업을 하며 누구나 한번쯤 이미지 편집 노가다를 겪어봤을 것입니다. 특히 스프라이트 이미지를 생성할 때 많이 겪습니다. 포토샵에서 채취한 이미지를 일정한 패턴의 좌표로 표현하기 위해선 많은 수작업이 필요하기 때문입니다. 이 포스트에선 스프라이트 이미지를 쉽게 만든 한가지 사례와 함께 괜찮은 이미지 편집툴 두가지를 소개합니다.
나를 힘들게 한 이미지들…
“스마트에디터에 라인스티커 기능을 추가하기” 프로젝트를 진행했습니다. 라인스티커는 캐릭터별로 종류가 굉장히 많죠? 네트워크 과부하를 줄이기 위해선 당연히 스프라이트 이미지를 사용해야합니다. 디자이너분은 캐릭터별로 스티커를 이쁘게 만들어주셨죠. 문제는 각 스티커마다 이미지 사이즈가 달랐던 것입니다.
위 이미지들로 키버튼을 만들어야하는데 이미지 사이즈가 각각 다르니 일정한 패턴의 좌표값을 사용할 수 없습니다.
일정한 패턴의 좌표값을 만들기 위해선 아래와 같이 고정된 틀안에 이미지를 정가운데 넣고
스프라이트 생성하면 만들 수 있습니다.
코드는 이렇게 나오겠죠?
이러한 과정으로 다량의 이미지를 편집해야 한다면 단순작업으로 시간을 허비할 것입니다.
이러한 이미지 편집 노가다를 두가지 툴로 해결해보겠습니다.
EasyImageModifier 사용
– 다운로드 URL : http://easyimagemodifier.software.informer.com/download/
이미지를 한꺼번에 Add padding, Resizing, Rotate, Add watermark 등의 편집을 할때 유용하게 쓸 수 있는 툴입니다. 이 포스트엔 Resizing과 Add padding 기능만 설명합니다.
1. 실행
EasyImageModifier 를 실행
2. 이미지 저장소 선택
load folder를 선택해서 이미지가 저장되 있는 폴더를 지정합니다.
3. Add padding
다량의 이미지 사이즈를 고정사이즈로 변경하지만 원본이미지는 Resizing하지 않고 여백만 추가할 때 사용할 수 있습니다.
1) “Activate padding of image border”를 체크
2) “Target resolutior”에 고정할 사이즈를 입력
3) “Filling type”은 여백 색상을 지정. “Transparency”를 선택해야 여백이 투명으로 저장됨.
4. Resize
다량의 이미지를 고정사이즈로 Resizing할 때 사용할 수 있습니다.
1) “Activate resizing” 을 체크
2) “Activate resizing” 아래 radio 버튼이 있습니다. 좌측은 직접 사이즈 입력, 우측은 무조건 50%. (2배율용 이미지 → 1배율용 이미지 작업시 유용하게 쓸 수 있습니다.)
3) “Proportional : Keep aspect ratio” 는 직접 사이즈를 입력할 경우 이미지 비율을 유지할 것인가에 대한 옵션
4) 그 아래건 잘 모르겠음…
5. 저장하기
1) “Choose saving format” 에서 이미지 포맷을 선택
2) “Set image quality” 에서 이미지 퀄러티 선택
1) “Activate using a nre destination” 을 체크해서 저장될 폴더를 지정
2) 상단 “Process”버튼을 누르면 이미지가 생성됩니다.
이 화면이 나오면 성공입니다.
자 이제 이미지를 사이즈를 고정시켰으니 스프라이트 이미지로 만들면 됩니다.
SpriteGenerator 사용
– 다운로드 URL : http://spritegenerator.codeplex.com/
분리되있는 이미지를 한꺼번에 스프라이트 이미지로 생성할 때 유용하게 쓸 수 있는 툴입니다. 제가 추천드리는 SpriteGenerator는 다른 공개용 툴보다 이미지 정렬옵션이 편리하게 되있는게 장점입니다. Grunt나 Sass 옵션을 활용해도 다양한 스프라이트이미지 옵션을 사용할 수 있습니다. 하지만 Ruby기반의 개발환경을 세팅하기 귀찮으신 분들께는 SpriteGenerator를 추천드립니다.
1. 실행
2. 이미지/CSS 경로지정
불러올 이미지, 저장될 이미지, 저장될 CSS(position값)에 대한 경로를 지정합니다.
1) Images directory path : 불러올 이미지 폴더
2) Output image file path : 저장될 이미지 경로와 파일명 입력
3) Output CSS file path : 저장될 CSS 경로와 파일명 입력
3. 이미지 옵션
1. Layout : 합쳐질 이미지들의 방향
1) Layout – Automatic : 자동으로 알아서
2) Layout – Horizontal : 가로방향으로
3) Layout – Vertical : 세로방향으로
4) Rectangular : 열과 행의 개수 지정
※ 저장소에 있는 이미지들의 사이즈가 다르면 “Rectangular”는 활성화가 안됩니다.
2. Distances : 이미지 간격 조정
1) Distance between images : 이미지 사이 간격
2) Margin width : 스프라이트 이미지의 바깥 여백
4. 이미지 생성
1) Generate 버튼을 누릅니다.
2) 클릭하면 툴이 꺼집니다. “2. 이미지/CSS 경로지정”에서 지정한 경로로 가서 생성된 이미지와 CSS를 확인합니다.
마치며…
꼭 위 사례가 아니더라도 업무에 응용할일이 많을 것 같습니다.
협업하는 디자인팀에 툴 사용법을 공유하여 직접 스프라이트 처리된 산출물로 개발자에게 전달할 수 있도록 유도하는 것도 좋은 방법입니다.
0개의 댓글