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

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

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

По спецификации CSS граница может располагаться только рядом с контентом, но не поверх. Кстати, есть еще одна статья, посвященная проблеме обводки - “Преобразовываем обводку из Photoshop в CSS”. Но в ней описывается случай, когда изображение можно оставить как есть, только добавив к нему внешнюю границу в коде CSS.

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

В Photoshop есть инструмент “Рамка” (Crop), предназначенный как раз для вырезания элементов из psd-макета или обрезки изображений. В подавляющем большинстве всяческих руководств описывается только один способ использования этого инструмента.

Который можно назвать “ручным”, так как область выделения обозначается вручную, с помощью мыши. Но обрезку изображения можно выполнить более точным образом, с помощью инструмента “Размер холста”. В этом случае конкретно устанавливается размер рамки и ее расположение на картинке. Все, что находится за пределами рамки, будет обрезано.

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

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

Двойным щелчком мыши кликаем на самом слое в палитре, после чего появится окно настроек стилей. Там их много, но включен только один, напротив которого стоит галочка:

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

Отключаю в палитре слоев эффект обводки и выделяю “чистое” изображение льва прямоугольным выделением:

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

Видим, что ширина и высота изображения равны 118 на 95 пикселей. Значит, обрезку по краям необходимо выполнить на величину в 6 пикселей. Толщина обводки ведь равна 3 пикселям, по горизонтали и вертикали она расположена с обеих сторон картинки. Поэтому -

1

118px - 3px*2 = 112px

1

95px - 3px*2 = 89px

Перехожу в меню “Изображение - Размер холста”. Откроется небольшое окно, в котором я введу полученные значения ширины и высоты для рамки. Также проверю, чтобы рамка располагалась по центру изображения:

Жму ОК, чтобы применить изменения. Photoshop выдаст предупреждающее сообщение о том, что новый размер холста меньше оригинала, поэтому часть изображения будет усечена (обрезана). Ну, так мы этого и добиваемся, не правда ли? Соглашаюсь и получаю картинку нашего льва, которая уменьшена на заданную величину.

Чтобы проверить это, снова нажимаю сочетание клавиш Ctrl+A и смотрю на палитру “Инфо”. Точно - картинка имеет те самые размеры, которые необходимы:

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

img {border: 3px solid #fde40b};

Существует еще одна разновидность вырезания с помощью инструмента “Рамка”. Он больше похож на “ручной” способ. Для этого используются направляющие (

1

guidelines

Это же нужно построить аж 8 направляющих, и при этом не промахнуться, точно попасть на границы обводки. Иногда бывает, что обводка нарисована каким-то странным образом, как в данном случае:

Если замерить толщину обводки там, где есть эти непонятные мне разводы, то получиться толщина не 3 пикселя, а 4 пикселя. Несоответствие получается, однако. Ну, а дальше все как обычно - “Crop + Выделить участок изображения + Enter”.

На этом все.

Иногда может возникнуть ситуация, когда необходимо изменить точку отсчета линеек, отображенных в программе Photoshop. Например, имеется шаблон, открытый в Photoshop и отображены линейки “View - Rulers”:

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

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

Когда границы выделения и линии направляющих совпадут, отпускаем мышь:

Чтобы вернуть точку отсчета в первоначальное состояние, достаточно двойного щелчка мыши (как открываются любые папки в Windows) в сером квадратике на пересечении линеек. То есть, откуда была притянута новая точка отсчета:

На этом все.

Программа Photoshop обладает огромными возможностями. За годы ее развития разработчики вложили в нее много всего.

Однако, эта программа расчитана в первую очередь на дизайнеров. И дизайнеров-полиграфистов в первую очередь. Тот факт, что почти все современные дизайны сайтов создаются в Photoshop, я могу объяснить только силой привычки, с одной стороны, и раскрученностью программы, с другой. Под нее написано и создано просто бесчисленное количество книг, матриалов, статей и обучающих видеоматериалов. Настоящим же программным продуктом для создания дизайна сайтов является Adobe Fireworks. Но вот с обучающими материалами по ней, особенно на русском языке, дело обстоит плохо.

Ну, это я немного отвлекся от темы. Тема же данного небольшого обзора состоит в том, что нужно верстальщику в Photoshop. Точнее, какие инструменты ему необходимы в этой программе для своей повседневной работы. И тут я могу “успокоить”. Из безбрежного моря возможностей при верстке сайта кодеру потребуется всего несколько.

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

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

Панели Navigator и Info

Панели “Навигатор” и “Инфо” являются первыми двумя в нашем наборе. Чтобы включить (отобразить) их в рабочем пространстве Photoshop, необходимо перейти в меню “Window” и активировать из выпадающего списка записи “Navigator” и “Info”:

Для чего нужны эти две панели. Панель “Navigator” служит для более удобного просмотра и перемещения по макету. Панель “Info” гораздо более информативна и незаменима. На ней отображаются геометрические размеры элементов макета при их выделении; текущий цвет, выбранный под инструментом “Пипетка” (причем, сразу в двух цветовых системах - RGB и CMYK); текущее положение курсора мыши на макете. В повседневной работе наиболее часто используемой является возможность определения геометрических размеров.

Панели History и Layers

Панели “История” и “Слои” являются наиболее востребованными при резке макета. Включение (активация) производится в том же самом меню “Window”, только необходимо выбрать строки “History” и “Layers”.

Панель “History” незаменима при быстрой навигации по выполненным шагам (действиям). Само название этой панели говорит за себя. Представим, что было выполнено 30-40 операций на макетом. И после этого необходимо вернуть все назад, к первоначальному состоянию. Если производить пошаговый откат всех этих действий, то сколько это займет времени.

С помощью панели “История” это можно выполнить одним щелчком мыши. Достаточно открыть ее и выбрать из списка то действие, к которому необходимо вернуться. В этом смысле панель “History” работает как машина времени. Можно быстро вернуться к любому действию в прошлом:

Панель “Слои” представляет из себя список всех слоев, из которых состоит psd-макет. При нарезке макета на отдельные составляющие с помощью панели “Layers” можно выбрать и затем объединить только те слои, которые отвечают за прорисовку отдельного элемента. Это может логотип, кнопка, рисунок, фоновый рисунок и многое другое. В панели “Слои” также можно группировать слои для более наглядного их отображения и удобной работы.

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

На этом все.

При нарезании графики в готовом макете сайта очень часто приходится выполнять одну и ту же операцию - объединение слоев (Merge Layers).

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

Когда стоит задача вырезать какой-либо объект из макета (скажем, логотип - очень частая операция), сначала необходимо преобразовать его в единое целое - только тогда можно вычленить отдельный рисунок из макета.

Чтобы преобразовать объект в один цельный рисунок, нужно найти в “Палитре слоев” программы Photoshop (в ней наиболее часто выполняется нарезка макета) все слои, которые отвечают за прорисовку данного изображения. Другими словами, из этих слоев состоит рисунок.

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

Результат может быть таким:

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

Теперь осталось только объединить слои. Для этого вновь активируем контекстное меню (правая кнопка мыши) и выбираем в открывшемся списке пункт “Merge Layers”:

В результате все выделенные слои преобразуются в один. Это также будет заметно в “Палитре слоев” Photoshop - вместо нескольких слоев останется только один. Это означает, что операция объединения слоев прошла успешно.

Теперь нужный нам объект является единым целым, который можно легко вырезать.

На этом все.

Недавно столкнулся с такой проблемой. Точнее - проблемой ее можно назвать с большой натяжкой. Для новичка в Photoshop это и может быть трудностью, но не для опытного пользователя. Итак, в чем же заключается та трудность, с которой мне пришлось иметь дело?

Имеется макет сайта в формате PSD. В нем есть несколько фоновых слоев - один основной, второй для контентной части. Для наглядности приведу примеры обоих слоев:

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

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

И приведу изображение самого фона контентной части, представленного одним слоем, продублированным в новый документ:

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

1

background

Однако, даже “на глаз” видно, что фон имеет прозрачность, которую мы также должны передать через стилевые правила CSS.

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

Смотрим в подраздел “Дополнительные параметры” в правой части. В этом подразделе находим параметр (самый верхний) “Непрозрачность заливки”. И видим значение этого параметра - 45%. Это и есть прозрачность фоновой заливки контентной части.

Теперь осталось написать CSS-правила для этого слоя:

.content {
  background:#2b2e28;
  background:rgba(43, 46, 40, .45);
}

В первом правиле

1

background: #2b2e28

Во втором случае

1

background: rgba(43, 46, 40, .45)

1

rgba

1

a

Значение альфа-канала, как мы узнали в Photoshop, равно

1

45%

1

45%

1

.45

1

rgb

1

43, 46, 40

На этом все.