Как подготовить PSD макет к верстке

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

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

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

Шаг 1. Сортировка слоев по папкам

Объединяйте слои в логические группы и не забывайте давать им наименования. К примеру названия для папок: Footer, Header, Content, Sidebar и т.п. Слоям тоже желательно давать названия в соответствии с их содержимым. Так будет проще понять что к чему и за что отвечает. Пример структуры одного из моих макетов:

Это гораздо понятнее, чем всякие Layer 0, Layer 1, Layer 2, Copy Layer 0, Copy 2 Layer 1, ну и все в таком духе.

Шаг 2. Сетка и направляющие

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

Шаг 3. Что вы видите, то и получите

Иными словами, если для текста вы используете шрифт Arial, размер 12px с межстрочным интервалом 14px и без отступов между параграфами, то именно это вы и получите. Если вы не указали цвет для ссылки в контексте, то либо верстальщик сделает это на свое усмотрение, либо вообще не предусмотрит. Предусмотрите все в дизайне: цветы ссылок, поведение элементов при наведении курсора, как рисунки должны обтекаться текстом, как выглядят заголовки (h1 - h6). Вообщем весь стандартный набор.

Шаг 4. Заметки/примечания (Notes)

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

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

Спасибо за добавление статьи в: