Кнопка в фотошопе: Как нарисовать кнопку в фотошопе

Объемные кнопки Фотошоп | как сделать стеклянную кнопку в Photoshop

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

При создании сайтов или других интерфейсов, важным элементом являются кнопки. Фотошоп позволяет создавать всевозможные кнопки по индивидуальным критериям. В этой статье Вы узнаете как сделать кнопку в фотошоп. Существует много вариантов создания кнопки в Photoshop. Рассмотрим несколько наиболее простых варианов как сделать кнопку. В Фотошоп нам понадобяться в ПАНЕЛИ ИНСТРУМЕНТОВ следующие инструменты: прямоугольник со скруглеными краями, заливка или выбор цвета (или цвет можно назначить в ПАНЕЛИ СВОЙСТВ), текст. В ПАНЕЛИ СВОЙСТВ — цвет, стили (или в ГЛАВНОМ МЕНЮ выбрать в выпадающем меню ОКНО — стили). В окне СЛОИ: элементы функции ƒх (тиснение). В окне СИМВОЛ: размер, шрифт. Расположение элементов интерфейса Photoshop можно прочитать здесь.

Создаем новый документ, задаем нужный размер. Фон прозрачный, режим RGB. Рекомендуется для удобства, точности центрирования и задания размера самой кнопки в Фотошоп использовать направляющие (их для наглядности можно подсветить красным цветом в настройках программы через меню РЕДАКТИРОВАНИЕ), путем перетаскивания вертикальной и горизонтальной линейки в нужное положение. На панели инструментов нажимаем инструмент прямоугольник со скруглеными краями, задаем нужное скругление (радиус) на панели свойств, ставим курсор в виде крестика на пересечении линеек и тянем фигуру до нужного размера и формы. Если сначала не выбрали цвет в панели инструментов, заливаем нужным цветом в функциях слоя.

Создание кнопки в Фотошоп с помощью готовых стилей.

Самый простой вариант получить объемную кнопку — выбрать стиль в панели свойств фигуры (или в окне СТИЛИ, которое можно вызвать в основном меню ОКНА-в выпадающем менню выбрать СТИЛИ), которые позволят сделать различные кнопки. В Photoshop уже присутствуют наборы стилей (прозрачные, текстурные). Выбрать из наборов подходящий стиль можно нажав на треугольник справа в наборе. В данном случае набор ВЕБ стили — стиль Хром. После выбора стиля в панели СЛОЙ можно увидеть, из каких элементов функций он состоит. Каждый элемент функции можно корректировать.

После определения формы, цвета и стиля кнопки переходим к написанию текста кнопки. Рекомендуется создать новый слой для текста, чтоб векторная фигура не прикреплялась к тексту. На панели инструментов нажимаем инструмент текст, и набираем текст на изображении кнопки. Кликаем на инструмент перемещение. Открываем окно СИМВОЛ и выбираем шрифт, цвет и размер. 

Текст можно оставить без стиля. Для применения стиля к тексту на слое с текстом кликаем 2 раза или нажимаем функцию. Выбираем например Тиснение. В окне задаем внутренний скос и задаем нужные параметры. В итоге получаем серую хромированнкю объемную кнопку с вдавленным текстом.

 

Создание кнопки со своими вариантами стилей.

Стиль кнопки можно задать самому, используя инструмент ФУНКЦИЯ на панели СЛОИ. Кликаем дважды на слое кнопки или нажимаем на понели кнопку ƒх. Самый простой вариант — стиль слоя выбираем ТИСНЕНИЕ и выбираем необходимые параметры. Добавляем ТЕНЬ. 

Можно также при желании использовать внешнее свечение, обводку, перекрытие цвета или узора и другие стили на выбор. Стеклянная кнопка в фотошопе делается без заливки фигуры цветом (непрозрачность заливки -0), или залитием таким же цветом, что и основание (аналогично применяется к тексту). 

Затем, как в предыдущем примере, добавляем текст со стилями тиснения. Можно к тексту применять и другие стили по желанию.

Если кнопка готова — нажимаем на ФАЙЛ в главном меню и в вкладке выбираем «сохранить для веб устройств». В окне задаем формат PNG 24 (оп поддерживает прозрачность и передает максимум оттенков изображения). Здесь же можно подкорректировать размер кнопки.

Видео как нарисовать стеклянную кнопку в Фотошоп.

Видео Стеклянная кнопка в фотошоп показывает как ссоздать стеклянную кнопку в Фотошоп с помощью готовых стилей так и самостоятельно.

 

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

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

И так давайте перейдем к самому уроку.

 

1. Открываем фотошоп и создаем новый документ Файл>Создать…(File>News… или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп).

В окошке указал такие параметры:

Название: Кнопка для сайта – Blogohelp.ru;

Ширина: 168 пикселей;

Высота: 60 пикселей;

Разрешение: 72 пикселя;

Содержимое фона: Белый.

И нажал кнопочку ОК.

Создался новый документ.

2. Теперь давайте нарисуем фон кнопке, у нас в уроке кнопка будет со скругленными углами. Для этого воспользуемся инструментом  Прямоугольник со скругленными углами (Rounded RectangleTool, U)

Для инструмента я поставил такие настройки:

Выбрал настройку Слой-Фигура (), радиус – 10 пикселей.

После этого мышью нарисовал прямоугольник со скругленными углами.

Как видите фигура у нас получилась белого цвета, давайте добавим ей градиентную заливку. Для этого отправляемся в меню Окно (Window) и выбираем палитру Слои (Layers, F7). Открывается палитра для работы со слоями в фотошопе.

Кликаем мышкой два раза по слою Фигура 1 и открывается окошко со стилями слоя. Выбираем пункт Градиентная заливка () и кликаем мышкой по полоске с градиентом.

В следующем окошке задаем цвета градиента. Щелкаем левой кнопкой мыши по левому нижнему ползунку и ставим цвет #2f1a31, после щелкаем по правому нижнему ползунку и ставим цвет #5f386b

Градиентный фон у нас получился, теперь давайте добавим небольшую тень для кнопки, выбираем в стилях слоя пункт Тень (Shadow) и ставим такие настройки:

В итоге у меня получилось так:

3. Приступи к добавлению текста на кнопку. У нас будет сверху текст “СКАЧАТЬ”, а чуть ниже небольшое пояснение, текст “размер 5Мб, pdf”. Берем инструмент Горизонтальный текст(Horizontal Type Tool, T).

Шрифт выбрал: MyriadPro, жирный с размером 19 пунктов и цвет #FFFFFF.

После просто кликнул левой кнопкой мыши в нужно месте в нашем документе и написал текст “СКАЧАТЬ” и нажал галочку в настройках инструмента Текст, что бы подтвердить действия.

Если текст вставился не в том месте где нужно, не беда, текстовый слой (как и любой другой слой) можно двигать по документу мышкой или нажимаю клавиши “Вверх, вниз, влево и вправо” на клавиатуре (слой обязательно должен быть выделен в палитре слоев).

Ниже напишем второй текст “размер 5Мб, pdf”.

Настройки поставил такие, шрифт тот же, начертание нормальное, размер 12 пунктов и цвет #d0c2d3.

4. Добавим иконку на нашу кнопку. Иконку я взял вот эту иконку (кстати, рекомендую отличный сайт с иконками). Иконка пришлась прям под цветовую гамму моей кнопки, что меня очень обрадовало, так как не нужно ее перекрашивать или обрабатывать.

Качаем иконку на компьютер и открываем в фотошопе Файл-Открыть… (File-Open…, Ctrl+O).

Теперь выделяем все содержимое слоя с иконкой идем в меню Выделение–Все(Select-All, Ctrl+A). Скопируем весь слой в буфер обмена Редактирование-Скопировать (Edit-Copy, Ctrl+C). Слой с иконкой поместился в буфер обмена, теперь выбираем наш документ с кнопкой и в нем идем в меню Редактирование-Вставить (Edit-Paste, Ctrl+V).

Слой с иконкой скопировался в наш документ с кнопкой.

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

Идеи в меню Редактирование-Свободое трансформирование (Edit-FreeTransform, Ctrl+T).

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

Добившись нужно результата, нажимаем клавишу Enter на клавиатуре.

После инструментом  Перемещение (MoveTool, V) или клавишами “Вверх, вниз, влево и вправо” на клавиатуре располагаю иконку справа в том месте, где нужно.

Наша кнопка почти готова, остается добавить еще блик на заднем фоне. В палитре слоев выбираем слой с фоном кнопки, зажимаем клавишу Ctrl и кликаем левой кнопкой мыши по иконке слоя с фигурой.

Загружается выделение всего слоя:

Теперь берем инструмент  Овальная область, в настройках выбираем Вычитание из выделенной области

Дальше просто рисуем произвольную область поверх выделения:

После отпускаем мышку, должно получится, примерно такое выделение:

Теперь создаем новый слой, нажимаем Ctrl+N, ставим основной цвет белым  #FFFFFF

И заливаем наше выделение белым цветом – идем в меню Редактирование-Выполнить заливку (Edit-Fill, Shift+F5).

Выбираем в окне настройку Использовать: Основной цвет и жмем ОК.

Остается снять выделение Выделение-Снять выделение, понизить свойство Непрозрачность у слоя с бликом, я поставил 7%.

Все наша кнопка готова, ура!

Остается только удалить фоновый слой (что бы сделать кнопку с прозрачным фоном). Выбираем фоновый слой и нажимаем клавишу Delete.

И теперь сохраняем нашу кнопку идем в меню Файл-Сохранить для Web и устройств…, выбираем формат Gif или Png, нажимаем Сохранить и радуемся мы научились создавать стильные кнопки для сайта с прозрачным фоном в фотошопе.

На этом все, как вам кнопочка? Если у вас есть вопросы задавайте их в комментариях.

С уважением Артур Иванов.

 

Как сделать кнопку в Photoshop (4 простых и быстрых шага)

Думая о кнопках, что приходит вам на ум? Вероятно, это классическая прямоугольная кнопка загрузки, которую мы видим почти каждый день, или кнопка «Мне нравится» в Facebook и Instagram. Хорошо, это немного красивее, поэтому давайте начнем с основного и классического.

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

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

4 простых шага для создания кнопки в Photoshop

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

Примечание. Скриншоты ниже взяты из версии Adobe Photoshop CC для Mac. Windows или другие версии могут выглядеть иначе.

Шаг 1: Создайте новый документ. Размер документа — это не размер кнопки, он должен быть достаточно большим, чтобы создать кнопку с тенью. Так что в идеале вы должны сначала определить размер своей кнопки, но мы можем пойти дальше и создать квадратный холст 600 x 600 пикселей, безопасный вариант для всех.

Установите разрешение файла 72 пикселя/дюйм и выберите цветовой режим RGB , потому что вы будете использовать кнопку для Интернета.

Шаг 2: Выберите инструмент прямоугольника на панели инструментов и нарисуйте прямоугольник. Если вы не уверены в размерах кнопок, вы можете начать с 9.0017 170 x 50 пикселей, обычно используемый размер кнопки.

Если вы хотите сделать углы закругленными, нажмите на один из кружков рядом с углом и перетащите его к центру прямоугольника.

Или вы можете перейти на панель Свойства > Внешний вид и ввести значение радиуса.

Теперь вы можете продолжить и добавить текст, и все готово, или сделать несколько дополнительных шагов, чтобы сделать вашу кнопку более привлекательной. Если вам нужна простая кнопка со сплошным цветом, вы можете пропустить шаг 3 и сразу перейти к шагу 4. 

Шаг 3: Выберите слой-фигуру (Прямоугольник), щелкните значок fx на панели «Слои» и выберите Gradient Overlay .

Поиграйте с настройками в окне Layer Style. Установите флажок Preview , чтобы увидеть изменения, которые вы вносите. Когда вы будете довольны результатом, нажмите OK .

Я выбрал очень нежный градиент и очень доволен этим видом.

Но, конечно же, вы можете добавить и другие стили слоя. Как насчет эффекта внутреннего свечения?

Тоже хорошо выглядит! Готовы двигаться дальше?

Шаг 4: Выберите Type Tool , щелкните прямоугольник и введите текст, который вы хотите отобразить на кнопке.

Текст может оказаться не в самом центре, но вы можете легко центрировать текст. Если вы хотите поместить текст в центр, параметры выравнивания в верхнем меню должны вам помочь.

Если вы хотите изменить цвет кнопки, вы можете добавить Color Overlay. Вы также можете изучить шрифты, размер и т. д. на панели «Символы».

Заключение

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

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

О Джун

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

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

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

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

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

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

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

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

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

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

Шаг 2.

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

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

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

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

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

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

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

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

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

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

Шаг 3. Сделайте кнопку трехмернойДиалоговое окно 0017 Стиль слоя

. Это сделано для того, чтобы изображение выглядело более трехмерным.

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

Когда поле «Стиль слоя» открыто, перейдите к параметру  Bevel & Emboss . Включите его.

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

Structure

• Style: Inner Bevel
• Technique: Chisel Soft
• Depth: 605
• Direction: Up
• Size: 5
• Soften: 1

Затенение

• Угол: 90
• Высота: 37
• Непрозрачность Режим подсветки: 0100
• Shadow Mode: Multiple, 25% Opacity

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

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

Далее включите Наложение градиента . Это то, что придает кнопке округлый, слегка «глянцевый» вид. The settings are as follows:

• Blend Mode: Overlay
• Opacity: 90
• Style: Linear
• Angle: 90
• Scale: 100

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

Structure

• Blend Mode: Multiple
• Opacity: 35
• Angle: 90
• Distance: 2
• Spread: 6
• Size: 8

Качество

• Контур: Линейный
• Шум: 0
• Слой, выбивающий тень:
• 8 Вкл. 0105

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

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

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

  Вот как.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  Structure

  • Blend Mode: Multiply
  • Opacity: 35
  • Angle: 90
  • Distance: 2
  • Choke: 4
  • Size: 1

  Качество

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

  Затем примените кнопку Опять же, настройки для наших:

  • Blend Mode: Color Burn
  • Opacity: 90
  • Style: Linear
  • Angle: 90
  • Scale: 100

  Step 7: Finishing Up

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