Уроки » Веб-дизайн → Шаблон "Blue-Gray" - Панель навигации  

:

Создайте новый набор слоев (Set) и назовите его Navigation

Шаблон "Blue-Gray" - Панель навигации


:
Выберите два цвета светло и темно серые. Затем возьмите инструмент Rectangle Marquee Tool :rectangu: и создайте прямоугольно выделение приблизительно на 150% больше чем нужно для вашей будущей кнопки

Шаблон "Blue-Gray" - Панель навигации


:
Теперь выберите в главном меню Select > Modify > Smooth > 3

Затем выберите Select > Inverse Selection (CTRL+SHIFT+I) и нажмите DELETE на клавиатуре.

:
Сделайте копию слоя (CTRL+J) и выберите первоначальный слой.

Нажмите CTRL+U и понизьте Lightness до -10 и опустите слой вниз на 5px (или сколько вам нужно)

:
Нажмите CTRL+E а затем CTRL+T и измените размер кнопки до того размера который вам требуется.

Шаблон "Blue-Gray" - Панель навигации


:
Теперь придадим дополнительную глубину для кнопки с помощью стилей слоя. Outer Glow и Stroke

Шаблон "Blue-Gray" - Панель навигации

Шаблон "Blue-Gray" - Панель навигации


:
Теперь нужно создать линию из точек. Создайте новый слой и выберите карандаш размером в 1px цвет темно серый и белый.



:
Установите позицию точек как показано ниже.

Шаблон "Blue-Gray" - Панель навигации


:
Теперь нужно создать маленькую стрелку, для этого выберите инструмент Polygonal Lasso Tool :polygona: и создайте новый слой.

Шаблон "Blue-Gray" - Панель навигации


:
Разместите стрелку слева от точек и примените к ней следующие стили слоя.

Шаблон "Blue-Gray" - Панель навигации


Добавьте текст на кнопку и примените к нему Drop Shadow

Шаблон "Blue-Gray" - Панель навигации


:
В итоге вы должны получить что-то похожее

Шаблон "Blue-Gray" - Панель навигации

Информация к уроку:

Категория - Уроки » Веб-дизайн

Дата публикации: 3-02-2011, 07:03

Опубликовал: killot

Просмотров: 457

Комментариев: 1

Ссылки к этой статье:

Источник - The Design World

Автор - Blake

Переводчик - Killot

Найти - Все уроки с The Design World

Еще по этой теме:

Простой шаблон Простой шаблон
В этом уроке мы создадим простой, но полноценный ...
Шаблон Шаблон "Blue-Gray" - Заголовок
Продолжаем создавать наш шаблон "Blue-Gray" В ...
Шаблон Шаблон "Blue-Gray" - Нижний колонтитул
Продолжаем создавать наш шаблон "Blue-Gray" В ...
Шаблон Шаблон "Blue-Gray" - Интерфейс
С этого урока мы начнем создавать полноценный ...
Окошко Окошко
В этом уроке мы создадим небольшое окошко которое ...
Красная стеклянная кнопка Красная стеклянная кнопка
В этом уроке мы создадим стеклянную кнопку, цвет ...
Создаем шаблон простого сайта Создаем шаблон простого сайта
Если вы впервые начали рисовать шаблон для ...
Глянцевые кнопки Глянцевые кнопки
Создаем глянцевые кнопочки. Блик на кнопках можно ...
Темно-красный заголовок Темно-красный заголовок
Создаем профессиональный темно-красный заголовок ...
Веселый текст из точек Веселый текст из точек
С помощью простой настройки кисти мы создадим вот ...

Социальные закладки:


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


Makailah       22 июня 2011 07:38 /
IJWTS wow! Why can't I think of thgnis like that?
        Цитировать
 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Ты робот? (да-нет)
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: