Общие требования при выполнении работ по дизйну

Приступая к работе по созданию WEB-сайта первым делом необходимо определиться с цветовой схемой сайта, выбрать цветовую палитру. Обычно таких цветов бывает не более 6-8. Определяем какие цвета будут главными. Записываем их на листочек, чтобы можно было в любую минуту подглядеть. Зачастую у клиента уже есть свои гайды, тогда еще проще - используем их, но при добавлении новых цветов незабываем согласовывать их с клиентом. Посмотрите как выглядит их текущий сайт или продукция, это упростит обоснование включения нового цвета. Но не старайтесь заменить основные цвета, это не поучится. Гайды - есть гайды.

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

Следующий шаг. Создаем макет будущей главной страницы, смотрим ТЗ и определяем максимальную ширину холста. Разрешение ставим 72 dpi. Хотя в зависимости от экрана оно может быть и больше, но при таком разрешении вы получите правильное соотношение pt и px. В противном случае вы услышите много лесных слов от коллег занимающихся версткой.

Холст создан, но не спешите начинать рисовать. Прежде чем это сделать перейдите в окно "Layers" и создайте группы, из которых будет состоять сайт. Группы первого уровня это - header, workarea, footer. Для тех кто сталкивался с версткой это должно быть знакомо. Внутри этих групп создаем подгруппы, называя их по английски, например logo, menu_top, menu_left и т.п., желательно согласовать их с человеком, который занимается версткой, так как это ускорит его работу, а также работу специалистов по тестированию.

Не спешите, еще не все.

Теперь нужно установить сетку и задать границы каждого блока. Это нужно чтобы элементы дизайна были ровными изначально, а не прыгали на пару пикселей влево-вправо, вверх-вниз.

Вот теперь все, начинайте рисовать, но помните, что photoshop уже имеет ряд инструментов, который облегчает работу и не надо изобретать велосипед, его уже изобрели до вас. А то я знаю некоторых дизайнеров, которые, для того чтобы узнать высоту и ширину элемента рисовали прямоугольник (shape) и смотрели какого он размера получился.

В заключении подытожим наши действия.