Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

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

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

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

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

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).

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

 

Источник.

AddThis Social Bookmark Button
 

Добавить комментарий


Защитный код
Обновить

поиск
RSS
Структура сайта. Как создать прочный каркас для сайта.

Структура сайта - то его внутренний каркас, который далеко не всегда видно, но который помогает пользователю найти необходимую информацию.Когда создается...

кол-во просмотров5370
Подробнее...

Определение ключевых слов.

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

кол-во просмотров11268
Подробнее...

Модульная сетка.

Модульная сетка - это основа любого дизайна: полиграфического, веб-дизайна либо газетного. Модульная сетка - это направляющие, вдоль которых размещены блоки,...

кол-во просмотров16360
Подробнее...

Как создать эффективный заголовок.

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

кол-во просмотров6608
Подробнее...

Обзор бесплатных редакторов. Или чем обработать фото.

     Многие для обработки изображений и фото в данное время используют Adobe Photoshop, однако эта программа стоит немалых денег, поэтому...

кол-во просмотров5172
Подробнее...