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

Не так уж сложно облегчить жизнь верстальщикам!
Для этого достаточно следовать 11 правилам подготовки макета.

Правила эти звучат так:

  • Группируйте слои по папкам и придерживайтесь иерархии в макете.
  • Давайте слоям осмысленные названия.
  • Удаляйте все ненужные слои.
  • Используйте сетку и направляющие.
  • Давайте пояснения к макету, используя инструмент «Notes».
  • Для элементов, у которых может быть несколько состояний, отрисовывайте все варианты этих состояний.
  • Не присылайте верстальщику макет, где какой-либо эффект достигается с помощью режимов наложения.
  • Фигуры должны быть отрисованы в векторе.
  • Давайте осмысленные названия файлам.
  • Прикрепляйте к файлу PSD также дополнительные материалы и исходники картинок, использованных в макете.
  • Прикрепляйте нестандартные шрифты, использованные в макете.

А теперь, друг, пришло время познакомить тебя с двумя персонажами:

Хороший, годный дизайнер.
Он всегда следует перечисленным правилам и заботится о тебе, верстальщик.
Запомни – это твой

БРО

Этот ленивый юноша никогда не заботится о том, кому придется работать с его макетами.
Он никогда не следует правилам.
Запомни – этот парень

НЕ БРО

1. Группируйте слои по папкам и придерживайтесь иерархии в макете

Логические блоки сайта я объединяю в группы с соответствующими названиями. Каждая группа слоев располагается в соответствии с ее положением на макете – так моему верстальщику будет проще сориентироваться.

Group 22 Copy 6. Что не ясно? Это же шапка сайта!

А эти две Group 45 и Group 43 в разных местах документа – футер!

Панель слоев с правильной структурой и группировкой

2. Давайте слоям осмысленные названия

Я всегда даю слоям осмысленные названия.
Иконку для поля e-mail я назову “e-mail icon”. Так верстальщик сразу поймет, что это за слой.

Layer X, Shape Copy и Group N? Кликни с «контролом» и ты легко найдешь нужный слой.

Их 200? Кликни 200 раз!

Достаточно очевидно, в чем проще разобраться, не так ли?

3. Удаляйте все ненужные слои

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

Если я не вижу слоя, значит, он не нужен в макете, и те три его копии тоже.

Нет лишних слоев, нет лишних проблем

4. Используйте сетку и направляющие

Я использую сетку для Фотошопа от css-фреймворка "960 grid system".

Сделал все на глаз — не сомневайся, что ровно.

Использование встроенных направляющих Фотошопа или сетки "960 Grid System".
Верстальщику станет очень грустно, если ему придется бороться со скачущими блоками контента.

5. Давайте пояснения к макету, используя инструмент «Notes»

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

Например, радиус скругления уголков или цвет ссылки при наведении или после ее посещения.

Разве не ясно, что с этой синей кнопкой при наведении будет очень красиво выглядеть красный фон? И уголки тут 3 пиксела, да… Или 5, не важно! Пробуй перебором!

6. Для элементов, у которых может быть несколько состояний, отрисовывайте все варианты этих состояний

У каждой кнопки, ссылки или поля для ввода в макете будет по три состояния – группы или слои с соответствующими названиями.

Одна серая кнопка, одна синяя ссылка…
Показывать пользователю наведение? Не, не слышал.

7. Не присылайте верстальщику макет, где какой-либо эффект достигается с помощью режимов наложения

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

Как красиво смотрится эта тень в режиме Overlay! И два логотипа над ней, правда они цветные, а нам нужны черно-белые… Не беда! Luminosity на оба слоя!

Хитро устроенная ловушка для верстальщика

8. Фигуры должны быть отрисованы в векторе

Все нестандартные и «резиновые» элементы в макете я сохраняю в векторном формате — в любой момент может понадобиться изменить их размер.

Склею и растрирую все фигуры, нужно будет изменить размер — отрисую заново!

При изменении ширины растрированной кнопки появились искажения на ее уголках

9. Давайте осмысленные названия файлам

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

Latest2.psd новее New3.psd, а Newest4.psd новее Lastes(Copy).psd. Или наоборот? Ну, разберешься!

Называйте файлы правильно, неужели это так сложно?

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

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

Склеиваю узор и фон под ним. Они будут верстаться отдельными слоями? Узор простой — верстальщик легко сможет повторить. Не сможет? Значит, будет верстать одним слоем.

11. Прикрепляйте нестандартные шрифты, использованные в макете

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

Зачем добавлять лишние файлы к макету? Сейчас любой скачает нужный шрифт из интернета за 10 минут. 7 шрифтов? Зато красиво смотрится!

Забыли прикрепить к проекту несистемный шрифт?

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