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

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

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

Вы знаете, как создавать 3D-кнопки в Photoshop?

1. Шаг 1. Подготовьте документ
2. Шаг 2. Установите прямоугольник для кнопки 3D
3. Шаг 3. Создайте 3D-кнопку
4. Шаг 4: Сохранить как стиль слоя
5. Шаг 5: Как использовать сохраненный стиль слоя
6. Шаг 6. Добавьте текст на кнопку
7. Шаг 7: Завершите

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

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

Чтобы создать 3D-кнопку в Photoshop, вам нужно будет создать для нее собственный документ. Для этого откройте Photoshop и нажмите «Создать»> «Пользовательский», затем начните вводить значения.

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

1. Размеры: 900 x 300 пикселей
2. 300 пикселей / дюйм
3. Цветовой режим RGB

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

Шаг 2. Установите прямоугольник для кнопки 3D

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

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

Щелкните один раз на белом слое. При этом автоматически отобразится поле «Создать прямоугольник со скругленными углами». Вы будете использовать это поле, чтобы указать размер прямоугольника.

Для кнопки в примере размер будет:

1. Ширина: 300 пикселей
2. Высота: 75 пикселей

В этом примере также гарантируется, что углы округлены до 10 пикселей. Ни слишком высоко, ни слишком низко. Затем нажмите ОК.

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

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

В целях этого руководства и для иллюстрации того, как будут выглядеть кнопки «вверх» и «вниз», например, кнопка «вниз» станет красной.

Шаг 3. Создайте 3D-кнопку

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

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

Когда появится поле Layer Style, перейдите к опции Bevel & Emboss, затем включите ее.

Это быстрый и простой способ сделать края кнопок более трехмерными. В этом руководстве используются следующие примеры настроек:

Состав

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

Затенение

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

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

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

Затем включите Gradient Overlay. Настройки следующие:

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

Наконец, в примере включен Drop Shadow, чтобы кнопка выглядела более «плавающей» на белом фоне веб-сайта или блога. Опять же, вот настройки:

Состав

1. Режим наложения: несколько
2. Непрозрачность: 35
3. Угол: 90
4. Расстояние: 2
5. Размах: 6
6. Размер: 8

Качество

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

Пришло время сохранить эти характеристики как стиль слоя.

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

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

Вот как!

Перед тем, как нажать «ОК» в диалоговом окне «Стиль слоя», нажмите «Новый стиль». Когда вы это сделаете, Photoshop сохранит стиль слоя (стиль слоя), который вы создали для своей кнопки.

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

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

Теперь, когда вы создали свою кнопку и сохранили ее как стиль слоя, посмотрите, как она работает в «поднятом» состоянии. Это вдвое сократит ваше рабочее время.

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

Затем вместо двойного щелчка по самому слою для отображения диалогового окна «Стили слоя» дважды щелкните стиль слоя на панели «Библиотеки».

Когда вы это сделаете, Photoshop автоматически применяет сохраненный стиль к слою, содержащему новую кнопку, сохраняя при этом его цвет и форму. Теперь у вас есть две кнопки, одна находится в состоянии «вверх», а другая – в состоянии «вниз». Сделать это просто!

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

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

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

В этом руководстве будет написано слово «подписаться», потому что это то, что вы довольно часто видите на сайтах социальных сетей и в сетях.

Выбор шрифта для кнопки полностью зависит от вас. Montserrat, Proxima Nova, Arial и Verdana – все это широко используемые и безопасные веб-альтернативы.

Однако после того, как это будет сделано, вам необходимо внести еще несколько тонких изменений.

Сначала дважды щелкните текстовый слой, чтобы появилось диалоговое окно «Стиль слоя».

Затем нажмите Inner Shadow. Этот шаг дает эффект, похожий на буквы, выгравированные на кнопке. Точные настройки, которые использовались в примере для этого урока:

Состав

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

Качество

1. Контур: линейный
2. Шум: 0

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

1. Режим наложения: затемнение цвета
2. Непрозрачность: 90
3. Стиль: линейный
4. Угол: 90
5. Масштаб: 100

Шаг 7: Завершите

После стилизации текста, особенно если вы хотите использовать его повторно, переключитесь на «Новый стиль» и сохраните его, прежде чем нажать «ОК».

Затем вы можете быстро переключаться между двумя слоями кнопок, чтобы увидеть, как выглядят состояния «вверх» и «вниз».

Отлично, не правда ли? Чтобы сохранить файл, выберите «Файл»> «Сохранить как» и сохраните файл в формате, соответствующем любому проекту, над которым вы работаете.

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

Если вы хотите узнать о других вещах, которые можно сделать с помощью этой программы. Ознакомьтесь со статьей: Как удалить фон в Photoshop.

Надеюсь, у вас все получится.