Объемные кнопки Фотошоп | как сделать стеклянную кнопку в Photoshop
В данном Уроке рассматриваются простейшие способы создания кнопки. Видео урок Стеклянная кнопка показывает как ссоздать стеклянную кнопку с помощью готовых стилей так и самостоятельно.
При создании сайтов или других интерфейсов, важным элементом являются кнопки. Фотошоп позволяет создавать всевозможные кнопки по индивидуальным критериям. В этой статье Вы узнаете как сделать кнопку в фотошоп. Существует много вариантов создания кнопки в Photoshop. Рассмотрим несколько наиболее простых варианов как сделать кнопку. В Фотошоп нам понадобяться в ПАНЕЛИ ИНСТРУМЕНТОВ следующие инструменты: прямоугольник со скруглеными краями, заливка или выбор цвета (или цвет можно назначить в ПАНЕЛИ СВОЙСТВ), текст. В ПАНЕЛИ СВОЙСТВ — цвет, стили (или в ГЛАВНОМ МЕНЮ выбрать в выпадающем меню ОКНО — стили). В окне СЛОИ: элементы функции ƒх (тиснение). В окне СИМВОЛ: размер, шрифт.
Расположение элементов интерфейса Photoshop можно прочитать здесь.
Создаем новый документ, задаем нужный размер. Фон прозрачный, режим RGB. Рекомендуется для удобства, точности центрирования и задания размера самой кнопки в Фотошоп использовать направляющие (их для наглядности можно подсветить красным цветом в настройках программы через меню РЕДАКТИРОВАНИЕ), путем перетаскивания вертикальной и горизонтальной линейки в нужное положение. На панели инструментов нажимаем инструмент прямоугольник со скруглеными краями, задаем нужное скругление (радиус) на панели свойств, ставим курсор в виде крестика на пересечении линеек и тянем фигуру до нужного размера и формы. Если сначала не выбрали цвет в панели инструментов, заливаем нужным цветом в функциях слоя.
Создание кнопки в Фотошоп с помощью готовых стилей.
Самый простой вариант получить объемную кнопку — выбрать стиль в панели свойств фигуры (или в окне СТИЛИ, которое можно вызвать в основном меню ОКНА-в выпадающем менню выбрать СТИЛИ), которые позволят сделать различные кнопки.
В Photoshop уже присутствуют наборы стилей (прозрачные, текстурные). Выбрать из наборов подходящий стиль можно нажав на треугольник справа в наборе. В данном случае набор ВЕБ стили — стиль Хром. После выбора стиля в панели СЛОЙ можно увидеть, из каких элементов функций он состоит. Каждый элемент функции можно корректировать.
После определения формы, цвета и стиля кнопки переходим к написанию текста кнопки. Рекомендуется создать новый слой для текста, чтоб векторная фигура не прикреплялась к тексту. На панели инструментов нажимаем инструмент текст, и набираем текст на изображении кнопки. Кликаем на инструмент перемещение. Открываем окно СИМВОЛ и выбираем шрифт, цвет и размер.
Текст можно оставить без стиля. Для применения стиля к тексту на слое с текстом кликаем 2 раза или нажимаем функцию. Выбираем например Тиснение. В окне задаем внутренний скос и задаем нужные параметры. В итоге получаем серую хромированнкю объемную кнопку с вдавленным текстом.
Создание кнопки со своими вариантами стилей.
Стиль кнопки можно задать самому, используя инструмент ФУНКЦИЯ на панели СЛОИ. Кликаем дважды на слое кнопки или нажимаем на понели кнопку ƒх. Самый простой вариант — стиль слоя выбираем ТИСНЕНИЕ и выбираем необходимые параметры. Добавляем ТЕНЬ.
Можно также при желании использовать внешнее свечение, обводку, перекрытие цвета или узора и другие стили на выбор. Стеклянная кнопка в фотошопе делается без заливки фигуры цветом (непрозрачность заливки -0), или залитием таким же цветом, что и основание (аналогично применяется к тексту).
Затем, как в предыдущем примере, добавляем текст со стилями тиснения. Можно к тексту применять и другие стили по желанию.
Если кнопка готова — нажимаем на ФАЙЛ в главном меню и в вкладке выбираем «сохранить для веб устройств». В окне задаем формат PNG 24 (оп поддерживает прозрачность и передает максимум оттенков изображения). Здесь же можно подкорректировать размер кнопки.
Видео как нарисовать стеклянную кнопку в Фотошоп.
Видео Стеклянная кнопка в фотошоп показывает как ссоздать стеклянную кнопку в Фотошоп с помощью готовых стилей так и самостоятельно.
Как создать металлическую кнопку в Photoshop
Прежде всего хочу сказать, что подобную работу рентабельнее выполнять в векторном редакторе, наподобие Adobe Illustrator или CorelDraw, чем в растровом редакторе Photoshop.
Но что делать, если под рукой нет векторного редактора, а работу надо выполнить прямо сейчас? Другого выхода, кроме как применить старый добрый Photoshop, нет. Но и в Photoshop нарисовать кнопку, имеющую эффект металлической поверхности, вовсе не трудно.
Вот что получилось у меня за пять минут работы:
Нарисовать металлическую кнопку с эффектом нажатия мне понадобилось для создания интерфейса бесплатного андроид-приложения «Фонарик», установить которое вы можете по этой ссылке, заодно и посмотреть, как на практике можно применить созданное в Photoshop изображение.
Давайте приступим.
Открываем Photoshop, создаём новый документ размером 500 на 500 пикселей или какой вам больше нравится. Размеры документа в последствии можно будет изменить без потери качества, т.к. для создания мы будем использовать векторные инструменты и стили слоя.
Ставим две направляющие точно по центру документа. Берём инструмент «Эллипс», задаём режим «Фигура» (Snape), цвет заливки серый #8f8f8f. Наводим курсор точно в перекрестье направляющих, зажимаем левую клавишу мыши и начинаем тащить курсор в любом направлении от центра.
Построение фигуры эллипса.
Это будет передняя плоская поверхность кнопки. Чтобы она была похожа на металлическую, необходимо добавить стиль слоя «Наложение градиента» со следующими настройками:
Обращаю внимание, что стиль градиента — «Угловой» (Angle). Цвета чередуются — чисто белые с серыми разных оттенков.
Результат:
Металлический градиент на кнопке.
Дублируйте слой с эллипсом и переместите полученный дубликат под исходный слой (у меня дубликат назван Эллипс 1 копия). Примените к дубликату команду «Свободное трансформирование» (Ctrl+T), зажмите клавиши Alt+Shift и несколько увеличьте диаметр фигуры, потянув за любой из углов рамки:
Создание основы кнопки.
Примените к нему также стиль слоя стиль слоя «Наложение градиента», но настройки в этот раз будут другими, стиль градиента — зеркальный, чередуются чёрный и белые цвета:
Добавление зеркального градиента к основе кнопки.
Результат должен быль следующим:
Две слой-фигуры с градиентами.
Дублируйте слой Эллипс 1 копия, у меня он назван Эллипс 1 копия 2 и переместите его под Эллипс 1 копия. Увеличьте его диаметр «Свободным трансформированием», чтобы документ выглядел примерно так:
Дублирование слой-фигуры.
К этой слой-фигуре мы добавим два стиля слоя — «Тиснение» и «Обводка» со следующими настройками:
Результат:
В следующем уроке мы нарисуем значок включения/выключения и зададим кнопке текстуру.
Скачать материалы к уроку:
1 PSD, 1 PNG | 1,54 Мб
Скачать с Яндекс.Диск
Как создавать 3D-кнопки с помощью Adobe 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. Сделайте кнопку трехмернойДиалоговое окно 0011 Стиль слоя
. Это сделано для того, чтобы изображение выглядело более трехмерным. Чтобы открыть диалоговое окно Layer Style , выберите Layer > Layer Style в верхнем меню. Вы также можете дважды щелкнуть слой, содержащий вашу кнопку, чтобы вызвать его автоматически. Этот способ намного быстрее, и мы лично предпочитаем его.
Когда поле «Стиль слоя» открыто, перейдите к параметру Bevel & Emboss . Включите его.
Это быстрый и простой способ придать краям кнопки более приподнятый, «трехмерный» вид. Для этого урока мы использовали следующие настройки:
Структура
- Стиль: Внутренняя фаска
- Техника: Долото мягкое
- Глубина: 60 5
- Направление: Вверх
- Размер: 5
- Смягчение: 1
Затенение
- Угол: 90
- Высота: 37
- Режим выделения: 9 0012 Color Dodge, непрозрачность 55%
- Shadow Mode: Multiple, 25% Opacity
Хитрость заключается в том, чтобы сделать настройки достаточно высокими, чтобы вы могли видеть некоторую разницу, но не настолько сильной, чтобы она была подавляющей.
После того, как мы закончили с Bevel & Emboss, мы перешли к Contour и включили и его. Contour немного усиливает определение Bevel & Emboss, и для этого урока мы выбрали настройку Cone — Inverted .
Далее включите Наложение градиента . Это то, что придает кнопке округлый, слегка «глянцевый» вид. Настройки следующие:
- Режим наложения: Наложение
- Непрозрачность: 90
- Стиль: Линейный
- Угол: 90
- Масштаб: 100
Наконец мы повернули на Drop Shadow , чтобы кнопка выглядела немного «приподнятой» над белым фоном веб-сайта или блога. Опять же, вот настройки:
Структура
- Режим наложения: Несколько
- Непрозрачность: 35
- Угол: 90 90 018
- Расстояние: 2
- Распространение: 6
- Размер: 8
Качество
- Контур: Линейный
- Шум: 0
- Слой, выбивающий тень: На
Теперь пришло время сохранить эти спецификации как стиль слоя.
Шаг 4: Сохранить как стиль слоя
Как только вы закончите с настройками кнопки, она начнет выглядеть 3D. Поскольку высока вероятность того, что вы будете создавать более одной 3D-кнопки, нам нужно найти быстрый и простой способ сделать это.
Вот как.
Прежде чем нажать OK в диалоговом окне Стиль слоя , нажмите Новый стиль . Когда вы это сделаете, Photoshop сохранит этот стиль слоя, который вы создали для кнопки.
Если вы используете Photoshop CC, этот новый стиль будет сохранен в вашем разделе Библиотеки , как вы можете видеть выше. Это очень быстро и легко получить доступ.
Шаг 5: Как использовать сохраненный стиль слоя
Теперь, когда вы разработали свою кнопку и сохранили ее как стиль слоя, давайте посмотрим, как она действует для вашего состояния «вверх». Ни слова лжи, это сократит ваше рабочее время вдвое.
Во-первых, давайте создадим еще одну кнопку прямо над слоем с красной кнопкой, вот так.
Давайте сделаем его зеленым, для акцента.
Далее — вместо двойного щелчка по самому слою, чтобы открыть диалоговое окно Стили слоя — дважды щелкните стиль слоя на панели Библиотеки .
Когда вы это сделаете, Photoshop автоматически применит сохраненный стиль к новому слою с кнопкой, сохранив его новый цвет и форму. Теперь у вас есть две кнопки — одна в верхнем положении и одна в нижнем — и это так просто сделать. Мне нравится этот ярлык.
Шаг 6. Добавьте текст на кнопку
Теперь мы собираемся добавить текст к кнопке.
Чтобы добавить текст, создайте новый слой над двумя слоями с кнопками. Нажмите инструмент «Текст» , чтобы начать печатать.
В этом уроке мы напишем слово «подписаться», потому что это то, что вы часто видите на веб-сайтах и в социальных сетях.
Мы также собираемся использовать веб-безопасный шрифт без засечек. Окончательный выбор того, какой из них вы используете для своей собственной кнопки, зависит от вас.
Montserrat, Proxima Nova, Arial и Verdana — широко используемые альтернативы, безопасные для Интернета.
Однако после того, как это будет сделано, вам нужно будет внести еще несколько тонких изменений, чтобы этот текст стал «всплывающим».
Сначала дважды щелкните слой, содержащий текст, чтобы открыть его в диалоговом окне Стиль слоя .
Затем нажмите Внутренняя тень , чтобы добавить небольшое углубление (или углубление) к тексту. Это создает впечатление, что буквы были выгравированы на кнопке. Точные настройки, которые мы использовали для этого урока, приведены ниже.
Структура
- Режим наложения: Умножение
- Непрозрачность: 35
- Угол: 90
- Расстояние: 2
- Дроссель: 4
- Размер: 1
Качество
- Контур: Линейный
- Шум: 0
Затем примените Градиент Наложите на эти буквы, чтобы они лучше сливались с кнопкой и не казались плоскими.
Опять же, настройки для наших:
- Режим наложения: Затемнение цвета
- Непрозрачность: 90
- Стиль: Линейный
- Угол: 9 0
- Масштаб: 100
Шаг 7: Завершение
После того, как вы создайте этот текстовый стиль — особенно если вы хотите использовать его снова — перейдите к Новый стиль и сохраните его, прежде чем нажимать OK .
После этого вы можете быстро переключаться между двумя слоями кнопок, чтобы увидеть, как выглядят состояния «вверх» и «вниз».
Круто, да? Чтобы сохранить файл, выберите Файл > Сохранить как и сохраните его в формате файла, подходящем для любого проекта, над которым вы работаете.
Настройте свой блог с помощью 3D-кнопок и виджетов
Теперь, когда вы знаете, как создавать 3D-кнопки в Photoshop, вы можете проявить творческий подход, создавая свои собственные 3D-кнопки в соответствии со своими потребностями.
И с этими навыками в вашем арсенале вы сможете сделать продукт не только профессиональный, но и личный.
Хотите узнать о других вещах, которые вы можете делать с помощью этой программы? Вот как удалить фон в Photoshop.
Как создать квадратные ретро-кнопки в Photoshop
Предварительный просмотр руководства
Шаг 1. Создание фона
Откройте Photoshop. Создайте новый документ Photoshop с размером холста 500x300px.
Разблокируйте фоновый слой по умолчанию, сначала дважды щелкнув его на панели «Слои», после чего откроется диалоговое окно «Новый слой», а затем нажмите «ОК» в диалоговом окне «Новый слой».
Затем, чтобы придать разблокированному фоновому слою градиентный фон, откройте диалоговое окно «Стиль слоя» слоя, снова дважды щелкнув его на панели «Слои».
Примените к слою эффект слоя Gradient Overlay с настройками, показанными ниже.
Шаг 2: Создание держателя для пуговиц
Щелкните инструмент Rounded Rectangle Tool (U) на панели инструментов.
На панели параметров инструмента «Прямоугольник со скругленными углами» (расположенного в верхней части Photoshop) убедитесь, что Выбран параметр Shape Layers , а затем установите для параметра Radius значение 3 пикселя, а для параметра Color — очень темно-серый цвет (#262427).
Правильно настроив инструмент Rounded Rectangle Tool, нарисуйте темный прямоугольник, как показано ниже.
На панели «Слои» дважды щелкните слой «держатель кнопок», чтобы открыть диалоговое окно «Стиль слоя».
Мы присвоим этому слою Color Overlay , Inner Shadow и Stroke . Ниже приведены настройки для каждого из этих эффектов слоя.
Наложение цвета
Внутренняя тень
Обводка
Вот что у нас получилось после применения эффектов слоя:
Шаг 3: Создайте кнопку Базовая форма
Увеличьте масштаб с помощью инструмента «Масштаб» (Z) (например, увеличьте масштаб на 200%).
Это облегчит нам точную работу.
Установите инструмент Rounded Rectangle Tool (U) так, чтобы он имел радиус 3 пикселя и белый цвет (#ffffff).
Затем нарисуйте белый квадрат, который будет основой для наших кнопок.
На панели «Слои» дважды щелкните только что созданный слой-фигуру, чтобы открыть диалоговое окно «Стиль слоя». Мы придадим этой фигуре следующие эффекты слоя: Внутреннее свечение , Наложение градиента и Обводка . Используйте изображения ниже в качестве справки.
Внутреннее свечение
Наложение градиента
Обводка
Теперь давайте посмотрим на основу нашей кнопки:
Шаг 4: Добавьте окружность посередине
Переключитесь на инструмент Эллипс (U), а затем нарисуйте белый круг в середина основания пуговицы.
Удерживая нажатыми клавиши Alt + Shift ( для пользователей Mac: Option + Shift), рисуйте с помощью инструмента «Эллипс», чтобы сохранить пропорции.
Откройте диалоговое окно «Стиль слоя» и придайте форме круга цифру 9.0383 Inner Shadow , Gradient Overlay и Stroke эффект слоя. Настройки для этих эффектов слоя показаны ниже.
Внутренняя тень
Наложение градиента
Обводка
900 03
Вот предварительный просмотр нашего прогресса:
Создайте новый слой. Переключитесь на инструмент «Кисть» (B) и выберите мягкую круглую кисть размером 15 пикселей.
Нарисуйте белую точку (#ffffff) рядом с нижней частью круга, чтобы добавить световой эффект нашей кнопке.
Кнопка готова. Давайте посмотрим на это:
На панели «Слои» выберите основу кнопки, круг и слой света, а затем поместите их в группу слоев, которую вы можете назвать «Кнопка».
Шаг 5: Создание других кнопок
Дважды продублируйте группу «Кнопка», а затем используйте инструмент «Перемещение» (V), чтобы переместить дубликаты, как показано на изображении ниже.
На последней кнопке (крайней справа) с помощью инструмента «Эллипс» (U) добавьте оранжевый (#df7237) круг.
Откройте диалоговое окно Layer Style для слоя с оранжевым кругом и примените к нему эффект слоя
Создайте новый слой поверх оранжевого круга ( пользователей ПК: Ctrl + Shift + N пользователей Mac: Command + Shift + N).
Переключитесь на инструмент «Кисть» (B) и настройте его так, чтобы у него была мягкая круглая кисть и размер 15px. На новом слое нарисуйте маленькое белое пятно в нижней части оранжевого круга.
Затем уменьшите непрозрачность этого слоя до 70%.
Теперь давайте сделаем так, чтобы крайняя правая кнопка выглядела так, как если бы она была нажата.
На панели «Слои» дважды щелкните слой «база кнопки» самой правой кнопки, чтобы открыть диалоговое окно «Стили слоя». Примените к этому слою 
