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

Изумрудная кнопка

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

В этом Фотошоп уроке будем делать изумрудную кнопочку для сайта.

1) Создайте новый документ 300×150 px с черным фоном

2) Создайте новый слой. Возьмите инструмент , нарисуйте прямоугольное выделение и залейте его любым цветом, например, белым.

3) Нажмите на кнопочку внизу палитры слоев и выберите там следующие стили:

Тиснение:

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

Цвета градиента: от 0a521d к 2ac553

Вы получите такой результат:

4) Теперь будем рисовать рамку. Создайте новый слой.

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

6) Залейте выделение белым цветом.

7) Ctrl + клик по слою с зеленой кнопкой, появится выделение.

8) Теперь перейдите на слой с белым прямоугольником и нажмите DELETE. Теперь у нас есть рамочка, которой осталось только добавить стили.

9) Добавляем стили:

Внешнее свечение

Тиснение:

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

Цвета градиента: #598e67- #ffffff

Обводка цвета # 5e6270

В результате:

10) Создайте новый слой для блика на кнопке.

11) Выберите иструмент и нарисуйте форму похожую на эту:

12) Клик правой кнопкой по слою в палитре слоев - выберите команду Rasterize Layer (Растрировать слой).

13) Далее в меню Filter > Blur > Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу). Установите такой радиус как вам нравится, здесь 3,0 px

Вот такой появился блик:

14) В заключении, добавьте какой-нибудь текст кнопке.

ГОТОВО!

Легко и быстро!

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

Источник: www.digital-street.com

55 тыс. 181
Печать Жалоба

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

Спасибо автору и переводчику!

Svetlana, спасибо за отзыв!

Спасибо)У меня кнопка с тенью))

Мне понравился урок! Спасибо))

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

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

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

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

Как обычно пытаюсь старые уроки более менее адаптировать под современные стилистики. Решил сделать округленную кнопку, в более привычных цветах и бликах для текущего времени.

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

Большое спасибо!

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

КнопкаПознавательный Урок!!!!

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

кнопка-кнопочка

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

Моя третья работа в фотошопе

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

Спасибо! Здорово

Кнопка. Спасибо!

Спасибо=)

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

Отличный урок! Все очень доступно!)

Все очень доступно! Огромное спасибо!

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

Спасибо за урок. Пригодится.

Еще 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-адрес, помогающих нам сделать его удобнее для вас. Подробнее