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

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

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





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



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

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





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

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



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

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

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

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



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

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



Для нашей кнопки мы использовали:

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

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

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

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

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

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

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

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

Когда ваше окно стиля слоя открыто, перейдите к опции Фаска и тиснение . Включи это.

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

Состав

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

Затенение

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

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

Закончив с Bevel & Emboss, мы перешли к Контур и включил это тоже. Контур немного усиливает определение Bevel & Emboss, и для этого урока мы выбрали настройку Конус - перевернутый .

Далее включаем Градиент наложения . Это то, что придает кнопке округлый, слегка «глянцевый» вид. Настройки следующие:

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

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

как взломать смартфон через вайфай

Состав

  • Режим смешивания: Несколько
  • Непрозрачность: 35 год
  • Угол: 90
  • Расстояние: 2
  • Распространять: 6
  • Размер: 8

Качественный

  • Контур: Линейный
  • Шум: 0
  • Слой выбивает тень: На

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

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

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

Вот как.

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

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

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

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

Во-первых, давайте создадим еще одну кнопку прямо над слоем с красной кнопкой, вот так. Сделаем это зеленым, для акцента.

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

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

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

Затем мы собираемся добавить текст к кнопке.

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

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

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

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

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

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

Состав

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

Качественный

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

Затем примените Градиент наложения к этим буквам, чтобы они легче вписывались в кнопку, не выглядя плоскими. Опять же, настройки для наших:

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

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

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

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

Довольно круто, да? Чтобы сохранить файл, перейдите Файл> Сохранить как и сохраните его как файл в соответствующем формате для любого проекта, над которым вы, возможно, работаете.

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

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

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

Делиться Делиться Твитнуть Эл. адрес Как получить доступ к встроенному пузырьковому уровню Google на Android

Если вам когда-либо нужно было убедиться, что что-то выровнено в крайнем случае, теперь вы можете получить пузырьковый уровень на своем телефоне за секунды.

Читать далее Похожие темы
  • творческий
  • Adobe Photoshop
  • Советы по редактированию изображений
  • Учебник Photoshop
Об авторе Шианн Эдельмайер(136 опубликованных статей)

Шианн имеет степень бакалавра дизайна и опыт работы в подкастинге. Сейчас она работает старшим писателем и 2D-иллюстратором. Она занимается творческими технологиями, развлечениями и производительностью для MakeUseOf.

Ещё от Shianne Edelmayer

Подписывайтесь на нашу новостную рассылку

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

Нажмите здесь, чтобы подписаться