Уроки Веб и приложения Зинаида Лукьянова 29 августа 2007

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

Сложность урока: Средний


Рисуем в Фотошоп глянцевую кнопку для вашего сайта всего за 10 шагов.

Шаг 1. Создайте новый документ, можете залить его черным цветом или черно-серым градиентом.

Шаг 2. Выберите инструмент - Овальная область и нарисуйте такой же овал как на рисунке:

Шаг 3. Создайте новый слой (Shft + Ctrl + N) и с помощью инструмента - залейте выделение любым цветом.

Шаг 4. Перейдите в меню Layer >> Layer styles >> Blending Options (Слой - Стили слоя - Параметры наложения) и примените следующие стили:

Тень:

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

Тиснение:

Наложение цвета - (цвет используется: #4cd302)
режим - мягкий свет

Наложение градиента (черный #000000 and белый #ffffff)
стиль - линейный

Обводка - снаружи, градиент, разбивка фигуры

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

Шаг 5. Дублируйте слой с эллипсом. Новый слой автоматически примет на себя стили слоя.

Убедитесь, что выбран верхний слой, нажмите Ctrl + T (будем трансформировать слой). Зажмите клавишу Shift (чтобы сохранять пропорции при трансформации) или немного уменьшите фигуру как показано на рисунке:

Нажмите 'Enter' чтобы применить трансформацию.

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

Затем уменьшите прозрачность (opacity) маленького до 60%.

Шаг 7. Создайте новый слой

Возьмите инструмент "Произвольная фигура", из дополнительного списка выберите фигуру "стрелка" (Arrow 6).

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

Шаг 8. Теперь стрелке будем придавать стили.

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

Добавим тень:

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

Цвета используемые в градиенте:
#fcfcfc ... #d1d2d5 ... #9c9ea5 ... #dddee0 )

Обводка - внутри

Цвета используемые в градиенте:
#ecedee ... #ffffff ... #929494 ... #ecedee ... #868687 ... #e0e0e0)

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

Шаг 9. Создайте новый слой и снова возьмите инструмент
Нарисуйте выделение еще меньше на маленьком овале:

Возьмите градиент от белого к прозрачному (white to transparent)

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

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

Здесь использовался шрифт Georgia, размер 33px.

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

Вы справились с заданием! Поздравляем!

До встречи на www.creativo.one!

Источник: www.loreleiweb.com

79 тыс. 27
Печать Жалоба

Комментарии 27

У меня фотошоп русский!!!!!!

Спасибо за урок!

Спасибо за урок

Спасибо за урок

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

со старого аккаунта

Спасибо за урок!

Спасибо=)

Спасибо:) Отличный урок!

Очень легкий урок, спасибо автору! =)

Глянцевая кнопка. Спасибо.

хороший урок))

Спасибо.Красивая кнопка.

Благодарю!

спасибо, хороший урок!

Спасибо за урок, осталась довольна процессом и результатом.

Спасибо за урок. 1- заливка овального выделения черным цветом, 2-заливка белым цветом.

Красивая кнопочка)))

Вышло неплохо) Спасибо)

Замечательный урок. Спасибо!

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адресе, помогающих нам сделать его удобнее для вас. Подробнее