Подготовка макета к верстке, или Правила хорошего поведения дизайнера
Современный веб-дизайнер чаще всего не верстает макет сам, а передает его специалисту – верстальщику. При этом он зачастую забывает о простых правилах хорошего тона и не выполняет обязательные шаги по оптимизации макета для верстки, чем вызывает нешуточные приступы гнева у своего напарника!
Не так уж сложно облегчить жизнь верстальщикам!
Для этого достаточно следовать 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 шрифтов? Зато красиво смотрится!
Забыли прикрепить к проекту несистемный шрифт?
Конечно, в данную заметку вошли не все рекомендации по оптимизации макета для верстки, но следование этим простым советам сделает тебя, дизайнер, грамотнее и профессиональнее, а твоего напарника-верстальщика — счастливее.