1. Фон

В общем, фон для нас не слишком важен, но мы постараемся сделать что-то интересное для наших баджиков. Но если Вы хотите поставить их на свой сайт, то фон нужно подобрать соответствующий Вашему дизайну.

Я буду использовать размер 800 x 600 пикселей. Заполните документ тёмным цветом, вроде #2e1f13.

Возможно, вы останитесь довольны и этим, но мы сделаем интересную деревьяную текстуру для фона (их много, поищите подходящую).

Можете посмотреть вот здесь - CG Textures. Если нашли подходящую, скопируйте ей на наш документ и измените размер. Теперь уменьшите прозрачность и поиграйте с режимами наложения.

Посмотрите на скриншот ниже. Я сделал 3 копии с разными режимами наложения и прозрачностью.

2. Приступим к созданию иконок

Создадим основу наших иконок. Возьмите инструмент elliptical marquee tool, зажмите шифт, чтобы сделать круглое выделение. Создайте новый слой и заполните нужным цветом.

Теперь нам нужно "отрезать" кусочек иконки и повернуть его. Для начала возьмите polygonal lasso tool и выделите угол, как показано ниже:

Вырежьте выделенное на новый слой (layer via cut). Поверните наш новый слой (edit > transform > rotate 180) возможно вам придётся ещё вручную немного его подвинуть, нажав ctrl+t.

Теперь заполните наш уголок каким-то светлым цветом, чтобы он хорошо контрастировал с основным.

3. Эффекты(стили слоя)

Ну что же, добавим нашим иконкам глубины цвета? Нам нужно сделать градиент на нашей иконке, так что нажмите правую кнопку на слое и включите Blending Options.

• Gradient Overlay (сама иконк)
• Gradient Overlay (белый уголок)

4. Добавим текст

Инструментом текст напишите что-нибудь.

Нажмите ctrl+t, чтобы расположить его, как вам нужно.

Чтобы текст выглядел эффектнее, добавим стиль слоя Drop Shadow.