Создаем в фотошопе современную кнопку для дизайна сайта

9

479
07-07-2011

Создаем в фотошопе современную кнопку для дизайна сайтаСегодня дизайнерские элементы для современных интерфейсов приобрели особое значение в оформлении сайтов. Всякие кнопочки, указатели, стикеры и другие визуальные детали очень украшают любой дизайн. Поэтому в сегодняшнем уроке мы будем учиться делать простейшую кнопку «Добавить в корзину». Хотя, в принципе, текст для кнопки может быть любой на ваше усмотрение. Ну а помогут нам в этом несколько фигур и текст, к которым мы применим стили слоя. Главное усидчивость и внимательность.

Шаг 1.
Создаем в фотошопе новый документ, заливаем его белым цветом. Выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В верхнем вспомогательном меню в установках инструмента ставим «Радиус» 50 пикс и цвет — черный. Создаем фигуру и снижаем параметр «Заливка» (Opacity) до 7%.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 2.
Опять выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В верхнем вспомогательном меню в установках инструмента ставим «Радиус» 50 пикс и цвет — #ffc051 и создаем фигуру чуть меньшего размера. Должно получиться как на рисунке ниже.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 3.
Два раза щелкаем по слою с цветной фигурой и открываем стиль слоя. Выбираем закладку «Обводка» (Stroke). Настройки как на рисунке ниже.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 4.
В предыдущем шаге цвет градиента от #f5b344 (светлый) к #c89237 (темный).Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 5.
Открываем закладку «Наложение градиента» (Gradient Overlay). Настройки как на рисунке ниже. Градиент от черного к белому. Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 6.
Открываем закладку «Внутренняя тень» (Inner Shadow). Настройки как на рисунке ниже. Цвет белый.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 7.
И наконец открываем закладку «Тень» (Drop Shadow). Настройки как на рисунке ниже. Цвет черный.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 8.
Должен получиться такой вот результат.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 9.
Теперь на новом слое создаем однопиксельную разделительную линию (цвет #ffc254) поперек кнопки, как на рисунке ниже.Создаем в фотошопе современную кнопку для дизайна сайта

Два раза щелкаем по слою с линией, открываем стиль слоя, выбираем закладку «Наложение градиента» (Gradient Overlay) и накладываем градиент с цветами от #c99337 (темный) к #f4b244 (светлый).Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 10.
Теперь делаем дубликат слоя с линией и сдвигаем линию на 1 пиксель вправо.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 11.
Для того, чтобы эта линия стала светлой, два раза щелкаем по дубликату слоя с линией и накладываем градиент с цветами от #ffecaa (светлый) к #f3a627 (темный).Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 12.
Теперь воспользуемся шрифтом Arial Black 16 пикселей и белым цветом напишем текст «В корзину». Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 13.
Открываем стиль слоя для слоя с текстом и выбираем закладку «Внешнее свечение» (Outer Glow). Настройки как на рисунке ниже, цвет #d19125.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 14.
Теперь выбираем закладку «Тень» (Drop Shadow). Настройки как на рисунке ниже.Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 15.
Опять воспользуемся шрифтом Arial Black 16 пикселей и цветом #996633 справа от разделительной линии напишем текст «$9.99».Создаем в фотошопе современную кнопку для дизайна сайта

Шаг 16.
Применим к нему стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе современную кнопку для дизайна сайта

Финал
В итоге получили такую вот кнопку для дизайна. Следует отметить, что используя разные цвета вы самостоятельно можете сделать несколько вариантом кнопок.Создаем в фотошопе современную кнопку для дизайна сайта

  • Короткая ссылка на этот пост: https://www.designonstop.com/?p=3816
  • Поддержать DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Комментариев 9 комментариев

Спасибо за такой урок! Реально не хватало таких знаний ))) Уже сколько магазинов сделал, а кнопки брал то там то сям…. )))

ОтветитьОтветить

Клевый урок, подчерпнул для себя один интересный момент с градиентом. Добавлю лишь, что менять цвет кнопки проще всего объединив все слои в один и используя цветовой тон/насыщенность.

ОтветитьОтветить

@Дмитрий:
Отлично! Тоже замечала, что кнопку легче где-то тиснуть, чем самой сделать )))

@Yurlick:
Да, кстати можно через цветовой тон/насыщенность. Так даже легче ))

ОтветитьОтветить

А лучше не сливать слои в один,а отпечатать видимые Ctrl+Shift+Alt+E и у них уже цвет менять.И под конец в PSD сохранить.

ОтветитьОтветить

@SwaEgo:
Очень хорошая функция Ctrl+Shift+Alt+E. Я о ней не так давно узнала, но уже активно использую.

ОтветитьОтветить

@Наташа Клевер: :)так и я узнал месяца три назад. Раньше сливал слои,потом локти кусал.Там ещё много неизведанного 🙂

ОтветитьОтветить

@SwaEgo:
Это точно! 🙂

ОтветитьОтветить

Отличный урок. Всё получилось. Красиво и легко.

ОтветитьОтветить

@Роберт:
Спасибо!

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

47 queries in 0,398 seconds.