Простая стильная навигационная панель

1. Создайте новый документ и залейте фон цветом #1a1a1a. Потом создайте новый слой
(Create New Layer), выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как показано ниже (ширина — 40 пикселей). Залейте его тем же цветом, что и фон.


Простая стильная навигационная панель



2. Примените к этому слою стиль Наложение градиента (Layer Style — Gradient Overlay):


Простая стильная навигационная панель

Простая стильная навигационная панель



3. Создайте ещё один слой (Create New Layer) и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на половину ширины, как показано ниже:


Простая стильная навигационная панель



4. Выберите инструмент Градиент (Gradient Tool), цвет — от белого к прозрачному, и залейте выделение сверху вниз:


Простая стильная навигационная панель



5. Установите Режим наложения этого слоя — Мягкий свет (Blending Mode – Soft Light) или Наложение (Blending Mode – Overlay), Непрозрачность (Opacity) — 20-50%.


Простая стильная навигационная панель



6. В новом слое под слоем с верхней полоской создайте выделение размером примерно 80-120 пикселей.


Простая стильная навигационная панель



7. Назовите этот слой ‘button’ и залейте выделение цветом #2a88c5. Потом примените стиль Наложение градиента (Layer Style — Gradient Overlay) с теми же настройками, что и раньше:


Простая стильная навигационная панель



8. Создайте новый слой (Create New Layer) над слоем ‘button’ и напишите в нём текст на кнопке. Потом в этом слое перейдите в меню Стилей слоя (Layer Style — Blending Options) и примените эти стили:

Внешнее свечение:


Простая стильная навигационная панель


Обводка:


Простая стильная навигационная панель

Простая стильная навигационная панель



Я добавил ещё текст на панель, изменив цвет обводки:


Простая стильная навигационная панель







Делаем Web-дизайн

Вас может также заинтересовать:

21 октября 2017

21 октября 2017

Основные характеристики: Модель: DMC-SZ1 Black Гарантия 2 года Серия модели Серия LUMIX SZ Матрица Тип матрицы CCD Разрешение матрицы 16.6 МПикс Эффект. разрешение матрицы 16.1 МПикс Размер матрицы 1/2.33" Макс....

21 октября 2017