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

126

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

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

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

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

Simon_Weaver
источник
См. Также stackoverflow.com/questions/519774/…
tehvan
Не могли бы вы уточнить немного подробнее, пытаетесь ли вы скомпилировать все спрайты на одном большом изображении, а затем использовать css для отображения той части изображения, которая содержит правильный спрайт. (техника раздвижных дверей)
teh_noob
1
есть ли способ изменить цвет фона, чтобы я мог видеть свои белые значки на спрайт-паде?
Джим
24
Я действительно не понимаю, почему это было закрыто ?? Кажется, есть много хороших и полезных ответов. Возможно, это должен быть вопрос суперпользователя, потому что я не упоминаю какой-либо конкретный язык программирования, но мне нравятся полученные ответы, и они, очевидно, были полезны для многих.
Simon_Weaver
3
Пожалуйста, боже, не удаляйте этот вопрос, это самый полезный список в Интернете для этой проблемы, и он, безусловно, связан с программированием (даже если это не вопрос программирования) . Это определенно суждение, и моды не должны были его закрывать принудительно; это то, для чего предназначена система закрытия голосования сообщества ....
BlueRaja - Дэнни Пфлугофт

Ответы:

46

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

Софи Альперт
источник
@ben perfect! при условии, что это работает ;-)
Simon_Weaver
1
Я немного недоволен этим инструментом, поэтому я отказался от него в качестве выбранного ответа. в итоге мое изображение было обрезано, и это не очень хорошо объясняет, почему между изображениями
остаются
Мне это решение не нравится, хотя, думаю, оно работает нормально. SpriteMe, кажется, работает намного лучше.
Чак Ле Батт
2
Проблема с этим инструментом в том, что изображения не в полном качестве.
Джим
50

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

Брайан Гринстед
источник
1
Вау, какой отличный инструмент. Спасибо!
Vivian River
Я использовал ваш инструмент для работы над некоторыми производственными веб-сайтами с тех пор, как вы разместили здесь. Все очень просто и легко.
Vivian River
7
+1. Ваш инструмент намного лучше, чем все, что я пробовал.
Эд Байятс 08
3
пока это самый интуитивно понятный ... спасибо ... (хотя он должен включать в себя "умную" компоновку спрайтов, чтобы минимизировать проблемы с производительностью)
kumarharsh
2
Спасибо всем! @Harsh, я согласен с макетом - я начал экспериментировать с этим довольно давно, но так и не смог заставить его работать: github.com/bgrins/InstantSprite/tree/bin-pack
Брайан Гринстед
31

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

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

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

Jauder Ho
источник
2
+1 Это удивительно легко использовать: просто перейдите на нужную страницу и щелкните букмарклет SpriteMe ... Он автоматически создает изображения и CSS!
Чак Ле Батт
Это хороший инструмент, но для него требуется ZIP-файл с вашими изображениями, а порядок, в котором он помещает ваши спрайты, - это порядок ZIP. Инструмент Брайана, представленный ниже, позволяет загружать файлы и перетаскивать их, чтобы изменить порядок.
Эд Байятс 08
Мне нравится, что у него есть исходный код в свободном доступе
lkraav
13

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

http://csssprites.org/

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

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

Simon_Weaver
источник
Похоже, страница больше не работает ...
Боб,
smartsprites.osinski.name был переименован в csssprites.org , поэтому я отредактировал его для вас. Судя по тому, что я здесь видел, это один из немногих вариантов, которые можно интегрировать в процесс сборки.
ripper234
9

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

http://spritepad.wearekiss.com/

Феникс
источник
Это определенно законно. Сохраненные спрайт-карты IMHO - это ключ, поэтому со временем должны будут меняться только соответствующие изображения и строки кода, вместо того, чтобы пересчитывать весь набор координат при каждом изменении содержимого изображения.
lkraav
7

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

clyfish
источник
6

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

Скотт Эвернден
источник
почему загрузка 500 КБ может быть проблемой? я, наверное, никогда не захочу загружать>
100kb
Я сказал, что это «может быть» боль. Это вроде как зависит от приложения нет? .. ZIP-файл, полный PNG среднего размера, например, на большой сетке ~ ~ может ~ работать близко к этому числу. если это все маленькие растровые изображения, тогда конечно / нет проблем.
Скотт Эвернден,
1
да, но весь смысл спрайтов css состоит в том, чтобы предотвратить загрузку множества маленьких изображений с множеством запросов. если бы у вас действительно было так много маленьких спрайтов, загрузка заняла бы много времени, в течение которого ни один из них не отображался бы. лучше всего оставить их, я думаю, не более 100кб. вы всегда можете сделать несколько
Simon_Weaver
Я много работаю с изображениями. возможно, не маленькие растровые изображения css. так, может быть, поэтому я сделал предостережение. ваши потребности разные / хорошо. На большинстве широкополосных сетей 500 КБ будет доставлено за секунду. я был первым, кто предоставил принятый ответ на ваш запрос, и вот я проиграл ~ проголосовал и защищаю свой язык? что угодно ...
Скотт Эвернден
Для меня это было болезненно, так как изображения, с которых я начал, в конечном итоге оказались пакетом большего размера, чем этот предел, поэтому мне пришлось вырезать или оптимизировать, прежде чем я даже смог его использовать.
Kzqai 01
4

Пока не ясно, войдет ли он в базовую структуру 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
Simon_Weaver
источник
4

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

Джон
источник
3

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


источник
хороший совет, хотя я в основном пытаюсь объединить текстовые заголовки (1-2кб каждый) в один файл. я не слишком беспокоюсь о пустом пространстве, потому что я знаю, что оно будет сжато - я просто не совсем понимаю, почему инструменты для создания спрайтов делают его так много
Simon_Weaver
Одно предостережение - хотя пробелы в изображении будут сжаты для транспортировки, они расширяются и занимают память при загрузке браузера. Слепое использование инструментов автоматического создания спрайтов может привести к появлению огромных изображений, что может привести к резкому увеличению использования памяти на этих страницах. Требуется некоторая осторожность при группировке изображений для формирования листов спрайтов, чтобы сохранить это в разумных пределах.
Сэм Фостер,
Сэм: Верно! Узнал позже. Если изображение спрайта очень широкое или высокое, это нужно учитывать! Специально для приложений для мобильных телефонов (меньше памяти). Саймон: пробел, вероятно, из-за ограничений CSS. Даже если вы не используете повторение на фоне, изображение спрайта будет отображаться через отступы, высоту строки и практически всю область фона элемента, кроме полей и границ. Скажем, например, у вас есть значок для ссылки. Если ссылка будет охватывать несколько строк, тогда могут отображаться другие значки спрайта. Добавление достаточного количества пробелов делает его более «устойчивым».
@Simon_Weaver - Основываясь на отзывах всех здесь, я опубликовал простой инструмент для создания спрайтов stackoverflow.com/a/13281578/1162141
technosaurus
2

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

Аарон Дигулла
источник
2

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

Стивен Джеймс
источник
2

Есть новый инструмент под названием 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
shwoodard
источник
2

https://github.com/northpoint/SpeedySprite

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

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

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

Магнус
источник
1

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

Вот скриншот и видео на YouTube

введите описание изображения здесь

bateristt
источник
Стоит отметить, что это не бесплатное приложение или приложение с открытым исходным кодом, но оно стоит 3,99 доллара. Он хорошо построен и обеспечивает хорошее сжатие PNG.
t.mikael.d
Только Mac. Облом, этот выглядел многообещающим.
Mahn
1

Ни один из этих инструментов не соответствовал моим требованиям, поэтому я написал тот, который использует крошечную библиотеку изображений Марка Тайлерса, 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; 
}
technosaurus
источник
0

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

Мэтт Врок
источник
0

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

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

prestarocket
источник
Стоит отметить, что это не бесплатное приложение с открытым исходным кодом, но по справедливой цене в 4,99 доллара. Он хорошо построен и обеспечивает хорошее сжатие PNG, большую функциональность, чем вышеуказанный Sprite Master Web.
t.mikael.d
И это только Mac.
Mahn