Как создать металлическую кнопку в photoshop

/ Сергей Нуйкин / Уроки по фотошопу

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

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

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

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

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

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

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

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

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

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

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

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

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

И сдвинем слои вниз при помощи инструмента перемещение (V).

Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

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

  1. Как создать металлическую кнопку в Photoshop
  2. Теперь сделаем текст вдавленным, а также создадим блик и контур на краях надписи, все это мы сделаем через стили слоя.
  3. Как создать металлическую кнопку в Photoshop
  4. Как создать металлическую кнопку в Photoshop

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу.

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

Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

Далее отредактируем состояние кнопки при нажатие.

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

  Чтобы уменьшить объем нам придется выделить слои объем и тень, так как наша тень также станет меньше, и при помощи инструмента перемещение (V) стрелочкой на клавиатуре поднимем их вверх.

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

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

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

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

Источник: https://fotodizart.ru/knopka-v-fotoshope.html

Металлический урок

Как создать металлическую кнопку в Photoshop

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

Создаем металлическую текстуру

Сразу предупреждаю: урок проще простого! Так что дважды подумайте, пока вы за него не взялись ????  Ну а теперь начнем создавать нашу металлическую текстуру. Нарисуйте простой круг при помощи инструмента “Эллипс“.

Как создать металлическую кнопку в Photoshop

Дальше потребуется применить к нему стиль “Наложение градиента“. Чтобы открыть панель со стилями, достаточно дважды щелкнуть по иконке слоя…Как создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в Photoshop

Вы уже могли заметить: я использовал особый градиент, который не составит труда повторить, вдруг что комментируйте – я отвечу. Ладно, с градиентом разобрались, дальше нужно добавить шум. Создайте новый слой: я его назвал “шум” и залил серым цветом #808080. Посмотрите на картинку внизу…

Как создать металлическую кнопку в Photoshop

Полпути пройдено, назад уже не вернетесь, так  что примените к слою “ШУМ” такие фильтры:

  • Фильтр – Шум -Добавить шум… 

Как создать металлическую кнопку в Photoshop

  •  Фильтр – Размытие – Радиальное размытие…

Как создать металлическую кнопку в Photoshop
В результате вы должны получить забавный эффект, схожий с кругами на воде, но это еще не все! Нужно слой с “Кругом” превратить в смарт объект. Смотрите, как это делается:

Как создать металлическую кнопку в Photoshop
Слой “Шум” потребуется перевести в обтравленную маску, режим наложения слоя нужно изменить на “линейный заменитель” и прозрачность поставить на 20%.

Как создать металлическую кнопку в Photoshop

Вот и все, металлическая текстура готова, делов на 2 минуты, а результат очень неплох  ????

Как создать металлическую кнопку в Photoshop

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

Заключение

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

Чтобы увеличить, кликните картинку ????

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

Что же, остается только пожелать хорошего послезавтрашнего дня!

Источник: https://ArtTime.org.ua/metallicheskaya-tekstura/

Как создать набор социальных кнопок в Adobe Photoshop

Из этой статьи вы узнаете, как с помощью Adobe Photoshop создать набор кнопок социальных сервисов.

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

Как создать металлическую кнопку в Photoshop
Программное обеспечение: Adobe Photoshop CC

  • Узор;
  • Иконки социальных сервисов.

Откройте Photoshop и нажмите Ctrl-N, чтобы создать новый документ. Задайте необходимые параметры, как это показано на рисунке ниже и нажмите OK.

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

В первую очередь нам понадобится раздел «Сетка». Введите значение 5 в поле «Линия через каждые» и 1 в поле «Внутреннее деление». Кроме того, установите для сетки цвет #828282. После того, как вы зададите все эти параметры, нажмите кнопку ОК.

Я советую вам не пренебрегать использованием сетки, так как позже это существенно облегчит вашу работу. Кроме того, в любой момент вы можете включить или отключить ее с помощью сочетания клавиш. Так же нам нужно вывести на экран панель «Инфо» (Окно> Инфо), в нем вы сможете контролировать положение и размер создаваемых фигур:

Как создать металлическую кнопку в Photoshop

Установите цвет переднего плана на #426DAC, выберите инструмент «Прямоугольник со скругленными углами». В панели параметров в верхней части окна программы установите для «Радиуса» значение 25 пикселей.

Читайте также:  Редактирование звука в camtasia studio 7

Теперь перейдите к холсту и создайте векторную фигуру с размерами 150 на 50 пикселей:

Как создать металлическую кнопку в Photoshop

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

Введите значения, приведенные на рисунках ниже:

Как создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в PhotoshopКак создать металлическую кнопку в Photoshop

Проверьте, выбрана ли у вас векторная фигура и нажмите Ctrl+J, чтобы продублировать ее. В палитре слоев кликните правой кнопкой мыши на копии слоя фигуры и выберите из контекстного меню команду «Очистить стили слоя».

  • При выбранном слое копии задайте в палитре слоев значение «Заливки» 0%. Откройте для слоя копии окно «Стили слоя» и введите значения параметров, приведенные на рисунке ниже:
  • Как создать металлическую кнопку в Photoshop
  • Убедитесь, что у вас выбрана копия, которую мы создали на предыдущем этапе, и продублируйте этот слой (Ctrl+J).

В палитре слоев кликните правой кнопкой мыши на слое новой копии и выберите пункт «Очистить стили слоя». При выбранном слое новой копии задайте в палитре слоев значение «Заливки» 0%.

  1. Откройте для копии слоя, созданной нами на этом этапе, окно «Стили слоя» и введите следующие значения параметров:
  2. Теперь для работы нам понадобится сетка с шириной ячейки в 1 пиксель, поэтому перейдите в Редактирование> Настройки> Направляющие, Сетка и Фрагменты и введите в поле «Линия через каждые» значение 1.

Установите цвет переднего плана #234474 и выберите инструмент «Прямоугольник со скругленными углами». В панели параметров в верхней части окна программы установите для «Радиуса» значение 2 пикселя.

  • Перейдите к холсту и создайте векторную фигуру размером 64 на 34 пикселей. Разместите ее так, как показано на рисунке:
  • Откройте для только что созданной фигуры окно «Стили слоя» и задайте для параметров значения, приведенные на рисунках ниже:

Установите цвет переднего плана на #FFFFFF и выберите инструмент «Прямоугольник со скругленными углами». Убедитесь, что в панели параметров в верхней части окна программы у вас по — прежнему установлено значение «Радиуса» 2 пикселя. Создайте векторную фигуру размером 54 на 26 пикселей и разместите ее так, как показано на рисунке ниже:

  1. При активной новой (белой) векторной фигуре выберите инструмент «Добавить опорную точку» и добавьте две узловые точки, как показано на первом рисунке.
  2. Выберите инструмент «Выделение узла», выберите среднюю правую узловую точку и переместите ее на 1 пиксель вправо с помощью указателя мыши. Используя тот же инструмент, выберите среднюю левую узловую точку и переместите ее на 1 пиксель влево:
  3. Откройте для белой векторной фигуры окно «Стили слоя» и введите для параметров значения, приведенные на рисунках ниже:
  4. Скачайте файл иконок социальных сервисов и откройте его.

Источник: https://www.internet-technologies.ru/articles/kak-sozdat-nabor-socialnyh-knopok-v-adobe-photoshop.html

В предыдущей статье я рассказала вам об основных правилах стиля WEB 2.0.  А в этой статье применим эти правила на примере создания кнопки для сайта.

Идём в Photoshop и создаём новый документ CTRL+N.

Ширину выставляем 500px, высоту 300px.

Как создать металлическую кнопку в Photoshop

На верхней панели нажимаем на пункт меню «окно» и выбираем «слои», или просто нажимаем F7.

Как создать металлическую кнопку в Photoshop
!!! Всегда давайте названия каждому слою! Именно по названию вы всегда сможете найти нужный вам слой.

Кнопку для сайта мы сделаем на голубом фоне.

Берём инструмент «Заливка»

Как создать металлическую кнопку в Photoshop

  • Для точного подбора цвета скачайте программу ColorMania.
  • Сама кнопка будет шириной 300px, высотой 100px.
  • Включаем линейку: CTRL+R или на верхней панели нажимаем пункт «просмотр» и выбираем «линейки».

Выставляем направляющие. Вертикальные на 100px и на 400px, горизонтальные на 100px и на 200px.

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

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

Как создать металлическую кнопку в Photoshop
Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

Направляющие отключаем CTRL+;

Как создать металлическую кнопку в Photoshop !!! Всегда давайте слоям названия, так вы в них никогда не запутаетесь.

Основа для нашей кнопки готова, теперь наша задача cделать из неё кнопку с градиентом в стиле WEB 2.0.

Итак, для этого применяем стили.

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

Выбираем слой «кнопка», щёлкнув по нему один раз мышкой.

Как создать металлическую кнопку в Photoshop
Как создать металлическую кнопку в Photoshop
Как создать металлическую кнопку в Photoshop

  1. Нижний цвет берём тёмно-синий, верхний голубой, нажимаем везде OK и у нас получается вот такая кнопка для сайта с градиентом:
  2. Но выглядит она как-то плосковато, поэтому добавляем тень и обводку.
  3. Нажимаем fx и выбираем стиль «тень» и выставляем параметры как на картинке.
  4. И добавляем обводку: fx -> обводка.
  5. Наша кнопка для сайта теперь выглядит вот так:
  6. Ну а теперь можно дать нашей кнопке название.
  7. Берём инструмент «текст» или просто нажимаем латинскую клавишу «T», параметры текста выставляем следующие:
  8. Шрифт – Verdana, bold, 30px.
  9. И пишем текст «КНОПКА».
  10. Применяем к тексту стиль «тень» с параметрами как на картинке.
  11. И, наконец, у нас получилась вот такая замечательная кнопка для сайта:

Сохраняем нашу кнопку в формате Photoshop(*.PSD;*.PDD).

Это самый простой вариант кнопки с градиентом.

Как сверстать такую кнопку с помощью HTML и CSS читайте вот здесь

Источник: https://www.fly-webmaster.ru/knopka-dlya-sajta.html

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

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

5

Как создать металлическую кнопку в Photoshop

  • Шаг 1Создаем в фотошопе новый документ, заливаем цветом #282828.Как создать металлическую кнопку в Photoshop
  • Шаг 1Применим к фону «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум» (Add Noise…) со значением 3.Как создать металлическую кнопку в Photoshop
  • Шаг 2Получили такую текстуру.Как создать металлическую кнопку в Photoshop

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

  1. Шаг 4Меняем режим наложения слоя на «Мягкий свет» (Soft Light).Как создать металлическую кнопку в Photoshop
  2. Шаг 5На новом слое создаем небольшой круг черного цвета.Как создать металлическую кнопку в Photoshop
  3. Шаг 6Потом на новом слое создаем круг поменьше серого цвета.Как создать металлическую кнопку в Photoshop
  4. Шаг 7И на новом слое создаем еще один круг поменьше, белого цвета.Как создать металлическую кнопку в Photoshop

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

  • Шаг 9И получаем такой результат.
  • Шаг 10Применим к фигуре стиль слоя «Наложение градиента» (Gradien Overlay), цвет от темно серого #1e1e1e к более светлому #636363.
  • Шаг 11Применим стиль слоя «Внешнее свечение» (Outer Glow).
  • Шаг 12Стиль слоя «Тень» (Drop Shadow).
  • Шаг 13На этом шаге получили такой результат.

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

  1. Шаг 15Далее стиль слоя «Обводка» (Stroke).
  2. Шаг 16Стиль слоя «Внутреннее свечение» (Inner Glow).
  3. Шаг 17Стиль слоя «Внешнее свечение» (Outer Glow).
  4. Шаг 18Стиль слоя «Тень» (Drop Shadow).
  5. Шаг 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 и все, наша мобильная кнопка готова.

Источник: https://www.designonstop.com/tutorials/beginners/sozdaem-v-fotoshope-obemnuyu-knopku-dlya-mobilnogo-telefona.htm

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

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

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

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

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

Вот куча полезных советов: используйте как обычные, так и векторные маски – и объедините их!

Также полезно создать новое окно, которое можно использовать при увеличении на 100%, а другое – для улучшения работы. Вам не нужно передвигаться и продолжать движение.

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

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

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

Как создать металлическую кнопку в Photoshop

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

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

Читайте также:  Оптимизация анимации файлов gif

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

Рекомендуется использовать простой переход от синего до светло-голубого к белому. Используйте инструмент градиента или вставьте градиент в качестве слоя заливки.

Целесообразно перевести переход на угол около 75 ° и пропускать белый до 40% перехода.

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

Как создать металлическую кнопку в Photoshop

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

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

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

Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

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

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

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

Теперь мы будем работать с каналами. Выберите слой «Эффект» и в контекстном меню выберите «Сохранить выбор» – «Не редактировать», «Подтвердить».

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

Но что, если мы придумаем слой со всем одним цветом, и мы используем фильтры только для определения области?

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

Как создать металлическую кнопку в Photoshop

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

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

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

Расположение элементов интерфейса Photoshop можно прочитать .

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

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

Уменьшите слой заливки и наложите его на образец.

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

Создаем новый документ, задаем нужный размер. Фон прозрачный, режим RGB.

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

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

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

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

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

Самый простой вариант получить объемную кнопку – выбрать стиль в панели свойств фигуры (или в окне СТИЛИ, которое можно вызвать в основном меню ОКНА-в выпадающем менню выбрать СТИЛИ), которые позволят сделать различные кнопки.

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

Каждый элемент функции можно корректировать.

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

– Переходная накладка – покрытие 30%, режим линейного освещения, все остальное. Расширение: 2 точки, внутри, покрытие 80%, цвет белый.

Вариации изменили охват перехода или охват охвата – лучше выглядят в более темных областях.

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

Как создать металлическую кнопку в Photoshop

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

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

Последний шаг – очистить, уточнить и заострить эффекты.

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

Как создать металлическую кнопку в Photoshop

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

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

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

Читайте также:  Металлическая кнопка в photoshop, добавление значка on/off

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

Как создать металлическую кнопку в Photoshop

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

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

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

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

На следующем этапе мы начнем создавать отдельные элементы презентации.

Мы создадим волнистые линии веб-границы. Два в заголовке, как мы видим в финальном предварительном просмотре, просто озаглавлены голова, а одна – на пяту презентации и заканчивается презентация. Нажмите инструмент «Перо», чтобы «блестить» инструмент и «нарисовать» о пути или форме будущего вейвлета.

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

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

Как создать металлическую кнопку в Photoshop

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

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

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

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

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

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

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

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

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

Для дальнейшей работы на фото слоя 2 выключения.

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

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

Источник: https://droidd.ru/the-button-in-photoshop-how-to-draw-a-button-in-photoshop.html

Создание глянцевой кнопки в Adobe Photoshop

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

Создаем документ с размерами 400 х 180 пикселей, далее нажимаем Ctrl+Shift+N для образования нового слоя.
Теперь активируем инструмент Rounded Rectangle Tool и устанавливаем радиус закругления углов в 10 пикселей. Выбираем черный цвет по-умолчанию и рисуем прямоугольник на новом слое.

Затем идем в настройки параметров наложения слоя и применяем следующие параметры для стилей:
Gradient Overlay – изменяем цвет правого крайнего ползунка на 50% серый, т.е. #808080.
Как создать металлическую кнопку в Photoshop

Inner Glow – включаем внутреннее свечение, выставляем белый цвет, изменяем непрозрачность на 40%, размер 8 пикселей.
Как создать металлическую кнопку в Photoshop

Stroke – размер обводки в 1 пиксель, цвет – #808080.
Drop Shadow – изменяем дистанцию на 0 пикселей и размер 8 пикселей.
Как создать металлическую кнопку в Photoshop

Нажимаем кнопку ОК.

Выбираем инструмент Horizontal Type Tool и создаем надпись “Кнопка”, или какая вам больше нравится…
Нажимаем Ctrl+Shift+N и, выбрав белый цвет по-умолчанию, рисуем прямоугольник с закругленными углами, который будет занимать примерно половину нашей кнопки по высоте.
Как создать металлическую кнопку в Photoshop

Снова идем в режим наложения и выставляем следующие настройки: ставим галочку напротив пункта Blend Interior Effects as Group, включаем градиент и выбираем цвет крайнего левого ползунка на #404040.
Как создать металлическую кнопку в Photoshop

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

Как создать металлическую кнопку в Photoshop

Источник: https://photolessons.org/glass-button/

Создаем симпатичную хромированную кнопку в Фотошоп

Как создать металлическую кнопку в Photoshop

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

1. Создание основы кнопки

Создайте новый документ (1920х900px). На новом слое нарисуйте белый круг (используйте инструмент «Овальная область — M» с зажатой клавишей Shift, чтобы получился ровный круг). Назовите этот слой «Кнопка».

Примените к нему стиль Gradient Overlay (Наложение градиента). Добавьте несколько контрольных точек к градиенту (10-15), используя разные оттенки серого (как на рисунке ниже).

При выборе контрольных точек важно, чтобы крайние точки были одинакового цвета.

Настройки градиента:

  • Режим наложения: Нормальный
  • Стиль: Угловой
  • Угол: 90

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

2. Добавляем матовый эффект к металлу

Создайте новый слой над слоем «Кнопка», залейте его черным цветом, и назовите его, например, «Матовый эффект».
Сначала применим к слою фильтр Шум (Фильтр – Шум – Добавить шум)(Filter – Noise – AddNoise) с таким настройками:

  • Эффект: около 100% (подберите оптимальное значение)
  • Распределение: По Гауссу
  • Ставим галочку «Монохромный».

Теперь добавим к слою фильтр Радиальное размытие (Фильтр – Размытие – Радиальное размытие) (Filter – Blur – RadialBlur):

  • Количество: можно выставить и максимум – 100
  • Метод: Кольцевой
  • Качество: Наилучшее.

Мы должны получить нечто похожее, как на рисунке ниже.
Как создать металлическую кнопку в Photoshop

3. Перенесем матовый эффект на слой «Кнопка»

Уменьшим непрозрачность слоя «Матовый эффект» до 80% и изменим режим наложения на «Мягкий свет». Инструментом «Перемещение» — V, перетащим центр получившейся спирали так, чтобы он совпал с центром кнопки.
Нам нужна только та часть слоя «Матовый эффект», которая перекрывает нашу кнопку, поэтому отсечем лишнее.

Можете использовать свой излюбленный способ применения маски, мы же воспользуемся простым способом: с зажатой клавишей Ctrl кликнем на иконке слоя «Кнопка» (загрузится выделение кнопки). Выделим слой «Матовый эффект» кликнув по нему, инвертируем выделение (Ctrl+Shift+I) и нажмем Delete. Этим мы оставим только кнопку.

Теперь можно снять выделение – Ctrl+D.

А наша кнопка становится все красивее!

Как создать металлическую кнопку в Photoshop

4. Добавим кнопке объема

Применим к слою «Кнопка» стиль «Тиснение» со следующими настройками:

  • Стиль: Внутренний скос
  • Метод: Жесткая огранка
  • Глубина: 1000%
  • Направление: Вверх
  • Размер: 2px
  • Смягчение: 3px
  • Угол: 110.
  • Режим Тени: Умножение
  • Непрозрачность: 30-50%

Для придания кнопке объема добавим стиль слоя «Тень» с непрозрачностью около 50%

5. Делаем основу под кнопкой

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

«Тиснение» с настройками:

  • Стиль: Внутренний скос
  • Метод: Мягкая огранка
  • Глубина: 100%
  • Размер: 25px
  • Смягчение: 16px
  • Непрозрачность режима тени: 10%

Стиль «Внутреннее свечение»:

  • Режим наложения: Умножение
  • Непрозрачность: 50%
  • Цвет: #b3b3b3

Стиль «Наложение градиента»:

  • Градиент: от #f9f9f9 до #e7e7e7
  • Угол: -60

Стиль «Тень»:

  • Режим наложения: Перекрытие
  • Непрозрачность: 60%
  • Угол: 140
  • Смещение: 12px
  • Размер: 7px.

Продублируем слой с кнопкой (Alt+J) и перенесем его под слой «Кнопка». Выключим все скопированные стили на этом слое, но присвоим ему новый – «Внешнее свечение»:

  • Режим наложения: Умножение
  • Непрозрачность: 10%
  • Цвет: # ebebeb
  • Размах: 50%
  • Размер: 15px
  • Последние штрихи
    Добавим надпись и … у нас получилась симпатичная хромированная кнопка!
  • Как создать металлическую кнопку в Photoshop
  • И в дополнение к статье посмотрите видео-урок:

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

Источник: https://sebweo.com/ru/sozdaem-simpatichnuyu-hromirovannuyu-knopku-v-fotoshop/

Ссылка на основную публикацию