Сегодня мы вновь обратимся к основам дизайна, а именно элегантной, простой и профессиональной кнопке от Liam McCabe. Liam создает все элементы веб дизайна, поэтому он будет вашим гидом по туториалу. Если вы ищите способ сдобрить ваш дизайн уникальными кнопками, советую не читать дальше…
В этом уроке я покажу вам, как создать красивую, детализированную кнопочку в Photoshop. Различные техники применены здесь, чтобы достичь эффект пикселей, и процесс создания займет не более 15-20 минут. Итак, приступим! Шаг 1
Откройте Phtoshop. Создайте новый файл, нажав Ctrl+N. Примените следующие настройки -
Шаг 2
Заполните текущий слой. Нажмите Shift+F5, чтобы появилось меню настроек. Выберите темно-синий цвет (#141d28) -
Шаг 3
Советую вам использовать направляющие. Чтобы добавить ее, идите в View > New Guide. Выберите вертикальную направляющую и позицию 250 пикселей -
Шаг 4
Выберите Rounded Rectangle Tool и нарисуйте следующую фигуру -
Я поставил цвет фона прямоугольника на #17202b -
Шаг 5
Добавляем стили слоя. Примените следующие настройки к слою -
Шаг 6
Поставьте фоновый цвет #050607. Создайте новый слой и, удерживая Ctrl, кликните на иконку слоя с прямоугольником -
Нажмите G, чтобы выбрать Gradient Tool. Проведите мышкой от центра влево -
Не снимая выделения, выберите Marquee Tool , нажмите вверх один раз, а затем нажмите delete. И с помощью Move Tool и переместите объект, как показано на картинке ниже -
Шаг 7
Скопируйте слой с градиентом. Нажмите Ctrl + I и поставьте режим смешивания Overlay -
Шаг 8
Добавьте радиальный градиент поверх кнопки. Для этого выделите слой, выберите Gradient Tool и сделайте белый цвет основным -
Нажмите Ctrl+D, чтобы снять выделение. Поставьте режим смешивания Overlay. Шаг 9
Добавьте любой текст. Я выбрал шрифт Arial, размер 14 пикс. Добавьте легкую тень -
![[LiKER]](../img/no-avatar.gif "[LiKER]"){kind=avatar}
