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

Содержание

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

Всем доброго времени суток, рад видеть на 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)

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

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

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

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

Создайте новый документ размером 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) и использовать на радость себе и пользователям.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1. Подготовьте документ

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

Чтобы создать 3D-кнопку в Photoshop, вам нужно создать для нее собственный документ. Для этого откройте Photoshop и нажмите « Создать новый»> «Пользовательский» . Начните вводить свои значения.

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

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

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

Шаг 2. Установите прямоугольник для 3D-кнопки

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

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

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

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

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

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

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

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

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

Шаг 3: Сделай свою кнопку 3D

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

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

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

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

Структура

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

затенение

Угол: 90
Высота над уровнем моря: 37
Режим Highlight: Color Dodge, 55% непрозрачность
Shadow Mode: несколько, непрозрачность 25%

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

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

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

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

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

Структура

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

Качество

Контур: линейный
Шум: 0
Слой выбивает Drop Shadow: On

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

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

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

Вот как.

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

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

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

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

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

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

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

Шаг 6: добавь текст на кнопку

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

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

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

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

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

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

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

Структура

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

Качество

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

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

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

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

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

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

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

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

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

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

Как нарисовать красивую кнопку для сайта — уроки фотошоп

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

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

Начнем с того, что создадим новый документ, на котором будем работать. Я сделал серенький фон (почему-то часто попадается такой фон на сайтах, где нужны кнопки). На панели инструментов выбираем Rounded Rectangle Tool (прямоугольник со скругленными краями). Показал на скриншоте ниже.

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

Делаем форму

Создаем при помощи выбранного инструменты такую фигуру.

На панели слоев выбираем слой с нашей фигурой и добавляем ей стили Gradient и Stroke (для этого внизу панельки Layers нажимаем на кнопку Functions и выбираем один из перечисленных ранее стилей, второй настроем уже в открывшейся панели).

В настройках Gradient выставляем прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, а также стиль Linear и угол 90 градусов. Чтобы было нагляднее, сфоткал этот экран.

Настраиваем теперь Stroke – это будет рамка или ободок для нашей кнопки. Делаем максимально тонкой – выставляем всего 1px, “Color” ставим такой же, как внизу градиента – #0e6aab.

Получаем вот такую основу, с которой нам предстоит совсем чуть-чуть поработать.

Добавляем текстовую надпись

Добавляем на нашу основу текст. Например, при нажатии должно отправляться письмо, поэтому сделаем надпись “Отправить”. Шрифт я выбрал Arial размера 18 и начертанием Bold, цвет белый.

Также, ниже создаем копию надписи, но Coloe #1b75af и сдвигаем на одну точку вправо и вниз. Результат ниже.

Создадим еще белый слой-подложку и сдвинем его по аналогии с текстом. Это поможет немного отделить объект от фона, добавит объем.

Скачать PSD-шаблоны кнопок для сайта (набор из 8 штук)

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

Скачать (размер архива 380 кб)

Видео-урок на ту же тему

Если вам лень читать текст и смотреть скрины и вы привыкли к видео-урокам, то можете посмотреть несколько хороших мануалов от сторонних авторов.

Похожие публикации на блоге:

Источник: http://astrapromo.com/articles/uroki-photoshop/sozdaem-krasivuyu-knopku-dlya-sayta-v-fotoshope.html

Создание кнопки в фотошопе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У нас появляется вот такое окно:

Слою 1 даём название «фон». Чтобы изменить название, нужно щёлкнуть два раза мышкой по Слою1.

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

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

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

и заливаем фон голубым цветом.

Для точного подбора цвета скачайте программу ColorMania.

Сама кнопка будет шириной 300px, высотой 100px.

Включаем линейку: CTRL+R или на верхней панели нажимаем пункт «просмотр» и выбираем «линейки».

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

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

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

Вверху выставляем параметры: заливку выбираем белую, обводку выключаем.

Радиус (там же на верхней панели) делаем 10px.

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

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

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

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

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

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

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

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

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

Нажимаем на кнопку fx и выбираем пункт «наложение градиента»

У нас появляется вот такое окно:

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

Нижний цвет берём тёмно-синий, верхний голубой, нажимаем везде OK и у нас получается вот такая кнопка для сайта с градиентом:

Но выглядит она как-то плосковато, поэтому добавляем тень и обводку.

Нажимаем fx и выбираем стиль «тень» и выставляем параметры как на картинке.

И добавляем обводку: fx -> обводка.

Наша кнопка для сайта теперь выглядит вот так:

Ну а теперь можно дать нашей кнопке название.

Берём инструмент «текст» или просто нажимаем латинскую клавишу «T», параметры текста выставляем следующие:

Шрифт – Verdana, bold, 30px.

И пишем текст «КНОПКА».

Применяем к тексту стиль «тень» с параметрами как на картинке.

И, наконец, у нас получилась вот такая замечательная кнопка для сайта:

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

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

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

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

Рисуем кнопку-переключатель в Adobe Photoshop

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

Однако несмотря на всю простоту урока, полезен он тем, что дает представление о том, как передать углубления и объем кнопок для UI.

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

Шаг 1

Откройте Photoshop и нажмите Control + N, чтобы создать новый документ. Введите данные, которые видите на картинке ниже.

Включите сетку (View > Show > Grid) и привязку с сетке (View > Snap To > Grid). Для начала нам понадобится расстояние между линиями сетки в 5px.

Зайдите в Edit > Preferences > Guides, Grid & Slices и обратите внимание на раздел Grid. Укажите 5 в поле Gridline Every и 1 в поле Subdivision. Также смените цвет сетки на #a7a7a7.

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

Откройте палитру Info (Window > Info), чтобы следить за размером и расположением вашей работы.

Шаг 2

Выберите в качестве первого цвета #e8d8a7, возьмите инструмент Rounded Rectangle Tool и обратите внимание на меню настроек вверху экрана. Укажите радиус в 30px, создайте векторную фигуру размером 190 на 60px и убедитесь что она осталась выделенной.

Продолжаем работать с Rounded Rectangle Tool. Снова обращаемся к верхнему меню настроек и выбираем кнопку Add. Добавьте еще одну векторную фигуру размером 20 на 10px и разместите ее как показано на второй картинке. Привязка к сетке вам поможет.

Убедитесь что ваша фигура все еще выделена, и все тем же инструментом Rounded Rectangle Tool нарисуйте вторую векторную фигуру (как на третьей картинке).

Шаг 3

Посмотрите на палитру Layers (Window > Layers). Двойным кликом на слое с фигурой, которую мы только что нарисовали откройте окно Layer Style. Поставьте галочку напротив Drop Shadow, Inner Shadow, Outer Glow, Bevel and Emboss и Gradient Overlay, затем введите параметры, указанные на картинках ниже.

Шаг 4

Выберите в качестве первого цвета #a29261 и возьмите инструмент Rounded Rectangle Tool. Нарисуйте фигуру размером 180 на 50px, расположите ее как на картинке ниже и убедитесь что она все еще выделена. Убедитесь, что выбранный инструмент — Rounded Rectangle Tool, и в верхнем меню настроек нажмите на кнопку Subtract.

Нарисуйте фигуру размером 170 на 40px и расположите ее так, как показано на картинке ниже. Откройте окно Layers Style нового векторного слоя и введите параметры, которые вы видите на картинке ниже.

Шаг 5

Укажите в качестве первого цвета #d4c493 и выберите инструмент Rounded Rectangle Tool. Создайте фигуру размером 170 на 40px и разместите как показано на картинке ниже. Откройте окно Layers Style для этого слоя и введите указанные ниже параметры.

Вернитесь в палитру Layers и переименуйте этот слой в «interior».

Шаг 6

Для выполнения следующего шага нам понадобится расстояние между линиями сетки в 1px. Зайдите в меню в Edit > Preferences > Guides, Grid & Slices и введите 1 в поле Gridline Every. Выберите в качестве первого цвета #ac9c6b, возьмите инструмент Ellipse Tool, создайте круг размером в 4px и поместите так, как показано на картинке ниже.

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

Шаг 7

Дублируйте фигуру, которую нарисовали в предыдущем шаге (CTRL + J). Выделите эту копию и перетащите ее вправо, как показано ниже.

Шаг 8

Укажите в качестве первого цвета #a29261 и возьмите Rounded Rectangle Tool. Нарисуйте фигуру размером 100 на 44px и разместите как показано ниже.

В окне Layers Style для этого слоя введите указанные параметры.

Шаг 9

Дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой на только что сделанную копию слоя и выберите Clear Layer Style.

Также для этого слоя снизьте параметр Fill до 0%, затем откройте Layer Style и введите указанные ниже параметры.

Шаг 10

Снова дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой по этой копии и выберите Сlear Layer Style.

Далее работаем с палитрой Layers. Удерживая CTRL нажмите на слой «interior». Должно появиться выделение по форме этой фигуры. Убедитесь что это случилось, затем выберите слой, который создали в начале этого шага и нажмите кнопку «Add layer mask».

После применения маски ваша работа должна выглядеть как на третьей картинке ниже. Нажмите Control + D чтобы снять выделение.

Шаг 11

Снова задайте выделение фигуре, к которой применили маску, снизьте параметр Fill до 0%, затем откройте окно Layer Style. Поставьте галочку напротив «Layer Mask Hides Effects», после чего активируйте Drop Shadow и введите параметры как на картинке ниже.

Шаг 12

Выберите в качестве первого цвета #85bc46, возьмите Rounded Rectangle Tool, создайте фигуру размером 5 на 14px и убедитесь что она осталась выделена. В верхнем меню настроек нажмите кнопку Add, и нарисуйте еще две фигуры размером 5 на 14px, как показано на картинке ниже.

Шаг 13

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

Шаг 14

Возьмите инструмент Type Tool (T) и просто напишите «ON», как показано на первой картинке ниже. Можете использовать жирный шрифт Latha, размером в 15pt и цвета #b6a675. Откройте Layers Style для слоя с текстом и введите значения из рисунков ниже.

Шаг 15

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

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

Шаг 16

Выделите текст, перепишите «ON» на «OFF» и разместите как на картинке ниже. Выберите слой с фигурой, к которой применяли маску и в меню выберите Edit > Transform > Flip Horizontal. После чего откройте Layer Style и просто инвертируйте угол указанный в закладке Drop Shadow.

Шаг 17

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

Работа сделана!

Вот как выглядит финальный вариант:

Автор урока Andrei Marius

Перевод — Дежурка

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

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

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

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

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

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

Подробнее: Photoshop-master.ru

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

Подробнее: www.gimpart.org

Очередной урок в программе Adobe Photoshop, который поможет Вам научиться делать красивые элементы своего Веб-сайта. В данном уроке будем рисовать интересную кнопку для сайта. Приступаем к уроку ФотошопаНе знаю почему, но я решил, что это «мечтательная» кнопка. С этим суждением Вы можете и не согласиться, но надеюсь, тот факт, что это очень красивая кнопочка, Вы оспаривать не будете.

Подробнее: photoshoppro.ru

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

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

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

Подробнее: softsettings.com

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

Подробнее: photoshop-i-ya.ru

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

В этом уроке я покажу вам, как за несколько простых шагов создать кнопку для сайта в Фотошоп. Такая кнопка позволит вам с легкостью приукрасить дизайн вашего сайта. Воспользуйтесь также сеткой, для этого перейдите View > Show > Grid (Просмотр > Показать > Сетка) она поможет нам в позиционировании элементов кнопки.

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

Но, до недавнего времени, как-то, не использовала в них эти привлекающие внимание графические элементы.

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

Подробнее: o-zarabotkeonline.ru

Предлагаю вашему вниманию урок фотошоп по теме «создание дизайна сайта», в котором будем учиться делать симпатичные кнопки для сайта, интернет-магазина, блога и т.д. Делаем заготовку.С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.

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

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

Ряд исследований, путем проб и ошибок, заставил нас составить список 7-ми крутых правил, которым стоит следовать!

Подробнее: www.webdesguru.com

Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом #838383. Выберите инструмент Rounded tool(Прямоугольник со скругленными краями). Установите следующие настройки: Измените фоновый цвет на #111111 . Начертите прямоугольник так, чтобы он вписался в размер холста.

Подробнее: photoshoplesson.ru

Шаг 1. Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb. На новом слое создайте небольшой скругленный прямоугольник.

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

Подробнее: astrapromo.com

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

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

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

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

Подробнее: KtoNaNovenkogo.ruЕще по теме: Zara последние новости

Источник: http://www.chsvu.ru/kak-narisovat-knopki-dlya-sajta/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать простую 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 займет у вас всего несколько минут, а благодаря стилям, которые мы применили, вы можете легко использовать любой цвет текста, значка или фигуры для своих следующая кнопка.

Как создать 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

Структура

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

Качество

Контур: Линейный
Шум: 0
Слой выбивает падающую тень: вкл.

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

Шаг 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: Завершение

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

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

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

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

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

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

7 причин, по которым вам стоит подождать, чтобы поиграть в кросс-версию игр для PS5

Заманчиво играть в игры сразу после их выхода, но стоит ли подождать и сыграть в них на PS5? Вот что мы думаем.

Об авторе

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте новый документ Photoshop (установите для содержимого фона значение Transparent ) и введите текст для новой кнопки.В этом примере используется шрифт 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) и увеличьте непрозрачность Opacity до 38%.

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

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

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

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

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

Выберите исходную форму на панели слоев и тени, нажав кнопку эффектов в нижней части панели слоев. Установите непрозрачность на 15% и Distance и Size на 2px. Увеличьте размер холста на 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%.

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

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

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

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

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

Создание стеклянной кнопки 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 и выберите «Кольцо».
Непрозрачность выделения: 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 пикселей
Контур: полукруглый
Инвертировать: не отмечено

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

Ресурсы и дополнительная информация

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

Хотите создать глянцевую кнопку Web 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, затем закройте диалоговое окно.

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