Создание стильной кнопки в Photoshop

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

Вот предварительный просмотр конечного результата этого урока:

стильная кнопка фотошоп

Этапы создания стильной кнопки в фотошоп:

Шаг 1

Создайте новый документ размером 640 х 480 пикселей и залейте фоновый слой черным цветом.

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

Теперь добавьте новый слой поверх фонового слоя и назовите его «background lighting», возьмите большую мягкую кисть большую, мягкую и круглую кисть темно-серого цвета и нарисуйте одним щелчком как показано ниже:

кнопка для сайта фотошоп

Шаг 2

Выберите инструмент “Прямоугольник со скгугленными углами (клавиша U) с настройками:

2 формы настройки 2 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Нарисуйте прямоугольную форму в центре холста, как показано ниже:

дизайн кнопки

На этой формы слой, примените следующие параметры наложения слоя:

Drop Shadow (тень)

стиль слоя тень

Inner Shadow (Внутренняя тень)

параметры наложения слоя

Gradient Overlay (Наложение градиента)

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

и вы получите следующий эффект:

сияющий эффект

Шаг 3

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

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

кликните здесь

Вы получите следующий эффект:

градиент кнопки

Для слоя “Lighting” примените следующие параметры наложения:

Drop Shadow (Тень) 

3 капли ша 500x350 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Bevel and EmbossТиснение

тиснение

Gradient Overlay (Наложение градиента)

градиент

Вы получите следующее:

дизайн стильной кнопки

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

3 эффект 3 500x368 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Шаг 4

Дубликат «Lighting» слой еще раз и поставить этот слой поверх всех остальных слоев. В этот дублированный слой, зайдите в меню Edit> Transform> Flip Vertical и создайте отражение этого слоя по вертикали один раз.

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

4 сияющий край 500x325 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

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

4 одним щелчком мыши Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

и теперь у Вас есть такой эффект:

4 Эффект 2 499x367 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Шаг 5

Теперь мы можем просто набрать текст на кнопке. Выбор шрифта очень важен в этом случае. Лучше написать на кнопке жирным шрифтом.

подписываем кнопку фотошоп

И в этот текстовый слой, примените следующие параметры наложения слоя:

Drop Shadow (Тень)

стили слоя для кнопки

Bevel and emboss (тиснение)

5 конических 500x350 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Gradient Overlay (Наложение градиента)

5 град 500x350 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

Вы сделаете следующую кнопку фотошоп:

5 эффект1 500x361 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

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

5 Эффект 2 500x367 Дизайн простой, но эффективный, чистая и светлая кнопка для вашего сайта в Photoshop

2 комментария

Add a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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