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

Откройте программу Adobe Photoshop и создайте документ размером 300x500 пикселей. Для того чтобы будущее навигационное меню смотрелось ярче, залейте фон черным цветом. И так начнем.

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

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

Теперь залейте прямоугольник градиентом, верхняя часть градиента будет иметь цвет #fe73fa;, а нижняя часть - #903f8e;

Далее с помощью трансформирования немного изменим форму нашего прямоугольника. Выберите вкладку "Редактирование -> Трансформирование -> Деформация" и измените фигуру прямоугольника.

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

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

Сделайте два дубликата слоя "Прямоугольник-1" нажа по нему левой кнопкой мыши и выбрав меню "Создать дубликат слоя..."

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

Два новых слоя с деформированными прямоугольниками зальем градиентом других цветов и немного наклоним их в стороны от основного первого прямоугольника. Начнем с Прямоугольника номер три. Заливаем его градиентом вот таких цветов, верх градиента будет вот такого цвета - #ff00f8; а низ вот такого - #b71eb3; далее с помощью трансформации наклоним деформированный прямоугольник немного в сторону. Нажимаем вкладку "Редактирование -> Свободное трансформирование" или комбинацию клавишь Ctrl+T и наклоняем как показано на картинке ниже:

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

Тоже самое проделываем с деформированным прямоугольником номер два, но заливаем его градиентом немного других цветов, а именно: верх - #a925fd; низ -#6f3f90;

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

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

Добавляем изящности нашей навигации с помощью инструмента "Перо". Выберите инструмент "Перо" на панели инструментов или нажмите латинскую букву "P". Создайте новый слой и нарисуйте вот такую линию, смотрите на картинке ниже:

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

Теперь выберите инструмент "Кисть"  и установить пятый размер и цвет #68d207, опять включите инструмент "Перо" и кликните левой кнопкой мыши по только что нарисованой линии и из появившегося списка выберите "Выполнить обводку контура...". В появившемся окне в выпадающем меню выберите кисть и поставьте галочку ниже "Имитировать нажим", нажмите "Ок". Опять кликните по линии левой кнопкой и выберите пункт меню "Удалить контур". В итоге у нас получилась изящная линия салатового цвета. Повторите то же самое, чтобы у вас получился своеобразный прямоугольник из таких линий, смотрите картинку ниже:

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

Добавим еще пару таких образных прямоугольников из изящных линий. Сделайте два дубликата слоя "Линии-1" и так же как и с деформированными прямоугольниками проделайте операцию по наклону и так же перекрасим слои "Линии-2" и "Линии-3" в другие цвета. Слой "Линии-2" перекрасим в цвет #ffa800; а слой "Линии-3" в цвет #00f0ff; операции по замене цвета производите с помощью параметров наложения.

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

Теперь добавим "Внешнее свечение" слою "Прямоугольник-2" и слою "Линии-2". Внешнее свечение слоя должно естественно соответствовать основному цвету слоя. Выберите слой "Прямоугольник-2", кликните по нему левой кнопкой мыши, выберите пункт "Параметры наложения", в открывшемся окне поставьте галочку "Внешнее свечение" и подберите цвет под цвет слоя "Прямоугольник-2", тоже самое проделайте со слоем "Линии-2".

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

Чтобы было понятно что это навигация, напишим вверху слово навигация и немного трансформируем его с помощью инструмента "Деформировать текст"

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

Теперь добавляем название разделов и получаем следующее:

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

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

http://www.polar.su/ купить спортивные браслеты polar loop.


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