Инструменты для создания CSS-спрайтов? [закрытый]

Мгновенный Спрайт - это генератор спрайтов CSS в браузере, над которым я работаю. Это действительно быстро, но не имеет так много функций, как некоторые другие. В настоящее время он работает только в Firefox или Chrome, так как он использует JavaScript FileReader и HTML Canvas для создания спрайтов внутри веб-браузера без загрузки.

там сейчас Спрайт мне Стив Саудерс. Просто попробуйте, и это, кажется, работает довольно хорошо.

вот ссылка http://spriteme.org/ и вот сообщение в блоге, объявляющее об этом.

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

Это выглядит многообещающе :

http://csssprites.org/

также я нашел в этой статье, который имеет некоторую полезную информацию, и даже некоторые комментарии читателей стоит читать.

также, по-видимому, Google Web toolkit имеет что - то-так что если вы используете, что это может быть стоит проверить.

попробуйте это:

http://spritepad.wearekiss.com/

ZeroSprites генератор CSS спрайты, направленных на минимизацию площади, используя алгоритмы СБИС floorplaning.

нашел это довольно быстро tho, что предел загрузки 500K может быть болью. доступен исходный код здесь

Tonttu Это приложение Adobe AIR, которое обеспечивает простой интерфейс для создания мощных изображений CSS-спрайтов. Вы можете указать FiledWidth и FieldHeight или сортировать изображения.
создание CSS спрайтов изображений с Tonttu Desktop Tool

пока не ясно, попадет ли он в ядро ASP.NET framework но вот проект Microsoft codeplex для csssprites:

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

Если вам это нравится-используйте его - или просто как идея, то добавьте комментарий. Я думаю, это было бы здорово иметь в ASP.NET рамки. Лично не использовал его (мне пришлось изобретать колесо самому), но его получили хорошие отзывы.

Он включает в себя следующие компоненты:

• API для автоматического создания спрайтов и встроенных изображений
• управления и помощники, которые обеспечивают удобный способ вызова в API

особенности добавлены во втором выпуске:

• управление связыванием CSS для веб-форм (выбирает правильный файл CSS для браузера пользователя, но не отображает изображение)
• использование пользовательских путей к папкам, кроме App_Sprites
• изменение направления плитки изображений sprite
• слияние сгенерированного CSS с собственным CSS пользователя

функции, рассматриваемые для будущих выпусков:

• автоматический выбор наиболее эффективного цвета фона спрайта
• автоматическое уменьшение отображаемого CSS
• компиляция против .NET 3.5

просто используйте http://sprites.scherpontwikkeling.nl/ он также может генерировать спрайты из URL-адреса веб-сайта...вы можете интегрировать свои спрайты после разработки своего веб-сайта. Он очень прост в использовании;)

не прямой ответ, но моим коллегам-разработчикам и веб-интеграторам, рассмотрите возможность простого выравнивания каждого спрайта до двух степеней; например, 16-пиксельная или 32-пиксельная сетка. Это упрощает вычисление смещений в файле CSS. Все пробелы между ними не имеют значения, поскольку форматы gifd и png сжимают это очень хорошо.

компас CSS Framework имеет автоматическая генерация спрайтов.

Если вам нравится Java, то вы можете использовать GWT 1.5+, который поставляется с чем-то под названием "ImageBundle."Компилятор GWT будет обрабатывать все неприятные детали для вас. Вам даже не придется кодировать одну строку JavaScript или писать CSS.

вот скрипт объединяет изображения через скрипт Photoshop в CSS-спрайты. Он не будет делать карту спрайтов, как вы просили, но он будет объединять изображения в кратные два (2, 4, 8), если они имеют одинаковый размер. Я предпочитаю комбинировать похожие изображения (normal, hover, selected, parent of selected), чем иметь все изображения в одном файле.

Если вы используете ruby on rails, есть простая в установке библиотека для генерации спрайтов css.

http://github.com/aberant/spittle

существует новый инструмент, называемый ActiveSprites, часть драгоценного камня active_assets.

Github:http://bitly.com/eRTwU4

вы используете ruby 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

ни один из этих инструментов не соответствовал моим требованиям, поэтому я написал тот, который использует крошечную библиотеку изображений Марка Тайлерса, mtpixel (теперь часть mtcelledit) Он не очень обширен, но легко расширяется через встроенные функции mtpixel, которые включают в себя: оттенки серого, инверсию цвета, вращение, резкость, квантование, постеризацию, флип (вертикальный и горизонтальный), преобразование, rgb->индексированный, индексированный->rgb, обнаружение края, тиснение, рисование полигонов, текст и многое другое.

все, что вы делаете, это передать его набор изображений как args (поддерживает png, gif и jpeg), и он будет выводить rgb png под названием sprite.png вместе с полезным изображением нарезки данных в stdout. Я использую его в скриптах bash для spritify всего каталога изображений и вывода данных нарезки для автоматической генерации css (с надеждой в конечном итоге сделать его способным автоматически заменять существующие теги img На немного creative sed/awk)

бинарные пакеты для puppy linux будут здесь:

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

мой вариант использования требовал только сращивания изображений по вертикали в новый png, так что это все, что он делает, но мой исходный код является общественным достоянием, а библиотека mtcelledit-gpl3. С 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. Он не только создает файл спрайта автоматически, но и делает это на лету через HttpModule вместе с объединением и минимизацией всех CSS. Он оптимизирует изображение спрайта с помощью квантования и сжатия без потерь и обрабатывает обслуживание сгенерированных файлов с помощью ETags и Expires заголовков для обеспечения оптимального кэширования браузера. Настройка тривиальна, включая только простую сеть.изменение конфигурации. Смотрите мои блоге о его принятии галереей образцов Microsoft Visual Studio и MSDN.

недавно я нашел этот инструмент: SpriteRight http://spriterightapp.com/

SpriteRight-это генератор CSS spritesheet для Mac, который позволяет импортировать существующие изображения или таблицы стилей. Сделайте ваши сайты загружаются быстрее, сократить расходы на пропускную способность и сэкономить время. SpriteRight даже генерирует CSS-код на лету.