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

StackOverflow https://stackoverflow.com/questions/527336

문제

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

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

최소한 이미지 디렉토리를 가져 와서 큰 스프라이트와 각각을 배경으로 사용하는 데 필요한 .CS를 생성하기를 원합니다.

좋은 포토샵 플러그인이나 완전히 날아간 앱이 있습니까?

도움이 되었습니까?

해결책

이것은 당신을 위해 작업의 90%를 수행합니다. CSS 스프라이트 생성기. 규칙을 직접 편집해야하지만 도구는 새 CSS 파일에 필요한 코드 조각을 제공합니다.

다른 팁

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

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

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

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

이것은 유망한 것 같습니다 :

http://csssprites.org/

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

또한 Google 웹 툴킷에는 무언가가 있습니다. 사용하는 경우 확인할 가치가 있습니다.

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

이것을 꽤 빨리 발견했습니다 500K 업로드 제한은 고통 일 수 있습니다. 소스 코드를 사용할 수 있습니다 여기

Tonttu 강력한 CSS 스프라이트 이미지를 생성하기위한 쉬운 인터페이스를 제공하는 Adobe Air 기반 애플리케이션입니다. filedwidth 및 fieldHeight 또는 정렬 이미지를 지정할 수 있습니다.
Tonttu 데스크탑 도구로 CSS Sprites 이미지를 만듭니다

Core ASP.NET 프레임 워크로 만들 수 있는지 아직 명확하지 않지만 CSSSPRITES를위한 Microsoft CodePlex 프로젝트는 다음과 같습니다.

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

당신이 그것을 좋아한다면 - 그것을 사용하십시오 - 또는 아이디어와 마찬가지로, 주석을 추가하십시오. 나는 이것이 ASP.NET 프레임 워크에있는 좋은 일이라고 생각합니다. 개인적으로 그것을 사용하지 않았지만 (나는 바퀴를 직접 발명해야했다) 좋은 리뷰를 얻었습니다.

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

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

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

  • 웹 양식의 CSS 링크 링크 (사용자의 브라우저에 대한 적절한 CSS 파일을 선택하지만 이미지를 표시하지 않음)
  • APP_SPRITES 이외의 사용자 정의 폴더 경로 사용
  • 스프라이트 이미지의 타일링 방향 변경
  • 생성 된 CSS를 사용자 자체 CSS와 병합

향후 릴리스를위한 고려중인 기능 :

  • 가장 효율적인 스프라이트 배경색을 자동으로 선택합니다
  • 렌더링 된 CSS를 자동으로 조정합니다
  • .NET 3.5에 대한 컴파일

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

직접적인 답변이 아니라 동료 개발자와 웹 통합 자에게 각 스프라이트를 두 가지 힘에 맞추는 것을 고려하십시오. 예를 들어 16 픽셀 또는 32 픽셀 그리드. CSS 파일의 오프셋 계산을 훨씬 쉽게 만듭니다. GIFD와 PNG 형식이이를 잘 압축하기 때문에 모든 공백은 중요하지 않습니다.

나침반 CSS 프레임 워크가 있습니다 자동 스프라이트 생성.

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

다음은 스크립트입니다 Photoshop 스크립트를 통한 이미지를 CSS 스프라이트로 결합합니다. 요청대로 스프라이트 맵을 수행하지는 않지만 크기가 같은 경우 두 개의 배수로 이미지를 결합합니다. 나는 하나의 파일에 모든 이미지를 가지고있는 것보다 유사한 이미지 (정상, 호버, 선택된, 선택한 부모)를 결합하는 것을 선호합니다.

Ruby on Rails를 사용하는 경우 CSS 스프라이트를 생성하기 위해 라이브러리를 쉽게 설치할 수 있습니다.

http://github.com/aberant/spittle

Active_assets Gem의 일부인 Activesprites라는 새로운 도구가 있습니다.

Github : http://bitly.com/ertwu4

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

rad!

다음은 샘플 코드입니다.

# 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는 잘 작동합니다.

나는 당신이 사용하는 것이 좋습니다 스프라이트 마스터 웹. 스프라이트 시트를 자동으로 생성하고 CSS 코드를 내 보냅니다. 항상 고급 알고리즘으로 가장 작은 스프라이트 시트를 생성하려고합니다.

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

enter image description here

이 도구 중 어느 것도 내 요구 사항을 충족하지 못하므로 Mark Tylers의 Tiny Image Library, mtpixel (현재 일부는 mtcelledit) 매우 광범위하지는 않지만 Grayscale, Color 역전, 회전, 샤프닝, 양자, 후손, 플립 (수직 및 수평), 변환, RGB-> 색인, 색인-> 등의 Mtpixel의 내장 기능을 통해 쉽게 확장 할 수 있습니다. RGB, Edge Detect, 엠보스, 다각형, 텍스트 그리기 등.

Args (PNG, GIF 및 JPEG 지원)와 같이 이미지 세트를 전달하면 Sprite.png라는 RGB PNG를 STDOUT에 유용한 이미지 슬라이싱 데이터와 함께 출력합니다. BASH 스크립트에서 이미지의 전체 디렉토리를 스프링하고 자동 생성 CSS에 대한 슬라이싱 데이터를 출력하기 위해이를 사용합니다 (결국 기존 IMG 태그를 약간의 창의적인 SED/AWK로 자동으로 교체 할 수 있기를 희망합니다).

강아지 Linux의 이진 패키지는 다음과 같습니다.

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

내 유스 케이스는 이미지를 새로운 PNG로 수직으로 스 플라이싱해야하므로 전부이지만 소스 코드는 공개 도메인이고 mtcelledit 라이브러리는 gpl3입니다. Mtpixel이 정적으로 연결되어 있으면 이진은 <100kb (동적으로 연결된 경우 몇 kb 만)이며 다른 종속성은 libpng, libjpeg 및 libgif (및 공식 mtpixel의 freetype이지만 텍스트 지원이 필요하지 않았습니다. 정적 빌드에서 프리 타입 비트를 언급했습니다)

자신의 요구에 대해 자유롭게 수정하십시오.

#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. Sprite 파일을 자동으로 생성 할뿐만 아니라 모든 CS를 병합 및 조정하면서 HTTPModule을 통해 즉시 수행합니다. 양자화 및 무손실 압축을 사용하여 스프라이트 이미지를 최적화하고 Etags를 사용하여 생성 된 파일의 서빙을 처리하고 헤더를 만료하여 최적의 브라우저 캐싱을 보장합니다. 설정은 간단한 Web.config 변경 만 포함됩니다. 내 참조 블로그 게시물 Microsoft Visual Studio 및 MSDN 샘플 갤러리의 채택에 대해

최근 에이 도구를 찾습니다 : Spriterighthttp://sprititightapp.com/

Spriteright는 MAC 용 CSS Spritesheet 생성기로 기존 이미지 또는 스타일 시트를 가져올 수 있습니다. 사이트를 더 빨리로드하고 대역폭 비용을 줄이고 시간을 절약하십시오. Spriteright는 심지어 CSS 코드를 즉시 생성합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top