Рисуем кнопку для сайта в Photoshop

В сегодняшнем уроке я расскажу вам, как создать кнопку для сайта в Photoshop.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Откройте Photoshop и создайте новый документ 500х500 пикселей, разрешение 72 пикс/дюйм, режим RGB.

Установите цвет #8e8e8e и при помощи инструмента Прямоугольник со скругленными углами (U) создайте фигуру.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Добавьте в ней второй прямоугольник со скругленными углами меньшего размера. Нажмите клавишу D, чтобы установить цвета по умолчанию.

Перейдите к инструменту Затемнитель (O), убедитесь, что у вас выбран слой с первым прямоугольником и обрисуйте его края, подобно изображению ниже.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Инструментом Осветлитель (O) осветлите области первой фигуры, как показано ниже.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Перейдите на слой со второй формой и обрисуйте её инструментами Осветлитель и Затемнитель. Опирайтесь на скриншот ниже.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Поверх двух прямоугольников нарисуйте третий с такими же закругленными углами черного цвета.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Примените к нему стиль Наложение градиента.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Далее выберите инструмент Градиент (G) и в верхней панели параметров установите следующие настройки.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

В верхней части кнопки инструментом Перо (P) создайте форму и примените к ней настроенный градиент.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Активируйте инструмент Произвольная фигура (U), в наборе фигур найдите корзинку и добавьте её на нашу кнопку.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Теперь вы знаете, как без труда создать кнопку в Photoshop. По желанию вы можете изменить цвет кнопки или добавить на неё другой подходящий значок.

 title="Рисуем кнопку для сайта в Photoshop" alt="Рисуем кнопку для сайта в Photoshop"

Ссылка на источник урока.