Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

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

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

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

Создайте новый документ, 1680*1050 пикселей. Этот размер подходит как обычным мониторам, так и  широкоформатным.

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

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

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

Далее скопируйте этот слой . Перейдите в меню Фильтр – Шум – Добавить шум. Используйте те же настройки для фильтра как показано на картинке.  Далее изменяем режим наложения на Умножение и  снижаем непрозрачность.

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

Далее , наносим  текст главного меню,  при этом используем  серый цвет для обычной ссылки и темно-серый для активной.

Далее наносим текст заголовков.  Заголовки  несут множество информации, поэтому  они должны быть яркими и видными. Используйте для заголовков  видный шрифт , который будет легко читаться.

Далее к заголовку добавляем кнопку Подробнее. Для данной кнопки лучше всего использовать какие –либо стандартные шрифты, чтобы его легко можно было легко установить в  HTML без замены  изображений.

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

Далее под основной блок создаем выделение, заполняем его градиентом от светло-серого к белому.

Разделите страницу на две колонки одна из которых будет  нести информацию, а вторая дополнять ее.  Используйте инструмент Текст, чтобы добавить содержимое в основную область. Выделяйте ссылки другим цветом, чтобы они были читаемыми.

Далее используйте инструмент Прямоугольник с округленными углами, для того чтобы создать форму на нашем макете. Цвет формы значения не имеет, поскольку мы будем накладывать на него стили.

Добавьте к этому слою серо-белый градиент и мягкую внутреннюю тень.

Используйте это окно для показа самых популярных новостей сайта. Пусть он включает в себя текст и небольшую картинку.

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

Нанесите текст на кнопку.

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

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

Переместите тень в центральную часть макета и удалите ненужные области.

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

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

Далее наносим на макет номера телефонов и распорядок работы предприятия.

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

Источник.