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

Содержание

Объемная кнопка в фотошопе, интересный урок

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

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

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

Кнопка – это элемент управления, который реагирует на то или иное действие пользователя.

Давайте рассмотрим эти четыре состояния:

Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).

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

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

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

При помощи стиля слоя зальем форму кнопки линейным градиентом для этого идем слои > стиль слоя > наложение градиента либо дважды кликнем по слою с формой кнопки.

Создадим объем и тень для нашей кнопки при помощи копирования нашего слоя. Для этого, перетащите наш слой с кнопкой на пиктограмму (иконку) создать новый слой, либо сделайте наш слой с кнопкой активным после чего идем в слой > создать дубликат слоя

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

Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.

Теперь доработаем слой с тенью. Идем слой > растрировать. Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.

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

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

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу. Продублируем группы для остальных состояний кнопки, для этого идем слои > дубликат группы и даем название состояния кнопки. Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

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

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

перемещение (V) стрелочкой на клавиатуре поднимем их вверх.

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

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

Рисуем кнопки для веб-сайта в Фотошоп / Creativo.one

Содержание

#Шаг 1
#Шаг 2
#Шаг 3
#Шаг 4
#Шаг 5
#Шаг 6
#Шаг 7
#Шаг 8
#Шаг 9
#Шаг 10
#Шаг 11
# Комментарии

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

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) размером 1280 x 1024 пикселов.

Шаг 2

Залейте фон цветом #СCCBCC и кистью (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

Шаг 3

Инструментом Прямоугольник со скругленными углами ( Rounded Rectangle Tool) (U) нарисуйте фигуру с радиусом скругления 180 пикселов:

Шаг 4

К фигуре примените стиль слоя Наложение градиента (Gradient Overlay). Используйте параметры, которые показаны на скриншоте:

Шаг 5

Инструментом Овальная область выделения (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его черным цветом. Расположите его на предыдущей фигуре:

Шаг 6

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

Шаг 7

Также, к слою с кругом примените стиль Тень (Drop shadow):

Шаг 8

Инструментом Овальная область выделения (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его белым цветом.

Шаг 9

Выберите инструмент Произвольная фигура (CustomShapeTool) и нарисуйте фигуру конверта в режиме слой-фигуры.

Шаг 10

На слой с конвертом вклейте те стили слоя, которые ранее копировали:

Шаг 11

При помощи инструмента Текст (Text Type Tool) (T) напишите текст на кнопке:

Финальное изображение:

Автор: webdesign

Источник: digitalartsonline.co.uk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.

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

Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00 . А радиус углов установил 4 пикселя .

Создание блестящей металлической кнопки

Создайте кнопку округленного градиента.
Создайте растровую или векторную кнопку.
Цвет кнопки неважен, так как это не повлияет на конечный результат.

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

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

Теперь рисуем саму кнопку. Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.

Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J ) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800

Создать профессиональную глянцевую кнопку «Загрузить»

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

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

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

Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента .

Как создать кнопку навигации по промышленному стилю

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

Дизайн красивой детальной веб-кнопки

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

Детали и ресурсы учебника

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

Необходимо выполнить настройку — угол наклона 90 градусов.

Чтобы создать меньшую фигуру внутри кнопки, следуйте той же методике. Сначала нажмите для изменения цветов переднего плана и фона по умолчанию. Нарисуйте выделение, как в примере. Измените режим смешивания на Мягкий свет и непрозрачность до 85%. Нажмите Удалить на клавиатуре и нажмите, чтобы отменить выбор. Затем, при активном слое «Верхний ярлык» выберите инструмент «Переместить» и дважды нажмите кнопку со стрелкой вниз на клавиатуре, чтобы переместить небольшую подсветку вниз. Установите непрозрачность слоя до 45-50%.

Затем измените режим смешивания на Мягкий свет и непрозрачность до 80%. Нажмите, чтобы отменить выбор. Чтобы добавить еще одну подсветку, создайте новый слой и назовите его «Выделить». Выберите инструмент «Градиент» с белым передним и прозрачным градиентами, заполнив выбор снизу вверх, как мой пример.

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

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

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

Это как сказать: Вот ресурс. Если вам это нравится, вот как это получить. Итак, сегодня мы узнаем некоторые полезные методы создания красивых веб-кнопок. Сегодня вы увидите, как создать первые 2 кнопки. Также подумайте, что наши кнопки предназначены для веб-дизайна, поэтому после их завершения они будут извлечены.

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

Установите белый цвет и уменьшите непрозрачность до 30%. Мы закончили со стилями слоев. Пришло время добавить эффект мягкого шума. Снимок экрана ниже объяснит лучше весь процесс. Установите режим смешивания слоев на экран и уменьшите непрозрачность до примерно 15%.

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

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

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

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

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

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

Шаг 3: Дайте базовой форме стиль слоя

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

Шаг 4: Приведение кнопки в диагональную линию

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

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

Создание состояния наведения

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

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

Создаем в фотошопе объемную кнопку для мобильного телефона | DesigNonstop

Создаем в фотошопе объемную кнопку для мобильного телефона

5

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

Шаг 1
Создаем в фотошопе новый документ, заливаем цветом #282828.

Шаг 1
Применим к фону «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум» (Add Noise…) со значением 3.

Шаг 2
Получили такую текстуру.

Шаг 3
Воспользуемся инструментом «Кисть» (Brush Tool). Выберем мягкую кисть диаметром 300 пикселей, цвет белый, и на новом слое щелкнем в центре.

Шаг 4
Меняем режим наложения слоя на «Мягкий свет» (Soft Light).

Шаг 5
На новом слое создаем небольшой круг черного цвета.

Шаг 6
Потом на новом слое создаем круг поменьше серого цвета.

Шаг 7
И на новом слое создаем еще один круг поменьше, белого цвета.

Шаг 8
Находимся на слое с белым кругом. Удерживая Ctrl, щелкаем по слою в палитре слоев для того, чтобы выделить круг. После этого сдвигаем выделение на 2 пикселя вниз. После этого нажимает Del.

Шаг 9
И получаем такой результат.

Шаг 10
Применим к фигуре стиль слоя «Наложение градиента» (Gradien Overlay), цвет от темно серого #1e1e1e к более светлому #636363.

Шаг 11
Применим стиль слоя «Внешнее свечение» (Outer Glow).

Шаг 12
Стиль слоя «Тень» (Drop Shadow).

Шаг 13
На этом шаге получили такой результат.

Шаг 14
Внимание! Переходим на слой с серым кругом и применим нему стиль слоя «Наложение градиента» (Gradien Overlay), цвет от темно серого #222222 к более светлому #444444.

Шаг 15
Далее стиль слоя «Обводка» (Stroke).

Шаг 16
Стиль слоя «Внутреннее свечение» (Inner Glow).

Шаг 17
Стиль слоя «Внешнее свечение» (Outer Glow).

Шаг 18
Стиль слоя «Тень» (Drop Shadow).

Шаг 19
Результат выглядит так.

Шаг 21
Внимание! Переходим на слой с черным кругом и примеим нему стиль слоя «Наложение градиента» (Gradien Overlay), цвет от светло серого #585858 к более темному #151515.

Шаг 22
Стиль слоя «Тень» (Drop Shadow).

Шаг 23
Получили такой результат.

Шаг 24
Применим к черному кругу «Фильтр» (Filter) > «Размытие» (Blur) > «Размытие по Гауссу» (Gaussin Blur) со значением 1.

Шаг 25
Получилась такая кнопка.

Шаг 26
Теперь на новом слое напишем цифру 2, цвет #e8e7e7.

Шаг 27
Применим к цифре стиль слоя «Внутренняя тень» (Inner Shadow).

Шаг 28
Цифра выглядит так.

Шаг 29
Теперь на новом слое напишем АВС, цвет #e8e7e7.

Шаг 30
Применим к буквам стиль слоя из Шага 27 и все, наша мобильная кнопка готова.

7 крутых советов как нарисовать кликабельную кнопку

Куда не глянь, всюду кнопки – почта, сайты, мобильные приложения. Неважно что ты пытаешься продать или рекламируешь, а, как говорится: «главное, чтобы костюмчик сидел!». Создание кнопок в фотошопе осуществляется по определенным канонам.

С кнопками происходят целые эпопеи и баталии еще на стадии разработки. Веб-дизайнеры ведут активное противостояние заказчикам и у них есть на то важные причины.
Ряд исследований, путем проб и ошибок, заставил нас составить список 7-ми крутых правил, которым стоит следовать!

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

Как нарисовать кнопку в фотошопе, чтобы она привела к нажатию?

Контрастирующие цветовые палитры

Эффект Фон Рестора – явление зрения и восприятия мозга человека. Простыми словами – сканирую все что вижу, останавливаю взгляд на том, что контрастирует с окружением.

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

Советуем тебе как для новичка, окунуться в азы «цветовых контрастов» (сочетание цветов и степень их выразительности). Например, это – красный-зеленый, синий-оранжевый, черный-белый и т.д.

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

Да сделай ты уже эту кнопку больше!

Юзеру должно быть удобно и просто осуществлять нажатие. Одинаково удобно курсором мыши или пальцами. Это очень хорошо, что бывают утонченные и тоненькие пальчики, но не забываем и о тех, кто, простите, эстетикой пальцев не вышел. Потому кнопка для сайта в фотошопе рисуется большой!

Изучением этого вопроса активно занимается компания Apple. Потому, советует выпускать кнопки минимум размеров в 44×44 пикселей, поскольку это близко к среднему размеру указательного пальца человека.

Если в твоем приложении, скажем, будет определено, что касание будет осуществляться большим пальцем, то делаем размер минимум 45×72 пикселей или не боимся и рисуем значительно больше.

Текст на кнопке просто обязан отвечать на вопрос

Существует общепринятый алгоритм, называемые «WYLTIWLT». Расшифровывается он так: «Would You Like То? I Would Like То» (досл. пер. — «Хотели бы вы? Я хотел бы»).

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

«Хотели бы вы {ТЕКСТ КНОПКИ}»

Или:

«Я хотел бы {ТЕКСТ КНОПКИ}».

Иными словами, рисуем кнопку в Photoshop с текстом, который глаголет о желании действия. И оно должно происходить от имени посетителя.

Например:

«Какой классный сайт, хочу ПОДПИСАТЬСЯ»;

«Ух ты какой красивый продукт, хочу КУПИТЬ его»;

«Мне срочно нужно ЗАРЕГИСТРИРОВАТЬСЯ»;

«А где здесь можно перейти к разделу ОФОРМИТЬ ЗАКАЗ» и т.д.

Мы на «Ты» или на «Вы»?

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

То бишь, текст кнопки должен выражать прямое осуществление действия потребителя. Надписи от второго лица («Перейти к вашим покупкам») работают не так эффективно. Урок для чайников, но учимся делать правильно.

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

Призыв к действию, вместо безликого глагола

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

Без глагола:

«Дополнительная информация»
«Загрузка»
«Подписка на рассылку»

С глаголом:

«Узнать больше»
«Загрузить»
«Подписаться на рассылку»

Опять же таки – кнопка тут отвечает на вопросы клиента: «Где здесь я могу ЗАГРУЗИТЬ книгу?», «Хочу УЗНАТЬ БОЛЬШЕ об этом продукте» или «Как же мне ПОДПИСАТЬСЯ НА РАССЫЛКУ онлайн-газеты?».

Не агитировать что-либо, словно это последний день жизни

Часто ты видишь громкие текста на кнопках с призывом сделать что-то или купить немедленно. Так вот так делать не нужно! Такие фразочки негативно влияют на психологические реакции мозга. Простыми словами – вызывают тревогу или раздражение.

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

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

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

Больше кода – меньше графики

Графические кнопки дольше загружать, они могут не отображаться в email-сообщениях (пока не нажмешь «Показывать изображения»), а также они бывают недоступны для пользователей с ограниченными возможностями.

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

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Как в фотошопе сделать кнопку

Красивая кнопка для сайта

Приветствую, друзья! Сегодня мы сделаем красивую кнопку для сайта в фотошопе. Урок достаточно сложный, но в то же время в нём затронуто много аспектов работы веб-дизайнера, а это значит что вы сможете создавать качественные кнопки и иконки для ваших сайтов без особого труда. Напомню, что подобные уроки уже были здесь и здесь, а сейчас мы погружаемся в эту тему и рассматриваем другие способы.

Вот она, та самая глянцевая кнопка, которую мы получим в итоге:

А теперь открывайте фотошоп и готовьтесь к работе!

Создайте новый документ размером 800x500px.

Для начала нужно задать форму будущей кнопки. Этим и займёмся. Сразу скажу – в этом уроке я расскажу о достаточно сложном пути создания форм. Если вы не хотите работать с Pen Tool (инструмент перо), или для вас это пока что сложно сразу переходите к главе 2, там будет показан более простой путь.

Ну а глава 1 для тех, кто хочет научиться чему-то новому.

Глава 1. Создаём форму кнопки с помощью Pen Tool

Забегая вперед оговорим, какие есть плюсы у способа с использованием Pen Tool. Прежде всего, гибкость в создании формы. Вы можете “вылепить” всё что угодно. Естественно, инструменты вроде Rectangle Tool (прямоугольник) сделать этого не позволяют, так что вы будете получать весьма стандартные кнопки.

1. Итак, довольно болтовни. Приступим. Возьмите инструмент Pen Tool (Перо) и создайте примерно такую фигуру:

2. Форма нашей кнопки получилась очень кривой и приблизительной. Сейчас мы затронем очень важную тему – работа с направляющими. Направляющие сильно помогают в работе дизайнера. По ним удобно отмерять расстояние. Сейчас вы сами всё поймёте. Для начала лучше залить фон каким-нибудь цветом, отличающимся от белого. Пусть это будет серый (#d9d9d9). Берем инструмент Paint Bucket Tool (Заливка) и отправляемся на слой Background, затем заливаем его выбранным цветом:

3. Хорошо, теперь установим направляющие, а затем выровняем по ним форму кнопки. Для установки направляющей пройдите в меню View (Вид) -> New Guide (Новая направляющая). Отметьте галочку Vertical (Вертикальная) и введите значение 200px:

Как видите, направляющая появилась в положении 200px от левого края холста. Если сейчас вы нажмёте сочетание клавиш Ctrl+H то направляющая исчезнет. Повторное нажатие этого сочетания вернет направляющую назад.

5. Установите ещё одну направляющую в положение Vertical 600px:

6. Понадобятся ещё 4 направляющие в положениях Vertical 160 и 640px, а также Horizontal 150 и 350px. Должно получиться примерно так:

7. Пришло время выровнять форму. Для этого возьмите Direct Selection Tool (Направленное выделение):

А затем опираясь на сетку работайте с формой. Если не хватает направляющих, смело добавляйте. Направляющие можно также добавлять из линейки (вызывается с помощью Ctrl+R). Для этого нажмите на риску линейки и как-бы “вытаскивайте” из неё направляющие. Во время работы для удобства пользуйтесь масштабированием и приближайте холст (Ctrl + колёсико мышки).

Итак, должна получиться такая заготовка для будущей красивой кнопки:

Как видите, мне пришлось добавить ещё несколько направляющих. Форма готова, можно двигаться дальше.

Глава 2. Форма кнопки простыми средствами.

8. Как и обещал, сейчас расскажу как сделать форму кнопки буквально за 20 секунд. Выбираем инструмент Rounded Rectangle Tool (Прямоугольник с фаской):

Устанавливаем радиус фаски 90px:

Всё, форма готова 🙂

Глава 3. Глянцевая кнопка

9. Вот мы и добрались до создания самих эффектов для кнопки. Не важно, каким способом вы сделали основу кнопки (форму) – принцип здесь один и тот же. Давайте для начала нанесем на кнопку текст. Создайте новый слой (Shift+Ctrl+N) и напишите любой текст:

Текст сделайте цветом темнее самой кнопки. К слову, для формы я использовал цвет # 3e7bab, для кнопки #183e5b.

10. Сделайте копию слоя с формой (Ctrl+J). Поменяйте цвет на белый, нажмите Ctrl+T (Свободная деформация), и уменьшите форму таким образом:

11. Понизьте непрозрачность слоя до 35%:

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

12. Создайте для блика маску слоя:

13. Теперь возьмите мягкую чёрную кисть размером 400px:

Пройдитесь этой кистью по нижней части блика. Должно получиться так:

14. Создайте копию блика, и на маске слоя “протрите” чёрной кистью всё пространство внутри блика, оставляя только верхнюю часть. Режим смешивания Soft Light (Мягкий свет), а непрозрачность установите 100%:

15. Создаём новый слой, берем мягкую белую кисть диаметром 8px и рисуем сверху от блика полоску (чтобы полоска получилась идеально прямой удерживайте клавишу Shift):

16. Создаём для этого слоя маску и стираем края полоски:

17. Дублируем слой с полоской и применяем Filter (Фильтр) -> Blur (Размытие) -> Gaussian Blur (По Гауссу), радиус 4,6px:

18. Нажимаем Ctrl+щелчок по миниатюре слоя с первым бликом, появится выделение. Находясь на слое с полоской нажимаем Delete, затем переходим на слой с только что примененным блюром и также жмём Delete:

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

19. Похожее делаем для контура формы. Ctrl+клик по основному контуру кнопки, затем Ctrl+Shift+I для инверсии выделения, и нажимаем Delete на обоих слоях с полоской. Сейчас кнопка должна выглядеть так:

20. Теперь слои с линиями можно объединить (Ctrl+E) и установить непрозрачность 80%, для придания естественности блику.

21. Продолжаем работу с бликами и светом. Создайте новый слой и мягкой белой кистью нарисуйте такое пятно:

22. Теперь уже знакомую операцию по выделению контура кнопки (Ctrl + клик по форме кнопки в панели слоёв), затем инвертирование Shift+Ctrl+I и Delete. Режим смешивания Soft Light, непрозрачность 70%:

23. Скопируйте слой с текстом, расположите его под основным, задайте цвет чуть светлее кнопки (у меня #79afdb) и переместите этот слой на 1px вниз. Получаем эффект тиснения:

24. С помощью Pen Tool создайте несколько бликов по обоим сторонам кнопки и снизьте их непрозрачность до 10-20%:

25. Эта кнопка показалась мне слишком высокой, поэтому я выделил все слои, кроме текста, нажал Ctrl+T и уменьшил кнопку в высоту:

26. Можно добавить ещё один небольшой блик внизу. Вы уже знаете как это сделать. Сейчас кнопка выглядит так:

27. Мы почти закончили. Осталось добавить немного эффектов. Сделаем отражение. Скопируйте все слои (выделите их и нажмите Ctrl+J). Нажмите на любой из скопированных слоёв правой кнопкой мыши и выберите пункт Convert to Smart Object (Преобразовать в смарт-объект). После этого пройдите в Edit (Редактирование) -> Transform (Трансформация) -> Flip Vertical (Отразить по вертикали). Понизьте непрозрачность до 52%:

А теперь с помощью маски слоя сотрите нижнюю часть отражения:

28. Хорошо, кнопка теперь действительно красивая 🙂 Осталось только сделать тень. Создайте слой над фоном и под всеми остальными, и твёрдой кистью нарисуйте чёрную линию:

29. Примените размытие по Гауссу с радиусом 8 px, непрозрачность слоя 46px. Дорабатывайте тень, пока она вас не устроит:

30. Собственно на этом всё, профессиональная глянцевая кнопка готова. Теперь можно удалять фон, изменять размер до того, который понадобится на сайте (Image -> Image Size) и использовать на радость себе и пользователям.

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

А вот и финальный результат, я ещё добавил немного стильного шума:

веб 2.

0 веб-дизайн кнопка

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

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

Шаг № 1 Создадим новый документ Шаг № 2 Выбираем Инструмент «Прямоугольник со скругленными углами» Шаг № 3 Радиус устанавливаем 10 пикс. Шаг № 4 Рисуем на нашем документе прямоугольник Шаг № 5 Заходим в стили слоя Шаг № 6 Выбираем Наложение градиента Шаг № 7 Кликнем по градиенту, как на картинке ниже. Шаг № 8 Установим плавный переход от точки один до точки два. Для этого кликаем по точке один и палитре цветов выбираем понравившейся нам цвет. Тоже самое проделываем с точкой два. Шаг № 9 Теперь давайте добавим текста к нашей кнопке

Такая вот кнопка для сайта у нас получилась

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

Если вам понравился урок, не забывайте писать отзывы и делится с друзьями ниже. Заходите на сайт FotoshopDesign. ru

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

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

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

Подробный урок — Как сделать кнопку для сайта в фотошопе

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

Иванова Наталья | Обновлена 2016-01-06 | вебдизайн, Уроки Photoshop |

Такая кнопка должна получиться в итоге:

1. Создаем новый документ:

2. Выбираем на панели инструментов перо и на панели настроек (под горизонтальным меню) выставляем такие настройки:

3. Создаем контуры кнопки:

4. Кликнув правой кнопкой мышки по контуру, вызываем меню, в котором выбираем пункт “образовать выделенную область” с радиусом растушевки в 2 px:

5. Создаем новый слой (Ctrl J), слой заднего плана удаляем,

6. Теперь нажимаем на кнопку Fx в палитре слоев и выбираем пункт “параметры наложения”

7. Перед нами откроются следующие окна, выставив такие значения для каждого параметра (обводки и градиента)(напоминаю, чо все скриншоты можете просмотреть в большем размере, кликнув по ним мышкой) :

Получаем кнопку такого вида:

Остается лишь написать на ней текст и добавив параметры наложения уже к слою текста, можем получить объемный текст с тенью, свечением и пр.

Я поставила такие настройки обводки и контура для текста, у вас могут быть свои:

8. Сохраняем кнопку в формате PNG

Видеоурок:

На нашем Портале графики вы узнаете все о Photoshop и обо всем, что связано с дизайном. Все уроки имеют подробное описание и скриншоты, поэтому будут особенно полезны для начинающих дизайнеров. Вы познакомитесь и с другими программами графики и работой в них. Например, Gimp — отличный бесплатный редактор, в котором вы можете проводить полноценную обработку фото. Наша коллекция дополнений сделает вашу работу более легкой и приятной. Вы можете стать нашим соавтором и заработать. Добавляйте новости на сайт через удобную форму обратной связи, размещать дополнения фотошоп со ссылкой на файлообменники. Если вам понравились наш сайт, то не забудьте подписаться на рассылку или rss, поделиться с друзьями в социальных сетях или добавить в закладки!

Как сделать простую 3d кнопку в фотошопе — Medialoot

Кнопки со стилями слоев

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

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

Шаг 1

Откройте Photoshop и создайте новый документ больше, чем размер кнопки, которую вы хотите сделать. В этом случае я установлю ширину 850 пикселей и высоту 250 пикселей, чтобы работать было удобнее.

Шаг 2

Нажмите «D» на клавиатуре, чтобы сбросить цвета переднего плана и фона. Переключите цвета переднего плана и фона, нажав «X» на клавиатуре (теперь белый цвет должен быть основным цветом)

Шаг 3

Выберите инструмент «Прямоугольник со скругленными углами» (U) и убедитесь, что режим инструмента установлен на «Форма» на верхней панели инструментов.

Шаг 4

Щелкните один раз по холсту и установите ширину 420 пикселей, высоту 50 пикселей, радиус 10 пикселей и нажмите ОК.

Шаг 5

Дважды щелкните миниатюру слоя, чтобы изменить цвет формы, и в окне выбора цвета установите цвет на # 5797d6 и нажмите OK.

Шаг 6

Перейдите в Layer> Layer Style> Inner Shadow и примените следующие настройки:

Шаг 7

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

Шаг 8

Выберите градиент от переднего плана к прозрачному.

Шаг 9

Щелкните правой кнопкой мыши Color Stop, установите для параметра Location значение 50% и щелкните OK.

Шаг 10

По-прежнему в окне редактирования Gradient Overlay примените следующие настройки:

Шаг 11

Теперь отметьте опцию Drop Shadow и примените следующие настройки:

Шаг 12

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

Шаг 13

Нажмите кнопку «ОК» в окне «Стиль слоя».

Шаг 14

Перейдите в Window> Styles, чтобы открыть панель стилей. Как видите, созданный нами стиль «Button Shape» присутствует.

Шаг 15

Выберите инструмент «Текст» (T) и введите текст кнопки. В данном случае я использую Montserrat Bold с разрешением 16 пикселей и белым цветом.

Шаг 16

Выделив текстовый слой, перейдите в Слой> Стиль слоя> Тень и примените следующие настройки:

Шаг 17

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

Шаг 18

Нажмите кнопку «ОК» в окне «Стиль слоя».

Шаг 19

Перейдите в Window> Styles, чтобы открыть панель стилей. Как видите, стиль «Текст кнопки», который мы только что создали, находится рядом с нашим стилем «Форма кнопки».

Шаг 20

Теперь, когда мы создали стили слоя, давайте посмотрим, насколько легко мы можем создать новую кнопку, используя эти стили. Скройте 2 слоя, которые мы использовали для создания кнопки, щелкнув значок глаза рядом с названием слоя.

Шаг 21

Выберите инструмент «Прямоугольник» (U) и щелкните один раз по холсту, чтобы отобразить окно «Создать прямоугольник». Установите ширину на 160 пикселей, высоту на 50 пикселей и нажмите ОК.

Шаг 22

Дважды щелкните миниатюру слоя, чтобы изменить цвет формы, и в окне выбора цвета установите любой цвет, который вы хотите использовать (в этом случае я буду использовать # 58bf4d), и нажмите OK.

Шаг 23

Выделив слой-фигуру, перейдите в Window> Styles. На миниатюрах стилей нажмите на стиль «Button Shape», чтобы применить его к нашей форме.

Шаг 24

Выберите инструмент «Текст» (T) и введите текст кнопки. Теперь я использую Lato Black с разрешением 18 пикселей и цветом # cefac9.

Шаг 25

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

Шаг 26

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

Выберите инструмент Custom Shape Tool (U). Убедитесь, что режим инструмента установлен на «Форма» на верхней панели инструментов, а из списка эскизов фигур выберите форму «Бычий глаз».

Шаг 27

Щелкните один раз по холсту. Установите ширину и высоту 30 пикселей и нажмите ОК.

Шаг 28

Дважды щелкните миниатюру слоя, чтобы изменить цвет произвольной формы, и в окне выбора цвета установите любой цвет, который вы хотите использовать (в этом случае я буду использовать # 3da132), и нажмите OK.

Шаг 29

Выделив слой с произвольной формой, щелкните один раз над стилем «Текст кнопки» на панели стилей, чтобы применить этот стиль к нашей произвольной форме.

Некоторые заключительные примечания

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

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

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

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

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

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

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

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

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

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

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

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

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

Конечный эффект — Ход .

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

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

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

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

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

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

Легко расположить по центру текста на кнопке:

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

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

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

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

Как создать 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 для доступа к нему.

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

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

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

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

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

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

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

Шаг 3.

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

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

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

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

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

Структура

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

Оттенок

Угол: 90
Высота: 37
Highlight Mode: Color Dodge, 55% непрозрачность
Shadow Mode: Multiple, 25% непрозрачность

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

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

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

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

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

Структура

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

Качество

Контур: Линейный
Шум: 0
Layer Knocks Out Drop Shadow: On

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

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

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

Вот как.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Структура

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

Качество

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

Режим наложения: Затемнение цвета
Непрозрачность: 90
Стиль: Линейный
Угол: 90
Масштаб: 100

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

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

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

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

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

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

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

Блог Дональда Трампа мертв, его платформа в социальных сетях просрочена

Не прошло и месяца после дебюта блога Трампа, как он уже был закрыт.

Об авторе Шианн Эдельмайер (136 опубликованных статей)

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

Более От Шианн Эдельмайер

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

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

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

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

Создание красивых кнопок в Photoshop — — The Theme Foundry

Дрю Стройны, 15 октября 2010 г.

Несколько месяцев назад я изменил дизайн всех кнопок на сайте The Theme Foundry. В этом уроке я собираюсь шаг за шагом пройти процесс создания кнопки.

Краткий обзор

Приложение: Photoshop CS4 (CS5 также должен работать нормально)
Сложность: Начальный — Средний
Расчетное время завершения: 15-20 минут

Шаг 1. Введите текст кнопки и настройте размер холста

Создайте новый документ Photoshop (установите фоновое содержимое на Прозрачный ) и введите текст для новой кнопки.В этом примере используется шрифт Archer Bold. Если вам нужна бесплатная альтернатива, попробуйте Museo Sans 700. Поместите текст в центр холста, перетащив его с помощью инструмента выбора, и отрегулируйте размер холста пропорционально ( Изображение → Размер холста ) размеру вашего текста.

Шаг 2. Создайте кнопку

Найдите инструмент «Прямоугольник со скругленными углами» и выберите его. После выбора инструмента прямоугольник с закругленными углами вы увидите некоторые параметры на панели инструментов в верхней части окна Photoshop.Измените радиус на 6 пикселей и установите для скругленного прямоугольника значение с фиксированным размером , которое точно соответствует размеру вашего холста. Чтобы создать кнопку, просто щелкните середину холста и переместите закругленный прямоугольник так, чтобы он был по центру (он должен защелкнуться на месте).

Шаг 3. Добавьте наложение градиента

Теперь у вас должен получиться очень простой прямоугольник с закругленными углами поверх текста. Измените расположение слоев так, чтобы текст находился поверх прямоугольника (см. Изображение).Выберите новую форму на панели слоев и выберите Gradient Overlay из меню эффектов в нижней части панели слоев. Теперь добавьте наложение зеленого градиента, дважды щелкнув по очереди левую и правую цветные остановки (два значка в форме дома под полосой градиента). Установите левый ограничитель цвета на 2f9514 , а правый ограничитель цвета на 5bbf40 . Теперь кнопка должна иметь красивый градиентный зеленый слой и начинает принимать форму!

Шаг 4: Добавьте внутреннее свечение

Не выходя из панели стилей слоя, установите флажок Inner Glow в левом столбце.В разделе Structure установите режим наложения на Overlay , уменьшите непрозрачность до 21% и измените цвет на черный (000000). В разделе Elements увеличьте Choke до 100% и уменьшите Size до 1px. Щелкните ОК!

Шаг 5. Дублируйте, измените стиль, измените размер

Дублируйте слой-фигуру, над которым мы только что работали, щелкнув правой кнопкой мыши на панели слоев и выбрав Дублировать слой .Выберите новую фигуру на панели слоев (она должна называться копией фигуры 1) и дважды щелкните стиль Inner Glow на панели слоев под новым слоем копии фигуры 1. Установите белый цвет (ffffff) и увеличьте непрозрачность до 38%.

Щелкните стрелку выбора и установите флажок Показать элементы управления преобразованием на панели инструментов в верхней части окна. Теперь удерживайте Command (Control в Windows) + пробел , чтобы отобразить инструмент масштабирования.Используйте инструмент масштабирования, чтобы перетащить небольшую рамку вокруг верхней центральной ручки преобразования. Это даст нам крупный план кнопки. Щелкните и перетащите верхний центральный маркер преобразования вниз, как тень окна, открывая исходное внутреннее свечение (см. Изображение ниже). При увеличении прокрутите холст и повторите это для маркера преобразования в левом центре, маркера преобразования вправо в центре и маркера преобразования в центре внизу. Маркер преобразования может быть трудно найти, потому что он находится на самом краю холста, поэтому обязательно присмотритесь.Когда закончите, нажмите галочку на верхней панели инструментов, чтобы сохранить изменения.

Шаг 6. Очистите текст

Уменьшите масштаб, удерживая нажатой Command (Control в Windows) + 1 . Дважды щелкните значок текстового поля (большая буква T) внутри слоя «Просмотр моего портфолио» на панели слоев. Используйте панель инструментов в верхней части окна, чтобы установить белый цвет текста (ffffff), и щелкните галочку, чтобы сохранить изменения.

Добавьте падающую тень, нажав кнопку эффектов в нижней части панели слоев (та же самая кнопка, которую вы нажимали ранее при добавлении наложения градиента) и выбрав Drop Shadow из списка.Уменьшите непрозрачность до 15% и уменьшите Distance и Size до 1px.

Шаг 7. Добавьте тень к кнопке

Выберите исходную форму на панели слоев и тени, нажав кнопку эффектов в нижней части панели слоев. Установите непрозрачность на 15% и Distance и Size на 2 пикселя. Увеличьте размер холста на 5 пикселей с каждой стороны, чтобы освободить место для новой тени.

Шаг 8: Сохраните и наслаждайтесь!

Сохраните новую кнопку для Интернета, выбрав «Сохранить для Интернета и устройств» в меню «Файл» (я рекомендую сохранить ее как 24-битный прозрачный PNG), и начните использовать ее на своем сайте. Если вам понравился этот урок или вы хотите поделиться своим мнением, напишите нам в комментариях.

Скачать исходные файлы

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

Понравился этот пост? Подробнее об этом читайте в обучающих материалах.

Glossy Photoshop Button Tutorial

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

Кнопки в Photoshop

Вы можете использовать кнопки на своем веб-сайте или в блоге.

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

Давайте кратко рассмотрим, что вы узнаете в этом уроке Photoshop с глянцевой кнопкой. Сначала вы создаете Eclipse и заливаете его цветом.

Затем добавьте эффекты стиля слоя, например:

Наложение цвета

Внутреннее свечение

Внешнее свечение

Внутренняя тень

Ход

Наложение градиента

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

Посмотреть видео:

К учебнику:

Как сделать глянцевые кнопки в Adobe Photoshop

Создайте новый документ размером 800 пикселей на 600 пикселей. Создайте новое затмение с цветом # 22297e и измените размер затмения на 500px X 500px.

Перейти к стилю слоя . Добавьте наложение цвета с белым цветом и наложение в режиме наложения, затем измените непрозрачность на 20%.

Добавьте внутреннего свечения белого цвета, непрозрачностью 80% и размером 75 пикселей. Остальные параметры оставьте без изменений.

Добавьте внешнего свечения с черным цветом; Режим наложения: Нормальный; Непрозрачность: 40% и размер: 50 пикселей.

Добавьте внутреннюю тень черным цветом; Режим наложения: Overlay; Непрозрачность: 40%; Расстояние: 0 пикселей; Дроссель: 100% и размер: 4 пикселя.

Теперь продублируйте слой и очистите стиль слоя на дублированном слое, щелкнув правой кнопкой мыши и выбрав Очистить стиль слоя . Затем измените непрозрачность заливки на 0%. Добавьте обводку 50 пикселей белого цвета и режим наложения наложения. Измените непрозрачность обводки на 15%.

Теперь добавьте символ кнопки , которую вы хотите. Оставьте символ только белого цвета. Затем измените режим слоя символа на мягкий свет.

Теперь сделайте еще одну копию слоя затмения и переместите ее в верхнюю часть стопки.Отредактируйте форму с помощью инструмента прямого выделения , как показано на рисунке ниже. Добавьте наложение цвета с белым цветом, режим наложения для наложения и непрозрачность до 20%.

Теперь вернитесь к стилю слоя первого затмения и добавьте градиент наложения с настройками ниже:

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

Окончательное изображение:

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

Поделиться, Твитнуть или поставить палец вверх!

Дизайн кнопки Glossy Web 2.0 в Photoshop

Хотите создать глянцевый веб-сайт 2.0 кнопка? Вот простое руководство по Photoshop, в котором вы шаг за шагом узнаете, как создать красивую красную глянцевую кнопку.

Шаг 1 — Создание базы

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

Создайте новый слой с вызовом «Кнопка»

На слое «Кнопка» выберите инструмент «Прямоугольник со скругленными углами»

Задайте радиус 7 пикселей

Нарисуйте прямоугольник, как на изображении ниже.

Шаг 2 — Красная кнопка

Щелкните правой кнопкой мыши Параметры наложения для слоя «Кнопка»

Измените следующие настройки для

Тень

Внутренняя тень

Фаска и тиснение

Наложение градиента

Ваша кнопка должна выглядеть примерно так

Шаг 3 — Создание глянцевого эффекта

Создайте новый слой с именем «Glass»

Выберите инструмент Retangular Marquee Tool, убедитесь, что вы выбрали слой «Button». Удерживая нажатой клавишу ctrl, щелкните миниатюру слоя «Кнопки». Теперь ваша кнопка должна быть выделена.

Теперь нажмите кнопку «Стекло», удерживайте нажатой клавишу Alt с выбранным инструментом «Прямоугольная область». Нарисуйте (обрежьте) нижнюю половину кнопки, как на изображении ниже.

Залейте выделенную область белым цветом #ffffff с помощью Paint Bucket Tool

Установите непрозрачность на 18%

У вас должна получиться такая глянцевая кнопка.

Шаг 4 — Наложение узора

Давайте немного наложим на кнопку узор.Я буду использовать созданную ранее полосу stripe5px. Создайте новый слой с именем «Pattern» между «Button» и «Glass» и перейдите к параметрам наложения.

Выберите Pattern Overlay, выберите Stripe5px (или любой созданный вами узор) и нажмите OK, затем закройте диалоговое окно.

Убедитесь, что вы все еще используете инструмент «Прямоугольная область», удерживайте и щелкните миниатюру слоя кнопки, чтобы получить форму кнопки. Залейте выделенную область на слое «Узор» с помощью инструмента «Заливка» и установите непрозрачность слоя на 5%

Шаг 5 — Вставка текста

Добавьте случайный текст белого цвета #ffffff со следующими настройками

Используйте следующие эффекты наложения на моем текстовом слое.

Тень

Шаг 6 — Окончательный результат

У вас должно получиться вот такое изображение.

Создание стеклянной кнопки Photoshop с использованием стилей слоев и слоев-фигур

Урок Photoshop Стекло Photoshop
Базовое руководство по стилям слоя Photoshop

Одним из наиболее часто запрашиваемых руководств по Adobe Photoshop CC является тот, который показывает, как создать стеклянную сферу или кнопку. Никогда не отступая на задний план, я подумал, что добавлю свою базовую версию Photoshop в микс! В этом уроке показано, как создать стеклянную кнопку Photoshop, вставленную в металлическую основу.В файле Photoshop используются три слоя плоской формы с примененными стилями слоев.

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

Так как же он был создан? Вы можете прочитать или просмотреть видеоурок по Photoshop ниже.

Учебное пособие по Photoshop Стекло Photoshop
Видеоурок по Photoshop

Урок Photoshop Стекло Photoshop
Создайте документ и слои формы

Для начала создайте документ Photoshop квадрат размером 550 пикселей. Залейте фон черным. Выберите инструмент Elipse и убедитесь, что на палитре «Параметры» выбрана кнопка «Слои формы», а не пустой параметр «Контуры».

Удерживая нажатой клавишу Shift, создайте идеальный круг на холсте, оставляя удобное пространство по краям.Поскольку наша кнопка будет синей, дважды щелкните образец цвета на новом слое формы (в палитре слоев) и выберите голубой (R76 G115 B241). Очевидно, вы можете выбрать свой собственный цвет, если он вам не нравится!

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

Урок Photoshop Стекло Photoshop
Создание основы для кнопки с металлическим эффектом

Нажмите кнопку «Стили слоя» в нижней части палитры слоев и выберите «Обводка» (которая станет металлической основой). Введите значения, показанные здесь: (если настройки были проигнорированы, оставьте их значения по умолчанию)

Размер: 30
Позиция: центр
Тип заливки: градиент
Стиль: линейный
Угол: -90 градусов

Щелкните панель градиента, чтобы открыть редактор градиентов и создать новый градиент, как показано ниже.Чтобы добавить новые точки, просто щелкните под полосой градиента. Появится точка образца, которую вы можете щелкнуть, чтобы отредактировать. Поиграйте с градиентом, пока не будете довольны. Нажмите ОК в редакторе градиентов.

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

Стиль: внешний скос
Глубина: 190%
Направление: Вверх
Размер: 6 пикселей
Снимите флажок «Использовать глобальный свет»
Угол: 90 градусов
Высота: 15 градусов
Щелкните миниатюру Gloss Contour и выберите «Ring»
Непрозрачность выделения: 100%
Непрозрачность режима тени: 100%

Урок Photoshop Стекло Photoshop
Создание стеклянной кнопки Photoshop

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

Размер: 2
Позиция: Внутри
Режим наложения: Экран
Непрозрачность: 90%
Тип заливки: градиент
Стиль: линейный
Угол: -90 градусов

Щелкните панель градиента, чтобы открыть редактор градиентов и создать новый градиент, как показано ниже.Еще раз, это ваша кнопка, так что поиграйте с градиентом, пока не будете довольны. Когда закончите, нажмите OK в редакторе градиентов.

Чтобы добавить отраженную тень (помните, что это в черной среде) выберите Gradient Overlay. Выберите стандартный линейный градиент от черного к белому с помощью:

Непрозрачность: 50%
Режим наложения: Умножение
Угол: 90 градусов

Теперь для отраженного света — выберите стиль слоя Inner Glow и задайте ему следующие атрибуты, используя градиент от голубого до прозрачного:

Режим наложения: Экран
Непрозрачность: 75%
Источник: Edge
Дроссель: 0%
Размер: 60 пикселей
Диапазон: 50%

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

Режим наложения: Экран
Непрозрачность: 75%
Угол: -90
Дальность: 30
Дроссель: 0%
Размер: 100 пикселей
Миниатюра контура: Конус — перевернутый

Когда вы закончите с этой задачей, нажмите OK и переходите к следующему (и заключительному) этапу.

Урок Photoshop Стекло Photoshop
Создание отражения

Чтобы создать отражение в верхней части кнопки, нам нужно сделать видимым последний (самый верхний) слой формы. Выберите слой. Выберите инструмент «Перемещение». Убедитесь, что «Привязка к слоям» активна (Просмотр / Привязка к / Слои), и перетащите направляющую вниз, чтобы привязать к верхней части круга.

Теперь перейдите в Edit / Free Transform Path и, удерживая клавиши SHIFT и ALT, уменьшите размер пути примерно на 60%.Клавиша SHIFT ограничивает пропорции шкалы, а также привязывает любое движение к одной оси. Клавиша ALT или OPTION удерживает преобразование в центре.

Теперь отпустите ALT, удерживая нажатой клавишу SHIFT, перетащите круг вверх, пока он не зафиксируется на направляющей вверху. Нажмите RETURN, чтобы подтвердить преобразование. Установите режим наложения для слоя на Screen.

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

Режим наложения: Экран
Непрозрачность: 80%

Урок Photoshop Стекло Photoshop
Осталось только одно! Добавьте маску слоя

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

Щелкните маленький значок Цвета переднего плана и фона по умолчанию в нижней части основной палитры инструментов. Затем выберите инструмент (линейный) градиент. Поместите курсор чуть ниже вершины небольшого круга слоя формы, удерживайте нажатой клавишу SHIFT, чтобы ограничиться осью Y, и перетащите вниз, чтобы чуть выше нижней части круга.

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

Теперь у вас должна получиться красивая стеклянная пуговица!

Урок Photoshop Стекло Photoshop
Необязательный шаг — добавление большей глубины

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

Режим наложения: Умножение
Цвет: черный
Непрозрачность: 100%
Угол: -90 градусов
Расстояние: 180 пикселей
Размер: 250 пикселей
Контур: полукруглый
Инвертировать: не отмечено

И вы получите что-то более темное и богатое.Наслаждаться!