Рейтинг: 0.0/0

Метки

photoshop, стильная кнопка, фотошоп, дизайн элементов, кнопки глобусы

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » Статьи » Дизайн элементов » Кнопки "Глобусы" для вашего сайта

Урок начинается! Создайте новый документ с разрешением 500 × 300 и заполните этот холст белым цветом. Затем выберите Rounded Rectangle Tool (Radius: 30 px) и нарисуйте следующую форму, используя цвет # d61d23.

После этого примените следующие стили слоя к этому слою: Внутренняя тень , Gradient Overlay

Ваша кнопка должна выглядеть так:

Теперь время для создания отражения для кнопки. Дублируйте текущий слой с помощью Ctrl + J, а затем создайте новый слой и слейте его с дубликатом, чтобы соединить все стили в один слой. После этого отразите его по вертикали Edit> Transform> Flip Vertical, как на картинке ниже:

Чтобы сделать отражение более прозрачным в нижней части изображения примените Quick Mask Mode с градиентом, как показано ниже:

Затем вернитесь в стандартный режим. Теперь у нас есть некоторая выделенная область. Нажмите Delete, чтобы удалить изображение в выделенной области.

Снимаем выделение с помощью Ctrl + D. Переходим к следующему шагу. Я хотел бы добавить несколько бликов на кнопку. Для этого выберем Rounded Rectangle Tool (Radius: 80 px) и создадим новую форму белого цвета.

Растрируйте этот слой Layer> Rasterize> Shape. После этого примените Quick Mask Mode еще раз и заполните следующим градиентом:

Вернитесь в стандартный режим, и вы получите выделенную область снова. Нажмите Delete, чтобы очистить выделенную часть изображения.

Снимите выделение с области (Ctrl + D) и режим наложения для текущего слоя измените на Overlay.

Мы закончили с кнопкой. Теперь, переходим к следующему шагу. Я думаю, что будет намного лучше, если мы поместим некоторые элементы дизайна на кнопке. Для этого выбираем Ellipse Tool и создаём округлую форму, как на картинке ниже, используя белый цвет:

После этого примените такие Blending Options этого слоя: Внутренняя тень , Inner Glow , Gradient Overlay , Stroke

(Автор урока явно перепутал цветовые коды на скриншотах,везде #FFD9E1 потому воспользуйтесь утилитой для определения цветовых участков изображений, например этой, либо можете взять мои цвета: для градиента это #fa968d и #ac181f, для градиента обводки #fed4df и #700300. - Прим.PS-Studio.Info)

Результат показан ниже:

Время найти изображение для нашего округлого элемента дизайна. Найти разные картинки земного шара можно в Google Images или использовать мою. Откройте его и уменьшите немного, а затем поместите изображение, как показано ниже.

Хорошо, сделайте это изображение черно-белым, используя Image> Adjustments> Desaturate (Ctrl + Shift + U) и смените режим наложения этого слоя на Overlay:

Выберите инструмент Sharpen Tool (Brush: 100 px, Mode: Normal, Strength: 40%), чтобы сделать этот участок более четким.

И последнее, что нам необходимо сделать. Чтобы закончить урок, нужно добавить текст. Выбираем Horizontal Type Tool и пишем что-нибудь шрифтом белого цвета, как на картинке ниже.

На изображении выше мною использовался шрифт Segoe UI белого цвета. Фактически, это коммерческий шрифт, но если он вам не нравится, вы можете легко найти ему хорошую альтернативу, например, Arial Black. После этого примените следующие стили слоя к этому слою: Drop Shadow

Теперь у нас есть что-то вроде этого.

Отлично! Наша работа готова! Наслаждайтесь своими превосходными кнопками! Также вы можете изменить их цвет.

Источник Перевод: PS-Studio.Info

Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: