Блог

Записки настоящих Мужиков с уральских гор

Подготовка psd-файла для верстки или «что такое хорошо и что такое плохо»

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

1. «Поиграйте со шрифтами»

Практически каждый дизайнер, слышал фразу: «Поиграйте со шрифтами».

Визуальный результат такой «игры», дает положительный результат на нарисованном макете, но многие забывают, о том что сглаживание шрифтов в psd документе и на веб-странице происходит по-разному. Поэтому прежде чем утверждать тот или иной шрифт, стоит проверить его в веб-интерфейсе.

Отлично! Вы проверили шрифт и решили, что он вам идеально подходит. Но при передаче своего макета на верстку, НЕ ЗАБЫВАЙТЕ вместе с psd`шником передавать и шрифты, которые вы выбрали.

2. Цвет текста

Вы уже определились с концепцией, выбрали цветовую схему и подошли к раскрашиванию текстов. Вам необходимо взять на заметку несколько нюансов:

  • Старайтесь избегать черного цвета, используйте оттенки черного, например: #111, #333
  • Выберете 3-4 цвета, которыми вы будете пользоваться. Большое обилие цветов смотрится весьма непрезентабельно, сайт с выдержанной цветовой схемой смотрится более лаконично.
  • При изменении цвета текста меняйте его с помощью свойства «Цвет» инструмента «Горизонтальный текст» . Не стоит менять цвет через fx-свойства («Наложение цвета»). Это немного упростит жизнь верстальщику, поскольку при верстке будет достаточно выбрать инструмент «Горизонтальный текст» и посмотреть цвет текста, вместо того, чтобы залезать в fx-свойтсва слоя и смотреть его там.
  • Никогда не преобразовывайте текст в растровый слой. После растрирования будет проблематично узнать размер текста, шрифт и в некоторых случаях цвет текста.

3. Градиентные заливки

Использование градиентных заливок, делает ваш дизайн более интересным и привлекательным.

Старайтесь накладывать градиентную заливку с помощю fx-свойств слоя (двойной клик по слою -> «Наложение градиента»). Данный способ наложения градиента позволяет без проблем посмотреть цвета и их расположение.

4. Растрирование слоев

Растрирование слоев может значительно облегчить ваш макет. Но не всякий слой нужно растрировать.

Допустим вы отрисовали кнопку оформления заказа, сделали градиентную заливку, наложили тень и растрировали… закончли свой макет и передали его на верстку. При работе с вашим макетом, верстальщик будет вспоминать ваших родственников озадачен данной кнопкой: какие паратметра у тени, цвета градиента, какой радиус скругления углов и т.д.

Поэтому растрировать слои без необходимости не стоит.

5. Названия слоев

Уделите немного времени для адекватного названия слоев и групп. В процессе работы вы сможете разобраться и названиями на подобии «слой 1», «слой 16», «слой 84 копия копия», но с вашим макетом будут работать и другие, и вы сами сможете спустя какое то время воспользоваться данным макетом, а понятные названия весьма упростят вам задачу.

10.05.2013

Возврат к списку