공부하자/HTML

이미지 합치기 [sprites]

YoBot 2016. 11. 26. 05:01


1. 아래링크를 클릭하여 해당 페이지로 넘어갑니다.

http://csssprites.com/


2. 해당 페이지의 '파일 선택'을 클릭 > 원하는 파일을 선택합니다. 
저같은경우는 '1' 이라는 컨버스 로고 입니다.




3. 상기와 같이 합치고 싶은 이미지들을 모두 선택하였다면

+options >> 을 클릭하여 원하시는 옵션으로 설정해 줍니다.


저같은 경우 두이미지 사이는 '0' , 이미지들은 다 top부분에 있는 것으로 생성하였습니다.


4. 오션을 다 조정하였다면 PNG 버튼을 클릭합니다.

클릭을 하면 아래와 같이 이미지가 합성된것을 확인 할 수 있습니다.


5. 해당 이미지를 '우클릭' > '이미지를 다른 이름으로 저장' 하여 PC에 저장합니다.


어때요 참 쉽죠 ?