Создать спрайт: Генератор Css спрайтов

Содержание

Генератор Css спрайтов

Как использовать:

Подключите стиль спрайта на странице и используйте Div с классом из списка в Css файле

Пример

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sprite.css" /> </head> <body> <div></div> </body> </html>

Нужен быстрый инструмент для создания спрайтов из набора изображений?

Создаете игру или хотите ускорить загрузку вашего сайта?

На выходе вы получите архив со спрайтом и стилями для быстрого встраивания в ваше приложение.

Не требуется установка ПО на компьютер. Достаточно только браузера и выхода в интернет.

Работа доступна как со стационарного ПК, так и с планшета и ноутбука.

Ваши данные доступны только вам. Через некоторое время они удаляются с сервера. Наш сервис ничего не хранит.

Отзывы

Спасибо! Отличный сервис!

Спасибо, не ожидала, что так быстро!

Спасибо! Отличный сервис!

Нет кнопки «Получить»

Удобный сервис

Отличный инструмент!

Добавляет серый фон на прозрачную картинку

Другие сервисы

основные техники и полезные инструменты / Хабр

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.

Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

Применение на практике

Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts:

Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

До или после?

Существует два подхода при подготовке спрайтов: до и после разработки сайта. В первом случае все мелкие картинки интерфейса компилируются в один файл на финальном этапе создания сайта. В этом случае удобно редактировать отдельные изображения, а также использовать их отдельно, если это необходимо. Такой способ подходит больше начинающим веб-дизайнерам.

Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.

Организация элементов дизайна

При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:

Готовить файл следует таким образом, чтобы будущие изменения в нем не влияли на расположение уже существующих элементов, иначе придется править весь CSS. PSD-файл со спрайтами обязательно должен быть хорошо маркирован: необходимо понятно называть все слои и группы, а также стараться не сливать слои, которые в будущем могут быть изменены.

Полезные инструменты

Compass — отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.

Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.

SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.

Вот как выглядит рабочий слой букмарклета:

Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

Полезные сервисы

Spritepad — drag-and-drop сервис для создания спрайтов

Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:

CSS спрайты — создание и использование, генераторы CSS спрайтов

На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы сайта в браузере происходит загрузка всех ее элементов. Поэтому, когда на ней размещено слишком много графики, скорость загрузки, как правило, значительно снижается. Что, в свою очередь, чревато неудобствами для посетителей вашего проекта.

Чтобы оптимизировать скорость загрузки страниц, содержащих большое количество мелких изображений, и снизить нагрузку на сервер, были придуманы так называемые CSS спрайты. О них сегодня и поговорим: расскажу о преимуществах, приведу простой пример использования css спрайтов и поделюсь ссылкками на сервисы генераторы.

Обычно этим термином обозначают объединение нескольких маленьких картинок в одну большую. Получается своеобразная графическая карта, которую можно разбить на отдельные части. Разбиение файла и вставка отдельных его частей в нужные места страницы осуществляется посредством специальных правил CSS.

Чаще всего создают CSS спрайты для иконок, лейблов, значков и прочих мелких изображений, так как на одной большой картинке может поместиться сразу несколько десятков таких элементов. Да и вставлять их в нужные места страницы поодиночке – весьма неблагодарный труд. Кроме того, с их помощью реализуют css эффект hover при наведении на картинку или пункт меню.

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

Во-первых, при помощи данной технологии можно загрузить на страницу сайта не пару десятков файлов, а всего лишь одну картинку. Вам может показаться, что загрузка маленьких файлов должна происходить гораздо легче и быстрее. На самом деле это не так. При увеличении числа файлов возрастает общее количество HTTP-запросов. А каждый такой запрос создает дополнительную нагрузку на сервер.

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

В качестве недостатков CSS спрайта можно назвать:

больше сложностей при написании CSS стилей;
дополнительные временные затраты на создание изображения CSS спрайта из комбинации картинок;
необходимость изменения всего изображения при смене одной из его составляющих (например, какой-то иконки).

В принципе, все эти недостатки легко преодолеть, тем более, что преимущества метода весьма полезны для вашего проекта.

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

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

Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:url(«image/sprite.png«).

Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута background—position (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, background—position: -47px -50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру,

background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

Генераторы CSS спрайтов

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

CSS Sprites

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

CSS Sprites

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.

Создание спрайтов

Мы начнем этот раздел Краткого руководства с просмотра спрайтов , которые обычно являются одной из первых вещей, которые вы нужно при создании любого проекта в GameMaker Studio 2 . В виде объяснено в разделе Ресурсы, спрайт — это изображение, которое может быть анимированным (хотя это и не обязательно), а затем нарисован на экран. Как правило, спрайт будет связан с объектом, но вы можете рисовать спрайты самостоятельно, либо из кода, либо в комнате редактор Asset Layer (подробнее об этом позже).Вы также можете создать спрайт, который будет использоваться в качестве плитки , набор , но мы исследуем это вариант тоже позже.

Когда вы создаете новый проект со стартовой страницы, ваше дерево ресурсов будет содержать только пустые папки для ресурсы, которые могут вам понадобиться, поэтому вам нужно щелкнуть правой кнопкой мыши в папке ресурсов спрайта и затем выберите опцию Create . Это создаст новый спрайт и откройте для вас редактор спрайтов (если редактор спрайтов не откройте, просто дважды щелкните новый ресурс):

Как вы, наверное, видите, в левом верхнем углу окна есть поле для «Имени» спрайта.Все спрайты (и все другие ресурсы) им должно быть присвоено имя, чтобы вы (и GameMaker Studio 2 ) могут легко их идентифицировать, хотя следует учитывать, что это имя на самом деле просто переменная, которая содержит значение идентификатора, «указывает» на ресурс, в данном случае на спрайт. Лучше дать каждому спрайту присваивается описательное имя, чтобы его можно было сразу идентифицировать является ли конкретный ресурс спрайтом, объектом или чем-то еще else, и многие люди делают это, добавляя префикс или суффикс ресурс с буквами « spr » — например, «spr_Ball».Обратите внимание, что в названиях ресурсов можно использовать только буквы и цифры. и символ подчеркивания «_» в имени спрайта (и любых других ресурс) все ресурсы должны начинаться с буквы, а не числа.

Прочие особенности редактора спрайтов мы обсудим в конце этого раздела, но Сначала нам нужно объяснить, как нарисовать спрайт. Это делается в Редактор изображений . Редактор изображений — очень мощный инструмент для создание графики в вашей игре и открывается щелчком по Кнопка редактирования изображения.Мы не будем вдаваться в подробности подробнее об инструментах, доступных здесь — для этого у нас есть Образ Раздел редактора руководства — но вкратце у вас есть:

Вверху слева вид кадра — это кадр (-ы) ваш спрайт и его размер можно изменить с помощью увеличительного стекла иконы.
В центре у нас есть холст для рисования — это показывает выбранный в данный момент фрейм готов к рисованию, и вы можете использовать средняя кнопка мыши для панорамирования и мышь колесо для увеличения и уменьшения масштаба
Вверху справа у нас есть основные кисти — здесь вы можете выбрать кисть для рисования, и любые пользовательские кисти также будут добавлены здесь
Справа посередине у нас есть палитра цветов — здесь мы можем выберите цвет для левой и / или правой кнопки мыши, так как вы можете рисовать на холсте с помощью одной или другой кнопки на одновременно
Чуть ниже палитры цветов у нас есть инструменты — это различные инструменты рисования, включая кисть, заливку, маскирование и инструменты формы.Обратите внимание, что некоторые инструменты разделены по диагонали. и будет рисовать контурные или закрашенные фигуры в зависимости от того, сторона линии, на которую вы нажимаете, чтобы выбрать их
В правом нижнем углу у нас есть вид слоев — как и многие другие инструменты для рисования, вы можете создавать разные слои для рисования на, позволяя экспериментировать с положением, цветом и т. д. не беспокоясь об уничтожении того, что находится под

Нарисуйте что-нибудь в редакторе изображений и поиграйте с опциями, затем, когда вы будете готовы, закройте рабочее пространство (что сохранит изображение), чтобы вернуться в рабочую область с редактор спрайтов в нем.Мы обсудим несколько других функций редактор спрайтов, который важно знать, когда только начинаешь началось …

Первое, что вам нужно знать, это как установить исходную точку для спрайта. Начало координат — это просто точка, которая будет использоваться для «закрепите» наш спрайт в комнате, и в этом случае мы хотим установите его в центр. Итак, мы нажимаем на в нижнем меню для установки начала координат и выберите «средний центр»: Вы увидите, что исходное перекрестие на изображении предварительного просмотра переместится в центр спрайта.Обратите внимание, что вы можете разместить начало координат где угодно вы хотите, просто нажав на изображение предварительного просмотра, и вы можете также вручную введите исходную позицию, добавив значения в x / y поля вверху.

Еще одна важная вещь, которую нужно знать, — как установить маска столкновения для спрайта. Маска столкновения — это область, которую GameMaker Studio 2 проверит на предмет наличия было столкновение, и по умолчанию это прямоугольник (который также разрешается быстрее всего).Обратите внимание, что вы можете установить режим обнаружения для ограничивающей рамки либо автоматический ( значение по умолчанию) или вручную. Если вы выберете руководство, вы сможете установите значения ограничивающей рамки слева, справа, сверху и снизу.

Маски столкновения любого типа, кроме прямоугольника, будут работать медленнее. разрешить, но при создании небольшой простой игры это обычно не проблема. Вы можете закрыть редактор спрайтов сейчас, поскольку мы собираемся перейдите к обсуждению Наборы плитки .

CSS Sprite Generator

Около

Автор: Роборг

Что такое CSS Sprite?

CSS Sprite — это набор изображений, собранных в один файл изображения. Они используются как способ ускорения загрузки ваших веб-сайтов за счет уменьшения количества HTTP-запросов, которые должны выполнять ваши пользователи. Каждый запрос будет содержать служебные данные HTTP-заголовков (включая файлы cookie) и задержку соединения.Используя один файл изображения вместо нескольких, вы можете значительно сократить время, необходимое для загрузки ваших страниц.

Что я получу и как им пользоваться?

Этот инструмент генерирует:

Файл изображения
Блок кода CSS

Сначала загрузите файл изображения и добавьте CSS в свою таблицу стилей. Затем замените изображения кодом для загрузки спрайта.Классы CSS генерируются из имен файлов изображений, которые вы загружаете, например: может стать

Часто задаваемые вопросы

Кто это написал?

Грег, он же Роборг — я профессиональный программист PHP в Just Say Please.
Вы можете подписаться на меня в Twitter

Как мне сообщить об ошибке?

На данный момент только через Twitter.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Я загружаю изображения только для личных целей?

Да.

Есть API?

Да — см. Страницу CSS Sprites API.

Это проект с открытым исходным кодом

На данный момент нет, но если я получу достаточно интереса, я могу очистить код и выпустить его.

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG создаются вручную.

Генератор листов спрайтов HTML5

Перетащите файлы изображений на место ниже или используйте ссылку «Открыть» для загрузки изображений с помощью обозревателя файлов. Затем нажмите «Создать», чтобы создать таблицу спрайтов и таблицу стилей. В этой демонстрации используется несколько API-интерфейсов HTML5, и она совместима только с современными браузерами.

Реализация

После зависимостей Stitches требует таблицу стилей, скрипт и элемент HTML для выполнения работы:

Генератор листа спрайтов автоматически создается в элементах с классом стежков:

Если вы выберете, любые изображения, которые являются частью начальной разметки, будут загружены на холст:

Документация

Документация доступна здесь.

Зависимости

jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 Новый

Содействует

Лицензия

MIT

Скачать

Последняя версия, 1.3.5, доступен здесь.

Вы можете скачать этот проект в любом архиве. или форматы tar.

Вы также можете клонировать проект с помощью Git, запустив:

  $ git clone git: //github.

Штирлиц — Сеть печатных салонов в Перми