Если вы занимаетесь веб-дизайном то вам наверняка приходилось сталкиваться с таким этапом, как отправка PSD дизайн макета на верстку. Кто-то верстает сам, а кто-то заказывает верстку отдельно. В любом случае PSD макет нужно подготовить к верстке. Какие нюансы нужно учесть и обозначить на макете? Привожу пару примеров на одном из своих последних заказов, а именно дизайне сайта для компании Ленд Строй Паркет.

1. Подготовка шрифтов.

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

Что касается самого PSD макета, то в нем следует указать, как будут выглядеть заголовки <h1> <h2> …. <h6>. А также другие виды форматирования текста: маркированный список, цвет текстовой гиперссылки, цвет активной(при наведении курсора на гиперссылку) и цвет гиперссылки по которой уже перешли, оформление цитаты и другие основные элементы форматирования текста. Без указания этой информации, верстальщику додумывать цвет ссылок и прочее придется за вас, хотя это и не его работа в противном случае и вовсе оставит цвета ссылок и форматирование текста по умолчанию и тогда уже готовая работа обретет совершенно другой вид.

[SinglePic not found]

В моем случае использовался стандартный шрифт Times New Roman и необходимости вложения шрифтов у меня нет.

2. Указание отступов и общая разметка сайта.

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

[SinglePic not found]

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

3. Группировка и подготовка слоев.

Теперь наводим порядок в слоях. Каждая деталь на своем слое. Слои добавляющие эффекты или стоящие в режиме наложения можно слить в один слой, при верстке они не понадобятся. Группируем слои, я группирую их по основным блокам  т.е. Шапка, Контент, Меню и т.п.  в группе слои с изображением снизу, текстовые слои сверху.

[SinglePic not found]

4. Нарезка изображений.

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

Выполнив пару простых моих рекомендаций, вы не только облегчите работу верстальщику, а еще и огородите себя от таких проблем как «На картинке одно – на сайте другое» и дальнейших претензий заказчика. Хотя на финальный результат играет не только подготовка макета и уровень верстальщика, но и сам заказчик т.к. в некоторых случаях, заказчик сам предпочитает добавлять статьи сам и советы по оформлению статей напрочь забывает, что приводит достаточно к плачевному результату. На этом все, если у вас есть чем дополнить пост или возникли вопросы, пишите в комментариях.

На заметку: Присоединяйся к новому сообществу дизайнеров и фотошоперов. Велкам =)

Для выполнения этого урока, вам понадобятся:

• Photoshop CS4
• Karbaras’s IES Generator 3 (Скачать)
• Richard Rosenman’s Grid Generator 1.7 Plug-in
• Cybia AlphaWorks Plug-In (Скачать)
• 1589835-nice.IES (Скачать)

Шаг 1 – Настройка цвета.

Создайте новый psd документ, с размерами width 1024px и height 1024px.

Установите Foreground Color – #34240f и Background Color – #825826.

Залейте фон background цветом (сочетание клавиш Alt+Backspace).

Цвет фона

Шаг 2 – настройка фоновой текстуры.

Перейдите –  Filter>Render>Fibers и установите значения – Variance: 8 – Strength: 47. Нажмите кнопку Render несколько раз, пока не добьетесь равномерного распределения текстуры.

Настройки фильтра Fibers

Когда закончите выбирать текстуру, нажмите ОК. Результат должен быть примерно такой

Результат фильтра Fibres

Теперь зайдите – Filter>Distort>Glass и установите значения – Distorition: 15 – Smoothnes: 1 – Texture: Frosted и Scaling: 100% и нажмите OK.

Настройки фильтра Glass

Переименуйте слой в «corkboard»

Промежуточный результат

Текстура фона готова. Сохраните получившийся результат в файл «texture.psd» и не закрывайте его.

Шаг 3 – Настройка главного макета.

Создайте новый документ с параметрами hight: 300px – width: 500px. Размеры вы можете выбрать по вкусу, я указал лишь те, которые будут использоватся в этом уроке. Сохраните получившийся документ в «main_layout.psd«.

Переименуйте слой «Background» в «floor_color» и залейте его цветом #1a211c

Промежуточный результат

Шаг 4 – Совмещение текстуры и главного макета.

Вернитесь в документ «texture.psd«.

Кликните правой кнопкой мыши на слое «corkboard» и выберите пункт «Duplicate Layer«.

Дублирование слоя corkboard

В появившемся диалоговоем окне введите «corkboard» и внизу выберите «main_layout.psd»  в качестве конечного документа.

Дублирование слоя corkboard

Вернитесь в документ «main_layout.psd«. В списке слоев, слой «corckboard» должен оказаться над слоем «floor_color«.

Промежуточный результат

Шаг 5 – Трансформация и изменение текстуры corckboard.

Выберите слой «corkboard»  в списке слоев.

Нажмите сочетание клавиш Ctrl+T или выберите меню Edit>Transform>Scale.

В настройках трансформации нажмите на значок «Maintain Aspect Ratio» (сохранять пропорции) (значок я пометил красной стрелкой на рисунке ниже).

Введите значение Width: 75% и нажмите клавишу Enter чтобы завершить трансформацию.

Нажатие значка «Maintain Aspect Ratio» позволяет нам быть уверенными в том, что изображение трансформируется одинаково со всех сторон.

Значок Maintain Aspect Ratio

После трансформации, слой «corckboard»  может «съехать». Воспользуйтесь Move Tool (Клавиша V) и перетащите слой так, чтобы он занимал всю площадь документа.

Промежуточный результат

Шаг 6 – Создание пола и корректирование текстуры «corckboard».

На слое «corkboard» создайте выделение длинной 500px и высотой 230px,  начиная сверху.

Выделение на слое corckboard

Нажмите кнопку «Add Layer Mask» в списке слоев. Это создаст маску для слоя и откроет не выделенную выделенную область.

Применение маски слоя

С сочетании с полом текстура слоя «corckboard»  выглядит немного перенысыщенной. Это можно исправить с помощью настройки слоя.

Выделите слой «corckboard» и нажмите на значок «Create new fill abjustment layer» и в выпадающем списке выберите «HueSaturation«.

HueSaturation

В настройках введните значения Hue: -6 Saturation: – 7 и Lightness: -8.

Чтобы наши корректировки цвета влияли только на слой «corckboard«, в настройках «HueSaturation» нажмите на иконку с двумя пересекающимися кружочками.

Если вы все сделали правильно, то возле корректирующего слоя в списке слоев – появится стрелочка, а слой «corckboard» станет подчеркнутым.

Результат применения настроек HueSaturation

Шаг 7 – Добавление тени под текстуру.

Создайте новый слой над слоем «floor_color» и назовите его «corck_shadow«. (Кнопка создания нового слоя отмечена красной стрелкой на рисунке ниже).

Кнопка создания нового слоя

На слое corck_shadow создайте новое прямогульное выделения (Клавиша M) длина выделения 500px, высота 10px.

Переместите выделение под конец слоя «corckboard» (Выделение можно перемещать зажав клавишу Space).

Измените цвет foreground color на черный, просто нажав клавишу D (сбросить цвета).

Выберите Gradinet Tools ( G ) – в настройках Gradient Tool выберите линейный градиент от черного к прозрачному.

Настройка градиента

На слое «corck_shadow» не снимая выделения, примените Gradient Tool, проведя линию сверху вниз. (При проведении градиента удерживайте клавишу Shift чтобы создать идеально ровный градиент).

После того, как вы зкончите с Gradient Tool, нажмите сочетание клавиш Ctrl+D (снять выделение).

Применение градиента

Установите прозрачность слоя «corck_shadow» на 60%. Вы можете уменьшить прозрачность слоя, выделив его в списке слоев и поменяв параметр Opacity.

Прозрачность слоя

Шаг 8 – Добавление отсвета к текстуре.

Дублируйте слой «corck_shadow«. Чтобы дублировать слой, выберите нужный вам слой и нажмите сочетание клавиш Ctrl+J (Дублировать слой).

Получившийся слой перетащите в самых верх в списке слоев. Переименуйте получившийся слой в «lip«.

Получившийся слой "lip"

Выберите слой «lip» и нажмите сочетание клавиш Ctrl+I (Инвентировать цвета) у вас должен получиться белый градиент.

Вид слоя lip

Отразите слой по вертикали. Выберите в меню Edit>Transform>Flip vertical.

Edit>Transform>Flip Vertical

Перетащите слой «lip» на 9px выше (чтобы перетащить слой на 9px выше, просто нажмите 9 раз сочетание клавиш Ctrl+Стрелка вверх).

Установите вид смешивания слоя на «Overlay» и прозрачность слоя на 50%.

Промежуточный результат

Шаг 9 – Добавление тени полу.

Создайте новый слой над слоем «floor_color» и назовите его «floor_shadow«.

На слое «floor_shadow» инструментом Gradient Tool создайте ровный (от черного к прозрачному) градиент примерно на три четверти пола.

Установите прозрачность слоя «floor_shadow» на 50 %.

Применение Градиента

Шаг 10 – Добавление текстуры доски.

Теперь мы добавим текстуру доски. Создайте новый слой над слоем «floor_color» и назовите его «floorboards«.

Залейте слой черным цветом.

Слой floorboards

Теперь мы применим Grid Generator Plug-in от Richard Rosenman. На слое «floorboards»  перейдите в меню Filter>Richard Rosenman>Grid Generator.

Настройте плагин, как показано на картинке ниже

Плагин Grid Generator

Вот результат применения Grid Generator.

Промежуточный результат

Шаг 11 – Добавление перспективы и света к полу.

Выберите слой «floorboards» и перейдите в Edit>Transform>Perspective.  Перетяните опорные точки как указано на картинке ниже. Прошу заметить, что опорный точки выходят за пределы рисунка. После того как перетащите опорные точки, нажмите клавишу Enter чтобы завершить трансформацию.

Применение перспективы

Установите тип смешивания слоя «floorboards» на Multiply и уменьшите прозрачность слоя до 30%.

Промежуточный результат

Дублируйте слой «floorboard» (сочетание клавиш Ctrl+J) .

Переименуйте слой в «floorboard_hightlight» .

Переместите слой «floorboard_hightlight» под слой «floorboard«.

Инвентируйте цвета слоя (сочетание клавиш Ctrl+I)

Установите тип смешивания слоя на Overlay и прозрачность слоя 30%.

Сдвиньте слой «floor_hightlight» на 1 px вправо (просто 1 раз нажмите Стрелку вправо).

Промежуточный результат

Шаг 12 – Добавление света к полу.

Создайте новый слой и назовите его «floor_hightlight«.

Установите foreground color на белый цвет (или же просто нажмите клавишу X).

Выберите Gradient Tool. В настройках Gradient Tool установите градиент от белого к прозрачному и кликните на значок Radial Gradient.

Применение радиального градиента

Создайте градиент от центра до верха изображения, как показано на рисунке ниже.

Применение радиального градиента

Нажмите сочетание клавиш Ctrl+T и переместите опорные точки как показано на рисунке ниже. (При перемещении боковой опорной точки удерживайте зажатыми кнопки Shift+Alt это позволит трансформировать слой одинакого с двух сторон).

Трансформация градиента

Переместисте слой «floor_hightlight» в списке слоев над слоем «floorshadow«.

Установите тип смешивания слоя на Overlay и  прозрачность слоя 50%.

Промежуточный результат

Шаг 12 – Создаем «потолок».

Создайте новый слой и переименуйте его в «light_housing«.

Перетащите слой на на первое место в списке слоев.

Создайте в самом верху документа прямоугольное выделение (клавиша M) высотой 10px и длиной 500px.

Выберите цвет #17150e и залейте им выделение нажав сочетание клавиш Alt+Backspace.

Промежуточный результат

Теперь добавим тени нашему «потолку». Дублируйте слой lip и переименуйте получившийся слой в «housing_hightlight«.

Переместите слой «housing_hightlight» под слоем «light_housing«.

Используя Move Tool (клавиша V) состыкуйте тень с нашим «потолком».

Уменьшите высоту тени вдвое используя сочетание клавиш Ctrl+T (Трансформация).

Трансформация тени

Шаг 13 –  Доработка тени потолка.

Выберите слой «housing_hightlight» и дублируйте его.

Переименуйте слой в «housing_shadow«.

Инвертируйте цвета с помощью клавиш Ctrl+I

Отразите слой по вертикали (Edit>Transform>Flip Vertical).

Сдвиньте слой на 1px вниз (Нажмите 1 раз стрелку вниз).

Установите прозрачность слоя 80%.

Промежуточный результат

Шаг 14 – Создаем свет.

Запустите скаченый IES Generator.  Нажмите кнопку Load и загрузите скаченый файл 1589835-nice.IES.  (Впринципе вы можете попробовать создать свет сами и получить другой результат, порядок действий никак не изменится, если вы будете использовать свой варианта света).

IES Generator

Установите значения в настройках Brightness: 1.11 и Away from wall: 1.11

Настройки IES Generator

Шаг 15 – Обрабатываем свет в фотошопе.

Поскольку IES генератор не может работать в связке с фотшопом. Мы будем вытравлять свет следующим способом:

Сделайте скриншот рабочего стола.

Создайте или откройте уже существующий документ в Photoshop.

Нажмите сочетание клавиш Ctrl+V чтобы вставить скриншот.

Вставляем скриншот

Выделите область со светом, как показано на рисунке.

Выделение области света

Перейдите Select>Inverce – чтобы инвертировать выделение.

Залейте получившееся выделение черным цветом.

Промежуточный результат

Шаг 16 – Обтравка света и перенос его в нашу работу.

На слое с нашим светом, перейдите в Filter>Cybia>Alphaworks и в настройках в выпадающем меню выберите LINEAR BlackOut – remove from BW lineart. Нажмите ОК.

Результат выполнения фильтра

Нажмите сочетание клавиш Crl+A (Выделить все) и копируйте слой в наш документ «main_layout.psd«.

Переименуйте получишвийся слой в «ies_light«.

Переместите слой «ies_light» под слоем «lip«.

Промежуточный результат

Переместите наш свет на 6px выше нашего «потолка» (Переместите свет к началу потолка и нажмите 6 раз стрелку вверх).

Установите режим смешивания слоя на Overlay.

Шаг 17 – Усиление света.

Дублируйте слой «ies_light» 2 раза.

Установите прозрачность верхней копии «ies_light copy 2» на 50%.

Вид слоев

Выделите в списке слоев 3 слоя «ies_light«, «ies_light copy» и «ies_light copy 2«.

Нажмите сочетание клавиш Ctrl+G (Сгруппировать слои) в диалоговом окне введите называние группы Light.

На рисунке ниже показан порядок действий для группировки слоев.

Порядок действий

Сгруппированные слои

Шаг 18 – Создаем объем света.

Выделите все слои в группе «Light» и снова сгруппируйте их. Переименовывать группу не нужно.

Новая группа

Выберите все слои в группе «Groupe 1» и добавте к ним маску, маска должна появится перед названием группы.

Маска для группы слоев

Создайте градиент как описано в шаге 6 и примените его примерно как показано на рисунке ниже.

Применение градиента к группе

Шаг 19 – Добавляем отсвет к полу.

Сверните группу «Gropue 1«.

Дублируйте слой «»floor_hightlight» (выделить слой и нажать Ctrl+J).

Добавте получившийся слой «floor_hightlight copy»  в грппу «Light» (Просто перетяните в списке слоев, слой «floor_hightlight copy» на название группы «light«).

Перенос слоя в группу

Трансформируйте слой «floor_highlight copy» примерно на 50% своей текущей ширины.

Переименуйте слов «floor_highlight copy» в «spot«.

Установите прозрачность слоя на 70%.

Трансформация слоя spot

Шаг 20 –  Дублируем свет.

Сверните группу «Light» и перетащите ее на иконку создания нового слоя в самом низу списка слоев.

Дублирование слоя

Дубликат группы «Light» должен появится выше оригинальной группы.

Повторите процедуру еще раз и создайте еще один дубликат группы. В итоге у вас должно получиться 3 группы «light«, «light copy» и «light copy 2«.

Промежуточный результат

Шаг 21 – Распределяем свет.

Выберите группу «light copy 2» и переместите ее на 140px влево (Зажмите клавишу Shift и нажмите 14 раз стрелку влево (удержание клавиши Shift позволяет передвигать слои на 10px при одном нажатии)).

Повторите процедуру с группой «light_copy» только теперь переместите слои вправо.

Перемещение слоев

Переименуйте получившиеся группы. «light» в «light center«, «light_copy» в «light_right» и «light_copy2» в «light_right«.

Промежуточный результат

Шаг 22 – Добавляем отсвет к потолку.

Выделите наши 3 группы и дублируйте их (перетяните на значок создания нового слоя).

Выделите получившиеся 3 группы и нажмите сочетание клавиш Ctrl+E - все 3 дублированные группы превратятся в 1 слой.

Переместите получившийся слой в списке слоев над слоем «housing_shadow«.

Переименуйте слой в «spill«.

Перейдите в Edit>Transform>Flip Vertical (отразите слой по вертикали).

Отражение слоя по вертикали

Поднимите слой на 230px выше (зажмите клавишу shift и нажмите стрелку вверх 23 раза).

Перемещение слоя

Создайте прямоугольное выделение шириной 500px и высотой 10px. Выделение должно совпадать с нашим «потолком».

Создайте маску для слоя «spill» – это ограничит его распространение по нашему рисунку.

Установите режим смешивая слоя на Overlay.

Маска слоя spill

Шаг 23 – Акцентрируем свет (необязательный шаг).

Теперь мы затемним области стены между нашими источниками света, это придаст акцентрированости свету.

В списке слоев выберите слой «lip» и создайте под ним новый слой.

Переименуйте новый слой в «top_shadow«.

Выберите Gradient tool от черного к прозрачному цвету и примените градиент примерно как показано на рисунке ниже.

Применение градиента к слою top_shadow

Вновь дублируйте 3 группы как описано в шагах выше и «склейте» их между собой т.е. приведите к одному слою (эту процедуру мы уже выполняли).

Зажмите клавишу Ctrl и нажмите на получившемся слое, тем самым мы выделили наш слой.

Перейдите в Select>Inverce и инвертируйте выделение.

Не снимая выделения, в списке слоев выберите слой «top_shadow«.

Создайте маску слоя.

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

Маска слоя top_shadow

Удалите слой который мы получили от «склейки» групп, он нам больше не понадобится.

Шаг 24 – Добавляем текст (Финальный шаг).

Теперь вы можете добавить свой текст по вкусу .

Автор использовал 2 шрифта Arista 2.0 light и  DIN Mittelschrift (оба шрифта можно скачать в свободном доступе).

Переместите ваши слои с текстом в самых верх списка слоев.

Слои с текстом

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

Применение стилей к слою

Автор использовал следующие стили

Drop shadow:

Drop shadow

Inner shadow:

Inner shadow

Color overlay:

Color Overlay

Финальный результат автора :

Финальный результат

Собственно ссылка на оригинал урока –  How to Create a Realistic IES Lighting Effect in Photoshop

Фуф, вот и перевел (ушло на перевод 2 дня), извиняюсь за косяки в переводе т.к. переводил не слово в слово, а просто описывал порядок действий. Если понравился урок, напишите в комментах «спасибо» – лучшая награда для меня за проделанный труд. Если есть вопросы по уроку – спрашивайте, с удовольствием отвечу.