Несколько вступительных слов
То, что я расскажу в этой статье, основано на моём личном опыте и хорошем отношении к людям, которые делают вёрстку. Полезно это будет, во-первых, веб-дизайнерам, которые занимаются крупными многостраничными сайтами портального типа, во-вторых, любым другим дизайнерам, использующим Photoshop и, в-третьих, заказчикам, которые хотят проконтролировать нанятого работника. Рассказать я, собственно, хочу о правильном распределении и наименовании слоёв в Photoshop при работе над макетами. Не претендую на ноу-хау. Всё это известно и без меня, однако последний макет, который прислали мне на вёрстку, был кашкой и я твёрдо решил опубликовать эту маленькую, но, я думаю, полезную статейку.
Что это вам даст?
Как минимум, чувство порядка и красоты. Между делом, благодарность верстальщика. Превыше всего, сэкономленное время.
Принцип № 1 — Каталогизация
Сайт обычно состоит из множества слоёв, а когда чего-либо собирается очень много, как говорили нам мудрецы, это нужно каталогизировать. Я пошутил, мудрецы этого не говорили, но всё равно. Априори, когда всё разложено по полочкам, мы не тратим лишнее время на поиск нужного, да и глаз это радует. Есть картинка для примера:
Принцип № 2 — Правильный нейминг
Проблема. Представьте, скажем, колоду из 36 карт аккуратно разложенную на столе рубашкой кверху. В срочном порядке надо найти пиковую даму, чтобы та не наделала глупостей. Для того, чтобы это сделать, придётся переворачивать каждую карту. Если бы колода изначально была положена рубашкой книзу, вы бы нашли злодейку мгновенно, окинув пространство взглядом. Ваши неподписанные слои — карты, положенные рубашкой кверху. Если вам кажется, что для определения содержимого слоя хватит превью — вы ошибаетесь. Порой, чтобы найти слой, который содержит в себе нужный элемент, необходимо перебрать несколько других, да и ещё перетащить что-нибудь мышкой. Auto-select требует лишнего времени и не всем привычен, если вы о нём вспомнили.
Обычные названия. Всё надо называть своими именами. Если это топ (top) — пишите «топ», «верх» или «шапка»,— если это «боттом» (bottom) — пишите «бот», «низ», «фут» или «подвал». Слой с тенью от плашки стоит называть «тень» и если таких слоёв будет много — не страшно,— ведь они все будут разложены по разным директориям и не создадут запутанности (см. Принцип № 1). Если сайт содержит в себе, например, 3 колонки, рекомендую называть их «Левая», «Центр» и «Правая». Стоит выработать систему сокращений, например, вместо «Градиент» писать «Град», в место слова «Основа», писать «База» в силу его короткости и так далее.
Знаковые названия. У меня часто возникает потребность рисовать нижнее подчёркивание отдельно (без функции подчёркивания текста), так как я очень люблю экспериментировать с его цветом. Однако слова «Нижнее подчёркивание» и «Underline» слишком длинные, поэтому я просто заменяю их символами.
Оранжевым написан набор с помощью раскладки Ильи Бирмана.
Моя система знаков не претендует на единственно правильную. Вы можете придумать свои обозначения, которые будут понятным вам, однако стоит помнить, что они должны быть понятны и верстальщику. В любом случае, стоит написать ему памятку. Применение Принципа 1 и Принципа 2 должно дать приблизительно такие результаты:
Если ссылки расположены в ряд, то можно объединить все подчёркивания в один слой, хотя это не так удобно, но иногда рентабельно. В этом случае можно назвать слой, например, «_all» или «_все», как вам удобнее.
Принцип № 3 — Цветовое выделение
Чтобы довести макет до крайней степени удобности и понятности, рекомендую использовать цветовое кодирование. Это поможет не столько верстальщику, сколько вам, потому что цветовая ассоциация срабатывает быстрее, чем текстовая. Отсюда более быстрое ориентирование в макете.
Если вам угодно, вы можете использовать мою систему цветового выделения, которую я опишу здесь в качестве примера.
Итак, всего в Photoshop для цветового выделения есть 7 цветов:
Я распределяю их так. Красный — центр или главная колонка\поле. Оранжевый — шапка или то, что на верху. Жёлтый — выделение прорисовывания активных элементов (выпадающего меню, всплывающие окна). Зелёный — правая колонка, если есть. Синий — левая колонка. Фиолетовый — акциденты (заголовки, сложные элементы дизайна). Серый — подвал или то, что внизу.
Заключение
В заключении просто покажу вам примеры макетов с использованием этих принципов:
