Дизайн простого меню

1. Создайте новый документ размером 500×300 пикселей, выберите инструмент Градиент (Gradient Tool), тип — линейный градиент, цвета — #ffffff и #d5dfe0, сделайте заливку фона, как показано ниже:


Дизайн простого меню


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


Дизайн простого меню



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

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


Дизайн простого меню



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


Дизайн простого меню




Обводка:


Дизайн простого меню



Результат:


Дизайн простого меню




4. Теперь займёмся созданием меню. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 7 пикселей нарисуйте ещё один прямоугольник, как показано ниже:


Дизайн простого меню




5. К этому слою примените стиль Внешнее свечение (Layer Style — Outer Glow) и настройте так:


Дизайн простого меню



Результат:


Дизайн простого меню



6. Теперь инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 5 пикселей нарисуйте ещё один прямоугольник чёрного цвета, как показано ниже:


Дизайн простого меню



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

Внутренняя тень:


Дизайн простого меню



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


Дизайн простого меню



Обводка:


Дизайн простого меню



Результат:


Дизайн простого меню



8. Создадим небольшое свечение. Инструментом Перо (Pen Tool) создайте такую фигуру белого цвета:


Дизайн простого меню




9. Растеризуйте этот слой (Rasterize — Shape). Потом перейдите в режима Быстрой маски (Q) и сделайте заливку градиентом, как показано ниже:


Дизайн простого меню




10. Выйдите из режима Быстрой маски (Q), нажмите Delete:


Дизайн простого меню



11. Снимите выделение (Ctrl+D), потом сделайте выделение слоя с кнопкой (Ctrl+Click) и примените Сжатие (Modify — Contract), введите значение 1 пиксель. Потом сделайте Инверсию выделения (Select — Inverse). Вернитесь к слою со свечение и нажмите Delete. Потом снимите выделение (Ctrl+D) и установите Непрозрачность (Opacity) слоя — 60%.


Дизайн простого меню




12. Сделайте копию этого слоя, выберите инструмент Прямоугольная область
(Rectangular Marquee Tool) с растушевкой 2 пикселя и создайте выделение, как показано ниже:


Дизайн простого меню




13. Нажмите Delete и снимите выделение (Ctrl+D), потом опустите этот слой вниз на 1 пиксель.


Дизайн простого меню




14. Выберите инструмент Карандаш (Pencil Tool) и нарисуйте две линии над и под кнопкой цветом #e5f3ff.


Дизайн простого меню



15. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст на кнопке. Я использовал шрифт Myraid Pro (Semibold Condensed, 15 pt, Crisp). Этот шрифт не бесплатный и вы можете использовать любой другой шрифт:


Дизайн простого меню



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


Дизайн простого меню



Результат:


Дизайн простого меню



Добавьте ещё несколько кнопок:


Дизайн простого меню







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

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

18 февраля 2018

Байонет: Canon EF Тип объектива: широкоугольный Фокусное расстояние: переменное

18 февраля 2018

Представляем зеркальную камеру начального уровня — Nikon D5000.Однако внутри этого маленького создания заложены многие технологии, присущие аппаратуре более совершенного модельного ряда. Александр КАСПЕРОВИЧ расскажет вам о своих впечатлениях о работе с новым аппаратом и даст необходимые рекомендации тем своим молодым коллегам, которые намереваются приобрести новую интересную камеру.

18 февраля 2018

Компания Canon объявляет о выпуске высокопроизводительного объектива EF 100mm f/2.8L Macro IS USM, последнего продукта в престижной серии L – лидирующих моделей объективов Canon для профессиональной съёмки. Впервые в линейке...