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

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

теперь есть Sprite Me от Steve Souders. Просто пробует его, и это, кажется, работает довольно хорошо.

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

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

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

http://csssprites.org/

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

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

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

http://spritepad.wearekiss.com/

ZeroSprites генератор спрайтов CSS, направленный на минимизацию площади с использованием алгоритмов планирования пола VLSI.

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

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

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

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 сжимают это очень хорошо.

Compass 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 video

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

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

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