Как создать бейджик?

Бейджик в web-дизайне означает некое подобие бейджа всем привычного, на котором обычно размещается информация о разделе сайта, о конкретной теме или услугах сайта. Бейджи могут иметь различные формы, как простые (геометрические фигуры), так и более сложные (комбинирование нескольких фигур).

Вам понадобится

• Программное обеспечение Adobe Photoshop.

Инструкция

После запуска графического редактора нажмите сочетание клавиш Ctrl + N (создать файл). В открывшемся окне необходимо указать, что создается RGB-документ квадратной формы с размерами 600 px, желательно использовать белый фон.

В левой части окна программы находится панель инструментов, нажмите на инструмент Custom Shape, в верхней панели появятся дополнительные параметры, среди которых будет выбор формы будущего бейджика. В окне раскрывающегося списка Shape выберите любую форму. Если подходящей формы вы не нашли, нажмите на изображение стрелки и выберите коллекцию фигур Object.

Создайте фигуру в документе, растянув ее левой кнопкой мыши. Для выполнения наложения растра на изображение воспользуйтесь командой Rasterize Layer из контекстного меню.

Затем выделите фигуру стандартным способом либо при помощи клавиши Ctrl, которую следует зажимать одновременно с нажатием левой кнопкой мыши на слое с созданной фигурой.

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

Для снятия выделения с фигуры воспользуйтесь сочетанием клавиш Ctrl + D. Получившееся изображение следует обработать, т.е. добавить несколько эффектов. Выделите слой с фигурой и нажмите кнопку «Фильтры» на панели слоев. Примените фильтр Drop Shadow со следующими параметрами: Opacity-20, Angle-120, Distance-10, Size-15.

Затем примените фильтр Bevel and Emboss со следующими параметрами: Style-Inner Bevel, Technique-Chisel Hard, Size-2.

Далее вам понадобится создать новый слой. Для этого слоя необходимо сбросить все цвета, это можно сделать, нажав на клавиатуре английскую букву D. На палитре инструментов воспользуйтесь «Круглым выделением» и сделайте выделение края вашей фигуры. На панели слоев установите следующие параметры: Layers-Lighten, Opacity-20.

Залейте новый слой белым цветом и уберите выделение. Теперь осталось только добавить информацию о разделе сайта или любое слово на ваше усмотрение. Для этого используйте инструмент «Текст».

Оцените статью!