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

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

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

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

Настройте файл 3D-кнопок в Photoshop

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

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

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

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

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

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

Используйте кнопку прямоугольника с закругленными углами для создания  a Button in Photoshop

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

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

Настройка параметров для закругленных  Инструмент «Прямоугольник» в Photoshop »><noscript><img class= ><noscript><img alt =
Сочетания клавиш Adobe Photoshop 101

Независимо от того, новичок вы или профессионал, эти сочетания клавиш Adobe Photoshop сэкономят вам часы времени .

 Изменить цвет прямоугольника в Photoshop

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

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

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

Скос и тиснение прямоугольника в Photoshop

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

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

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

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

Структура

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

Затенение

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

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

Контурный прямоугольник в Photoshop

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

Применить наложение градиента к прямоугольнику в Photoshop

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

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

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

Структура

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

Качество

  • Контур: линейный.
  • Шум: 0
  • Слой выбивает падающую тень: On

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

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

Сохранить новый стиль слоя в Photoshop

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

Вот как это сделать.

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

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

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

Создать новую кнопку со стилем слоя  в Photoshop »><noscript><img class=

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

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

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

Добавить текст к вашей 3D-кнопке

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

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

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

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

Добавить внутреннюю тень к  Текст на кнопке 3D в Photoshop

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

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

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

Структура

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

Качество

  • Контур: линейный
  • Шум: 0
Добавить градиентное наложение к тексту на кнопке 3D в Photoshop

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

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

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

Сохранить текст как стиль слоя в Photoshop

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

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

Создание кнопки 3D  в Photoshop

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

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

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

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

Навыки Alexa, которые помогут вам уснуть. Функция изображения
8 навыков Alexa, которые помогут вам лучше спать

Используйте эти навыки на своем Amazon Echo, чтобы лучше выспаться ночью. Вы поблагодарите нас утром.

Об авторе

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

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в письмо, которое мы вам только что отправили.



Создайте элегантную кнопку Photoshop за 15 минут

Логотипы , веб-сайты и многое другое…
Логотипы, веб-сайты, обложки книг и многое другое…
Получить дизайн

Кнопки, кнопки, приклад на! Вы видите этих маленьких ребят почти везде, куда вы смотрите в Интернете — в меню, контактных формах и на страницах продуктов (и это лишь некоторые из них).. Поскольку кнопки являются неотъемлемой частью пользовательского опыта, я собираюсь показать вам, как создать свою собственную элегантную кнопку в Photoshop. Это довольно простой процесс, занимающий не более 15-20 минут.

Давайте начнем и добавим немного удивительности вашему пользовательскому интерфейсу.

Откройте Photoshop — Ctrl + N, чтобы открыть новое окно холста. Ширина и высота полностью зависят от вас, но убедитесь, что разрешение не менее 72 DPI , а цветовой режим — RGB 8 бит .

Мы собираемся быстро подготовить фон — залить текущий фон серым цветом.

Затем добавьте эффект Шум (Фильтр> Шум> Добавить Шум…).

Большинство кнопок имеют закругленные углы, но в данном случае я хочу, чтобы иметь квадратную форму. Создайте новый слой (Ctrl + Shift + N), установите цвет переднего плана на оранжевый и используйте инструмент «Прямоугольник» (U), чтобы создать новую форму. Обязательно выберите «Слои фигуры» в верхнем меню.

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

Первый стиль, который мы добавляем, — это Drop Shadow .

Не закрывайте палитру стилей слоя пока! Следующий стиль, который нужно добавить, — это Inner Shadow , он добавит блеска верхней части кнопки, придав ей трехмерный вид.

Двигаясь дальше, выберите Inner Glow , чтобы добавить объема. Это может показаться незначительным дополнением, но поверьте мне, важны именно мелкие детали.

Примените эффект Gradient Overlay и установите режим наложения на Overlay . Возможно, вам потребуется установить флажок Обратный рядом с градиентом, чтобы убедиться, что верхняя часть кнопки светлая, а нижняя — темнее.

Конечный эффект — Обводка .

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

Теперь создайте Обтравочную маску на белой фигуре (щелкните правой кнопкой мыши слой> Создать обтравочную маску).

Затем выделите слой с белой формой и добавьте маску слоя — щелкните значок «Маска слоя» в нижней части палитры слоев.

Используйте инструмент Градиент (G) , чтобы закрыть белую фигуру Передний план на прозрачный градиент .

Измените Режим наложения для белой формы на Overlay. Теперь у нас есть гладкий эффект для кнопки.

Наша кнопка должна что-то говорить, верно? Я выбрал классический шрифт, например Helvetica Neue.

Легко центрируйте текст на кнопке:

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

Придайте тексту тень эффект, как показано ниже:

Ура, мы создали кнопку! Надеюсь, это руководство помогло добавить еще одну красивую кнопку в ваш веб-дизайн.

Есть вопросы по созданию кнопка веб-сайта?

Оцените статью
clickpad.ru
Добавить комментарий