마크업을 하며 누구나 한번쯤 이미지 편집 노가다를 겪어봤을 것입니다. 특히 스프라이트 이미지를 생성할 때 많이 겪습니다. 포토샵에서 채취한 이미지를 일정한 패턴의 좌표로 표현하기 위해선 많은 수작업이 필요하기 때문입니다. 이 포스트에선 스프라이트 이미지를 쉽게 만든 한가지 사례와 함께 괜찮은 이미지 편집툴 두가지를 소개합니다.
 

나를 힘들게 한 이미지들…

“스마트에디터에 라인스티커 기능을 추가하기” 프로젝트를 진행했습니다. 라인스티커는 캐릭터별로 종류가 굉장히 많죠? 네트워크 과부하를 줄이기 위해선 당연히 스프라이트 이미지를 사용해야합니다. 디자이너분은 캐릭터별로 스티커를 이쁘게 만들어주셨죠. 문제는 각 스티커마다 이미지 사이즈가 달랐던 것입니다.
samplesticker_1samplesticker_2samplesticker_3
위 이미지들로 키버튼을 만들어야하는데 이미지 사이즈가 각각 다르니 일정한 패턴의 좌표값을 사용할 수 없습니다.
일정한 패턴의 좌표값을 만들기 위해선 아래와 같이 고정된 틀안에 이미지를 정가운데 넣고
_samplesticker_1 _samplesticker_2 _samplesticker_3
스프라이트 생성하면 만들 수 있습니다.
_samplesticker_4
코드는 이렇게 나오겠죠?
sample_code1
이러한 과정으로 다량의 이미지를 편집해야 한다면 단순작업으로 시간을 허비할 것입니다.
이러한 이미지 편집 노가다를 두가지 툴로 해결해보겠습니다.
 

EasyImageModifier 사용

– 다운로드 URL : http://easyimagemodifier.software.informer.com/download/
이미지를 한꺼번에 Add padding, Resizing, Rotate, Add watermark 등의 편집을 할때 유용하게 쓸 수 있는 툴입니다. 이 포스트엔 Resizing과 Add padding 기능만 설명합니다.
 

1. 실행

EasyImageModifier_1
EasyImageModifier 를 실행
 

2. 이미지 저장소 선택

EasyImageModifier_2
load folder를 선택해서 이미지가 저장되 있는 폴더를 지정합니다.
 

3. Add padding

다량의 이미지 사이즈를 고정사이즈로 변경하지만 원본이미지는 Resizing하지 않고 여백만 추가할 때 사용할 수 있습니다.
EasyImageModifier_3
1) “Activate padding of image border”를 체크
2) “Target resolutior”에 고정할 사이즈를 입력
3) “Filling type”은 여백 색상을 지정. “Transparency”를 선택해야 여백이 투명으로 저장됨.
 

4. Resize

다량의 이미지를 고정사이즈로 Resizing할 때 사용할 수 있습니다.
EasyImageModifier_4
1) “Activate resizing” 을 체크
2) “Activate resizing” 아래 radio 버튼이 있습니다. 좌측은 직접 사이즈 입력, 우측은 무조건 50%. (2배율용 이미지 → 1배율용 이미지 작업시 유용하게 쓸 수 있습니다.)
3) “Proportional : Keep aspect ratio” 는 직접 사이즈를 입력할 경우 이미지 비율을 유지할 것인가에 대한 옵션
4) 그 아래건 잘 모르겠음…
 

5. 저장하기

EasyImageModifier_5
1) “Choose saving format” 에서 이미지 포맷을 선택
2) “Set image quality” 에서 이미지 퀄러티 선택
 
EasyImageModifier_6
1) “Activate using a nre destination” 을 체크해서 저장될 폴더를 지정
2) 상단 “Process”버튼을 누르면 이미지가 생성됩니다.
EasyImageModifier_7
이 화면이 나오면 성공입니다.
자 이제 이미지를 사이즈를 고정시켰으니 스프라이트 이미지로 만들면 됩니다.
 

SpriteGenerator 사용

– 다운로드 URL : http://spritegenerator.codeplex.com/
분리되있는 이미지를 한꺼번에 스프라이트 이미지로 생성할 때 유용하게 쓸 수 있는 툴입니다. 제가 추천드리는 SpriteGenerator는 다른 공개용 툴보다 이미지 정렬옵션이 편리하게 되있는게 장점입니다. Grunt나 Sass 옵션을 활용해도 다양한 스프라이트이미지 옵션을 사용할 수 있습니다. 하지만 Ruby기반의 개발환경을 세팅하기 귀찮으신 분들께는  SpriteGenerator를 추천드립니다.
 

1. 실행

SpriteGenerator_1
 

2. 이미지/CSS 경로지정

불러올 이미지, 저장될 이미지, 저장될 CSS(position값)에 대한 경로를 지정합니다.
SpriteGenerator_2
1) Images directory path : 불러올 이미지 폴더
2) Output image file path : 저장될 이미지 경로와 파일명 입력
3) Output CSS file path : 저장될 CSS 경로와 파일명 입력
 

3. 이미지 옵션

SpriteGenerator_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. 이미지 생성

SpriteGenerator_4
1) Generate 버튼을 누릅니다.
2) 클릭하면 툴이 꺼집니다. “2. 이미지/CSS 경로지정”에서 지정한 경로로 가서 생성된 이미지와 CSS를 확인합니다.
SpriteGenerator_5    SpriteGenerator_6
 

마치며…

꼭 위 사례가 아니더라도 업무에 응용할일이 많을 것 같습니다.
협업하는 디자인팀에 툴 사용법을 공유하여 직접 스프라이트 처리된 산출물로 개발자에게 전달할 수 있도록 유도하는 것도 좋은 방법입니다.

카테고리: Environment

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다