CSS 스프라이트를 만드는 도구? [닫은]

CSS 스프라이트를 만드는 좋은 도구가 있습니까?

이상적으로 이미지 디렉토리와 해당 이미지를 참조하는 기존 .css 파일을 제공하고 모든 작은 이미지로 최적화 된 큰 이미지를 만들고 해당 이미지를 참조하도록 내 .css 파일을 변경하고 싶습니다.

적어도 이미지 디렉토리를 가져 와서 큰 스프라이트와 각각을 배경으로 사용하는 데 필요한 .css를 생성하고 싶습니다.

이 작업을 수행하기 위해 좋은 포토샵 플러그인이나 완전히 날린 앱이 있습니까?

이것은 CSS Sprite Generator 의 작업 중 90 %를 수행합니다 . 여전히 규칙을 직접 편집해야하지만 도구는 새 CSS 파일에 필요한 코드 조각을 제공합니다.

인스턴트 스프라이트 는 내가 작업중 인 브라우저 내 CSS 스프라이트 생성기입니다. 정말 빠르지 만 다른 기능만큼 많은 기능이 없습니다. JavaScript FileReader 및 HTML Canvas를 사용하여 업로드하지 않고 웹 브라우저 내에 스프라이트를 생성하기 때문에 현재 Firefox 또는 Chrome에서만 작동합니다.

Steve Souders의 Sprite Me가 있습니다. 그냥 시도해 보면 꽤 잘 작동하는 것 같습니다.

여기 링크 http://spriteme.org/가 있으며 여기에이를 알리는 블로그 게시물이 있습니다.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

이것은 유망 해 보입니다.

http://csssprites.org/

또한 유용한 정보가있는 이 기사 와 읽을만한 가치가있는 독자 의견이 있습니다.

또한 분명히 구글 웹 툴킷에는 무언가가 있습니다. 따라서 그것을 사용하고 있다면 체크 아웃 할 가치가 있습니다.

이 시도:

http://spritepad.wearekiss.com/

ZeroSprites 는 VLSI 평면도 알고리즘을 사용하여 영역 최소화를 목표로하는 CSS 스프라이트 생성기입니다.

꽤 빨리이 일을 발견 하는 50 만 업로드 제한이 통증이있을 수도 있습니다 그래도. 소스 코드는 여기에 있습니다

Tonttu 는 강력한 CSS Sprites 이미지를 만들기위한 쉬운 인터페이스를 제공하는 Adobe AIR 기반 응용 프로그램입니다. FiledWidth 및 FieldHeight를 지정하거나 이미지를 정렬 할 수 있습니다.
Tonttu Desktop Tool을 사용하여 CSS 스프라이트 이미지 만들기

핵심 ASP.NET 프레임 워크로 만들지 아직 확실하지 않지만 csssprites에 대한 Microsoft 코드 플렉스 프로젝트는 다음과 같습니다.

http://aspnet.codeplex.com/releases/view/50869

당신이 그것을 좋아한다면-그것을 사용하거나-아이디어를 좋아한다면 의견을 추가하십시오. 이것이 ASP.NET 프레임 워크에있는 좋은 일이라고 생각합니다. 개인적으로 그것을 사용하지는 않았지만 (나는 바퀴를 직접 발명해야 했음) 좋은 평가를 받았습니다.

다음과 같은 구성 요소가 포함됩니다.

• 스프라이트 및 인라인 이미지 자동 생성을위한 API
• 편리한 API 호출 방법을 제공하는 컨트롤 및 도우미

두 번째 릴리스에 추가 된 기능 :

• Web Forms에 대한 CSS 연결 제어 (사용자 브라우저에 적합한 CSS 파일을 선택하지만 이미지는 표시하지 않음)
• App_Sprites 이외의 사용자 정의 폴더 경로 사용
• 스프라이트 이미지의 타일링 방향 변경
• 생성 된 CSS를 사용자 자신의 CSS와 병합

향후 릴리스에서 고려중인 기능 :

• 가장 효율적인 스프라이트 배경색 자동 선택
• 렌더링 된 CSS 자동 축소
• .NET 3.5에 대한 컴파일

http://sprites.scherpontwikkeling.nl/ 을 사용 하면 웹 사이트 URL에서 스프라이트를 생성 할 수 있습니다 ... 웹 사이트를 개발 한 후 스프라이트를 통합 할 수 있습니다. 사용하기 매우 쉽습니다.)

직접적인 대답이 아니라 동료 개발자와 웹 통합 자에게 각 스프라이트를 2의 거듭 제곱에 맞추는 것을 고려하십시오. 예를 들어 16 픽셀 또는 32 픽셀 그리드. CSS 파일에서 오프셋을 훨씬 쉽게 계산할 수 있습니다. gifd 및 png 형식이 압축률을 높이기 때문에 사이의 모든 공백은 중요하지 않습니다.

Compass CSS Framework에는 자동 스프라이트 생성 기능이 있습니다.

Java를 좋아한다면 " ImageBundle "과 함께 제공되는 GWT 1.5 이상을 사용할 수 있습니다 . GWT 컴파일러는 모든 불쾌한 세부 사항을 처리합니다. 한 줄의 JavaScript를 코딩하거나 CSS를 작성할 필요조차 없습니다.

다음은 Photoshop 스크립트를 통해 이미지를 CSS 스프라이트로 결합 하는 스크립트입니다 . 요청한대로 스프라이트 맵을 수행하지 않지만 크기가 동일한 경우 2 (2, 4, 8)의 배수로 이미지를 결합합니다. 하나의 파일에 모든 이미지를 갖는 것보다 유사한 이미지 (일반, 호버, 선택, 부모 선택)를 결합하는 것이 좋습니다.

루비 온 레일을 사용하는 경우 CSS 스프라이트를 생성하는 라이브러리를 쉽게 설치할 수 있습니다.

http://github.com/aberant/spittle

active_assets gem의 일부인 ActiveSprites라는 새로운 도구가 있습니다.

Github : http://bitly.com/eRTwU4

루비 dsl을 사용하여 스프라이트를 정의한 다음 "레이크 스프라이트"를 수행하면 스프라이트와 해당 스타일 시트가 생성됩니다.

라드!

샘플 코드는 다음과 같습니다.

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

https://github.com/northpoint/SpeedySprite

이 도구는 요청한 이미지를 http 서비스로 즉석에서 조립한다는 점에서 새로운 접근 방식을 취합니다. 이렇게하면 전체 프로세스가 매우 간단 해집니다 (사전 처리가 필요하지 않고 언제든지 이미지를 변경). 서비스를 시작한 다음 HTML에서 원하는 이미지를 참조하십시오.

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

동적이기 때문에 썸네일 페이지와 같은 동적 이미지 세트에서 스프라이트를 만들 수도 있습니다. JPEG는 지원하지 않지만 PNG와 GIF는 제대로 작동합니다.

Sprite Master Web 을 사용하는 것이 좋습니다 . 스프라이트 시트를 자동으로 생성하고 CSS 코드를 내 보냅니다. 항상 고급 알고리즘으로 가장 작은 스프라이트 시트를 생성하려고 시도합니다.

다음은 스크린 샷과 YouTube 비디오입니다

이러한 도구 중 어느 것도 내 요구 사항을 충족 하지 못했기 때문에 Mark Tylers의 작은 이미지 라이브러리 인 mtpixel (현재 mtcelledit의 일부 ) 을 사용하는 도구를 작성 했습니다. 매우 광범위하지는 않지만 mtpixel의 내장 기능을 통해 쉽게 확장 할 수 있습니다. , 회전, 선명하게, 양자화, 포스터 화, 뒤집기 (수직 및 수평), 변환, RGB-> 색인, 색인-> rgb, 가장자리 감지, 엠 보스, 다각형 그리기, 텍스트 등.

이미지 세트를 args (png, gif 및 jpeg 지원)로 전달하면 유용한 이미지 슬라이싱 데이터와 함께 sprite.png라는 rgb png를 stdout에 출력합니다. 나는 bash 스크립트에서 그것을 사용하여 이미지의 전체 디렉토리를 spritify하고 CSS 자동 생성을 위해 슬라이싱 데이터를 출력합니다 (결국 기존 img 태그를 약간의 독창적 인 sed / awk로 자동으로 대체 할 수 있기를 희망 함)

강아지 리눅스 용 바이너리 패키지는 다음과 같습니다.

http://murga-linux.com/puppy/viewtopic.php?t=82009

내 유스 케이스는 이미지를 새 png에 세로로 스 플라이 싱하기 만하면되었으므로 소스 코드는 퍼블릭 도메인이고 mtcelledit 라이브러리는 gpl3입니다. mtpixel가 정적으로 링크 된 상태에서 이진 파일은 <100kb (동적으로 링크 된 경우 몇 kb 만)이고 다른 유일한 종속성은 libpng, libjpeg 및 libgif (공식 mtpixel을 사용한 프리 타입)이지만 텍스트 지원이 필요하지 않습니다. 정적 빌드에서 프리 타입 비트를 주석 처리했습니다)

자신의 필요에 따라 자유롭게 수정하십시오.

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

.net을 사용하는 경우 http://www.RequestReduce.com을 확인 하십시오 . 스프라이트 파일을 자동으로 생성 할뿐만 아니라 모든 CSS를 병합 및 축소하는 동시에 HttpModule을 통해 즉시 생성합니다. 또한 양자화 및 무손실 압축을 사용하여 스프라이트 이미지를 최적화하고 ETag 및 Expires 헤더를 사용하여 생성 된 파일의 서비스를 처리하여 최적의 브라우저 캐싱을 보장합니다. 간단한 web.config 변경만으로 설정이 간단합니다. Microsoft Visual Studio 및 MSDN 샘플 갤러리의 채택에 대한 내 블로그 게시물을 참조하십시오 .

나는 최근 에이 도구를 찾습니다 : SpriteRight http://spriterightapp.com/

SpriteRight는 기존 이미지 또는 스타일 시트를 가져올 수있는 Mac 용 CSS 스프라이트 시트 생성기입니다. 사이트로드 속도를 높이고 대역폭 비용을 줄이며 시간을 절약하십시오. SpriteRight는 CSS 코드를 즉시 생성합니다.