Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте htmlbook.ru.
Чтобы было яснее, рассмотрим пример psd-макета страницы:
Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?
До недавнего времени я бы сделал так. Попытался визуально отыскать повторяющиеся фрагменты в фоне, одном и втором.
Если бы удалось обнаружить таковой фрагмент, то вырезал бы его с помощью инструмента “Crop”. Если бы фрагмент не обнаружил, то просто бы вырезал кусок фона размером побольше (что называется “на глазок”), опять-таки, с помощью инструмента “Crop”.
Немного позже я узнал, что существует три подхода к вырезанию фоновой картинки для будущего HTML-шаблона. Первые два способа простые и неточные. Третий способ - более медленный, но точный.
Ниже последовательно рассмотрим все три способа, начиная с самого простого и заканчивая самым трудоемким.
Описание выполняемых действий приведено в локализованной версии Photoshop.
Простое вырезание фона
Фон страницы на psd-макете представляет из себя растровое изображение, у которого имеется всего один слой. И при этом визуально не получается выделить повторяющиеся фрагменты в этом фоне.
В этом случае нужно поступить только одним способом.
Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E.
Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера 50x50px или 100x100px. Размер должен быть побольше именно для того, чтобы гарантировать бесшовность такого рисунка в фоне.
Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.
Вырезание фрагмента фона
Второй способ отличается от первого лишь только тем, что на этот раз удалось обнаружить в рисунке фона макета повторяющиеся фрагменты. При этом фон макета все также является растровым изображением.
Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.
Pattern в Photoshop
Третий способ основан на понятии pattern в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить pattern в нарисованном дизайнером psd-макете.
Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое pattern в двух словах.
Это образец узора какого-то определенного размера (который может быть любым) - 102x102px, 20x20px или же 5x5px. Этот образец узора может быть любого рисунка (завитушки, полосочки, цветочки и т. д.).
Вся задача pattern’а - служить образчиком, которым дизайнер выполняет заливку слоя. То есть, ситуация получается в точности такая, как у верстальщика. Имеется маленький кусочек рисунка, которым дизайнер “мостит” весь слой.
Задача верстальщика при нарезке psd-макета - выделить этот pattern из psd-макета в отдельное изображение. Чтобы увидеть, что в данном слое используется pattern, достаточно открыть палитру “Слои” и активировать нужный слой. В качестве примененных к слою эффектов должно стоять “Наложение узора”:
Все! Наша задача наполовину выполнена - мы знаем, что для этого слоя дизайнер применил pattern в качестве заливки каким-то там рисунком.
Осталось только найти этот pattern, что является задачей чисто технической. И нам в этом поможет сам Photoshop.
Дважды кликаем мышкой по выбранному слою с фоновым рисунком. Откроется окно “Стиль слоя”, в котором активируем пункт - “Наложение узора”. В правой части окна будет показан конкретный pattern, с помощью которого дизайнер выполнял заливку данного слоя.
То есть, Photoshop показал, какой pattern использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот pattern и в этом нам снова поможет Photoshop:
В этом же окне нужно навести курсор мыши на окошко с pattern’ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного pattern’а.
Запоминаем (или записываем на листике бумаги) эти размеры - они нам понадобятся в дальнейшем.
Щелчком мыши на маленькой стрелочке справа от окна с образцом pattern’а открываем палитру паттернов (patterns):
В этой палитре нам необходимо добавить выбранный нами pattern в свою коллекцию паттернов. Это нужно для того, чтобы потом использовать этот pattern в своих “коварных” целях. Для этой цели кликаем на круглой кнопочке со стрелкой - далее можно разобраться, что и как добавлять.
Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего pattern’а:
Здесь самое главное - правильно указать размеры будущего документа (как правило, все pattern’ы имеют форму квадрата), все остальное для нас неважно.
Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” - “Новый слой-заливка” - “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК, все остальное для нас опять неважно:
Откроется еще одно окошко, в котором выбираем нужный нам pattern:
Как результат получаем новый документ с заливкой слоя выбранным нами pattern’ом. Это хорошо заметно чисто визуально, в основном окне. В палитре “Слои” также видно, что к слою была применена заливка узором:
Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.
Например, таким образом:
background-position: 0 0;
background-repeat: repeat;
background-image: url(../images/bg_body.png);Все - задача выполнена!
Заключение
Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.