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

Создание дизайна для сайта в зеленых тонах

Для создания дизайна для сайта, первое что мы сделаем это откроем Adobe Photoshop и создадим документ размером 1024x950 пикселей.

Теперь разделим документ на блоки (хедер, навигация и футер). Хедер будет иметь высоту размером 300px, навигации зададим ширину в 250px и футер -150px. Создаем для каждого блока новый слой и заливаем его вот такими цветами - хедер: #59be00; навигация: #e1e1e1; и футер: #565656;

Вот так у вас должно получиться:

Создание дизайна для сайта в зеленых тонах

Далее добавляем на хедер орнамен с помощью кисти Ornaments.  Создаем новый слой, выбираем пару орнаментов из набора кисти Ornaments и накладываем их на новый слой, заливаем их одним цветом - #59be00. Теперь добавим внешнее свечение, чтобы рисунок был виден на фоне хедера. Выделяем слой с бабочками, нажимаем правой кнопкой мыши по нему и выбираем "Параметры слоя". В открывшемся окне выставляем параметры как показано на картинке ниже.

Создание дизайна для сайта в зеленых тонах

Вот что получилось:

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах

Заливаем узором шапку дизайна. Создаем новый слой перед слоем "Хедер", нажимаем на вкладку "Редактирование -> Выполнить заливку" или можно нажать Shift+F5, выбираем узор который мы недавно создали и нажимаем "ОК".

Создание дизайна для сайта в зеленых тонах
Получаем следующее:

Создание дизайна для сайта в зеленых тонах
Выставляем для слоя "Узор" непрозрачность 6%

Создание дизайна для сайта в зеленых тонах

Далее рисуем фигуру в виде прямоугольника с закругленными углами в левом правом углу и задаем ему следующие "Параметры наложения"

Создание дизайна для сайта в зеленых тонах

Создание дизайна для сайта в зеленых тонах

Накладываем градиент. Для левой части градиента задаем цвет: #387601, для правой части #60c00b

Создание дизайна для сайта в зеленых тонах

Напишим в прямоугольнике название сайта, например: Дизайнерский веб-ресурс, используя щрифт Olietta Poesia

Создание дизайна для сайта в зеленых тонах

Теперь сделаем навигационное меню.

Создаем новый слой и рисуем прямоугольник зеленого цвета как показано на картинке ниже.

Создание дизайна для сайта в зеленых тонах

Чтобы навигация стала смотреться интереснее, для этого завернем правый край за серый блок. Берем инструмент "Перо", нажав на клавиатуре латинскую букву "P" и рисуем вот такую форму вокруг зеленого прямоугольника:

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах
Далее нанесем градиент на эту фигуру. Выбираем слой с данной фигурой, нажимаем левую кнопку мыши и выбираем пункт "Параметры наложения", ставим галочку на "Наложение градиента", левую часть заливаем цветом: #6dd512; правую: #499b01;

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах

Теперь окончательно заворачиваем фигуру за серый блок. Создаем новый слой под слоем фигура и рисуем овал и заливаем его цветом: #295501;, как на картинке:

Создание дизайна для сайта в зеленых тонах

Лишнюю часть овала обрезаем:

Создание дизайна для сайта в зеленых тонах

Для реалистичности добавим тень. Под слоем "Фигура" создаем слой и рисуем прямоугольник:

Создание дизайна для сайта в зеленых тонах

С помощью наложения добавляем тень:

Создание дизайна для сайта в зеленых тонах

Чтобы было понятно что это навигация, напишим над ней слово тем же шрифтом Olietta Poesia - "Навигация" и рядом со словом "Навигация" нарисуем небольшой логотип и объеденим слой с надписью навигация и слой с логотипом в один слой, далее нажимаем на него левой кнопкой мыши и устанавливаем параметры наложения.

Создание дизайна для сайта в зеленых тонах

Теперь по своему вкусу добавьте меню, например такое:

Создание дизайна для сайта в зеленых тонах

Дальше займемся футером.

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

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах

Опять нажимаем на линию левой кнопкой и выбираем в меню "Удалить контур".

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

Создание дизайна для сайта в зеленых тонах

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

Создание дизайна для сайта в зеленых тонах

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




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