Pattern в качестве фонового изображения

Reading time ~4 minutes

Недавно познакомился с тремя способами вырезания фонового изображения на макете. До недавнего времени знал о существовании только одного способа, с которым познакомился еще на сайте 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 в качестве заливки каким-то там рисунком.

Осталось только найти этот pattern, что является задачей чисто технической. И нам в этом поможет сам Photoshop.

Дважды кликаем мышкой по выбранному слою с фоновым рисунком. Откроется окно “Стиль слоя”, в котором активируем пункт - “Наложение узора”. В правой части окна будет показан конкретный pattern, с помощью которого дизайнер выполнял заливку данного слоя.

То есть, Photoshop показал, какой pattern использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот pattern и в этом нам снова поможет Photoshop:

Pattern для выбранного слоя

В этом же окне нужно навести курсор мыши на окошко с pattern‘ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного pattern‘а.

Запоминаем (или записываем на листике бумаги) эти размеры - они нам понадобятся в дальнейшем.

Щелчком мыши на маленькой стрелочке справа от окна с образцом pattern‘а открываем палитру паттернов (patterns):

Палитра паттернов (patterns)

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

Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего pattern‘а:

Новое изображение с размерами pattern'а

Здесь самое главное - правильно указать размеры будущего документа (как правило, все pattern‘ы имеют форму квадрата), все остальное для нас неважно.

Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” - “Новый слой-заливка” - “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК, все остальное для нас опять неважно:

Заливка нового слоя с помощью pattern'а

Откроется еще одно окошко, в котором выбираем нужный нам pattern:

Выбор pattern'а для заливки слоя

Как результат получаем новый документ с заливкой слоя выбранным нами pattern‘ом. Это хорошо заметно чисто визуально, в основном окне. В палитре “Слои” также видно, что к слою была применена заливка узором:

Готовое изображение для фоновой заливки

Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.

Например, таким образом:

background-position: 0 0;
background-repeat: repeat;
background-image: url(../images/bg_body.png);

Все - задача выполнена!

Заключение

Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке