CSS 스프라이트를 만드는 도구?

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

You use a ruby dsl to define your sprites and then do "rake sprites" and the sprites and corresponding stylesheets get generated.

It's rad!

Here's some sample code,

# 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

This tool takes a novel approach in that it assembles your requested images on the fly as an http service. This makes the whole process pretty simple (no preprocessing required, change images any time): You start the service and then reference whatever images you want in your HTML:

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

Because it's dynamic, you can even make sprites from a dynamic set of images such as a thumbnail page. Doesn't support JPEG though, but PNG and GIF works fine.

---

I suggest you to use Sprite Master Web. I generates sprite sheets automatically and exports CSS code for you. It always tries to generate smallest sprite sheets with advanced algorithms.

Here is a screenshot and youtube video

---

None of these tools met my requirements, so I wrote one that uses Mark Tylers's tiny image library, mtpixel (now part of mtcelledit) It isn't super extensive but it is easily extensible through mtpixel's built in functions that include: grayscale, color inversion, rotation, sharpen, quantize, posterize, flip (vertical and horizontal), transform, rgb->indexed, indexed->rgb, edge detect, emboss, drawing polygons, text and more.

All you do is pass it a set of images as args (supports png, gif and jpeg) and it will output an rgb png called sprite.png along with the useful image slicing data to stdout. I use it in bash scripts to spritify an entire directory of images and output the slicing data for automatic generation of css (with the hope of eventually making it capable of replacing existing img tags automagically with a bit of creative sed/awk)

Binary packages for puppy linux will be here:

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

My use case only required splicing the images vertically into a new png, so that is all it does, but my source code is public domain and the mtcelledit library is gpl3. With mtpixel statically linked, the binary is <100kb (only a few kb when dynamically linked) and the only other dependencies are libpng, libjpeg and libgif (and freetype with the official mtpixel, but I didn't need the text support, so I commented out the freetype bits in the static build)

feel free to modify for your own needs:

#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; 
}

---

If you are using .net, check out http://www.RequestReduce.com. It not only creates the sprite file automatically, but it does it on the fly through an HttpModule along with merging and minifying all CSS. It lso optimizes the sprite image using quantization and lossless compression and it handles the serving of the generated files using ETags and Expires headers to ensure optimal browser caching. The setup is trivial involving just a simple web.config change. See my blog post about its adoption by the Microsoft Visual Studio and MSDN Samples gallery.

---

i recently find this tools : SpriteRight http://spriterightapp.com/

SpriteRight is a CSS spritesheet generator for the Mac that lets you import your existing images or stylesheets. Make your sites load faster, cut bandwidth costs and save time. SpriteRight even generates CSS code on the fly.

참고URL : https://stackoverflow.com/questions/527336/tools-to-make-css-sprites