Tags: Графика для сайта | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

В этом уроке доступно, шаг за шагом, я постараюсь показать вам, как с помощью простых команд  и фильтров Gaussian Blur создать профессиональную панель навигации для сайта.

Создайте новый документ 500*300 пикселей и заполните его градиентом, для этого возьмите подходящий цвет, я использую # 000000 и # 1b2c3e.

Далее возьмем инструмент Прямоугольник с скругленными углами (радиус 10 пикселей) и создайте свою кнопку на холсте, причем не важно какой цвет вы используете.

Далее растрируйте слой Слой - Растрировать слой и примените ему стили:

Ваша кнопка должна выглядеть вот так:

Далее нажмите Ctrl+ клик по слою, чтобы загрузить выделение. Идем в меню Выделение – Модификация – Сжать и сжимаем выделение на 1 пиксель. После чего, на новом слое заливаем выделение цветом: # 1b1b1d. Нажмите Ctrl+D чтобы снять выделение.

Теперь пришло время придать сияние внутри нашей кнопки. Создайте овальное выделение инструментом  Овальная область и на новом слое заполняем его цветом  # 479ea5

Снимите выделение с данного слоя и примените к нему фильтр Размытие по Гауссу со следующими установками:

Теперь у нас получилось размытое пятно, как показано на рисунке.

После этого приметите к слою фильтр Размытие в движении с настройками как на рисунке:

Вот что должно получится:

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

Нажмите Ctrl+D, чтобы снять выделение и примените фильтр Размытие-Размытие по Гауссу, с установками, показанными на картинке.

Теперь взгляните, что должно получится:

Следующим шагом мы применим еще один фильтр Размытие – Размытие в движении.

Создайте выделенную область инструментом Прямоугольное выделение.

После этого выберите команду Выделение – Инверсия и кнопку Delite, далее снимите выделение комбинацией клавиш Ctrl+D.

Теперь хотелось бы  добавить узор на кнопку. Создайте новый документ 3*3 пикселя, затем возьмите инструмент Карандаш и нарисуйте черную сетку, как показано на рисунке.

После этого нажмите Редактировать – Определить узор, чтобы сохранить это изображение, как образец. Закройте документ с сеткой без сохранения, и вернитесь в основной документ. Инструментом  Прямоугольное выделение создайте выделенную область и залейте его белым цветом.

Снимите выделение Ctrl+D и примените следующие действия:

Установите непрозрачность до 7% и вот ваш результат:

Далее создайте новый слой и инструментом Прямолинейное Лассо создайте выделение как показано на рисунке и залейте его белым цветом:

Снимите выделение со слоя Ctrl+D и примените к нему фильтр Размытие-Размытие в движении со следующими настройками:

Вот что должно получится на данном этапе.

Дизайн кнопки почти закончен, хотелось бы добавить несколько элементов. Создайте новый слой и инструментом Карандаш создайте несколько точек цветом # e2dedf, как показано на рисунке ниже:

Дублируйте слой и примените к копии фильтр – Размытие – Размытие в движении со следующими настройками:

Теперь у нас получилось что то вроде этого:

Создаем новый слой и рисуем инструментом Карандаш три полоски, используя цвет # 479ea5 как на рисунке:

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

Установите прозрачность для слоя 30% и объедините его с предыдущим, после чего примените фильтр – Размытие – Размытие в движении:

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

Нажмите Ctrl + клик по эскизу слоя, чтобы получить выделение кнопки и залить его черным цветом на новом слое.

Добавьте фильтр – Шум – Добавить шум:

Используйте для этого слоя режим наложения Экран с 60% непрозрачностью.

Пришло время добавить текст на кнопку, выберите инструмент Горизонтальный текст и напишите его, используя цвет # 70ffff:

Шрифт, который используется в моем меню называется Electrofied (14 пт, Crisp).

Вот такая должна получится у вас панель навигации.

Источник.