Пятница, 20.09.2019, 03:20
Все для Фотошоп
Меню сайта


Категории каталога
Эффекты [5]
Робота с текстом [3]
Робота с фото [5]
Графика для сайта [5]
Дизайн/Рисование [6]
Анимация [4]
Практика [4]
Наш опрос
Какого материала вы бы здесь хотели видеть больше?
Всего ответов: 1678


Главная » Статьи » Уроки » Графика для сайта

Урок:Навигационная панель в стиле "модерн"
В этом уроке Фотошоп будет показано как с помощью простых форм и градиентов создать элегантный дизайн

Вид финального результата

Шаг 1

Сначала создадим новый документ 540 на 440 пикселей. Заливаем задний фон цветом #1b1b1b используя Edit > Fill (Редактировать > Выполнить заливку).

Шаг 2

Теперь нам надо создать задний фон навигационного окна. Создадим новый слой. Это можно сделать с помощью Layer > New > Layer (Слой > Новый > Слой) или нажав горячие клавиши Ctrl + Shift + Alt + N. Выберем закругленный прямоугольный инструмент выделения и установим радиус 5 пикселей. Сделаем выделение 250 на 300 пикселей.

Заливаем это выделение красным градиентом. Выберем градиентный инструмент и установим его радиальным. Заполним это выделение градиентом с верха центра (#bc0303) до низа центра (#3f0000).

Шаг 3

Теперь нам нужно добавить внешнее свечение нашему навигационному заднему фону. Это можно сделать с помощью Layer > Layer Styles > Outer Glow (Слой > Стиль слоя > Внешнее свечение) и ввести нижеуказанные параметры.

Теперь это должно выглядеть так.

Шаг 4

Выберем текстовый инструмент и добавим текст для заголовка навигационного блока. Я использовал шрифт Verdana, Обычный, 22pt, Strong, #ffffff.

Шаг 5

Создадим новый слой и, используя закругленный прямоугольный инструмент выделения снова, сделаем выделение 230 на 250 пикселей под надписью (с 10-писксельным отступом от краев).

Заполним выделение темно-серым цветом (#111111).

Шаг 6

Следующее, что нам нужно – это добавить световые эффекты на новый слой. Для этого на новом слое (имеется в виду выделение что было перед этим) используем Select > Modify > Contract (Выделение > Модификация > Сжать ) на 10 пикселей.

Заполним выделение радиальным градиентом с верхнего левого угла (#ffffff) до нижнего правого (прозрачный) используя градиентный инструмент.

Уменьшим прозрачность слоя до 5%.

Шаг 7

Теперь для текстовых ссылок, используя текстовый инструмент добавим текст, чтобы он действовал как ссылки. Я использовал шрифт Verdana, Обычный, 12pt, None, #5a5a5a (#ffffff для активной ссылки). Установим высоту линий на 30 пикселей.

Шаг 8

Теперь нужно добавить разделители между ссылками. Сделаем выделение 210 на 1 пиксель используя прямоугольный инструмент выделения между каждой линией и заполним цветом #1e1e1e.

Шаг 9

На последок, нужно добавить цвет заднего фона за активной ссылкой (в моем случае я сделал активным Photoshop Tutorials). Для этого нужно создать новый слой за текстовым слоем, сделать выделение 210 на 30 пикселей и залить его цветом #171717.

Категория: Графика для сайта | Добавил: Andrew (02.05.2009)
Просмотров: 1414 | Рейтинг: 5.0/1 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Поиск
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyPhotoshop © 2019

Хорошие, и главное бесплатные, темы для мобильного.
Rambler's Top100