CSS-спрайты - что это такое, и как их использовать. Плюсы использования большого листа спрайтов

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

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

Этот набор спрайтов включает все необходимые состояния персонажа, такие как ходьба, бег и прыжок и т. д. Он отлично подойдет для 2D экшн-раннера, а установка не составит труда.

Для любителей пиксель-арта есть набор с 40 персонажами в 10 позициях. Если вы создаете игру в стиле ретро – это то, что нужно. С ним вы сэкономите время на создание неигровых персонажей и взамен сосредоточитесь на улучшении опыта игрока.

Немного анимированных зомби никому не помешают! Этот прекрасный спрайт-лист содержит изображения пяти зомби, которые ходят и умирают. Отличный выбор для платформера или раннера.

Эти 30 иконок помогут вам создать слот-машину в лучших традициях казино Лас-Вегаса.

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

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

Добавьте в вашу экшн-игру или платформер еще одного персонажа, пусть у Frisky Girl появится приятель. Nimble Boy смотрится не менее эффектно, чем она, и тоже включает все необходимые движения и состояния.

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

Спрайт-лист с бонусными ассетами позволит создать красочную экшн-игру об акулах. Удачное решение для простого и веселого сайд-скроллера.

Кто сказал, что летать должны только птицы? К вашим услугам спрайт-лист с летающей черепахой и набор ассетов к ней. Еще одна оригинальная идея для сайд-скроллера.

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

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

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

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

Понравилось:
27

Не понравилось: 4

Недоступен ни один перевод.

спрайт

до или после "до" "после" "после"

angry_bird angry.png. index.html

Недоступен ни один перевод.

CSS спрайты - это графика для Вашего Web-сайта, объединённая в один графический файл. "Почему один файл?" - спросите Вы. Дело в том, что такой подход к хранению изображений позволяет повысить производительность веб-страниц, а также хранить графические изображения более организованно. Давайте взглянем на некоторые из лучших практик применения спрайтов. Само название спрайтов может напомнить Вам об игровых спрайтах, ретро игровой консоли и даже браузерных играх, которые так популярны сегодня:

Итак, применимо к Веб-дизайну, спрайт - это всего лишь один большой файл, содержащий несколько изображений для Вашего сайта, экономящий время загрузки и передачи файла по сети. Когда спрайт, к примеру, содержит 20-30 изображений, то это существенно может облегчить нагрузку на сервер, поскольку, если бы эти изображения хранились по отдельности - серверу пришлось бы делать соответственно 20-30 отдельных запросов для получения каждого такого изображения. Благодаря спрайту на сервер идет всего один HTTP-запрос - для получения одного-единственного изображения. Спрайт визуально может выглядеть не совсем "читаемо" для глаза, поскольку его основная задача - лишь собрать разные "куски" Вашего дизайна воедино. Например, спрайт может быть вот таким:

Спрайты используют большинство современных сайтов, и всем известный ВКонтакте - не исключение. Например, так он хранит в одном файле "кусочки" интерфейса - а именно всем знакомые иконки:

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

Приведу еще один пример спрайта. Так хранит элементы графики один известный западный сайт, посвященный дизайну:

Вы можете спросить - когда лучшим образом подготавливать спрайт? Для этого есть два разных подхода.

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

При создании спрайта в Photoshop, желательно сразу все изображения размещать организованно и в какой-то определенной, выбранной Вами последовательности, чтобы потом работать с ними было легко и просто. Старайтесь всегда округлять место под каждое изображение спрайта до ближайших 10 пикселей, или оставлять больше пространства вокруг них, если они все одинакового размера. Когда дело дойдет до написания CSS-стиля, Вам не придется записывать измерения координат, и Вы будете менее склонны забывать числа с координатами нужных изображений. Вот пример удачного размещения разных изображений в одном спрайте:

Итак, мы познакомились с понятием спрайта в Веб-дизайне, но теория без практики - ничто. Поэтому сейчас мы c Вами создадим наш первый спрайт и научимся делать простую анимацию на HTML-странице. Наш пример будет основан на персонаже из игры Angry Birds - это забавная красная птичка. Для начала подготовим изображение-спрайт в формате.PNG, содержащее 4 фазы анимации птицы:

Создадим где-нибудь на диске каталог angry_bird - туда мы будем помещать файлы нашего примера. Сохраняем спрайт с птичками в этот каталог и называем файл angry.png. Следующим шагом - создаём в этом же каталоге файл с именем index.html - это будет наша тестовая страничка с анимацией. Далее откроем этот файл в редакторе и поместим туда следующий код:

Урок сайт - Демонстрация работы со спрайтами $(document).ready(function() { // здесь будет код на jQuery, создающий анимацию });

Немного поясню, что мы сейчас сделали. Во-первых, мы задали нашему HTML-документу кодировку UTF-8 , а значит, должны сохранить наш index.html в этой кодировке. Можно задать и другую, например, windows-1251 , - для нашей задачи это не принципиально. Далее, мы подключили к документу файл стиля style.css (его пока нет в нашем каталоге angry_bird , его создадим чуть позже). Также мы задали ссылку на внешний скрипт и подключили библиотеку jQuery - с помощью jQuery мы будем осуществлять динамическую смену картинок нашей птицы и менять её "фазы" из спрайта. Также мы подготовили внутренний JavaScript-блок, куда дальше поместим код, делающий анимацию птицы. Ну, и наконец, - основное тело документа содержит единственную гиперссылку, внутри которой DIV-блок, и у него ID задан в качествеbirdImage , а класс по умолчанию -bird-sleeping . Это значит, что наша птица при открытии страницы будет "спать" - это соответствует левому нижнему изображению внутри спрайта - где у неё закрыты глаза. Теперь самое время "нарезать" наш спрайт, т.е. выделить из него отдельные изображения.

Задача "нарезки" спрайта является довольно трудоёмкой - она требует внимательности, чтобы не ошибиться с координатами, определяющими каждое изображение в спрайте. К счастью, на сегодня есть сервисы, которые полностью снимают эту головную боль с дизайнера и верстальщика. Я использую для нарезки и рекомендую Вам сервис http://spritecow.com . Суть сервиса проста и очень удобна - мы мышью выделяем каждую картинку птицы, а SpriteCow выдает нам готовый CSS-код с координатами. Всё, что нам останется сделать - это просто задать 4 стиля для каждой фазы птицы! Зайдя на сайт, видим 2 кнопки - "Open Image" и "Show Example". Нам нужна первая кнопка, жмём на неё:

В открывшемся диалоге - выбираем наш файл спрайта angry.png, после чего видим, как наш спрайт загрузился на сайт. Далее нам необходимо определить цвет фона, для этого жмём на панели инструментов "Pick Background" и указываем на белую область нашего спрайта - это позволит правильно вырезать каждую фазу птицы:

Выделяем первое изображение и получаем автоматически для него CSS-код:

Теперь, самое время создать в нашем каталоге angry_bird файл стилей style.css . Туда последоватьльно вставляем 4 сгенерированных куска CSS-кода, только вместо стандартного класса.sprite , предлагаемого нам SpriteCow назовём наши стили более понятно. Также, поскольку изображение спрайта у нас хранится прямо в корне каталога, удалим из свойстваbackground ненужный элемент пути - imgs/. У меня вышло так:

/* "обычная" птица. Левое верхнее изображение в спрайте */ .bird-normal { background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; } /* "Счастливая" птица. Правое верхнее изображение в спрайте */ .bird-happy { background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; } /* "Спящая" птица. Левое нижнее изображение в спрайте */ .bird-sleeping { background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; } /* "Злая" птица. Правое нижнее изображение в спрайте */ .bird-angry { background: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; }

Теперь, когда мы успешно нарезали спрайт и поместили 4 стиля для каждого изображения в наш файл style.css , нам остается написать код на jQuery, который будет добавлять анимацию при наведении на нашу гиперссылку и при щелчке по ссылке. Как мы помним, по умолчанию у нас задан классbird-sleeping , т.е. наша красная птичка будет "спать" при открытии документа:)

Вся анимация будет строиться на 3-х методах jQuery:

• hover - обработчик наведения курсора на ссылку и "ухода" курсора с ссылки. Когда будем наводить курсор, птица будет "просыпаться" - т.е. класс станетbird-normal
• mousedown - обработчик нажатия левой кнопки мыши на ссылке. При этом птица будет становиться "счастливой" - т.е. DIV-блоку будет присваиваться классbird-happy
• mouseup - обработчик отпускания левой кнопки мыши. При отпускании птица будет становиться "злой" - т.е. DIV-блоку присваивается классbird-angry

Итак, вставляем следующий код в место, которое мы подготовили во внутреннем блоке JavaScript, размещенном на странице:

$(document).ready(function() { // здесь будет код на jQuery, создающий анимацию $("#birdImage").hover(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); }, function() { $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-sleeping"); }); $("#birdImage").mousedown(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).addClass("bird-happy"); }).mouseup(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); }); });

Ну, вот и всё! Наша птица готова и внесла жизнь своей анимацией в страницу! :) Просмотреть демо можно . Скачать архив с примером - внизу статьи.

Создание игры требует много ресурсов. Ускорьте этот процесс с помощью готовых наборов активов, комплектов спрайтов, пользовательских интерфейсов и т. д. от Envato Market ! Нуждаетесь вы в графике для завершения своей игры или хотите запастись принадлежностями для изучения различных аспектов игрового дизайна, этот список забит всем, что вам нужно.

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

Этот набор символов даёт вам полный лист спрайтов, включая ходьбу, бег и прыжки. Добавьте экшен-персонажа в ваш 2D игровой дизайн.

Если вы используете пиксельные спрайты, этот набор включает более 40 символов с 10 позами в каждом. Это отличное дополнение к игре в ретро-стиле, позволяющее сосредоточиться на игровом опыте, а не на разработке фоновых образов или неиграбельных персонажей.

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

Сделайте забавный слот-автомат в стиле Vegas с этим набором из 30 значков, готовых ко всем вашим потребностям в подборе икон.

Упакуйтесь красиво разработанными пиксельными вспышками. Идеально подходит для экшн-игр, ролевых игр и многого другого!

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

Отдайте свою бегущую девочку-спрайт из раннего списка другу из этого, с "nimble boy" спрайт-листа. Фантастично для игр, где вам нужно несколько движений и действий.

Нуждаетесь ли вы в анимации монеты, чтобы показать её в игре, на уровне вашей игры или в составе пользовательского интерфейса, этот набор спрайтов для монет вам подойдет!

Создайте футуристическую игру с акулами с этим листом спрайта и бонусными активами! Этот набор отлично подходит для простых и забавных скроллеров.

Почему птицы должны повеселиться? Посмотрите на этот спрайт-лист с летающими черепахами и набором активов, и создайте забавный и глупый скроллер сегодня!

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

Заполните свою игру этим набором графических орнаментов и спрайтов. Дайте бегуну или шутеру что-нибудь интересное, чтобы взаимодействовать с игроками и угадывать их от уровня к уровню!

Добавьте несколько пиксельных животных к вашей игре с раннерами или скроллерами с этим набором из 14 разных животных. У каждого животного персонажа есть полный спрайт лист из семи различных действий, таких как ходьба, бег, скольжение и телепортация.

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

Постройте космические стрелялки с этими чудесно подробными листами спрайтов. Фантастика для нисходящих стрелков, заполненных сложными космическими кораблями.

Дайте вашим спрайтам что-то, чтобы бегать, прыгать и летать с фантастическими наборами фона. От тематики sci-fi до jungle вы найдете всё, что нужно для создания фантастической среды и настроения для вашего игрового дизайна.

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

Дайте персонажам игры разнообразные уровни, от космоса до лесов и королевства конфет! Этот набор из пяти фонов - яркий и веселый, готовый для всех ваших потребностей.

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

Создайте загруженный город для своей игры с этим фоновым набором зданий. Легко редактируемые активы в векторной форме, чтобы вы могли создать ретро-город своей мечты!

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

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

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

Я обожаю ощущение этого фона с фантастическими горными пейзажами или жуткими кладбищами. Дайте вашим персонажам 10 фантастических уровней с этим набором фонов.

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

Дайте вашей игре более конкретную обстановку с этим фэнтезийным тематическим набором фонов с китайской архитектурой и стилями дизайна.

Создайте свой игровой мир, плитка по плитке, полную и фантастическую обстановку для самых разных игровых стилей - от приключений до платформеров и многое другое!

Этот научно-фантастический набор спрайтов и плиток позволит вам построить фантастический мир сверху вниз для ваших персонажей, чтобы сражаться с пришельцами и скоротать день!

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

Постройте город из плитки с помощью этого набора для создания пиксельного города. Фантастический для игр-симуляторов и многое другое!

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

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

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

Держите вещи в веселой, яркой и простой форме с помощью набора 2D-платформеров. Этот набор включает в себя два набора стилей, фоны и элементы для заполнения игрового уровня.

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

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

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

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

Этот набор пользовательских интерфейсов в стиле RPG является чистым и элегантным, идеально подходящим для hack и slash или дизайна MMORPG. Вижу, что захочу играть в любую игру, где будет использован этот ресурс.

Рассмотрите пакеты GUI, подобные этому, как прекрасное дополнение к некоторым наборам плиток, спрайт-пакетам и наборам фона из названных в этом списке. Этот набор чист, увлекателен и идеален для множества жанров мобильных игр!

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

К весёлым фонам и наборам плиток вам понадобится яркий пользовательский интерфейс. Этот набор идеально подходит для ярких, блестящих игр на мобильных устройствах и планшетах.

Ищете интерфейс, подходящий для приключенческой игры в лесу? Не ищите дальше этого набора пользовательских интерфейсов!

Для прекрасной 2D-игры для мобильных устройств вам понадобится прекрасный набор пользовательских интерфейсов. Этот пакет содержит фантастические векторные элементы, каждый из которых обладает достаточными данными, чтобы выделяться из других наборов.

Сосредоточены на мобильном формате больше, чем на любых других? Проверьте этот фантастический набор UI! Идеально подходит для головоломок, которые отслеживают прогресс, этот набор - отличное начало для последней модели игрового дизайна.

Стиль кнопки этого пользовательского интерфейса - вот что меня покорило при составлении этого списка. С большой цветовой палитрой, которая хорошо впишется в столь многих активов, этот пакет является обязательным.

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

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

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

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

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

Возьмите стиль старой школы игрового дизайна с этим набором активов 2D-пиксельной игры. Более 150 активов включены, что даёт вам отличное начало для создания глубоко ностальгического платформера.

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

Дружище! Создайте стильную игру-шутер с этим набором активов для игры с пушечным ядром! Спрайты, элементы, анимации и многое другое включены в 3 типа файлов!

Для уникальной игры в жанре летающих приключений этот игровой набор отличается великолепной атмосферой и богатством. Он включает спрайты персонажей, фоны, наборы элементов и многое другое!

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

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

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

Стреляйте по звёздам с этим пространственно-тематическим набором игр. Благодаря великолепно оформленному меню, кнопкам, спрайтам, фону и другому, ваши игроки взорвутся мгновенно!

Со 100 значками в четырёх размерах этот набор обладает всем необходимым для разнообразных игровых типов!

Что такое RPG без множества элементов? Этот комплект из 296 предметов заполнен несколькими размерами предметов ручной работы.

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

Мне нравится этот набор иконок из-за его мягкого, красочного стиля и сложных рисунков. Добавьте искру прекрасного в свой пользовательский интерфейс или в меню элементов с помощью этого набора значков.

Нуждаетесь в фэнтезийных значках для всех заклинаний, которые должны использовать персонажи игры? Тогда этот набор иконок для вас!

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

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

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

Поздравляю. Вы только что закончили совершенный до пикселя макет приложения и получили одобрение от каждого члена команды, и все, что теперь осталось, это сохранить десятки, сотни и даже тысячи отдельных элементов вашей разработки. Это, наверное, наименее интересная часть дизайнерского быта, которая обычно подразумевает повторение одних и тех же действий на протяжении долгих часов (бррр). Сохранение изображений в разных масштабах так, как того требует Apple SDK, добавляет некоторые «нудности» в процесс. Однако есть способы, чтобы упростить-автоматизировать процесс экспорта.

Скопировать нужный элемент дизайна с помощью команды «Copy Merged» — довольно легко: удостоверьтесь, что показаны только нужный для данного элемента слои, инструментом «Прямоугольная область» обведите нужный элемент, выберите Edit → Copy Merged, File → New, снова Редактировать и Вставить. В результате вы получили новый документ с вашим элементом, у которого удален прозрачный слой вокруг до максимально возможной степени (максимально близко к краю изображения). Теперь все, что вам нужно – это сохранить изображение, используя «Сохранить как» или «Сохранить для Web».

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

Если вам повезло и ваша цель – экспортировать много похожих изображений (с идентичными размерами), вы можете использовать сценариями Фотошопа «Экспортировать слои в файлы».
Выбрав Файл → Сценарии → Экспортировать слои в файлы (File → Scripts → Export Layers to Files) каждый слой вашего документа будет сохранен как отдельный файл с названием, которое совпадает с названием слоя. Это значит, что вам, возможно, придется предварительно подготовить ваш документ, сведя все до растрированных слоев для элементов, которые вы хотите экспортировать – процесс, занимающий время, но чаще это гораздо быстрее, чем использование «Copy Merged». Также дополнительно можно подрезать прозрачные края вокруг изображения, если вы хотите, чтобы прозрачные зоны были полностью удалены.

Инструмент «Раскройка» (Slice tool) позволяет вам «раскроить» документ на фрагменты, чтобы экспортировать их как отдельные изображения с некоторыми ограничениями: в одном документе может быть только один набор фрагментов, и фрагменты не могут пересекаться (если они будут пересекаться, они будут «раскроены» на более мелкие фрагменты). В 90-е Slice tool был хорошим способом для создания шаблонов таблиц, заполненных картинками. В наше время этот инструмент больше используется для лучшего контроля над раскройкой изображений, особенно когда надо создать эффектный, динамичный дизайн с изображениями, в которых есть прозрачность.

Sprite sheets (спрайт-листы) обычно используются в CSS и в OpenGL играх, где создание текстурного атласа (texture atlasing) имеет важное значение. Похожий способ может быть использован для построения элементов пользовательского интерфейса в Фотошопе, даже если конечным результатом является набор картинок, а не одна большая картинка.
Рассредоточивая элементы, которые вы хотите экспортировать как спрайт-лист, вы исключаете необходимость пересечения фрагментов. Если вам нужно уместить в один документ слишком много элементов, вы можете создать сложный (составной) документ, исключая потребность в более чем одном наборе фрагментов на один документ.
Есть дополнительное преимущество в работе таким образом – ваши главные элементы дизайна больше не нужно прорисовывать с большой точностью. Ничего страшного, если вы случайно будете использовать растрированный слой или забудете его назвать, потому что у вас будет возможность все исправить, когда вы будете готовить ваш спрайт-лист для экспорта. Однако, это не значит, что ваш оригинальный макет может нарушить синхронизацию ваших последних изменений с экспортируемыми документами (если вы изменяете цвет или эффект слоя или вводите другие коррекции, например).

Так как мы заинтересованы только в разработанных пользователем фрагментах, будет хорошей идеей кликнуть «Hide Auto Slices» (в параметрах при использовании инструмента «Выделение фрагмента» и выключить «Показывать номера фрагментов» (искать в меню в «Направляющие, сетка и фрагменты» в «Установках»). Таким образом, вы уберете ненужную неразбериху из пользовательского интерфейса фрагментов Фотошопа.

После того, как вы создали спрайт-лист со всеми правильно установленными фрагментами, вы сможете экспортировать все изображения одним махом, используя «Сохранить для Веб».

Если ваш элемент пользовательского интерфейса состоит из оного слоя и вы хотите, чтобы экспортируемое изображение было как можно меньшего размера, вы можете использовать «Фрагмент из слоя». Чтобы создать его для выделенного слоя, выберете «New Layer Based Slice» из меню «Слои». Фрагмент из слоя будет двигаться, увеличиваться и уменьшаться вместе со слоем, с которым он связан. Это также затрагивает эффекты слоя: обводка и тени увеличивают размер фрагмента из слоя, поэтому эффекты включены. Меньше контроля, но более автоматизировано.

На протяжении нескольких лет, я использовал «Copy Merged» в качестве моего основного способа и «Экспорт слоев в файлы», когда это имело смысл. Да и выбора особо не было. Спрайт-листы имеют много преимуществ, особенно для средних и больших проектов. Универсально при экспортировании Retina и обычных изображений – каждый из наборов может быть экспортирован несколькими кликами, и вряд ли у вас будут проблемы с названием файла или его размером, так как здесь все делается автоматически.

Хорошего экспорта!

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

CSS Sprites

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

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

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

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

CSS Sprites

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

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