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

Есть ли какие-нибудь хорошие инструменты для создания css-спрайтов?

ИДЕАЛЬНО я бы хотел дать ему каталог изображений и существующий файл .css, который ссылается на эти изображения, и создать большое изображение, оптимизированное со всеми маленькими изображениями, И изменить мой файл .css, чтобы он ссылался на эти изображения.

По крайней мере, я бы хотел, чтобы он взял каталог изображений и сгенерировал большой спрайт и .css, необходимые для использования каждого в качестве фона.

Есть ли для этого какие-нибудь хорошие плагины для фотошопа или полноценные приложения?

Это сделает за вас 90% работы: CSS Sprite Generator . Вам все равно придется отредактировать правила самостоятельно, но инструмент предоставит вам фрагменты кода, необходимые для нового файла CSS.

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

Теперь есть Sprite Me Стива Содерса. Просто попробуйте, и, похоже, он работает очень хорошо.

Вот ссылка 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.

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

Tonttu - это приложение на основе Adobe AIR, которое обеспечивает простой интерфейс для создания мощных изображений CSS Sprites. Вы можете указать 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), если они одинакового размера. Я предпочитаю комбинировать похожие изображения (обычные, наведенные, выделенные, родительские или выбранные), чем все изображения в одном файле.

если вы используете Ruby on Rails, существует простая в установке библиотека для создания спрайтов css.

http://github.com/aberant/spittle

Есть новый инструмент под названием ActiveSprites, часть гема active_assets.

Github: http://bitly.com/eRTwU4

Вы используете ruby ​​dsl для определения ваших спрайтов, а затем выполняете «rake sprites» и генерируете спрайты и соответствующие таблицы стилей.

Это круто!

Вот пример кода,

# 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-> indexed, indexed-> rgb, определение краев, тиснение, рисование многоугольников, текста и многое другое.

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

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

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

Мой вариант использования требовал только вертикального сращивания изображений в новый png, так что это все, что он делает, но мой исходный код является общественным достоянием, а библиотека mtcelledit - gpl3. Со статически связанной mtpixel двоичный файл имеет размер <100 КБ (всего несколько КБ при динамической компоновке), а единственными другими зависимостями являются libpng, libjpeg и libgif (и freetype с официальным 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 . Он не только автоматически создает файл спрайта, но и делает это «на лету» через HttpModule вместе с объединением и уменьшением всего CSS. Он также оптимизирует изображение спрайта с помощью квантования и сжатия без потерь и обрабатывает сгенерированные файлы с помощью заголовков ETags и Expires для обеспечения оптимального кэширования браузера. Настройка тривиальна и требует простого изменения web.config. См. Мое сообщение в блоге о его принятии в галерее образцов Microsoft Visual Studio и MSDN.

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

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