Объявление:
Наши контакты: +7 (928) 029 69 59

Создание и продвижение сайтов в Пятигорске, Черкесске и Ставрополе WEB студия DigitalART предоставляет услуги по разработке и созданию сайтов в Черкесске, Пятигорске и Ставрополе. Так же Мы предоставляем услуги по поисковой оптимизации и продвижению сайтов Черкесска, Ставрополя и Пятигорска в поисковых системах. Более подробные условия заказа создания или продвижения сайта в Ставрополе, Пятигорске или Черкесске, Вы можете узнать по телефонам +7 (928) 029 69 59 Разработка и раскрутка сайтов в Черкесске, Ставрополе и Пятигорске 

Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » Photoshop,WEB графика » Рисуем в Photoshop навигацию в стиле Гранж
13.01.2012

Рисуем в Photoshop навигацию в стиле Гранж

Рисуем в Photoshop навигацию в стиле Гранж

Рисуем в Photoshop навигацию в стиле Гранж. Создаем в Photoshop современный дизайн навигации в стиле Grunge

Навигация в Веб дизайне – одна из самых важных частей юзабилити (удобства и простоты использования) Вашего сайта. С помощью различных элементов навигации, пользователь переходит по страницам Вашего сайта. В данной статье будет рассмотрен способ создания современного дизайна навигации в стиле Гранж.

В данной статье Вы изучите, как использовать градиенты, текстуры и стили слоев в Photoshop. В конце статьи мы получим такой результат:

Создаем в Photoshop навигацию в стиле Гранж

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

Шаг 1. Создаем новый документ в Photoshop.

Давайте создадим новый документ в Photoshop (CTRL+N), размером 920px на 170px.

Рисуем в Photoshop навигацию в стиле Grunge

Шаг 2. Создаем основу навигации.

Создадим новый слой (SHIFT+CTRL+N) и назовем его «Навигация». Установим значение основного цвета на #1E1E1E, и выбрав инструмент «Прямоугольник со скругленными углами» с радиусом углов 6px, создадим фигуру:

Создаем в Photoshop навигацию в стиле Grunge

Шаг 3. Задаем стили для основы навигации.

Теперь давайте зададим стили для основы будущей навигации Слои -> Стиль Слоя -> Параметры наложения и выставим следующие настройки для данного слоя:

Создаем дизайн навигации для сайта
Создаем шаблон навигации для сайта

Шаг 4. Текст навигации.

Используя шрифт Myriad Pro Regular (или Arial) размером 14 пт, белого цвета (#FFFFFF), добавим элементы навигации, например «Главная, Услуги, Контакты, О Нас и т.д.». После чего применим к тексту следующие стили:

Как создать дизайн навигации для сайта

В результате у Вас должно получиться:

PSD шаблон навигации для сайта

Шаг 5. Накладываем текстуры.

Наложим текстуру Media_Militia_BTOB_005.jpg из архива с исходными материалами, который Вы можете скачать в конце статьи, на нашу будущую навигацию для сайта. Для этого вставим ее в наш документ и уменьшим ее (CTRL+T) примерно на 25% по ширине и высоте. Теперь зажмите клавишу CTRL и кликните по миниатюре векторной маски слоя «Навигация», для того что бы создать выделение. Теперь давайте инвертируем выделенную область, нажав правую кнопку мыши на выделение, и выбрав пункт «инверсия выделения», после чего нажмите клавишу DEL.

В результате у Вас должно получиться примерно следующее:

Навигация для сайта

Теперь применим к данному слою с текстурой следующие стили (Слои -> Стиль Слоя -> Параметры наложения):

Дизайн навигации для сайта

В результате получим:

навигация в стиле Grunge

Добавляем активный пункт навигации.

Создадим новый слой (SHIFT+CTRL+N) и с помощью инструмента «Прямоугольник» (U) создадим фигуру цветом #95009E, как показано на рисунке ниже:

Дизайн навигации для сайта в стиле Гранж

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

Теперь применим к данному слою следующие стили:

Дизайн навигации в стиле Гранж

Осталось добавить оставшуюся текстуру из архива с исходными материалами и готовый PSD шаблон навигации для сайта в стиле Гранж готов.

Финальный результат.

Создаем в Photoshop навигацию в стиле Гранж

Скачать готовый PSD шаблон навигации и исходные материалы

Прокомментировать статью
Дата добавления: 13.01.2012
Эта запись опубликована 13.01.2012 в 16:34, автором DigitalART, и добавлена в рубрику Photoshop, WEB графика. Вы можете подписаться на обновления данной статьи по RSS 2.0

Об авторе

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.

WEB студия DigigtalART в интернете

Один комментарий на «Рисуем в Photoshop навигацию в стиле Гранж» Оставить свой

  1. Latrice says:

    We’ve arirevd at the end of the line and I have what I need!

Вверх