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

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-дизайн

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

20 июля 2018

20 июля 2018

Дата анонса: 2012/10/24 Эффективное разрешение, МП: 14.2 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 338