CSS Sprite 를 눈으로 쉽고 편리하게 정의하는 사이트

보통 구글 홈페이지에 나오는 Sprite Generator 는 각각의 이미지를 조합해 Sprite를 위한 통이미지로 생성해주는 웹 앱이 대부분이다.
하지만 그 Sprite를 CSS로 일일이 맞춰가는 작업은 당연히 쉽지 않을 것이다.
여기에 그런 피곤함을 덜게 해주는 두 사이트가 있어 소개한다.
특히 디자이너들 개발자에게 이쁨받을 것이다. (왜죠)

Sprite Cow

이 웹 앱은 통이미지에 있는 Sprite 에서 알아서 색상 범위를 감지하여 Sprite 영역을 잡아주는 기특한 프로그램이다.
투명 배경은 물론 특정 배경 색상을 기준으로 영역을 색상 범위에 따라 알아서 잡아주기 때문에
Sprite로 쓸 때 일정하지 않은 통이미지를 나눌 때 유용하게 쓰일 수 있다.
게다가 소스도 공개되어 있다.

Sprite Box

이 웹 앱 도한 통이미지에 있는 Sprite를 나누는데, 4px Snap to Grid 또는 수동으로 영역을 잡고 클래스를 정의하여 Sprite CSS를 생성할 수 있다.
직접 영역을 지정하여 생성하는 기능 측면에서는 우수한 성능을 보이지만, Snap to Grid 가 4px밖에 안먹는 점, 실수로 잡은 영역을 지울 수가 없다는 게 단점이다.
하지만 로그인을 하면 저장과 열기가 가능한 점이 있어 중간중간 관리하기 좋다.

composite / 2015년 4월 9일 / Diesigner

Comments

  1. 임재철 - 2015년 4월 9일 @ 4:34 오후

    부탁드립니다

    Reply
    • composite - 2015년 4월 9일 @ 6:23 오후

      뭘요?

      Reply

답글 남기기

Your email address will not be published / Required fields are marked *