Модное меню для web сайта

1. Создайте новый документ размером 500×500 пикселей с белым фоном.


Модное меню для web сайта



2. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей и создайте фигуру, как показано ниже:


Модное меню для web сайта



3. Инструментом Перо (Pen Tool) добавьте точки привязки на каждой стороне прямоугольника. Потом инструментом Непосредственное выделение( Direct Selection Tool) поправьте точки, как показано ниже:


Модное меню для web сайта



4. Потом перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

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


Модное меню для web сайта



Внутреннее свечение:


Модное меню для web сайта



Наложение градиента:


Модное меню для web сайта



Результат:


Модное меню для web сайта



5. Сделайте копию слоя и удалите все стили слоя с копии. Потом в режиме Свободного трансформирования уменьшите фигуру до 94% от оригинального размера:


Модное меню для web сайта



6. К этой копии примените стиль Наложение градиента (Layer Style — Gradient Overlay) и настройте так:


Модное меню для web сайта



Обводка (Layer Style — Stroke):


Модное меню для web сайта

Модное меню для web сайта




7. Сделайте копию слоя ещё раз и удалите стили слоя с этой копии. В режиме Свободного трансформирования (Free Transform) уменьшите фигуру до 93%. Потом инструментом Непосредственное выделение (Direct Selection Tool) разместите точки привязки так:


Модное меню для web сайта



8. Растеризуйте фигуру (Rasterize — Shape) и измените цвет фигуры на белый:


Модное меню для web сайта



9. Инструментом Многоугольное лассо (Polygonal Lasso Tool) с растушевкой 17 пикселей сделайте выделение, как показано ниже. Потом нажмите Delete.


Модное меню для web сайта



10. Снимите выделение (Ctrl+D), выберите инструмент Произвольная фигура
(Custom Shape Tool) и выберите эту фигуру:


Модное меню для web сайта



11. Создайте фигуру белого цвета:


Модное меню для web сайта



12. Выберите фоновый слой и создайте чёрную фигуру инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 7 пикселей. Все слои с кнопкой должны быть над этим слоем:


Модное меню для web сайта



13. Перейдите в меню Стилей слоя (Layer Style — Blending Options) в фоновом слое и настройте так:

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


Модное меню для web сайта




Внутреннее свечение:


Модное меню для web сайта



Наложение градиента:


Модное меню для web сайта



Обводка:


Модное меню для web сайта

Модное меню для web сайта




14. Выберите инструмент Горизонтальный текст (Horizontal Type Tool). Я использовал шрифт Ottawa размером 18 pt., Жирный (Bold), чёткое (crisp), цвет — чёрный. Напишите название раздела:


Модное меню для web сайта




15. В слое с текстом перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Отбрасывание тени:


Модное меню для web сайта



Наложение цвета:


Модное меню для web сайта




Наложение градиента:


Модное меню для web сайта

Модное меню для web сайта




16. Добавьте ещё текст цветом #1d70e1.


Модное меню для web сайта



17. К слою с маленьким текстом примените стиль Отбрасывание тени
(Layer Style — Drop Shadow):


Модное меню для web сайта

Модное меню для web сайта




Создайте больше таких кнопок с разным содержимым:


Модное меню для web сайта






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

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

21 октября 2017

Байонет: KA/KAF/KAF2 Тип объектива: широкоугольный Фокусное расстояние: постоянное

21 октября 2017

В гонке за лидерство в категории профессиональных репортерских камер производителям непросто удержаться на первых местах, и для нас, фотографов, это неплохо, потому что именно наличие достойных конкурентов заставляет производителей совершать технологические прорывы. Nikon D3s — очередная камера в профессиональной полноформатной репортерской серии Nikon, с возможностями которой вас познакомит наш эксперт Александр Касперович.

21 октября 2017

Дата анонса: 2007/12/18 Эффективное разрешение, МП: 10 Диагональ ЖК-дисплея, дюймы: 2.5