Как сделать спрайты в фотошопе
C SS спрайты
Для чего нужны css спрайты? Они позволяют увеличить скорость загрузки веб-страниц. Спрайт — это несколько объединённых изображений фона в одно, которые при помощи css-кода отображаются по отдельности. Количество HTTP-запросов сводится к одному, что повышает производительность сайта.
Разберём код CSS для отдельных фрагментов спрайта, а изображения будем готовить в Photoshop. Оговорюсь: подойдёт любая графическая программа, главное, понять механизм работы css-спрайтов. Для их создания применимы и сервисы, генерирующие спрайты, — о них в конце материала.
Изображения, используемые в качестве фона элементов, это обычно: кнопки, иконки, однопиксельные по ширине-высоте градиенты, ролловеры — кнопки, изменяющиеся при наведении курсора или других действий. Пойдём от простого к сложному.
Допустим, нам надо сделать css спрайт из трёх иконок-указателей. Описание создания начального изображения опускаю, всё просто: 30px на 30px, прозрачный фон — круг с оливковой заливкой — белая галочка:
Спрайт у нас должен получиться размером 30px на 90px. Создаём для него новое изображение, пока 30 на 30, копируем в него начальное. Далее начальное поворачиваем на 90° по часовой стрелке: «Изображение — Вращение изображения». Теперь нужно увеличить размер будущего спрайта по вертикали до 60рх:
Делается это просто: «Изображение — Размер холста» ( Alt+Ctrl+C ), задаём высоту 60px, а в «Расположении» нажимаем средний верхний квадратик, чтобы стрелки получились как на скриншоте. Жмём OK — это увеличит (продлит) изображение по вертикали вниз:
Повторим процедуру для третьей иконки-указателя. Теперь о коде CSS. Вот как он будет отличаться для 3-х элементов:
По сути, для всех трёх элементов различается только значение background-position, точнее его второе значение. Оно отрицательное и отвечает за смещение нашего изображения button.png по вертикали. Код дан условно, остальные свойства для различных случаев будут разные. Отступ слева подходит для следующего примера с андроидами.
Отступление: иконка с прозрачным фоном выглядит одинаково на любом фоне, если её сохранить в png. А при смене общего фона страницы или её участка не потребуется менять иконки. В форматах gif и jpg прозрачного фона нет, при сохранении он будет белый.
Теперь о нюансах. Например, иконка служит фоновой картинкой для заголовков h1-h6. Мы можем рассчитать её размер для высоты одной строки. А если заголовок образовал вторую строку, то вылезет следующая иконка:
Решение простое. Чтобы это предотвратить, можно явно задать высоту заголовка height, но это подходит не для всех случаев. Или сделать отступы между изображениями, а для точности использовать направляющие: «Просмотр — Линейка» ( Ctrl+R ). Просто зажимаем курсор на горизонтальной линейке и тащим вниз направляющую (бирюзовую), а совмещаем её с градуировкой вертикальной линейки:
Таких направляющих можно сделать сколько надо, в т.ч. вертикальных. В Photoshop есть ещё пара инструментов, которые могут пригодиться: «Просмотр — Показать — Быстрые направляющие» (розовые на скрине ниже). Они становятся видимыми при передвижке иконки инструментом «Перемещение» ( V ) и служат для выравнивания с «соседями». Это, кстати, более сложный css спрайт:
Там же находится инструмент Сетка ( Ctrl+’ ). Сетку удобно применять для css спрайта, состоящего из одинаковых по размеру иконок. Чтобы включить-отключить эти инструменты нужно поставить или убрать галочку для пункта «Просмотр — Вспомогательные элементы» ( Ctrl+H ).
Скажу по секрету: опытные разработчики и дизайнеры делают css спрайты ещё в процессе разработки сайта и дополнительно сохраняют их в формате psd, где сохраняются слои, с возможностью их редактирования. Это позволяет изменять отдельные изображения в объединённом спрайте в случае необходимости.
В сложных css спрайтах необходимо рассчитывать координаты для обоих значений свойства background-position — мужайтесь, у кого с математикой неважно (это шутка).
Вместо Photoshop для изготовления css спрайтов годится любой другой графический редактор. В Сети существует много сервисов для генерации спрайтов: читайте об оптимизации изображений, где даётся описание лучших генераторов css-спрайтов и инструментов для сжатия png, jpg и gif файлов без потери качества.
CSS спрайты существенно увеличивают скорость загрузки сайта — проверить этот показатель можно, используя сервис PageSpeed от Google.