Квадратная кнопка с лентой в Photoshop

Опубликовано в Web дизайн

344234242356764_mini-8725371

.В этом уроке мы будем делать простую квадратную кнопку, и добавлять на неё ленточку, на которой всегда очень выразительно смотреться различные надписи. Приёмы которые используются в этом уроке, могут в дальнейшем быть применены вами в создании логотипов, иконок, различных других кнопок и т.д.

Шаг-1 Создайте новый проект в Фотошопе (Ctrl+N) размером 300 на 300 пикселей, цвет фона можете по желанию выбрать любой, я пока оставил его белым.

89745454355-00-3244984

Шаг-2 Теперь создайте новый слой (Shift+ Ctrl+N), можно назвать его кнопка.
Далее возьмите инструмент Прямоугольник (N), в настройках инструмента поставьте радиус округления углов на 25 пикселей, цвет заливки # bac014.

89745454355-01-4294533

Удерживая клавишу Shift нарисуйте квадратную форму.

89745454355-02-5158031

Шаг-3 Зайдите в стили слоя, дважды кликнув по миниатюре на панели слоёв, далее установите стили в соответствии с скриншотами ниже.

89745454355-03-6845248

89745454355-04-5887478

Получившийся результат должен быть такой.

89745454355-05-1711083

Шаг-4 Создайте новый слой с названием Лента.  Выберите инструмент Прямоугольник (N), уберите радиус скрепления углов, цвет заливки # 023a5d.
Нарисуйте прямоугольную фигуру.

89745454355-06-6143928

Шаг-5 Используя свободное трансформирования (Ctrl+T) на слое с лентой, переместите повернув её в верхний левый угол.

89745454355-07-4828198

Шаг-6 Удерживая клавишу Ctrl, кликните по миниатюре слоя с лентой, тем самым выделив рабочую область. Теперь возьмите инструмент Прямоугольная область (M) и проделайте действие показанное ниже в анимированном примере. Клавиша Delete удаляет всё внутри выделенной области, а сочетание Ctrl+D снимает выделение рабочей области.

423423432452246-2251671

Сделайте тоже и с другой частью ленточки.

Шаг-7 Теперь следующие стили для слоя с лентой.

89745454355-09-4156728

89745454355-10-7657131

Результат сейчас такой.

89745454355-11-6114007

Шаг-8 Создайте новый слой сразу после фонового. Возьмите инструмент Прямоугольник (N), поставьте ему цвет заливки чёрный. Нарисуйте маленькие квадраты как показано ниже.

89745454355-12-418889189745454355-13-7740046

Шаг-9 Всё на этом основную часть мы закончили, осталось добавить нужный вам текст.

У меня результат получился такой.

89745454355-15-9878879