Tags: Графика для сайта | Уроки Photoshop

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

   Откройте новый документ 960*900 пикселей затем инструментом прямоугольное выделение разделите документ на прямоугольные области, как показано на рисунке:

Для слоев 2 и 4 (см. фото сверху) я буду добавлять следующие стили слоя:

 

  Для первого поля я использую цвет заливки # d57a1a, а для третьего # e5e1de, вот что у меня получилось на данном этапе: 

  На поле 4,где будет основной текст инструментом Прямоугольник со скругленными углами (радиус 6 пикс.) я добавляю область белого цвета.  

Белому полю добавляю следующие стили: 

  Вот такой  результат должен у вас получится на данном этапе: 

   Далее инструментом Прямоугольное выделение создаем выделение как показано на рисунке:

   Теперь удаляем выделенную область и снимаем выделение нажав комбинацию клавиш Ctrl + D. Вот что получилось у меня:

    Выбираем инструмент Прямоугольник и создаем две фигуры посередине поля. 

   Неважно какой цвет вы выберете, но я на следующем этапе придал следующие стили черным фигурам:

    Вот пример того что получилось: 

   Инструментом Прямоугольник со скругленными углами я создам панель навигации в верхней части сайта:

    Вот как стала выглядеть моя панель навигации: 

   Создадим тень под верхней панелью, для этого создаем эллипс, как показано на рисунке:

   Затем перейдите на Фильтр> Blur> Gaussian Blur и примените к фильтру мои настройки.

Сделайте прозрачность фона на 50%, и сравните свою работу с тем, как получилось у меня:

    Следующим шагом я добавляю в макет 3 формы.

 Для этих форм я задаю следующие стили:

  Вот что должно получится:

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

 Далее мы добавляем текст в макет с помощью инструмента Горизонтальный текст:

 Для разделения полей я использую инструмент Линия шириной в 1 пикс.

 Можно еще добавить пару кнопок как на следующем изображении.

 Создав новый слой поверх всех остальных, инструментом Кисть поставим точку прямо над логотипом.

 Изменим режим наложения на Мягкий свет и уменьшим прозрачность слоя до 50%.
Вот мой окончательный макет.

Надеюсь вам урок понравился!

Источник