Модное меню для 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-дизайн

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

17 декабря 2017

Компания Canon объявляет о выпуске нового объектива с высочайшими характеристиками – EF 50mm f/1.4 USM Имея самую широкую диафрагму среди всех выпускаемых Canon объективов серии EF, новая модель обеспечивает исключительно...

17 декабря 2017

Оснащенная 14,3-мегапиксельным CMOS-датчиком Canon, процессором DIGIC 5 и объективом с 4-кратным зумом исключительного качества, компактная камера PowerShot G1 X предоставляет фотографу полный контроль над процессом съемки и обеспечивает превосходные результаты...

17 декабря 2017

Дата анонса: 2011/07/27 Эффективное разрешение, МП: 14 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 120