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

Photoshop Original Point Guidelines

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

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

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

Photoshop New Point Guidelines

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

Photoshop Original Point Renew Guidelines

На этом все.


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

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

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

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

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

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

Panels Navigator Info

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

Панели History и Layers

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

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

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

Panels History Layers

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

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

На этом все.


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

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

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

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

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

Menu Colors

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

Selected Layers

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

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

Merge Layers

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

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

На этом все.


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

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

Два фоновых слоя макета в Photoshop

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

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

Эффекты контентного фона в Photoshop

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

Фоновый слой контентной части в Photoshop

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

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

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

Свойства фоновой заливки в Photoshop

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

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

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

В первом правиле background: #2b2e28 мы обошлись значением цвета в формате HEX, который не поддерживает передачу полупрозрачности. Это сделано для браузеров, которые не могут передать полупрозрачность фонового слоя и вообще не понимают такого свойства, как полупрозрачность.

Во втором случае background: rgba(43, 46, 40, .45) цвет задан через значение rgba, где a - это альфа-канал. Второе правило было создано для современных браузеров, которые “понимают”, что такое полупрозрачность и могут ее передать через соответствующие CSS-правила.

Значение альфа-канала, как мы узнали в Photoshop, равно 45%. Поэтому в правилах CSS значение 45% прописываем так - .45. Значение каналов rgb также узнаем в Photoshop (в том же окне, в котором мы брали значение HEX) и прописываем в соответствии с синтаксисом - 43, 46, 40.

На этом все.


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

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

Имеется некий макет, из которого необходимо вырезать логотип (очень частая операция). Первым делом, находим и определяем слои, из которых состоит логотип. Затем объединяем их в один слой и выделяем логотип на макете с помощью инструмента “Выделение”:

Выделенный логотип на шаблоне

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

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

Затем переходим в меню “Image - Trim”:

Trim Options

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

Trim Ready

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

На этом все.