Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

211 788 чел. 402 130 работ 4 109 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Легкая

Кнопка

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

Скачать веб - градиенты можно тут.

Создаём новый документ размерами 300 х 200 px.
Создаём новый слой и называем "основа"

Берём инструмент "Прямоугольник со скруглёнными краями > Rounded rectangle tool" и рисуем, что-то на подобие:

Теперь зажимаем клавишу Ctrl и кликнем по миниатюре слоя с чёрной кнопкой. Этим самым мы выполним выделение этой будущей кнопочки.

Теперь возьмем инструмент "Овальное выделение > elliptical marquee tool " зажмём клавишу Alt и вот так проведём:

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

У вас должен быть включён инструмент "Овальное выделение >> elliptical marquee tool " вот им кликнем мышью правой (2) по выделению и выбираем пункт меню "Инверсия выделенной области >> select inverse" вот:

Вот как должно выглядеть выделение теперь:

А теперь просто нажимаем Delete и вот что выйдет:

Нажимаем снова Ctrl и кликнем по миниатюре слоя для выделения кнопки. Будем применять градиент. Но для начала один момент, у нас выделится обе части кнопки. Нам нужна только одна  правая большая. Поэтому когда вы выделили обе части, опять берём инструмент выделения (любой)  зажимаем Alt и убираем маленькую часть кнопки. Вот так:

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

Снимаю выделение, и снова выделяю. Зажимая Ctrl, кликаю на миниатюре, затем Alt и убираю большую часть кнопки. Оставляю только маленькую. и тоже заливаю градиентом. вот что у меня в итоге выходит:

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

Теперь нам нужно копировать маленькую часть на новый слой. Нажимаем Ctrl+С это мы скопировали в буфер обмена выделенную часть маленькой кнопочки. Теперь нажимаем  Ctrl+V, автоматически вклеиваем на новый слой. Скрываем новый слой с маленькой частью.

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

Назовём этот слой "мал часть"

идём в параметры наложения слоя "основа" и выбираем вкладку "Обводка > Stroke" я выбрал такое:

Теперь настраиваем градиент:

Теперь в Глянец > satin:

Теперь в Тиснение > bevel and emboss:

Внутренняя тень > inner shadow:

Тень > drop shadow

Вот что у нас получилось:

Теперь делаем видимым слой "мал часть" и тоже идём в параметры наложения:
Обводка > Stroke

Градиент:

Глянец > satin:

Тиснение > bevel and emboss:

Внутренняя тень > inner shadow:

Тень > drop shadow:

Вот что выходит:

Вернёмся на задний план и создадим новый слой "перекладина" он должен быть под всеми  слоями, и рисуем вот такую перекладину инструментом "Прямоугольное выделение > rectangular marquee tool".

Идём в параметры наложения слоя с выделением и вот таким градиентом зальём:

Теперь выходим из параметров наложения и переходим на задний план. И заливаем его более тёмным градиентом:

Осталось лишь сделать надпись и значок стрелку. Переходим на самый верхний слой и берём инструмент "Горизонтальный текст" и пишем значение кнопки. У меня будет кнопка Скачать. Трансформируем текст по размеру кнопки (я от себя пофантазировал и применил стили):

Выбираем инструмент "Произвольная фигура " и выбираем стрелочку, но для начала создаем новый слой:

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

Ну вот и всё. Спасибо, что были со мной, а с вами был Старун Владислав!

Автор: Старун Владислав ( Vladiator)

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

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо автору! Но что-то перемудрили с маленькой кнопкой. Делал всё по описанию, и у меня образовалось две лишних кнопки. Зачем они? Не понятно...

Отлично! На вопрос - ЗАЧЕМ - ответит только автор урока.)))

Svetlana, благодарю за отзыв!))

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

Кнопка для сайта скачать

Хороший урок. Спасибо!

Спасибо за урок. Очень полезно для новичков.

не получилось у меня((((

Отличный урок. Данный помог мне для создание элементи WEB. Th@nk you. :)

Урок написан отлично, все понятно) Спасибо автору!)

Нажимайте, все работает. ))))

Вот такие мои кнопки.Спасибо.

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

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

{{work.views}}

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

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


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

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

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

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

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

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

Комментарий

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


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

{{text}}

Исходник:

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

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

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

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

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

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

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

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

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

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


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

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

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

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules