Основное меню

Давайте начнем с создания нового документа, в котором мы разместим дизайн нашего шаблона. Для этого шаблона использовался размер документа 900 x 1000 пикселей. 
После создания нового документа, зальем фон. Для заливки фона использовался цвет #003466. После заполнения фона сплошным цветом, вы можете применить фильтр  Filter -> Noise -> Add Noise (Фильтр -> Шум -> Добавить шум) с эффектом около 0,5-1,5. В современном мире веб-дизайна одна из популярных тенденций это применение помех на заднем фоне. Помима шума можно так же добавить темный градиент, после чего уменьшить его прозрачность.

Создание профессионального дизайна для сайта

Фон нашего шаблона готов, теперь нужно создать контентную площадку, где будет распологаться меню и контент сайта. Выберите на пенели инструментов инструмен Rounded Rectangle Tool (Инструмент "Прямоугольник со скругленными углами") и нарисуйте прямоугольник по центру документа.

Создание профессионального дизайна для сайта

Создание профессионального дизайна для сайта

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

Перейдем к футеру нашего шаблоны. Возьмите инструмент "Прямоугольная область" и от нижнего края выделите область, высотой примерно 30 - 40 пикселей.

Создание профессионального дизайна для сайта

Теперь щелкните правой кнопкой мыши внутри области выделения и выберите пункт из появившегося меню Layer via Cut (Вырезать на новый слой). Примените к новому слою следующие параметры наложения:

Создание профессионального дизайна для сайта

Получится должно следующее:

Создание профессионального дизайна для сайта

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

С футером мы закончили, перейдем к хедеру. Возьмите инструмент "Прямоугольная область" и от верхнего края контентной площадки выделите область, высотой примерно 50 - 100 пикселей.

Создание профессионального дизайна для сайта

В данном примере область выделения получилась 802 x 59 пикселей. Зальем эту область черно-прозрачным градиентом, смотрите изображение ниже:

Создание профессионального дизайна для сайта

Слой с черно-прозрачным градиентом в хедере сделайте прозрачным, уменьшив прозрачность в приделе 10-20%. Добавьте в хедер логотип, название и описание.

Создание профессионального дизайна для сайта

Шрифт для названия и описания называется Myriad Pro, так же подойдет шрифт Arial. Цвет для названия: #f1360b, цвет для описания: #969696.

Теперь, создайте навигационные ссылки и кнопки в правом углу хедера. Шрифт использовался тот же, что и раньше Myriad Pro с цветом #969696.

Создание профессионального дизайна для сайта

Навигационные ссылки, нам нужно превратить в кнопки, для этого выберите инструмент "Прямоугольная область" и выделите область вокруг первой ссылки как на картинке ниже:

Создание профессионального дизайна для сайта

Теперь создайте новый слой, не убирая выделения и закрасьте область выделения белым цветом. Примените к данному слою следующий стиль, для придания навигационной кнопке эффектности.

Создание профессионального дизайна для сайта

Создание профессионального дизайна для сайта

Под хедером добавьте изображение, которое можно взять на www.sxc.hu или на www.yotophoto.com

Создание профессионального дизайна для сайта

Размер изображения получился 601 x 140 пикселей. Для этого слоя с изображением уменьшите непрозрачность на 50%.

Перейдем к следующему этапу создание профессионального дизайна. Создадим навигационную панель с левой стороны. С помощью Rectangular Marquee Tool (Инструмент "Прямоугольная область") создайте прямоугольную паналь с левой стороны дизайна, обязательно отступив по 1 пикселю от хедера, футера и контентной площадки.

Создание профессионального дизайна для сайта

Создав область выделения, заполните ее приятным, мягким голубым цветом #3e72a4. После заполнения вашей боковой панели контейнера, начнем добавлять какой-нибудь текст. Добавим текст "WebSite Menu", используя шрифт Myriad Pro в верхней части боковой панели, под текстом добавьте орнамент.

Создание профессионального дизайна для сайта

Создание профессионального дизайна для сайта

Для этих слоев с орнаментом и текстом "WebSite Menu" добавьте параметры наложения:

Создание профессионального дизайна для сайта

Теперь добавьте навигационные ссылки. Для ссылок использовался белый цвет #ffffff, шрифт Arial с размером 14 px.

Создание профессионального дизайна для сайта

Повторите эти же действия для раздела меню "Our Partners" и "What's New?", и не забудьте между этими разделами вырезать линию шириной в 1 пиксель.

Создание профессионального дизайна для сайта

Продолжим создание дизайна. Добавим контент в самую большую область нашего дизайна:

Заголовок:

Создание профессионального дизайна для сайта

И описание:

Создание профессионального дизайна для сайта

Теперь вы можете добавить все, что вы хотите в области содержащую контент. Можно добавить еще один заголовок с описанием вроде"Кто мы, что мы?-что угодно, добавить объявления Google или Яндекс и так далее.

Законченый вариант шаблона смотрите ниже:

Создание профессионального дизайна для сайта

Источник материала

Реклама:

Dota2fans.ru - Фан сайт игры Dota 2

Раздел: Статьи для веб-дизайнера




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