Макеты сайтов для верстки


Разработка сайта — это командная, многоэтапная работа. Однако, часто дизайнер не выполняет обязательные шаги по оптимизации макета  сайта для верстки (рис.1). Это заставляет верстальщика делать двойную работу, затрачивать большее количество времени, неэффективно его тратить и тихо вас ненавидеть в результате.

Как подготовить макет сайта для верстки, для верстальщика

Рис. 1 Разработка сайта

На самом деле, с вами становится не приятно работать, когда вы скидываете то, что получилось, какой-то рабочий сырой вариант, понятный только вам. Очень важно правильно готовить макеты сайта для верстки, это просто даже вопрос уважения к вашим коллегам.

10 советов по подготовке макета сайта для верстки.

1. Соблюдай порядок в слоях

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

Как подготовить макет сайта для верстки, для верстальщика

Рис.2  Слои

2. Объект из нескольких слоев  —  это папка

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

Кстати, рекомендую посмотреть прямо сейчас:

Например, если кнопка состоит из иконки и подписи  —  их стоит объединить в папку Button. Меню, которое состоит из пары таких кнопок, становится группой Menu. Фон из нескольких слоев  —  папка Background.

Принцип ясен: логика группировки папок должна совпадать со структурой вашего макета. Это обязательный пункт оптимизации макета для верстки.

Как подготовить макет сайта для верстки, для верстальщика

Рис.3 Группировка

3. Версии — это тоже отдельная папка

Часто внутри файла с макетом сайта для верстки хранится несколько версий элементов (вы экспериментируете с цветами,шрифтами и т.д.), например фоны для кнопки разного цвета.

Чтобы вы сами же потом не забыли, что пачка непонятных скрытых слоев —  это версии того самого фона, просто правильно сгруппируйте их.

Самое простое  —  сделать папку Background и положить туда все версии ( какие-то могут быть включены, какие-то отключены). В рис.4 мы видим два варианта: правильный (папка Background) и неправильный (просто делаем копипасты, например, кнопок с разными цветами). Так получается гораздо больше слоев, соответственно, больше путаницы и неразберихи.

Как подготовить макет сайта для верстки, для верстальщика

Рис.4 Версии  

4. Открывай замки

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

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

Как подготовить макет сайта для верстки, для верстальщика

Рис. 5 Замки

5. Используй Layer Styles

Много дизайнеров-старичков не используют Layer Styles и все, казалось бы, простые вещи делают отдельными растровыми слоями. Это приносит адские страдания всем, кто затем хочет изменить объект. Во втором примере (рис.6)  есть слой с градиентом, цветом, бликом и это все отдельные слои. Это неправильный вариант. Правильно в процессе подготовки макета к верстке делать один слой и дальше уже на него накладывать эффекты. Затем вам будет гораздо проще эти эффекты менять, чем возиться с растовыми слоями.

Как подготовить макет сайта для верстки, для верстальщика

Рис.6 Layer Styles В презентации другая картинка (соскриншотить не получилось — накладывается видео с веб-камеры)

6. Удали лишние направляющие

Направляющие помогают нам жить. Можно быстро смастерить сетку или просто что-то выровнять. Но зачастую мы используем их разово, то есть выровняли объект и забыли, а направляющие между тем копятся и копятся.

Если вы не делаете направляющими аккуратную сетку на весь проект, то старайтесь удалять их сразу после использования. И уж точно удалите лишне, когда готовите макет сайта к верстке.

Как подготовить макет сайта для верстки, для верстальщика

Рис.7 Сетка

7. Удали лишние слои

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

Как подготовить макет сайта для верстки, для верстальщика

Рис. 8 Слои Тоже другой рисунок в презентации

8. Быстрое открытие папок

[⌥] click — быстро открыть/закрыть папку.

Нажмите на значок закрытия корневой папки с зажатым альтом, и все внутренние папки аккуратно схлопнутся автоматически.

Мы уже говорили про группировку и тут есть маленький секрет, когда вы нажимаете на клавишу Alt и кликаете в папку, то открываются сразу все папки в ней. Не нужно каждую папку прокликивать.

Как подготовить макет сайта для верстки, для верстальщика

Рис.9 Открытие папок клавишой Alt

9. Включи удобный вид слоев

Это Layer Panel Options. Здесь следует установить (рис.10).

  • Thumbnail Contents. Эта позволяет показывать в превью слоя не весь слой целиком, а только то, что есть в нем.
  • Expand New Effects. Отжав эту галочку, вы сможете автоматом схлопывать все добавленные стили слоя.
  • Add Copy. Отжав эту галочку вы уберете все те “Copy 230″ в названиях слоев. Чистота исходника разом вырастет на 30%. Обязательно это делайте при подготовке макета сайта на верстку.

Можно настроить прямо как на картинке и так работать.

Как подготовить макет сайта для верстки, для верстальщика

Рис. 10 Вид слоев

10. Хоткеи для стилей слоя

Как подготовить макет сайта для верстки, для верстальщика

Рис. 11 Хоткеи

Мы уже говорили про стили слоя. Мы можем посмотреть на примере рис.11: зеленый квадрат, у него есть обводка, стиль, тень. Мы можем быстро скопировать еще на 5 квадратов эти элементы (см. рис.12)

Как подготовить макет сайта для верстки, для верстальщика

Рис. 12 Горячие клавиши

Идеальные размеры макета дизайна сайта

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

Чтобы с вами было приятно и хорошо работать — обязательно соблюдайте эти правила подготовки макета сайта для верстки. Успехов!

Добавить комментарий