Подготовка PSD макета сайта

  1. Главная
  2. Блог
  3. Дизайн
  4. PSD макет для сайта

Разработка сайта это командная, многоэтапная работа. Один из первых, и наиболее важный, этап этой работы — это дизайн. После того как дизайн утвержден с заказчиком, нужно приступать к верстке psd макета. Поскольку работа дизайнера на этом практически закончена, и он на радостях передает свое творение верстальщику, в виде psd макетов, и смело идет отдыхать. Очень часто он не выполняет обязательные шаги по оптимизации макета для верстки. Это заставляет верстальщика делать двойную работу, затрачивая большее количество времени. Избежать подобных ситуаций не так уж сложно — достаточно соблюдать несколько простых правил:

1. Дизайн сайта — это не полиграфия

Дизайн сайта - это не полиграфия

  • Предоставляй макет в традиционном формате (.psd) в противном случае сайт будет отличаться от макета.
  • Использую цветовое пространство rgb. Именно оно используется по умолчанию в веб. CMYK используется в полиграфии и для web никак не подходит.
  • Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие величины.

2. Наведи порядок в слоях

Порядок в слоях psd

  • Группируй слои по папкам (смысловым блокам) с осмысленными названиями, а не “Группа 3 copy”. Тоже самое касается всех слоев. (Шапка, контент, подвал и т.п.) Придерживайся иерархии сверху в низ и слева на право.
  • Удаляй все не нужные слои. Верстальщик может это сверстать.

3. Четкие размеры и отступы

Размеры и отступы

  • Используй родные направляющие photoshop или готовые модульные сетки чтобы точно определить расположение элемента на странице.
  • Осознано выбирай пропорции и размеры объектов и делай их кратными, например, 1000px, а не 998px.
  • Размер шрифта должен быть целыми числами без дробей.
  • Никогда принудительно не растягивайте шрифт.

4. Проблемные моменты для верстальщика

 нельзя использовать способы наложения

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

5. Обязательные элементы макета

Обязательные элементы макета

  • Показывай состояния всех интерактивных элементов: нормальное, активное, не активное, при наведении, при клике и т.д.
  • Показывай все оформления текста: заголовки, списки, таблицы, контент и т. д.

6. Исходные материалы макета

Исходные материалы

  • Прикрепляй в отделенную папку все изображения в исходном качестве и дополнительные материалы, которые используются в макете.
  • Все не стандартные шрифты копируй в туже папку. У верстальщика может не быть этого красивого шрифта. И на его поиски может уйти большое количество времени.
  • Давай пояснения, к элементам, которые могут вызвать вопросы. Если есть особые задумки, которые не так просто показать в макете, то запиши их в отдельный текстовый файл. К тому моменту, когда верстальщик доберется к этому элементу макета, ты и сам можешь забыть, чего хотел, и придется вновь тратить время на то что бы вспомнить и объяснить идею верстальщику.

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


Понравилось? Репост!

Читайте также

Флаундер
Хм, а вы не могли бы прикрепить пример такого макета?
Никита
Я только сейчас понял, что мне усложняли работу) Часто не показывают состояние активных, неактивных кнопок. Списки и заголовки, пояснения к элементам попадают в эту же категорию) Согласен, это бы значительно ускорило работу!
Namik
Какую сетку сейчас лучше использовать? Актуальна ли сейчас 960 Grid System?
Максим Нарижный
Выбор сетки зависит от того как планируется верстать макет, тут либо придется верстальщику подстраиваться, либо макет переделывать под верстальщика. Лучше сразу договориться, это сэкономит время работы с проектом. 960 Grid использовал довольно долго, но сейчас по просьбе верстальщика перешел на bootstrap. Вот psd с сеткой под bootstrap
Павел
К сожалению сейчас еще можно встретить не добросовестных дизайнеров) В следствии чего возникает множество неудобств))
Денис
Поэтому очень хорошо, когда есть и свой дизайнер, и верстальщик, которые могут согласовывать подобные нюансы в работе, чтобы не возникало неприятных моментов.
Елена
А еще можно испльзовать функцию Generate, это очень сильно ускорит работу https://www.youtube.com/watch?v=Eo6bWFJnWow&feature=youtu.be