Работа с PSD-макетом

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

PSD-макет — это дизайн сайта, состоящий из самостоятельных элементов — слоев. Обычно такие макеты создаются с помощью программы Adobe Photoshop.

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

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

Панель со слоями

В данной панели находятся все слои, из которых состоит дизайн.

Что мы можем понять, взглянув на этот пример. Во-первых, дизайн состоит из нескольких смысловых разделов, такик как "Blog". Во-вторых, секция «Blog » состоит из текстовых слоев, изображения для поста и группирированных слоев. Теперь детальнее рассмотрим слои.

Текстовый слой обозначается символом «Т». Если рядом с ним расположен знак предупреждения, то это показывает, что блок имеет нестандартный шрифт, который нужно установить. А в дальнейшем подключить, используя сайт Google Fonts.

Слой с изображением новости включает в себя картинку, которую верстальщику требуется вырезать и сохранить в формате JPG.

Панель инструментов

При работе с макетом вам также потребуется панель с инструментами.

Для вас я отметил основные инструменты, которые необходимы при работе. Теперь рассмотрим их подробнее.

“Рамка”

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

“Пипетка”

Этот инструмент необходим для захвата цвета. Выделив инструмент «пипетка» и нажав на любой элемент макета, его цвет отобразится в инструменте “Активный цвет”. Нажав на данный инструмент, появится окно.

В данном окне вы можете узнать цвет в формате RGB или в шестнадцатеричном формате.

“Заливка”

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

“Горизонтальный текст”

При работе с текстовыми слоями вам потребуется этот инструмент. Для этого нужно выделить нужный текстовый слой и выбрать инструмент. Сверху отобразятся параметры шрифта.

“Рука”

При работе с макетом часто приходится перемещаться по нему при увеличенном масштабе. Это будет удобнее сделать благодаря инструменту “Рука”.

“Масштаб”

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

Мы рассмотрели основные инструменты в панели, но также есть дополнительные, которые можно использовать. Чтобы их увидеть, нужно нажать правой кнопкой мыши по иконкам. Мы рассмотрим 2 дополнительных инструмента — “Линейка” и “Раскройка”.

“Линейка”

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

“Раскройка”

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

Мы рассмотрели инструменты, и теперь мы можем приступить к работе. Но, для начала нам требуется настроить программу.

Требуемые настройки

Первым, что мы сделаем - установим флажок "Авто-выбор" (Auto-Select) в верхнем левом углу.

Теперь при клике на визуальном представлении в панели слоев откроется соответствующий слой. Во-вторых, мы настроим единицы измерения. Для этого нужно выбрать пункт меню "Редактирование" (Edit) и в пункте "Настройки" (Preferences) выбрать "Единицы измерения и линейки" (Units&Rulers). Появится окно, в котором вам требуется установить параметры.

Горячие клавиши

ctrl + TAB — переключение вкладок; Alt + колесико — увеличение/уменьшение масштаба (инструмент “Масштаб”); Зажатый пробел — перетаскивание (инструмент “Рука”); ctrl + S — сохранить; ctrl + Z — отмена; ctrl + alt + Z — шаг назад (многократный); ctrl + shift + Z — шаг вперед (многократный); ctrl + shift + Alt + S — сохранить изображение для Web; M — инструмент “Прямоугольная область”; ctrl + D — отмена выделения; I — инструмент “Пипетка”; C — инструмент “Рамка”; Shift + C — инструмент “Раскройка”; T — инструмент “Горизонтальный текст”.

Работа с изображениями

Теперь мы вернемся к нашему макету и продолжим с ним работу. У нас есть изображение "новости". Для верстки, нам нужно сохранить его в отдельном JPG файле. Для этого делаем следующие действия.

Первое, выберем слой “notebook3_1200x800” и нажмем правой кнопкой мыши. Появится контекстное меню.

В данном меню выбираем "Создать дубликат слоя" (Duplicate layer) и нам откроется окно, в котором нужно установить следующие параметры.

У нас сохранится изображение в новом документе. Но размеры документа будут равны размерам макета, что для нас излишне. Теперь нам требуется обрезать лишнее пространство вокруг картинки. Для этого в меню выбираем пункт "Изображение" (Image), а в нем "Тримминг" (Trim).

Далее появляется окно, в котором нужно выбрать следующие параметры.

Все готово! Теперь нам нужно сохранить изображение для Web. Для этого нажимаем сочетание клавиш ctrl + shift + Alt + S.

Я рассмотрю два случая, когда нам нужно сохранить изображение в формате PNG и JPG.

Сохранение в формате PNG

После нажатия, у нас откроется окно с настройками. Для вас я уже установил нужные значения.

Нам нужно установить формат изображения PNG-24. Далее в поле "Метаданные" (metadata) установить значение "Не показывать" (None). Это необходимо для того, чтобы в изображении не сохранилась метаинформация.

Сохранение в формате JPG

Для того чтобы сохранить изображение в формате JPG, в поле "Формат" нужно выбрать "Высокое качество JPEG" (JPEG High). Также, необходимо установить параметры "Качество" и "Метаданные", как показано на изображении.