Создаем красивую, детализированную кнопочку *

Сегодня мы вновь обратимся к основам дизайна, а именно элегантной, простой и профессиональной кнопке от Liam McCabe. Liam создает все элементы веб дизайна, поэтому он будет вашим гидом по туториалу. Если вы ищите способ сдобрить ваш дизайн уникальными кнопками, советую не читать дальше…
В этом уроке я покажу вам, как создать красивую, детализированную кнопочку в Photoshop. Различные техники применены здесь, чтобы достичь эффект пикселей, и процесс создания займет не более 15-20 минут. Итак, приступим!

Шаг 1
Откройте Phtoshop. Создайте новый файл, нажав Ctrl+N. Примените следующие настройки:
Создаем красивую, детализированную кнопочку *

Шаг 2
Заполните текущий слой. Нажмите Shift+F5, чтобы появилось меню настроек. Выберите темно-синий цвет (#141d28).
Создаем красивую, детализированную кнопочку *

Шаг 3
Советую вам использовать направляющие. Чтобы добавить ее, идите в View > New Guide. Выберите вертикальную направляющую и позицию 250 пикселей.
Создаем красивую, детализированную кнопочку *

Шаг 4
Выберите Rounded Rectangle Tool rounded_rectangle.gif и нарисуйте следующую фигуру:
Создаем красивую, детализированную кнопочку *
Я поставил цвет фона прямоугольника на #17202b.
Создаем красивую, детализированную кнопочку *

Шаг 5
Добавляем стили слоя. Примените следующие настройки к слою.
Создаем красивую, детализированную кнопочку *
Создаем красивую, детализированную кнопочку *
Создаем красивую, детализированную кнопочку *
Создаем красивую, детализированную кнопочку *
Создаем красивую, детализированную кнопочку *

Шаг 6
Поставьте фоновый цвет #050607. Создайте новый слой и, удерживая Ctrl, кликните на иконку слоя с прямоугольником.
Создаем красивую, детализированную кнопочку *
Нажмите G, чтобы выбрать Gradient Tool gradient.gif. Проведите мышкой от центра влево.
Создаем красивую, детализированную кнопочку *
Не снимая выделения, выберите Marquee Tool rectangular_marquee.gif, нажмите вверх один раз, а затем нажмите delete. И с помощью Move Tool move.gif и переместите объект, как показано на картинке ниже.
Создаем красивую, детализированную кнопочку *

Шаг 7
Скопируйте слой с градиентом. Нажмите Ctrl + I и поставьте режим смешивания Overlay.
Создаем красивую, детализированную кнопочку *

Шаг 8
Добавьте радиальный градиент поверх кнопки. Для этого выделите слой, выберите Gradient Tool и сделайте белый цвет основным.
Создаем красивую, детализированную кнопочку *
Нажмите Ctrl+D, чтобы снять выделение. Поставьте режим смешивания Overlay.

Шаг 9
Добавьте любой текст. Я выбрал шрифт Arial, размер 14 пикс. Добавьте легкую тень.
Создаем красивую, детализированную кнопочку *