Web 2.0 - Делаем бейджик

Урок по созданию простого бейджика для сайта в стиле Web 2.0. Этим уроком мы открываем серию уроков по созданию веб элементов в стиле Web 2.0.

Итак, начинаем.

Создадим новый документ с произвольными размерами (я установил размеры 400х400 пикс) и белым фоном.

Выберем необходимый цвет для нашего бейджика. Я установил в качестве основного цвет 091dd7.

Затем выбираем инструмент Произвольная фигура.



Дальше нам нужно выбрать необходимую форму.





Удерживая клавишу Shift (для сохранения пропорций), рисуем фигуру.



Теперь выделем нашу фигуру. Для этого, удерживая клавишу Ctrl кликнем по иконке слоя в палитре слоев.



Дальше создадим новый слой и перейдем в меню Выделение - Модификация - Сжать. Вводим значение 1 пикс и жмем OK.



Теперь нам понадобится инструмент Градиент. Выбираем необходимый градиент (от цвета к прозрачному).



Настраиваем его необходимым образом, т.е. устанавливаем цвет чуть светлее чем тот которым залита наша фигура. Я установил цвет 0969f9.



Проводим линию по диагонали, начиная с нижнего угла, и получаем следующее.



Теперь создадим новый слой и выберем инструмент Овальная область, плюс к этому кликнем на иконке Пересечение с выделенной областью.



Рисуем овал так чтобы он пересекался с выделением которое было у нас раньше и чтобы получилось примерно как на рисунке. С первого раза может не получиться, тогда просто отменяйте действие и пробуйте еще раз.



С помощью инструмента Заливка заливаем получившуюся область белым цветом и устанавливаем в палитре слоев прозрачность слоя 25%.



Теперь два раза кликнем в палитре слоев на слое с формой и в открывшемся окне настройки стилей добавим эффект тени.



Вот что должно получиться в итоге.



Останется только добавить необходимый текст и все.