Рубрика: Photoshop Уроки | Урок прочитали: 399
 (голосов: 0)

Кнопка "скачать"

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

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

Создаём новый документ размерами 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)

           

Похожие файлы и публикации:

Кнопка
Берём инструмент  Rectangular Marquee Tool (прямоугольное выделение), делаем выделение, как на рисунке ниже и заполняем его цветом  #7000a4 на новом слое. Это будет основа для первого карандаша.
Кнопка
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Кнопка
В этом уроке я покажу вам, как создать стильную визитку в Фотошоп. Она будет простой, но в то же время интересной.
Кнопка
Шаг 1. Создайте новый документ размером 1200px * 800px и залейте его черным цветом. Дублируйте фоновый слой один раз (хорошая привычка) и выбрать Gradient Tool (G) и выполнить заливку градиентом как показано на рисунке ниже
Кнопка
Создание реалистичных объектов в Photoshop может оказаться настоящим испытанием. Ключом к успеху является точная детализация мелких деталей: теней, бликов и объема. В этом уроке вы узнаете, как создать реалистичную телефонную клавиатуру, используя слой-фигуры и стили слоя.
Кнопка
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Кнопка
В этом уроке вы узнаете, как создать мультяшный текстовый эффект в стиле граффити.
Кнопка
Финальное изображение
Кнопка
Здравствуйте. Сегодня мы научимся делать анимацию с исчезающим текстом.
Кнопка
В этом уроке я продемонстрирую вам, как нарисовать пирата в Фотошопе.
Кнопка
В этом уроке я покажу вам, как создать интересную сияющую кнопку в Фотошоп.
Кнопка
В этом простом уроке вы узнаете, как создать специальную ленту для веб-сайта.
Кнопка
В этом небольшом фотошоп уроке мы будем создавать разноцветные обои с эффектом трёхмерной радуги. Начнём с создания нового документа в Photoshop - около 1900 × 1200 пикселей, или какой вы захотите. Лучше использовать разрешение по умолчанию, 72 пикс./д. Теперь  применим инструмент прямоугольное выделение  (Rectangular Marquee Tool) для создания одной полосы примерно 1/7 холста и заполним выделенную область цветом  #490d69.
Кнопка
Сегодня мы будем учиться создавать одежду из воды.
Кнопка
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Кнопка
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку для сабвуфера и пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Кнопка
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Кнопка
Стили слоя являются мощным инструментом в Photoshop,  которые позволяют быстро создавать эффекты, которые можно применить к дополнительным объектам.
Кнопка
В этом небольшом и быстром уроке, демонстрируется, как улучшить текстовую надпись, создав  матовый фон, который может улучшить вид Ваших фотографий или проектов.