Градиент в фотошоп

Панель градиента

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

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

Что такое редактор градиентов?

Редактор градиентов — это диалоговое окно, в котором задаются настройки градиента
Чтобы вызвать Редактора градиентов, нужно щелкнуть мышью по изображению градиента на панели параметров инструмента Gradient (Градиент). В результате на экране появится окно редактора.
Верхнюю часть занимает палитра заданных градиентов, справа — кнопки Загрузить и Сохранить. Градиенты можно сохранять в файле и загружать из файла.
Ниже располагается набор параметров избранного в данный момент градиента. Создания новых градиентов осуществляется только на основе уже существующих. При этом вы должны сначала выбрать градиент, который послужит основой, а потом нажать кнопку New (Новый).
Центральную часть окна редакторы градиентов занимает цветовая полоса, которая отображает цветовую гамму и цветовые переходы в рамках избранного градиента. Маркеры под полосой задают цвет градиента и положение этого цвета на полосе градиета. Между маркерами цвета плавно перетекают с одного в другой. Аналогично задается прозрачность, но маркеры прозрачности расположенные над полосой.
Чтобы изменить цвет, который отвечает какому-нибудь цветовому маркеру, щелкните по нему мышкой, и внизу станут доступные настройки для этого цвета:
Чтобы добавить новый маркер на полосу градиента просто щелкните мышкой на край полосы в том месте, где этот маркер хотите поставить (для создания маркера перехода прозрачности над полосой, а для создания маркера цветового перехода под полосой).
Color (Цвет) — щелкнув по данному полю, вы сможете изменить цвет выбранного маркера.
Position (Позиция) — в этом поле вы можете ввести процентное положение избранной контрольной точки (маркера) на цветовой полосе градиента. Например, если задано значение 50 — маркер будет установлен на середине полосы, 25 — первая четверть от левого края и т.д. Позицию можно задать и простым передвижением маркера.
В такой же способ можно изменять прозрачность для маркеров, которые располагаются сверху. Нужно щелкнуть по маркеру мышкой и внизу задать степень непрозрачности в процентах.
Если вы в процессе работы создали новые красивые градиенты их можно сохранить в отдельном файле. Кнопка Save (Сохранить) предназначена именно для этого.

Выполняем цветокоррекцию

Шаг 1

Перед началом создания эффекта нам нужно выполнить небольшую цветокоррекцию фото. Выбираем смарт-объект и жмем Shift+Ctrl+A, чтобы открыть фильтр Camera Raw. Используем следующие значения:

• Exposure (Экспонир): -1,30
• Clarity (Четкость): -18

Шаг 2

После этого переходим Layer – New Adjustment Layer – Curves (Слой – Новый корректирующий слой – Кривые). В центре кривой ставим точку и тянем ее вниз.

Шаг 3

Переходим Layer – New Adjustment Layer – Levels (Слой – Новый корректирующий слой – Уровни) и вводим следующие значения: 8; 1,00; 251.

Шаг 4

В конце добавляем выцветший эффект на фото. Для этого переходим Layer – New Adjustment Layer – Exposure (Слой – Новый корректирующий слой – Экспозиция) и устанавливаем Offset (Сдвиг) на +0,0100.

Как сделать градиентный фон у картинки

Есть 2 способа для создания градиентного фона у картинки:
переделать под себя готовый шаблон с градиентным фоном или взять только фон и добавлять к нему свои элементы.

1 Способ — шаблон с градиентом

ШАГ 1. В боковом меню нажмите на вкладку «Шаблоны».
ШАГ 2. В поисковой строке введите: градиент или gradient.

Совет. На каком языке напишите на таком языке сначала Canva подберет шаблоны.

ЕСЛИ НУЖНО ПОМЕНЯТЬ ЦВЕТА ГРАДИЕНТА

ШАГ 3. Выделите фон шаблона.После выделения фона появятся квадратики с цветами градиента.
ШАГ 4. Нажмите на нужный квадратик для выбора цвета.
ШАГ 5. Меняйте на цвет среди уже используемых или выберите новый цвет.Совет. Поменять форму градиента нельзя. Но можно выбрать шаблон с нужной формой градиента, а после убрать ненужные элементы. А на этом фоне создать свой дизайн.

2 Способ — градиентный фон

ШАГ 1. В боковом меню нажмите на вкладку «Фон».
ШАГ 2. В поисковой строке введите: градиент или gradient.

КАК ПОМЕНЯТЬ ЦВЕТА ГРАДИЕНТА ФОНА

В этом способе только для некоторых вариантов фонов можно слегка поменять цвет градиента. Разобраться, где цвет меняется можно так:

ШАГ 3. Выделите выбранный фон.
ШАГ 4. Посмотрите на маленький цветной квадратик.

1. Квадратик многоцветный, вот такой ➜ .
   Цвет поменять можно. НО фон станет просто однотонным — НЕ градиентным.
2. Квадратик одноцветный, например, такой ➜ .
   Можно менять только цвет верхнего левого угла в градиенте.

Если вариант вам подходит — нажмите на квадратик.

ШАГ 5. Меняйте на любой цвет или среди уже используемых или выберите новый цвет.

Создаем эффект радужного блика

Шаг 1

Теперь мы можем начать работу с эффектом. Создаем три новых слоя (Alt+Shift+Ctrl+N) и размещаем их под слоем Exposure (Экспозиция).

Шаг 2

Жмем клавишу B, чтобы активировать инструмент кисть и на верхней панели настраиваем ее:

• Size (Размер): 50 пикселей
• Hardness (Жесткость): 45%

На панели образцов выбираем первый цвет и рисуем пятно для радуги на первом пустом слое.

После этого создаем еще пять таких же мазков, используя цвета на панели образцов.

Таким же образом рисуем еще две линии, состоящих из цветов радуги. Каждая линия должна находиться на отдельном слое.

Шаг 6

Выбираем первый слой с радугой и применяем к нему Filter – Blur – Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу) с радиусом 40 пикселей.

Шаг 7

Далее применяем фильтр Gaussian Blur (Размытие по Гауссу) ко второму и третьему слоям, просто нажав комбинацию Alt+Ctrl+F.

С зажатой клавишей Shift выделяем все три слоя с бликами и переключаем их режим наложения на Overlay (Перекрытие).

Под слоями с радугой добавляем новый. Жмем клавишу В, чтобы активировать кисть, и рисуем три белых полосы на бликах.

Жмем комбинацию клавиш Alt+Ctrl+F и применяем к этому слою фильтр Gaussian Blur (Размытие по Гауссу).

Шаг 11

Переключаем режим наложения слоя с белыми полосами на Overlay (Перекрытие) и уменьшаем непрозрачность до 25%.

Отличная работа!

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

Градиент в дизайне

Градиентом в дизайне, да и не только в нем, является постепенный переход цвета из одного оттенка в другой. Это устоявшийся прием, такой же как окантовка или тень, который никуда не пропадет, никогда не станет не модным или не популярным. Пользоваться им нужно с умом. Самые естественные и приятные градиенты — мало контрастные.

Самый простой и доступный способ применить градиент в Фотошопе, это выбрать инструмент Gradient Tool. Кликнуть по рабочей области и не отпуская клавишу мышки, провести курсором по рабочей области.

Точка А является началом градиента, а точка Б окончанием. Диапазон между этими точками и является переходом цвета А в цвет Б. Соответственно чем больше этот диапазон, и чем менее контрастные цвета, тем мягче и плавнее градиент.

Чем уже диапазон, чем контрастнее цвета — тем резче и стремительнее градиент. Вплоть до прямой смены цвета.

Виды градиентов

Не сказать что у Фотошопа очень много разновидностей градиента. Вид — это метод, которым фотошоп создает градиент. Всего их пять.

  Linear gradient (Линейный градиент) — заливает градиент по прямой линии от цвета А к цвету Б.

  Radial gradient (Радиальный градиент) — заливает градиент в виде окружности от цвета А к цвету Б.

  Angle gradient (Конусовидный градиент) — создает вращающийся градиент по 360 оси от цвета А к цвету Б.

  Reflected gradient (Зеркальный градиент) — вариация линейного градиента, с одной лишь разницей. Этот градиент отражает сам себя и возвращается к первоначальному цвету.  В этом случае градиент движется от цвета А, к цвету Б и опять к А.

  Diamond gradient (Ромбовидный градиент) — создает ромбовидные градиент от цвета А к цвету Б.

Далее я постараюсь быстро рассказать об остальных настройках этой панели и поскорее перейти к самому градиенту, то есть диалоговому окну редактора градиента Gradient Editor

Панель настроек градиента

Панель настроек позволяет нам создавать такой градиент, какой нам нужен. И, конечно, содержит ряд полезных фич. Если у вас нет панели настроек откройте Windows > Options По умолчанию все панели настроек для всех инструментов начинаются с менеджера настроек Preset Manager. Подробности работы этого менеджера можно прочитать в статьях Preset manager и Preset Manager Tool.

В целом, эта панель позволяет записывать инструменты с заранее готовыми настройками. Допустим, вам постоянно необходим инструмент градиента от черного к невидимому, с прозрачностью 20%  и режимом наложения Multiply. Вы проставляете настройки инструменту и записываете их в панель Presets Tool. Теперь ваш шаблон всегда под рукой.

Дополнительные настройки градиента в Фотошопе

Интерес представляют следующие три галочки: Reverse, Dither, Transparency. Как обычно о них нет никакой информации нигде. Самые мощные сайты по фотошопу ограничиваются выдержками в пару слов, содранными с официального Хелпа. Интересно, кроме Хронофага их вообще кто-нибудь разбирает?

Reverse — пожалуй самая понятная и очевидная из этих настроек. Она очевидная тем, что мы кликаем по ней, и сразу понимаем что она делает. Reverse переворачивает градиент. Что весьма удобно если градиент нужно развернуть. Вместо того чтобы обращаться к редактору градиента и перестраивать ползунки мы просто ставим галочку Reverse.

Dither — не очевидная настройка. Что включай, что выключай. Все равно не понятно что происходит. Давайте разбираться. Тема галочки Dither заслуживает отдельной статьи, но я постараюсь объяснить этот момент кратко.

Когда мы применяем градиент к какой то области, Фотошоп распределяет промежуточные исходной цвет и конечный. Между ними располагаются промежуточные цвета. В некоторых ситуациях количества этих цветов может не хватать. Допустим мы используем очень слабый градиент, от серого к темно серому, на очень большой рабочей области. Пусть эта область будет, к примеру 1000 пикселей.

Фотошопу нужно как-то распределить градации серого по 1000 пикселям, при этом мы должны получить плавный переход из одной градации в другую. Стоит заметить что ступеней цвета от белого к черному и так не очень много. Их всего 256. То есть идеальный градиент от черного к белому получается на области 256 пикселей. Если же мы хотим применить такой градиент на области в два раза больше, то Фотошопу придется просто дублировать каждую полоску пикселя по два раза. А если градация градиента ещё уже? А область ещё больше? На практике получаются следующие полосы.

Метод Dither применяет к градиенту в Фотошопе иной способ совмещения пикселей. Он как бы перемешивает пиксели между собой россыпью. Результат смешения увидеть не сложно. При включении галочки Dither видно только то, что градиент неожиданно стал гладким. Вот что происходит с пикселями при использовании Dither. Я специально увеличил рабочую область и даже немного усилил контрастность, чтобы вы лучше видели как именно смешиваются пиксели.

Transparency — позволяет градиенту быть полупрозрачным. То есть если эта галочка не включена, вы не сможете сделать полупрозрачный градиент в редакторе градиентов. Сделать вы его конечно сделаете, но работать как полупрозрачный он просто не будет. Нет никакого смысла отключать эту галочку. Всегда держите её включенной.

Окончательное изображение

Шаг 1

Создайте новый документ размером 500 на 500 пикселей со всеми настройками по умолчанию, затем залейте фон черным цветом. Создайте белый текст с использованием шрифта Futurama. Все буквы должны быть маленькими, размер шрифта 100 пунктов, трекинг — 25 пикселей:

Далее вам нужно с помощью инструмента «Текст» выделить каждую букву, чтобы изменить ее цвет. Цвета, использованные мною (слева направо): #800cb6, #074d9d, #0496b7, #00992b, #8c9f09, #a55405 и #9f0929:

Шаг 2

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

Выберите оригинальный растеризированный слой, затем перейдите в Фильтр > Размытие> Размытие в движении. Измените значения для «Угла» — 90, для «Смещение» — 150. Это создаст вертикальный эффект размытия:

Шаг 3

Удерживая нажатой клавишу Ctrl, кликните на пиктограмме слоя копии, чтобы создать выделение:

Выберите инструмент «Прямоугольная область» и нажмите на иконку «Пересечение с выделенной областью» в панели параметров. Нажмите левую кнопку мыши и проведите курсором, чтобы нарисовать прямоугольник, который охватывает верхнюю половину выделенного текста. После того, как вы отпустите кнопку мыши, нижняя половина больше не будет выделена:

Создайте новый слой поверх всех слоев и назовите его «Top«, установите цвет переднего плана на белый, и выберите инструмент «Градиент». В панели параметров выберите тип градиента от цвета переднего плана к прозрачному, и кликните по иконке «Линейный градиент«.

Затем нажмите и удерживайте клавишу Shift, нажмите левую кнопку мыши и перетащите курсор вертикально от нижней точки до самой высокой точки выделения:

Таким образом, вы заполните выделенную область градиентом. Перейдите в Выделение> Отменить, чтобы снять выделение:

Вы можете изменить значение непрозрачности, если хотите задать более тонкую градиентную заливку. У меня значение непрозрачности слоя равняется 30%:

Шаг 4

Теперь, пришло время добавить нижнюю часть текста. Дерзайте, вы можете создать любой белый текст. Я использовал шрифт Century Gothic (заглавные буквы), размер шрифта 18 пунктов, трекинг по-прежнему 25. Вам, возможно, нужно будет использовать другие значения в зависимости от длины вашего текста:

Дважды щелкните на слое текста, чтобы применить стиль «Наложение градиента». Для начала измените значение угла на 0, а затем кликните мышью в поле заливки, чтобы настроить градиент:

Чтобы задать переходы цветов, вам нужно один раз кликнуть ниже градиента для каждого цвета, который вы хотите добавить. И когда вы создаете или выбираете переход цветов, вы получаете доступ к настройкам. Мы будем изменять значения цветов и их расположение, слева направо.

Цвет — Позиция#800bb6 — 0#025abc — 17#0596b7 — 28#00992b — 40#8c9f09 — 52#A55405 — 72#9f0929 — 100

Это позволит залить текст градиентом, который сочетается с цветовыми переходами верхнего (основного) текста:

Мы закончили!

Надеюсь, вам понравился этот супер простой, но очень яркий и интересный эффект: