Как создать металлическую кнопку в Photoshop
Автор Дмитрий Евсеенков На чтение 3 мин Просмотров 186 Обновлено
Прежде всего хочу сказать, что подобную работу рентабельнее выполнять в векторном редакторе, наподобие Adobe Illustrator или CorelDraw, чем в растровом редакторе Photoshop.
Но что делать, если под рукой нет векторного редактора, а работу надо выполнить прямо сейчас? Другого выхода, кроме как применить старый добрый Photoshop, нет. Но и в Photoshop нарисовать кнопку, имеющую эффект металлической поверхности, вовсе не трудно.
Вот что получилось у меня за пять минут работы:
Нарисовать металлическую кнопку с эффектом нажатия мне понадобилось для создания интерфейса бесплатного андроид-приложения «Фонарик», установить которое вы можете по этой ссылке, заодно и посмотреть, как на практике можно применить созданное в Photoshop изображение.
Давайте приступим.
Открываем Photoshop, создаём новый документ размером 500 на 500 пикселей или какой вам больше нравится. Размеры документа в последствии можно будет изменить без потери качества, т.к. для создания мы будем использовать векторные инструменты и стили слоя.
Ставим две направляющие точно по центру документа. Берём инструмент «Эллипс», задаём режим «Фигура» (Snape), цвет заливки серый #8f8f8f. Наводим курсор точно в перекрестье направляющих, зажимаем левую клавишу мыши и начинаем тащить курсор в любом направлении от центра. После того, как вы начали протаскивать курсор, зажмите клавиши Alt и Shift, центр построения эллипса переместится в перекрестье курсора, а сам эллипс станет геометрически правильным кругом. Таким образом постройте фигуру в форме круга. Когда закончите,
Построение фигуры эллипса.
Это будет передняя плоская поверхность кнопки. Чтобы она была похожа на металлическую, необходимо добавить стиль слоя «Наложение градиента» со следующими настройками:
Обращаю внимание, что стиль градиента — «Угловой» (Angle). Цвета чередуются — чисто белые с серыми разных оттенков.
Результат:
Металлический градиент на кнопке.
Дублируйте слой с эллипсом и переместите полученный дубликат под исходный слой (у меня дубликат назван Эллипс 1 копия). Примените к дубликату команду «Свободное трансформирование» (Ctrl+T), зажмите клавиши Alt+Shift и несколько увеличьте диаметр фигуры, потянув за любой из углов рамки:
Создание основы кнопки.
Примените к нему также стиль слоя стиль слоя «Наложение градиента», но настройки в этот раз будут другими, стиль градиента — зеркальный, чередуются чёрный и белые цвета:
Добавление зеркального градиента к основе кнопки.
Результат должен быль следующим:
Две слой-фигуры с градиентами.
Дублируйте слой Эллипс 1 копия, у меня он назван Эллипс 1 копия 2 и переместите его под Эллипс 1 копия. Увеличьте его диаметр «Свободным трансформированием», чтобы документ выглядел примерно так:
Дублирование слой-фигуры.
К этой слой-фигуре мы добавим два стиля слоя — «Тиснение» и «Обводка» со следующими настройками:
Результат:
В следующем уроке мы нарисуем значок включения/выключения и зададим кнопке текстуру.
Скачать материалы к уроку:
1 PSD, 1 PNG | 1,54 Мб
Скачать с Яндекс.Диск
Как сделать кнопку в фотошопе
Как сделать кнопку в Photoshop
2. Выбираем на панели инструментов перо и на панели настроек (под горизонтальным меню) выставляем такие настройки:
3. Создаем контуры кнопки:
4. Кликнув правой кнопкой мышки по контуру, вызываем меню, в котором выбираем пункт “образовать выделенную область” с радиусом растушевки в 2 px:
5.
Создаем новый слой (Ctrl J), слой заднего плана удаляем,
6. Теперь нажимаем на кнопку Fx в палитре слоев и выбираем пункт “параметры наложения”
7. Перед нами откроются следующие окна, выставив такие значения для каждого параметра (обводки и градиента)(напоминаю, чо все скриншоты можете просмотреть в большем размере, кликнув по ним мышкой) :
Получаем кнопку такого вида:
Остается лишь написать на ней текст и добавив параметры наложения уже к слою текста, можем получить объемный текст с тенью, свечением и пр.
Я поставила такие настройки обводки и контура для текста, у вас могут быть свои:
Создание кнопки в фотошопе
Всем доброго времени суток, рад видеть на fotodizart.ru. Сегодня поговорим о такой важной мелочи как кнопка, а точнее как создается кнопка в фотошопе.
Кнопка может быть разного назначения и применения к примеру для сайта, программного интерфейса. Кнопка для сайта или интерфейса, если следовать всем правилам должна иметь 3 — 4 состояния.
Почему спросите три или четыре это зависит от того будут ли какие-то состояния кнопки совпадать, а также имеется ли необходимость в четвертом состояние.
На сегодняшний день не везде используются все состояния кнопок, а ведь это не совсем правильно. Все состояния делаются для того чтобы пользователю было легко ориентироваться в работе с интерфейсом. Говоря простым языком, кнопка при каком либо действие пользователя показывает, что происходит и указывает на соответствующее действие.
Кнопка в фотошопе разрабатывается не сложно, давайте все же определимся, что же такое кнопка.
Кнопка – это элемент управления, который реагирует на то или иное действие пользователя.
Давайте рассмотрим эти четыре состояния:
- Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
- Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
- Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
- Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).
Что такое кнопка и какие у нее бывают состояния мы разобрались. Приступим к созданию кнопки в фотошопе, а точнее кнопки и ее четырех состояний.
Открываем фотошоп, создадим новый документ с нужными нам размерами, фон желательно залить цветом нашего интерфейса, для которого мы ее создаем, это делается для того чтобы наглядно видеть как она будет смотреться в работе. И начинаем создание кнопки в фотошопе. Возьмем инструмент прямоугольник со скругленными краями, и создадим форму нашей будущей кнопки.
При помощи стиля слоя зальем форму кнопки линейным градиентом для этого идем слои > стиль слоя > наложение градиента либо дважды кликнем по слою с формой кнопки.
Создадим объем и тень для нашей кнопки при помощи копирования нашего слоя. Для этого, перетащите наш слой с кнопкой на пиктограмму (иконку) создать новый слой, либо сделайте наш слой с кнопкой активным после чего идем в слой > создать дубликат слоя. Проделаем это действие дважды. После чего назовем слои кнопка, объем, тень. После чего кликнем на слое тень правой кнопкой мыши и отчистим стиль слоя, проделаем тоже самое со слоем объем. Затем поменяем цвет у слоя объем. И сдвинем слои вниз при помощи инструмента перемещение (V).
Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.
Теперь доработаем слой с тенью. Идем слой > растрировать. Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.
Кнопка в фотошопе практически готова, осталось добавить надпись на кнопку, подробнее о работе с текстом читайте в статье работа с текстом photoshop.
Для этого возьмем инструмент горизонтальный текст выберем нужный шрифт и напишем необходимую нам надпись.
Теперь сделаем текст вдавленным, а также создадим блик и контур на краях надписи, все это мы сделаем через стили слоя.
Кнопка в фотошопе нарисована. Итоговый результат можно увидеть выше, теперь сделаем остальные состояния для нашей кнопочки.
Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу. Продублируем группы для остальных состояний кнопки, для этого идем слои > дубликат группы и даем название состояния кнопки. Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.
Теперь изменим каждую группу под нужное нам состояние.
Первой будем изменять группу наведение. Для этого в группе слоев с именем наведение выделим слой кнопка и отредактируем стиль слоя. В нем мы отредактируем только наложение градиента, сделаем его светлее.
Далее отредактируем состояние кнопки при нажатие. У этой кнопки отредактируем наложение градиента как и в предыдущем состояние, также нужно поставить галочку на инверсия плюс уменьшим объем за счет чего у нас создастся впечатление что при нажатие кнопка вдавливается. Чтобы уменьшить объем нам придется выделить слои объем и тень, так как наша тень также станет меньше, и при помощи инструмента перемещение (V) стрелочкой на клавиатуре поднимем их вверх.
И наконец, сделаем кнопку в активном состояние. Для этого необходимо изменить цвет наложения градиента как у кнопки наведение, а также убрать тень и объем как у кнопки нажатие. Как это сделать мы уже знаем, скажу только, что активной кнопке градиент нужно задать другого цвета, чтобы она была заметна на фоне остальных кнопок.
Можно конечно поменять еще и цвет у нашей надписи, но я этого делать не буду.
Вот и все наша кнопка в фотошопе создана, я думаю урок достаточно понятный, если у вас возникнут вопросы пишите в комментариях, по возможности постараюсь ответить. Не забудьте подписаться на рассылку, чтобы узнавать о новых статьях первыми. А еще Вы можите почитать урок по созданию дизайна кнопки социальных сетей.
Кнопка в фотошопе. Как нарисовать кнопку в фотошопе.
В этом уроке мы будем рисовать кнопку для сайта определенного стиля. Чтобы идти в ногу со временем стиль был выбран современный, используемый на многих сайтах.
Кнопку нарисовать в фотошопе не проблема. Собственно я покажу метод на примере данной кнопки. Используя знания вы сможете создавать собственные кнопки, подключая и используя свои стили.
Для очистки теней и т.п. используйте лассо или ручку. При очистке всегда держите оригинальный слой сверху, без масок, и сравните его с тем, что вы делаете, чтобы увидеть, что вы что-то вырезали — это не всегда ясно.
Если вы используете ручную повторную рисование, используйте острые кисти, а не размытые, это может быть полезно только в том случае, если вы планируете определенный фон, но мы хотим создать урожай, который будет работать для любого фона. Вот куча полезных советов: используйте как обычные, так и векторные маски — и объедините их!
Также полезно создать новое окно, которое можно использовать при увеличении на 100%, а другое — для улучшения работы. Вам не нужно передвигаться и продолжать движение. Для вещей, которые обычно не могут быть разделены, например пальцы, вы должны набросать базу, а затем проверить исходное изображение, чтобы убедиться, что вы правильно сохранили их, а также проверить на черном или красном фоне, имеют ли пальцы правильную форму и будут ли они лаем.
Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.
Создайте новый документ в фотошопе. Кнопку мы нарисуем с помощью инструмента Прямоугольник со скругленными углами .
Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00 . А радиус углов установил 4 пикселя .
Объединив передовые методы, вы очистите весь персонаж. Для некоторых разделов с разными цветами может потребоваться комбинирование инверсионных масок. Не стесняйтесь использовать 30% покрытых щетками и экспериментировать. Наконец, нарисуйте все слои и попробуйте снова удалить края. Теперь у нас должно быть готовое изображение, независимо от того, создали ли вы его сами или нет.
Сначала вам нужно построить сюжет, где будут эффекты, какие части персонажа они будут касаться и где они будут. Затем мы преодолеем склероз и вспомним, что было бы предпочтительнее сначала установить фон. Рекомендуется использовать простой переход от синего до светло-голубого к белому. Используйте инструмент градиента или вставьте градиент в качестве слоя заливки. Целесообразно перевести переход на угол около 75 ° и пропускать белый до 40% перехода.
Теперь рисуем саму кнопку.
Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.
Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J ) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800
Затем распределите простое основание с помощью мягкой круговой кисти и размытия. Примените аналогичные оттенки и, возможно, дополнения с 20% охватом — лучше скрыть различия в тени, если вы не хотите использовать одни и те же цвета. Попробуйте создать пару слоев, которые будут перекрывать характер, улучшат слияние персонажа с фоном, на который мы также будем обращать внимание.
Если вы слушали мой совет в предыдущем случае, что не имеет значения, является ли красная часть символа немного прозрачной, где вы можете создать это, вам не придется слишком беспокоиться о включении символа в фоновом режиме.
Поскольку вы не можете просто переместить персонажа в похожий, но на другом фоне, вам нужно «персонализировать» персонажа в фоновом режиме вручную.
Результат должен выглядеть так. В принципе вы можете делать объем больше, все зависит на сколько передвинете нижний прямоугольник. По сути это кнопка под кнопкой.
Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента .
Когда это будет сделано, мы сможем продолжить подготовку эффектов. Начнем с создания повторяющихся фонов для эффектов. База состоит из нескольких закругленных прямоугольников с радиусом 4 точки. Затем выберите повторяющийся раздел и создайте образец, как показано ниже.
Теперь пришло время создать первую серию эффектов — мы вернемся к нашей оригинальной отметке, где будут действовать эффекты, и мы сделаем пару шагов, которые мы будем исчезать, но не слишком много.
В принципе, он будет немного похож на облака, который скоро изменится.
Теперь мы будем работать с каналами. Выберите слой «Эффект» и в контекстном меню выберите «Сохранить выбор» — «Не редактировать», «Подтвердить». Теперь выберите его в каналах, дублируйте и перейдите на базу будущих эффектов — фильтры. Многие люди презирают фильтры, потому что на их базе они обычно не очень приятные вещи. Но что, если мы придумаем слой со всем одним цветом, и мы используем фильтры только для определения области?
Необходимо выполнить настройку — угол наклона 90 градусов.
В данном Уроке рассматриваются простейшие способы создания кнопки. Видео урок Стеклянная кнопка показывает как ссоздать стеклянную кнопку с помощью готовых стилей так и самостоятельно.
Урок Кнопки Фотошоп. Как сделать кнопку в Photoshop.
При создании сайтов или других интерфейсов, важным элементом являются кнопки. Фотошоп позволяет создавать всевозможные кнопки по индивидуальным критериям. В этой статье Вы узнаете как сделать кнопку в фотошоп.
Существует много вариантов создания кнопки в Photoshop. Рассмотрим несколько наиболее простых варианов как сделать кнопку. В Фотошоп нам понадобяться в ПАНЕЛИ ИНСТРУМЕНТОВ следующие инструменты: прямоугольник со скруглеными краями, заливка или выбор цвета (или цвет можно назначить в ПАНЕЛИ СВОЙСТВ), текст. В ПАНЕЛИ СВОЙСТВ — цвет, стили (или в ГЛАВНОМ МЕНЮ выбрать в выпадающем меню ОКНО — стили). В окне СЛОИ: элементы функции ƒх (тиснение). В окне СИМВОЛ: размер, шрифт. Расположение элементов интерфейса Photoshop можно прочитать .
Теперь мы будем использовать дублированный канал и использовать другой фильтр. На этот раз Стилизация → Сияющие контуры. Когда вы играете с настройками, это зависит от вас, но вы обязательно должны оставить толщину контура. Теперь мы будем использовать наши новые образцы, которые мы создали — белые для стартеров с пустым центром. Как и прежде, создайте слой с переходом, создайте его с одним цветом — он лучше обычного слоя, вам не нужно его заполнять, и мы будем работать с масками.
Уменьшите слой заливки и наложите его на образец.
Поскольку фигура стала мозаикой, лучше добавить ее в маску слоя, но она будет пустой, а затем сделаем несколько мазков кисти. Всего несколько нежных ударов, потому что кисть работает агрессивно — добавьте ее в обычные кисти, потому что это больше похоже на надстройку.
Создаем новый документ, задаем нужный размер. Фон прозрачный, режим RGB. Рекомендуется для удобства, точности центрирования и задания размера самой кнопки в Фотошоп использовать направляющие (их для наглядности можно подсветить красным цветом в настройках программы через меню РЕДАКТИРОВАНИЕ), путем перетаскивания вертикальной и горизонтальной линейки в нужное положение. На панели инструментов нажимаем инструмент прямоугольник со скруглеными краями, задаем нужное скругление (радиус) на панели свойств, ставим курсор в виде крестика на пересечении линеек и тянем фигуру до нужного размера и формы. Если сначала не выбрали цвет в панели инструментов, заливаем нужным цветом в функциях слоя.
Ниже приведена демонстрация эффектов маскировки с эффектами на практике. Мы добавляем основные эффекты. Возьмите кисть, которая может сформировать брызги — или, по крайней мере, что-то похожее на рисунок ниже. Вы должны получить что-то похожее на это. Мы делаем выделение из канала и снова заполняем его одним цветом и помещаем его в изображение.
Затем повторите эти эффекты еще раз и используйте маску, чтобы немного освежиться, чтобы их было не так много. Мы добавим существенные эффекты к этому слою. И, наконец, добавьте наложение белого цвета. И это все, что вам нужно знать, чтобы создать похожие манипуляции. Кисти, образцы, которые мы создали ранее, и яркие стили.
Создание кнопки в Фотошоп с помощью готовых стилей.
Самый простой вариант получить объемную кнопку — выбрать стиль в панели свойств фигуры (или в окне СТИЛИ, которое можно вызвать в основном меню ОКНА-в выпадающем менню выбрать СТИЛИ), которые позволят сделать различные кнопки. В Photoshop уже присутствуют наборы стилей (прозрачные, текстурные).
Выбрать из наборов подходящий стиль можно нажав на треугольник справа в наборе. В данном случае набор ВЕБ стили — стиль Хром. После выбора стиля в панели СЛОЙ можно увидеть, из каких элементов функций он состоит. Каждый элемент функции можно корректировать.
Конечно, мы не должны забывать о важных масках. Мы будем использовать несколько разных стилей в образцах, и мы поставим их вручную — это немного сложно, но это окупается. Все стили имеют крышку основного стиля. — Переходная накладка — покрытие 30%, режим линейного освещения, все остальное. Расширение: 2 точки, внутри, покрытие 80%, цвет белый. Вариации изменили охват перехода или охват охвата — лучше выглядят в более темных областях.
У вас есть стили, теперь это зависит от вас — у меня есть несколько советов и советов. Применяйте вариации с более низким покрытием до более темных субстратов, слегка помещайте почти белые части на светлые части. Не объединяйте объекты вместе — теряйте настройки стиля, чтобы объединить их в группы по типу, а затем назначить маску для групп.
После определения формы, цвета и стиля кнопки переходим к написанию текста кнопки. Рекомендуется создать новый слой для текста, чтоб векторная фигура не прикреплялась к тексту. На панели инструментов нажимаем инструмент текст, и набираем текст на изображении кнопки. Кликаем на инструмент перемещение. Открываем окно СИМВОЛ и выбираем шрифт, цвет и размер.
Если вы решитесь, вы также можете комбинировать темные стили в соответствии с оригинальным дизайном, где они используются. Просто придерживайтесь одного принципа, если вы поместите туда кости, всегда должна быть подбираемая база внизу — без нее сами кости выглядят странно. Неважно, белый или черный, но он должен быть там.
Последний шаг — очистить, уточнить и заострить эффекты. Вы можете быть удивлены, насколько это может помочь, но важно сделать это тщательно, потому что мы имеем ту же ситуацию, что и раньше, — многие слои, которые мы не можем объединить, потому что это разрушит эффекты. Поскольку изображение плохое, эта заточка будет достаточно больной, чтобы добавить маску к слою и оставить ее только при лучших эффектах.
Текст можно оставить без стиля. Для применения стиля к тексту на слое с текстом кликаем 2 раза или нажимаем функцию. Выбираем например Тиснение. В окне задаем внутренний скос и задаем нужные параметры. В итоге получаем серую хромированнкю объемную кнопку с вдавленным текстом.
Давайте сначала посмотрим, как будет выглядеть презентация в финале. Во-первых, мы уточним цвета сайта, какие материалы у нас есть для обработки. Здесь мы выходим из оттенков коричневого, бежевого и т.д. мы установим рабочую картину шириной 900 и высотой 800 точек. Правители разделяют область на ширину на три части справа и слева — 65 точек влево, 65 точек справа, средняя часть — 770 точек, что является частью, в которой мы будем рисовать паутину. Предположим, мы, как правило, создаем сайты шириной до 770 пикселей, что делает его идеальным для отображения на большинстве мониторов.
Создание кнопки со своими вариантами стилей.
Стиль кнопки можно задать самому, используя инструмент ФУНКЦИЯ на панели СЛОИ.
Кликаем дважды на слое кнопки или нажимаем на понели кнопку ƒх. Самый простой вариант — стиль слоя выбираем ТИСНЕНИЕ и выбираем необходимые параметры. Добавляем ТЕНЬ.
Высота заголовка сайта должна занимать максимум 180 пунктов, но это зависит от местоположения навигации и т.д. Следующий шаг — цвет фона. Поскольку у нас нет нового слоя, созданного в палитре слоев, фоновый слой окрашен. После окраски этого слоя дважды щелкните значок «Создать новый набор» в палитре «Слои» и создайте два набора. Дважды щелкнув имя каждого набора, можно переименовать. Так мы создали основу для порядка сортировки в нашей презентации, как показано на рис. На следующем этапе мы начнем создавать отдельные элементы презентации.
Мы создадим волнистые линии веб-границы. Два в заголовке, как мы видим в финальном предварительном просмотре, просто озаглавлены голова, а одна — на пяту презентации и заканчивается презентация. Нажмите инструмент «Перо», чтобы «блестить» инструмент и «нарисовать» о пути или форме будущего вейвлета.
После рендеринга и закрытия пути «скоринга» щелкните инструмент «Палитра инструментов», чтобы изменить точку. Нажмите на один из созданных путей и попробуйте, что может сделать этот инструмент. Мы можем красиво сформировать кривую, и мы будем действовать во всех точках, за исключением двух крайних точек, которые по логическим причинам должны оставаться резко заостренными.
Можно также при желании использовать внешнее свечение, обводку, перекрытие цвета или узора и другие стили на выбор. Стеклянная кнопка в фотошопе делается без заливки фигуры цветом (непрозрачность заливки -0), или залитием таким же цветом, что и основание (аналогично применяется к тексту).
Приняв инструмент и переключив инструмент, мы достигнем удовлетворительного результата и создадим схему будущего вейвлета. Мы сделаем выбор из определенного пути. Если это так, затем щелкните в палитре инструментов на уже известном цветовом олове и заполните выбранный вами цвет.
На данный момент это тот же цвет, потому что слой будет перекрываться с другими эффектами, и поэтому цвет неважен, последний не будет виден.
Мы все еще находимся в слоевой волне и нажимаем на значок «Добавить стиль слоя» в палитре слоев. Сначала мы определим эффект наложения перехода.
Затем, как в предыдущем примере, добавляем текст со стилями тиснения. Можно к тексту применять и другие стили по желанию.
Если кнопка готова — нажимаем на ФАЙЛ в главном меню и в вкладке выбираем «сохранить для веб устройств». В окне задаем формат PNG 24 (оп поддерживает прозрачность и передает максимум оттенков изображения). Здесь же можно подкорректировать размер кнопки.
С обоими этими эффектами мы можем экспериментировать по-разному и создавать различные волнообразные эффекты. В палитре слоев слой волны дублируется правой кнопкой мыши дважды, чтобы создать три волна. Поместите волны примерно так, как мы видим в полученном изображении. Верхние два будут находиться в диапазоне около 180 пунктов, нижняя волна помещается в нижней части презентации в виде нижнего колонтитула.
В это время, мы обращаем внимание на заголовок сайта, который будет находиться между двумя верхними волнистыми линиями.
В палитре слоев к нам, потому что мы создаем новый слой с фотографиями, и мы будем называть этот слой фотографии 1. Щелкните левой кнопкой мыши и перетащите слой в палитре слоев, перетащите его в положение ниже всех слоев в набор волнистых слоев основания. Таким образом, вся процедура и повторить с другими фотографиями, просто изменить свое имя на фото 2. Для дальнейшей работы на фото слоя 2 выключения.
Видео как нарисовать стеклянную кнопку в Фотошоп.
Видео Стеклянная кнопка в фотошоп показывает как ссоздать стеклянную кнопку в Фотошоп с помощью готовых стилей так и самостоятельно.
Как сделать кнопку в фотошопе
Как сделать вот такую кнопку в фотошопе. Она может пригодиться для вашего сайта или блога. Ну и просто полезная инструкция 🙂
Инструкция
Что вам понадобится:
- PhotoShop
- Интернет
- Фантазия
1 шаг
Открываем наш Фотошоп!
Создаем новый рисунок. Выбираем размер. Если хотите кнопку, как на рисунке, выберите “Набор” – Web, “Размер” – прямоугольник, 180х50.
Создаем наш рисунок!
2 шаг
Когда рисунок создан, необходима сама кнопка! Выбираем “Прямоугольник с закругленными углами”. И рисуем этот прямоугольник на нашем рисунке. Получается приблизительно вот так (см. картинку)
Необязательно делать его ровным, главное чтобы вам нравилось.
3 шаг
Теперь делаем нашей фигуре стиль. Выбираем слой с фигурой, нажимаем “Слой” → “Стиль слоя”. Выбираем градиент, обводку и тень по вкусу. Если у вас мало наборов, можете скачать их с www.photoshop-master.ru, там все бесплатно и скачивание напрямую с сайта. Требуется только регистрация. Вот как выглядит теперь ваша уже почти кнопка! (см. картинку)
4 шаг
Теперь остается только написать нужное слово! Выбираем инструмент “Текст” и на нашей кнопке пишем слово. Допустим “aKak.ru”. Как получилось, см. на картинку!
5 шаг
Но обычный шрифт скучен и не эстетичен. Выбираем шрифт! Я использую Inform CTT . Выбираем стиль шрифта. “Слой” → “Стиль слоя”.
Выставляем градиент, тень и обводку на свое усмотрение. И, если нужно, удаляем Фон. Сохраняем в PNG или GIF , т.к. эти форматы сохраяют цвет и прозрачность.
Как сделать кнопку в Photoshop (4 простых и быстрых шага)
Думая о кнопках, что приходит вам на ум? Вероятно, это классическая прямоугольная кнопка загрузки, которую мы видим почти каждый день, или кнопка «Мне нравится» в Facebook и Instagram. Хорошо, это немного красивее, поэтому давайте начнем с основного и классического.
Я работаю графическим дизайнером почти десять лет. Исходя из моего опыта работы с брендингом и дизайном визуальной коммуникации, на веб-сайте важна каждая деталь. Настройка каждой детали на вашем веб-сайте свидетельствует о вашем профессионализме и подлинности. От сложного логотипа до простой кнопки загрузки.
В этом уроке я покажу вам, как сделать кнопку с простым сплошным цветом и кнопку с градиентным фоном. Шаги аналогичны, но есть больше шагов, чтобы добавить эффект для кнопки градиента.
4 простых шага по созданию кнопки в Photoshop
В зависимости от того, насколько красивой вы хотите сделать кнопку, вы можете сделать это всего за три шага, если вам нужна минималистичная кнопка.
Примечание. Приведенные ниже снимки экрана взяты из версии Adobe Photoshop CC 2021 для 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: Выберите инструмент «Текст», щелкните прямоугольник и введите текст, который хотите отобразить на кнопке.
Текст может оказаться не в самом центре, но вы можете легко изменить его положение. Если вы хотите поместить текст в центр, параметры выравнивания в верхнем меню должны вам помочь.
Если вы хотите изменить цвет кнопки, вы можете добавить Color Overlay. Вы также можете изучить шрифты, размер и т. д. на панели «Символы».
Заключение
Мы почти закончили. Вы можете создать больше версий кнопки, изменив ее цвета, градиенты или добавив к ней дополнительный эффект, используя стили слоя и формы.
Тот же метод применим и к кнопкам других фигур. Кто сказал, что кнопка должна быть прямоугольной? Как вам этот?
О Джун
Джун — опытный графический дизайнер, специализирующийся на дизайне брендов.
Photoshop — это основной инструмент, который она использует каждый день вместе с другими программами Adobe для своей творческой работы.
Бесплатные шаблоны для изготовления пуговиц для машин для изготовления пуговиц Photoshop — American Button Machines
Бесплатные шаблоны для изготовления пуговиц для машин для изготовления пуговиц в Photoshop — American Button Machines- Дом
- Магазин
- О нас
- Наша история
- Свяжитесь с нами
- Блог
Логин | Создать учетную запись
Корзина 0
Мы предоставили наши шаблоны кнопок ниже, чтобы помочь вам в создании кнопок обратной связи. Просто заново создайте шаблоны в выбранном программном пакете и начните создавать свои кнопки.
Бесплатные шаблоны для создания кнопок для Photoshop
Ниже вы найдете бесплатные шаблоны для создания кнопок для программы Photoshop.
Нажатие на приведенные ниже ссылки инициирует загрузку файла, который можно использовать в качестве шаблона для создания дизайнов кнопок в Photoshop.
Шаблон Photoshop для кнопок 1 дюйма
Шаблон Photoshop для 1,25 -дюймовых кнопок
Шаблон Photoshop для 1,75 -дюймовых кнопок
Шаблон Photoshop для 1,75 дюймовой кнопки
Шаблон Photoshop для 1,75 дюймовой кнопки
.
Шаблон Photoshop для 3-дюймовых кнопок
Шаблон Photoshop для 3,5-дюймовых кнопок
Видеоруководство по Photoshop. Как создать кнопку
Полный список шаблонов кнопок включает слоганы.
НОВИНКА: по многочисленным просьбам мы добавили размеры для настройки тегов в вашей собственной программе графического дизайна. Строки тегов позволяют разместить контактную информацию на обратной стороне кнопки. Нажмите на размер кнопки ниже, чтобы загрузить один из наших бесплатных шаблонов для создания кнопок в формате PDF с вашим выбором, с лозунгами или без них.
| Круглые шаблоны | Слоганы | Квадратные/ромбовидные шаблоны | Прямоугольные шаблоны | Миниатюрные круглые шаблоны Badge |
|---|---|---|---|---|
| Круглый шаблон 1,00 дюйма | 1,00-дюймовый шаблон слогана | Квадратный шаблон 1,50 x 1,50 дюйма | Прямоугольный шаблон 1,75 x 2,75 дюйма | Круглый шаблон 2,25 дюйма-BAM |
| Круглый шаблон 1,25 дюйма | Шаблон слогана размером 1,25 дюйма | Квадратный шаблон 2,0 x 2,0 дюйма | Прямоугольный шаблон 2,00 x 3,00 дюйма | Круглый шаблон 3,00 дюйма-BAM |
| Круглый шаблон 1,50 дюйма | Шаблон слогана размером 1,50 дюйма | Фотошаблон 2,00 x 3,00 дюйма | ||
| Круглый шаблон 1,75 дюйма | Шаблон слогана размером 1,75 дюйма | Прямоугольный шаблон 2,50 x 3,50 дюйма | ||
| Круглый шаблон 2,00 дюйма | Шаблон слогана размером 2,25 дюйма | |||
| Круглый шаблон 2,25 дюйма | Шаблон слогана размером 3,00 дюйма | |||
| Круглый шаблон 2,50 дюйма | Шаблон слогана размером 3,50 дюйма | |||
| Круглый шаблон 3,00 дюйма | 6,00-дюймовый шаблон слогана | |||
| Круглый шаблон 3,50 дюйма | ||||
| Круглый шаблон 4,00 дюйма | ||||
| Круглый шаблон 6,00″ |
СохранитьСохранитьСохранитьСохранить
Программное обеспечение для создания пуговиц от American Button Machines.
