Как создать 3D-кнопки с помощью Adobe Photoshop

Вот как создать 3D-кнопки в Photoshop, а также состояния ‘вверх’ и ‘вниз’, чтобы вы могли их анимировать

В Adobe Photoshop можно создать множество удивительных вещей, полезных в Интернете, начиная от простых рамок для фотографий и заканчивая сложными пользовательскими интерфейсами. Одна из самых полезных вещей, которые можно создать в Photoshop, – это 3D-кнопки, которые пригодятся, если вы ведете блог или сайт с нестандартным интерфейсом

В этой статье мы покажем вам, как создать 3D-кнопки с помощью Photoshop, а также визуальные состояния ‘вверх’ и ‘вниз’, чтобы вы могли их анимировать.(В этой статье мы не будем рассматривать саму анимацию)

Шаг 1: Подготовьте документ

Хотя 3D-кнопки чаще всего встречаются на веб-сайтах, важно отметить, что для них есть и другие применения, например, анимированные GIF-файлы, макеты товаров и мобильные игры. В зависимости от того, для чего вы создаете эту кнопку, формат конечного файла и его размеры могут отличаться

Чтобы создать 3D-кнопку в Photoshop, необходимо создать для нее пользовательский документ. Для этого откройте Photoshop и нажмите Create New > Custom. Начните вводить свои значения

Чтобы создать 3D-кнопку, вам понадобится горизонтальный документ. Для нашего документа мы использовали:

• 900 x 300 пикселей в высоту.
• 300 пикселей/дюйм.
• Цветовой режим RGB.

Хотя эти параметры не являются жестким и быстрым правилом, это гарантирует, что у вас будет более чем достаточно места для работы, а также возможность масштабировать размер кнопки вверх или вниз по мере необходимости

Шаг 2: Создайте прямоугольник для 3D-кнопки

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

Чтобы создать 3D-кнопку, нажмите на инструмент Rounded Rectangle Tool в левой части экрана, показанный здесь красным цветом. Вы также можете использовать сочетание клавиш U для доступа к нему

Щелкните один раз на белом слое: это автоматически вызовет окно Создать скругленный прямоугольник. С помощью этого поля вы будете задавать размеры прямоугольника

Для нашей кнопки мы выбрали:

• 300 пикселей в ширину.
• 75 пикселей в высоту.

Мы также убедились, что углы закруглены на 10 пикселей. Не слишком высоко, но и не слишком низко. Затем мы нажали OK

Примечание: Кнопки различаются по размеру и форме, поэтому не чувствуйте, что вы должны использовать именно эти размеры. Кроме того, если вы ищете дополнительную информацию о быстрых клавишах, вот некоторые из наиболее полезных клавиатурных команд Photoshop

Когда вы нажмете OK , Photoshop создаст закругленный прямоугольник с указанными размерами внутри вашего слоя. Вы можете изменить его цвета Fill и Stroke с помощью выпадающих меню в левом верхнем углу экрана

Для целей данного урока – и для иллюстрации того, как могут выглядеть кнопки ‘вверх’ и ‘вниз’ – мы сделаем кнопку ‘вниз’ красной

Шаг 3: Сделайте кнопку трехмерной

После создания базовой кнопки и выбора ее цвета, вы захотите настроить ее в диалоговом окне Стиль слоя. Это нужно для того, чтобы придать ей более трехмерный вид

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

Когда появится окно ‘Стиль слоя’, перейдите к опции Bevel & Emboss. Включите его

Это быстрый и простой способ придать краям кнопки более рельефный, ‘3D’ вид. Для этого урока мы использовали именно эти настройки:

Структура

• Стиль: Внутренний скос.
• Техника: Зубило мягкое.
• Глубина: 605.
• Направление: Вверх.
• Размер: 5.
• Смягчение: 1.

Затенение

• Угол: 90.
• Высота: 37.
• Режим выделения: Осветление, непрозрачность 55%.
• Режим тени: Множественная, 25% непрозрачность.

Хитрость заключается в том, чтобы сделать настройки достаточно высокими, чтобы вы могли увидеть некоторую разницу, но не настолько сильными, чтобы она была подавляющей

После того как мы закончили с Bevel & Emboss, мы перешли к Contour и включили его тоже. Контур делает определение Bevel & Emboss немного сильнее, и для этого урока мы выбрали настройку Cone – Inverted

Далее включите Наложение градиента. Это позволяет придать кнопке округлый, слегка ‘глянцевый’ вид. Настройки следующие:

• Режим наложения: Наложение.
• Непрозрачность: 90.
• Стиль: Линейный.
• Угол: 90.
• Масштаб: 100.

Наконец, мы включили Drop Shadow , чтобы кнопка выглядела немного ‘приподнятой’ на белом фоне сайта или блога. И снова вот настройки:

Структура

• Режим наложения: Множественный.
• Непрозрачность: 35.
• Угол: 90.
• Расстояние: 2.
• Разброс: 6.
• Размер: 8.

Качество

• Контур: Линейный.
• Шум: 0.
• Layer Knocks Out Drop Shadow: Вкл.

Теперь пришло время сохранить эти параметры как стиль слоя

Шаг 4: Сохранить как стиль слоя

Когда вы закончите с настройками вашей кнопки, она начнет выглядеть 3D. Поскольку высока вероятность того, что вы будете создавать более одной 3D-кнопки, нам нужно найти быстрый и простой способ сделать это

Вот как

Прежде чем нажать OK в диалоговом окне Стиль слоя , нажмите Новый стиль. После этого Photoshop сохранит стиль слоя, созданный для вашей кнопки

Если вы используете Photoshop CC, новый стиль будет сохранен в разделе Libraries , как показано выше. Это очень быстро и легко доступно

Шаг 5: Как использовать сохраненный стиль слоя

Теперь, когда вы разработали дизайн кнопки и сохранили его как стиль слоя, давайте посмотрим его в действии для состояния ‘вверх’. Не буду врать, это сократит ваше рабочее время вдвое

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

Далее – вместо двойного щелчка на самом слое, чтобы вызвать диалоговое окно Стили слоя – дважды щелкните на стиле слоя в панели Библиотеки

После этого Photoshop автоматически применит сохраненный стиль к новому слою с кнопкой, сохранив ее новый цвет и форму. Теперь у вас есть две кнопки – одна в состоянии ‘вверх’, а другая в состоянии ‘вниз’ – и это так просто сделать. Мне нравится это сочетание клавиш

Шаг 6: Добавьте текст к кнопке

Далее мы добавим текст на кнопку

Чтобы добавить текст, создайте новый слой над двумя слоями с кнопками. Щелкните инструмент Type tool , чтобы начать вводить текст

В этом учебнике мы будем писать слово ‘подписка’, потому что это то, что вы часто видите на веб-сайтах и платформах социальных сетей

Мы также будем использовать шрифт San Serif, безопасный для веб-сайтов. Окончательный выбор шрифта, который вы будете использовать для своей собственной кнопки, остается за вами.Montserrat, Proxima Nova, Arial и Verdana – все они являются широко используемыми альтернативами и безопасны для Интернета

После этого, однако, есть еще несколько тонких изменений, которые необходимо сделать для того, чтобы текст ‘заиграл’

Во-первых, дважды щелкните на слое, содержащем текст, чтобы вызвать его в диалоговом окне Стиль слоя

Затем нажмите Внутренняя тень , чтобы добавить немного впадины (или утопленной области) к тексту. Это позволит создать впечатление, что буквы выгравированы на кнопке. Ниже приведены точные настройки, которые мы использовали для этого урока

Структура

• Режим наложения: Умножение.
• Непрозрачность: 35.
• Угол: 90.
• Расстояние: 2.
• Дроссель: 4.
• Размер: 1.

Качество

• Контур: Линейный.
• Шум: 0.

Затем примените к этим буквам наложение Gradient Overlay , чтобы они легче вписывались в кнопку и не казались плоскими. Опять же, настройки для нас следующие:

• Режим наложения: Color Burn.
• Непрозрачность: 90.
• Стиль: Линейный.
• Угол: 90.
• Масштаб: 100.

Шаг 7: Завершение работы

После создания этого стиля текста – особенно если вы хотите использовать его снова – перейдите в Новый стиль и сохраните его, прежде чем нажать OK

После этого вы можете быстро переключить видимость между двумя слоями кнопок, чтобы посмотреть, как выглядят состояния ‘вверх’ и ‘вниз’

Довольно круто, да? Чтобы сохранить файл, перейдите File > Save As и сохраните его в формате, соответствующем формату файла для проекта, над которым вы работаете

Настройте свой блог с помощью 3D-кнопок и виджетов

Теперь, когда вы знаете, как создавать 3D-кнопки в Photoshop, вы можете творчески подойти к этому, создавая собственные 3D-кнопки в соответствии с вашими потребностями. А имея в своем арсенале эти навыки, вы сможете создать продукт, который будет не только профессиональным, но и индивидуальным

Хотите узнать о других вещах, которые можно сделать с помощью этой программы? Вот как удалить фон в Photoshop