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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

Ответ 3

В настоящее время Стив Сьюдерс справляется с Sprite Me. Просто пытается это сделать, и кажется, что он работает очень хорошо.

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

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

Ответ 4

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

http://csssprites.org/

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

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

Ответ 6

ZeroSprites - это генератор спрайтов CSS, предназначенный для минимизации области с использованием алгоритмов плановой сборки VLSI.

Ответ 9

Пока неясно, попадет ли он в основную структуру 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

Ответ 10

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

Ответ 11

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

http://github.com/aberant/spittle

Ответ 16

Существует новый инструмент, называемый 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

Ответ 17

https://github.com/northpoint/SpeedySprite

Этот инструмент использует новый подход, поскольку он собирает ваши запрошенные изображения "на лету" в качестве службы http. Это делает весь процесс довольно простым (без предварительной обработки, изменения изображений в любое время): вы запускаете службу, а затем ссылаетесь на любые изображения, которые вы хотите в своем HTML:

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

Поскольку он динамический, вы даже можете создавать спрайты из динамического набора изображений, таких как страница миниатюр. Не поддерживает JPEG, но PNG и GIF отлично работают.

Ответ 18

Я предлагаю вам использовать Sprite Master Web. Я автоматически генерирую списки спрайтов и экспортирую код CSS для вас. Он всегда пытается создать наименьшие листы спрайтов с расширенными алгоритмами.

Вот скриншот и youtube video

enter image description here

Ответ 19

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

Все, что вы делаете, это передать ему набор изображений в виде args (поддерживает png, gif и jpeg), и он выведет rgb png с именем sprite.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 (и 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; 
}

Ответ 20

Если вы используете .net, проверьте http://www.RequestReduce.com. Он не только создает файл спрайта автоматически, но и выполняет его на лету через HttpModule, а также объединяет и уменьшает все CSS. Он также оптимизирует изображение спрайта с использованием квантования и сжатия без потерь и обрабатывает обслуживание сгенерированных файлов с использованием заголовков ETags и Expires для обеспечения оптимального кеширования браузера. Настройка тривиальна, включая простое изменение web.config. См. Мой блог о его внедрении в галерее образцов Microsoft Visual Studio и MSDN.

Ответ 21

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

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