Применение стиля слоя "Наложение градиента". Градиент цвета что это
Инструмент Gradient
Градиент (от лат. Gradiens — шагающий) — характеристика, показывающая направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой. Градиент создаёт заливку с плавным переходом между двумя или несколькими цветами. Применяется очень часто, поэтому отличное владение этим инструментом является обязательным условием эффективной работы в Фотошоп.Градиент можно применить непосредственно к содержимому слоя или использовать новый слой заливки градиентом (градиент будет находиться на собственном слое и обладать маской слоя, с помощью которой можно маскировать пиксели слоя).Значок Градиент (1) вы найдёте в одной группе с инструментом Заливка (Paint Bucker), клавиша G (или Shift+G для переключения между ними).
Вид градиента задаётся кнопками на панели параметров (2)Линейный градиент (Linear Gradient) – переход осуществляется по прямой линии вдоль определённого направления.
Радиальный градиент (Radial Gradient) – изменение цвета равномерно во все стороны от центральной точки.
Конусовидный градиент (Angle Gradient) – переход цвета по кругу с центром в заданной точке по часовой стрелке.
Зеркальный градиент (Reflected Gradient) – два линейных градиента, которые распространяются от начальной точки в противоположных направлениях.
Ромбовидный градиент (Diamond Gradient) – образующие линии выстраиваются в виде ромба.
В прямоугольном окошке (3) вы можете видеть текущий вариант предлагаемого по умолчанию градиента. Если щёлкнуть кнопкой мыши на стрелке, расположенной рядом с ним, откроется палитра градиентов. Вы можете выбрать нужный вам градиент, щёлкнув на нём кнопкой мыши.
Окно редактирования градиента открывается при щелчке на образце градиентной заливки (3).Раздел Наборы (Presets) содержит готовые градиенты.Имя (Name) – имя градиента. Заказной (Custom) – это градиент с пользовательскими настройками.Градиент (Gradient Type). Есть два варианта: Непрерывный (Solid) и Шумовой (Noise)Сглаживание (Smoothness) – мягкость перехода цветов в градиенте.
Если вы хотите редактировать уже существующий градиент, щёлкните на его образце.Обратите внимание на цветовую полосу в центре окна – это образец редактируемого градиента с переходами цвета и прозрачности. Под полосой и над ней расположились маркеры (4) (квадратики с треугольниками над или под ними). Те, что под полосой отвечают за переходы цвета. Если вы щёлкнете кнопкой мыши на каком-нибудь маркере, треугольник над ним станет цветным, значит, маркер стал активным и готов к редактированию. Что можно сделать? Можно переместить его в любую сторону вдоль цветовой полосы, можно поменять его цвет. Для этого щёлкните на окошке Цвет (Color) (5) и в окне Цветовая палитра (Color Picker) выберите нужный оттенок (6).
Если вы щёлкнете на любом свободном месте между маркерами, появится новый маркер, который вы тоже можете двигать и настраивать. Перемещать маркер можно мышью, или меняя числовое значение в поле Позиция (Location). 0% - левый край цветовой полосы, 100% - правый.
Ползунки прозрачности располагаются над цветовой полосой, они ограничивают прозрачность градиентной заливки. Редактируются они также как и цветовые, только вместо настройки цвета необходимо задать значение прозрачности (opacity), расположение маркеров прозрачности можно указывать в поле Позиция (Location).
Если вам необходим маркер, аналогичный существующему, вы можете его просто скопировать, перетащив при нажатой клавише Alt.
Если же необходимо удалить ненужный цветовой ограничитель, просто передвиньте его за пределы полосы с цветовыми переходами или выделите и нажмите одну из кнопок Удалить (Delete): нижнюю кнопку – для цветовых маркеров, верхнюю – для маркеров прозрачности.
Создадим новый градиент. Откроем диалоговое окно (щёлкнув по окошку 3). Выберите цвет заливки для левого цветового маркера, кликните по правому маркеру (8), установите для него свой цвет, в поле Имя (Name) (10) введите его название и нажмите кнопку Новый (New) (11), ваш градиент появится в окошке Наборы (Presets), нажмите ok.
Перевод: Оксана Гудкова.Ссылка на источник
photoshop-master.ru
Цвета и градиенты или как красить сонику
Сейчас, в Сонике существует 3 способа покраски:
- Обычный цвет (с прозрачностью)
- Линейный градиент
- Круговой градиент
Обычный цвет
цвет задаётся четырьмя байтами:
- [A] - уровень прозрачности. Значение 255(0xFF) это непрозрачность, значение 0 - полная прозрачность
- [R] - уровень красного в цвете
- [G] - уровень зелёного в цвете
- [B] - уровень голубого в цвете
Стандартная (полная) форма записи цвета выглядит так: #[A][R][G][B] Где A,R,G,B - это 16тиричные цифры, всегда занимающие два символа.
Примеры:
Красный, непрозрачный: #FFFF0000 Синий, полупрозрачный: #AA0000FF Чёрный, полупрозрачный: #AA000000 Полностью прозрачный: #00000000 Белый: #FFFFFFFF Чёрный: #FF000000Решётка в начале цвета - дань традиции и обратной совместимости. Можно писать без неё.
В большинстве случаев, прозрачность не используется, поэтому, для краткости можно не писать первые два символа:
Красный: FF0000 Синий: 0000FF Белый: FFFFFF Чёрный: 000000Очень часто, точное значение цвета не важно, поэтому для простоты, можно использовать значение, цифры в которых повторяются, то есть 00, 22,AA ,FF итд... Заметьте, все примеры использованные выше так и записаны. В случае в цвете все значения состоят из двух-одинаковых цифр, цвет можно записывать используя только первые цифры:
Для непрозрачных цветов можно отбросить первый символ:
Красный: F00 Синий: 00F Белый: FFF Чёрный: 000Также существует список заранее опроеделённых для простоты цветов:
Прозрачный "Transparent" #00000000 Чёрный "Black" #FF000000 Серый 1 "LightGray" #FFD3D3D3 Серый 2 "DimGray" #FF696969 Серый 3 "Gray" #FF808080 Серый 4 "DarkGray" #FFA9A9A9 Белый "White" #FFFFFFFF Красный "Red" #FFFF0000 Краснооранжевый "OrangeRed" #FFFF4500 Оранжевый "Orange" #FFFFA500 Желтый "Yellow" #FFFFFF00 Лайм "Lime" #FF00FF00 Зелёный "Green" #FF008000 Светлозелёный "LightSeaGreen" #FF20B2AA Голубой "Aqua" #FF00FFFF Синий "Blue" #FF0000FF Тёмносиний "DarkBlue" #FF00008B Тёмнофиолетовый "DarkViolet" #FF9400D3 Стальной "LightSlateGray" #FF778899 СинеСтальной "DarkSlateBlue" #FF483D8B Фиолетовый "Violet" #FFEE82EEЛинейный градиент
Линейный градиент, это градиент имеющий вектор направление и использующий несколько цветов.
Строка задающая градиент:
- lg:<угол-цвет№1>:<отступ-цвет№2>:<отступ-цвет№3>:<отступ...>
Можно перечислять сколько угодно цветов.
Угол задаётся в радианах.
Примеры:
lg:0-#AAAA:0-#AAAF:1 lg:0-White:0-Black:1 lg:1-White:0-Black:1 lg:0.25-White:0-Orange:0.5-White:1 lg:0.5-0:0-F:1В случае если нужен горизонтальный градиент(слева направо), параметр угол можно опустить.
Тоесть:
lg-#AAAA:0-#AAAA:1 lg-White:0-Black:1 lg-0:0-F:1Радиальный градиент
Радиальный градиент задаётся следующими параметрами:
- [S] Точка начала (точка первого цвета) в процентах. По умолчанию - 0.5:0.5(Центр фигуры)
- Описание внешнего эллипса(окружность последнего цвета). Состоит из:
- [E] центр окружности (аналогично точке начала). По умолчанию - 0.5:0.5
- [R] нормированные радиусы элипса где 1 это радиус равный половине диагонали фигуры. По умолчанию - 0.5:0.5
- Список цветов и их отступов.
Таким образом, полная форма записи:
- cg[S1:S2][E1:E2][R1:R2]- <цвет№1>:<отступ>-<цвет№2>:<отступ>-<цвет№2>:<отступ>...
Упрощения:
- Если R = 0.5:0.5, то его можно не указывать
- Если R = 0.5:0.5 и E = 0.5:0.5, то их можно не указывать
- Если все радиусы и точки = 0.5, то их также можно не указывать.
Примеры:
cg[0.5:0.5][0.5:0.5][0.5:0.75]-White:0-Orange:0.5-White:1 cg[0.5:0.5][0.5:0.5][0.5:0.75]-#AAA:0-0:0.5-Red:1 cg-1:0-F:1 cg[0.5:0.75]-White:0-Orange:0.5-White:1 cg[0.5:0.5][0.5:0.5]-White:0-Orange:0.4-White:0.6-1:0.8-F:1sonica.avmenergo.ru
Применение стиля слоя "Наложение градиента"
Примечание. Об опциях "Заливка" (Fill) и "Непрозрачность" (Opasity), а также об их различиях рассказывается в этом материале.
Режимы наложения (Blend Mode)
Эта опция задаёт режимы наложения данному стилю слоя, работает по такому же принципу, как и в других стилях, по аналогии с обычными режимами наложения слоёв.
В следующем примере показано, как меняется вид текста при разных режимах наложения:
Непрозрачность (Opacity)
Эта опция регулирует прозрачность градиентной заливки относительно слоя, к которому она применяется. Действует по принципу опции "Непрозрачность" в панели слоёв.
Градиент (Gradient)
Здесь вы можете установить цвет в градиента. Это может быть простой двухцветный вариант, либо сложный набор из цветов для специальных эффектов, таких как металл.Галка в чекбоксе "Инверсия" развернёт на 180° направление вашего градиента.
В примере ниже Вы можете увидеть разницу между простым, двухцветным и сложным многоцветным градиентами:
Стиль (Style)
Эта опция выполнена в виде выпадающего списка, содержащего пять различных вариантов:Линейный (Linear): стандартные прямолинейный градиентРадиальный (Radial): градиент, начинающийся от центральной точки и именяющийся равномерно во все стороны по мере удаления от центральной точкиУгловой (Конусовидный, Angle): изменение цвета по кругу с центром в заданной точкеЗеркальный (Reflected): два линейных градиента, один из которых является зеркольным отражением первого и оба они распространяются от начальной точки в противоположных направленияхРомб (Diamond): распространяется как и радиальный градиент, но не в виде круга, а ромба
Галка в чекбоксе "Выровнять по слою" (Align with Layer) выравнивает градиент по слою. к которому он применяется.
Важно! Пока открыто диалоговое окно стилей, Вы можете изменить положение градиента, перетаскивая его курсором мыши на документе.
Угол (Angle)
Эта опция задаёт угол направления градиента. Значение угла можно менять с помощью мыши, изменяя положение луча в круге, также можно вводить числовое значение угла в поле ввода:
В следующем примере вы можете увидеть, как изменение угла влияет на внешний вид стиля. Регулировка угла может быть полезна в случае, если вам нужно, чтобы внешний вид вашего градиента соответствовал другим эффектам освещения в вашем изображении:
Масштаб (Scale)
С помощью этой регулировки Вы можете изменить положение начальной и конечной точки расположения вашего градиента:
На рисунке показаны примеры разных значений масштабов при прочих одинаковых параметрах. Границы градиентов (начальная и конечная точки) отмечены красными скобками:
Сохранение и загрузка настроек стиля слоя по умолчанию
Сохранение и загрузка значений по умолчанию осуществляется точно так же, как и у стиля слоя "Тени".
rugraphics.ru
Как рисовать градиенты с помощью инструмента «Градиент»
В этом уроке мы изучим, как рисовать в программе Photoshop градиенты. Они могут применяться во многих случаях, например, инструмент «Градиент» позволяет рисовать градиенты на слоях, или на выделениях, или на слой-масках, чтобы создать плавные переходы от одного слоя к другому. Мы можем заполнять градиентами тексты и фигуры. Мы можем раскрашивать фотографию с помощью корректирующего слоя «Карта градиента» или добавлять цветовые эффекты с помощью стиля слоя «Наложение градиента» и т.д.! Градиенты – бесценный инструмент программы Photoshop, позволяющий значительно улучшить дизайн или изображение, которые выглядят плоскими.
В этом уроке мы изучим основы рисования градиентов с помощью самого простого (и, возможно, самого полезного) средства – инструмента «Градиент» (Gradient Tool). В дальнейших уроках мы рассмотрим другие способы применения градиентов, но все они работают одинаково, поэтому, изучив основы работы инструмента «Градиент», вы без труда сможете воспользоваться преимуществами других возможностей градиентов в программе Photoshop!
Кроме рисования градиентов, мы также рассмотрим, как выбирать градиенты из палитры градиентов и как загружать дополнительные наборы градиентов. Мы изучим различные стили градиентов и подробно рассмотрим несколько наиболее часто используемых градиентов, в том числе градиент «От основного к фоновому».
После изучения основ рисования градиентов, в следующем уроке мы рассмотрим, как редактировать и сохранять наши собственные градиенты с помощью Редактора градиентов.
В этом уроке я буду работать в версии программы Photoshop CC, однако версия Photoshop CS6 также подойдет. Давайте приступим!
Создание нового документа
Давайте начнем с создания нового документа. Для этого, я перейду в раздел «Файл» (File) в строке меню в верхней части экрана и выберу пункт «Новый» (New):
Выбираем Файл > Новый (File > New)
В результате, откроется диалоговое окно «Новый» (New). В рамках данного урока я задам для документа следующие параметры: Ширина (Width) 1200 пикселей, Высота (Height) 800 пикселей. Особой причины, почему я выбрал именно такие параметры, нет, поэтому если вы хотите, задайте другие значения, которые вам нравятся. Параметр «Разрешение» (Resolution) я оставлю без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch), а параметр «Содержимое заднего фона» (Background Contents) - «Белый» (White). Я нажму ОК, когда закончу вводить данные, чтобы закрыть диалоговое окно, и на экране появится новый документ с белым фоном:
Диалоговое окно «Новый»
Выбор инструмента «Градиент»
Инструмент «Градиент» (Gradient Tool) находится на панели инструментов в левой части экрана. Я выберу инструмент, кликнув по соответствующему значку. Вы также можете выбрать инструмент «Градиент», нажав на клавиатуре клавишу G:
На панели инструментов выбираем инструмент «Градиент»
Палитра градиентов
После выбора инструмента «Градиент», вам нужно выбрать градиент, и это можно сделать несколькими способами: с помощью палитры градиентов или с помощью редактора градиентов. Разница между ними состоит в том, что палитра градиентов позволяет нам выбрать градиент из готовых образцов, в то время как редактор градиентов, как видно из его названия, позволяет нам редактировать и создавать собственные градиенты. В данном уроке мы рассмотрим палитру градиентов, а изучение редактора градиентов отложим до следующего урока.
Если вы хотите выбрать уже готовый градиент из предложенных образцов или градиент, который вы недавно создали и сохранили в качестве образца (и снова, как это делать – мы изучим в другом уроке), кликните по маленькой стрелке в правой части окошка предварительного просмотра градиентов на панели настроек. Убедитесь, что вы кликаете именно по стрелке, а не по самому окошку предварительного просмотра (иначе откроется редактор градиентов, а нам это сейчас не требуется):
Кликаем по стрелке, чтобы открыть палитру градиентов
В результате этого действия откроется палитра градиентов с предлагаемыми образцами градиентов. Чтобы выбрать градиент, кликните по его миниатюре, а затем нажмите клавишу Enter (Win) / Return (Mac) или щелкните по пустому месту на панели настроек для закрытия палитры. Вы также можете дважды щелкнуть по миниатюре образца градиента, чтобы и выбрать градиент, и закрыть палитру за раз.
Палитра градиентов
Загрузка дополнительных градиентов
По умолчанию, нам доступно небольшое количество градиентов, но в программу Photoshop включены и другие наборы, из которых мы можем выбирать градиенты. Все, что нам требуется, - просто загрузить их в палитру. Для этого щёлкните по иконке шестерни в правом верхнем углу палитры:
Щелкаем по иконке шестерни в палитре градиентов
Если вы посмотрите в нижнюю часть появившегося меню, то увидите список дополнительных наборов градиентов, каждый из которых – на определенную тему, например, металлы, пастельные тона, гармонизированные цвета и т.д. Если вы занимаетесь фотографией, то градиенты «Нейтральная плотность» (Neutral Density) и «Фотографическое тонирование» (Photographic Toning) будут особенно полезными для вас:
Другие наборы градиентов
Чтобы загрузить любой из наборов, кликните по его названию. Я выбрал набор «Фотографическое тонирование». Программа Photoshop спросит нас, хотим ли мы заменить текущие градиенты новыми. Если вы щелкните по кнопке «Добавить» (Append), то вместо замены текущих градиентов программа просто добавит новые градиенты к существующим. Как будет видно далее, восстановить исходные градиенты легко, поэтому я кликну по кнопке ОК и заменю существующие градиенты градиентами из набора «Фотографическое тонирование»:
Нажимаем ОК, чтобы заменить исходные градиенты новыми из набора
И теперь в палитре градиентов видно, что вместо исходных градиентов появились градиенты из набора «Фотографическое Тонирование». Чтобы узнать больше о наборе «Фотографическое тонирование» и возможностях его применения, изучите урок «Образцы фотографического тонирования» (http://www.photoshopessentials.com/photo-editing/photographic-toning-cs6/):
Исходные градиенты были заменены на градиенты из нового набора
Восстановление градиентов по умолчанию
Для последовательного изучения темы, мы вернемся к исходным градиентам, заданным по умолчанию. Чтобы их восстановить, еще раз кликните по иконке шестерни в палитре градиентов:
Кликаем по иконке шестерни
Затем выбираем из списка меню команду «Восстановить градиенты» (Reset Gradients):
Выбираем команду «Восстановить градиенты»
Программа Photoshop спросит вас о необходимости замены текущих градиентов градиентами по умолчанию. Нажмите ОК
Заменяем текущие градиенты градиентами по умолчанию
И теперь, мы снова вернулись к исходным градиентам:
Исходные градиенты были восстановлены
Градиент «От основного к фоновому»
Прежде чем мы начнем рисовать градиенты, давайте рассмотрим подробно один градиент – «От основного к фоновому» (Foreground to Background). Это тот градиент, который программа по умолчанию выбирает для нас, но мы также можем выбрать его вручную, если нам понадобится, кликнув по его миниатюре (первый слева в верхнем ряду):
Выбираем градиент «От основного к фоновому»
Как вы уже, возможно, догадались, градиент «От основного к фоновому» использует цвета переднего плана и фона. Вы можете увидеть текущие цвета переднего плана и фона на соответствующих образцах в нижней части панели инструментов. Верхний левый образец отображает цвет переднего плана (Foreground), а правый нижний – цвет фона (Background). По умолчанию, цвет переднего плана – черный, а цвет фона – белый:
Текущие цвета переднего плана (верхний левый образец) и фона (правый нижний образец)
Поскольку градиент от основного цвета к фоновому основывается на цветах переднего плана и фона, его легче всего изменять, и зачастую он оказывается самым полезным. Давайте воспользуемся данным градиентом, чтобы понять принцип рисования градиентов, и заодно рассмотрим, как легко изменять цвета градиента по мере необходимости!
Рисование градиента с помощью инструмента «Градиент»
Рисовать градиент с помощью инструмента «Градиент» (Gradient Tool) так же легко, как кликать по кнопке мышки и перемещать курсор. Просто щелкните в том месте документа, где будет начальная точка градиента, а затем, удерживая кнопку мыши нажатой, протяните курсор до того места, где будет конечная точка градиента. По мере перемещения курсора вы увидите тонкую линию, определяющую направление градиента. Когда вы отпустите кнопку мыши, программа завершит рисовать градиент с помощью выбранных цветов.
Например, я кликну кнопкой мыши в левой части документа и, удерживая ее нажатой, протяну курсор до правой стороны. Обратите внимание, что пока мы видим только тонкую линию между начальной и конечной точками градиента. Чтобы вам было проще нарисовать ровный горизонтальный градиент, нажмите и удержите нажатой клавишу Shift по мере перемещения курсора, в результате чего ограничится угол перемещения курсора. Только помните, что сначала надо отпустить кнопку мыши, а затем клавишу Shift, иначе ничего не получится:
Кликните кнопкой мыши и переместите курсор (удерживая кнопку мыши нажатой) от одной стороны документа до другой
Когда я отпущу кнопку мыши, программа Photoshop нарисует градиент. Так как цвет переднего плана был установлен на черный, а цвет фона – на белый, я нарисовал черно-белый градиент:
Когда вы отпустите кнопку мыши, программа Photoshop нарисует градиент
Замена цветов на обратные (инверсия)
Вы можете поменять цвета местами в своем градиенте, выбрав на панели настроек опцию «Инверсия» (Reverse):
Выбираем опцию «Инверсия» на панели настроек
После выбора опции «Инверсия», если я опять нарисую тот же самый градиент, то на этот раз цвета поменяют местоположение: белый цвет будет слева, а черный цвет – справа. Это удобный параметр, но не забудьте убрать галочку с опции «Инверсия», когда вы нарисуете градиент, иначе все следующие градиенты также будут перевернуты:
Тот же самый градиент, только с измененным расположением цветов
Конечно, не обязательно рисовать градиенты в горизонтальной плоскости. Они могут располагаться в любом выбранном вами направлении. Я нарисую еще один градиент, но этот раз сверху вниз. Обратите внимание, что мне не нужно отменять или удалять мой нарисованный градиент. Программа Photoshop просто заменит текущий градиент новым. Я щелкну кнопкой мыши в верхней части документа и, удерживая кнопку мыши нажатой, протяну курсор до низа. Так же, как и в случае с горизонтальным градиентом, проще нарисовать вертикальный градиент, удерживая нажатой клавишу Shift. Не забудьте отпустить клавишу Shift только после того, как вы отпустите кнопку мыши. И снова, сначала мы видим только тонкий контур:
Нажмите кнопку мыши и протяните вертикальный градиент сверху вниз
Когда я отпущу кнопку мыши, программа Photoshop закончит рисовать градиент, заменив первоначальный горизонтальный градиент вертикальным черно-белым градиентом:
Новый черно-белый вертикальный градиент
Изменение цветов в градиентах по умолчанию
Поскольку градиент по умолчанию использует цвета переднего плана и фона, все, что нам требуется для замены цветов градиента – это выбрать другие цвета переднего плана и фона. Например, я выберу другой цвет переднего плана, нажав на соответствующий образец цвета на панели инструментов (тот, который в текущий момент - черный):
Нажимаем на образец цвета переднего плана
В результате этого действия откроется палитра цветов. Я выберу красный цвет в качестве нового цвета переднего плана, а затем нажму ОК, чтобы закрыть палитру цветов:
Выбираем красный цвет в качестве цвета переднего плана
Далее я изменю цвет фона, кликнув по соответствующему образцу (тот, который в текущий момент заполнен белым цветом):
Нажимаем на образец цвета фона
В результате опять откроется палитра цветов. Я изменю цвет заднего плана с белого на ярко-желтый, а затем нажму ОК, чтобы закрыть палитру цветов:
Выбираем желтый цвет в качестве нового цвета фона
Обратите внимание, что образцы цвета стали отображать новые цвета, которые я выбрал для переднего плана и фона:
Образцы отобразили новые цвета
Окошко предварительного просмотра на панели настроек также стало отображать новые цвета градиента:
Окошко предварительного просмотра на панели настроек также отображает новые цвета градиента:
Я нарисую градиент, на этот раз в диагональ, кликнув в левой нижней части документа и протянув курсор до правой верхней части. И снова, нам нет необходимости отменять или удалять предыдущий градиент, т.к. программа заменит его новым.
Нарисуем новый градиент слева направо по диагонали
Когда я отпущу кнопку мыши, программа закончит рисовать красно-желтый диагональный градиент:
Новый красно-желтый градиент
Восстановление цветов переднего плана и фона
Обратите внимание, что если я открою палитру градиентов на панели настроек, то увижу, что миниатюра градиента от основному цвета к фоновому стала красно-желтой:
Обновленная миниатюра градиента от основного цвета к фоновому в палитре градиентов
Вы можете изменять цвета для этого градиента в любой момент, когда вам потребуется, кликнув по значку образца цвета переднего цвета или/и фона на панели настроек и выбрав другие цвета. Если вам нужно быстро вернуть цвета переднего плана и фона к настройкам по умолчанию и сделать цвет переднего плана черным, а цвет фона - белым, просто нажмите клавишу D (от англ. Defaults) на вашей клавиатуре. Таким образом, образцы на панели инструментов опять станут заполнены черным и белым цветом:
Образцы цвета переднего плана и фона вновь были заменены на образцы по умолчанию
В окошке предварительного просмотра градиентов на панели настроек и в палитре градиентов градиент от основного цвета к фоновому опять стал черно-белым:
Все вернулось к первоначальному варианту
Рисование градиента на отдельном слое
Если мы посмотрим на панель слоев, то увидим, что до сих пор я рисовал градиенты прямо на слое заднего фона (Background):
На панели слоев видно, что градиент нарисован на слое заднего фона
Возможно, для нашего урока и подошло бы рисование градиентов на слое заднего фона, но, чтобы лучше изучить программу Photoshop, давайте воспользуемся преимуществом слоев и поместим каждый объект на отдельном слое. Для этого я сначала уберу текущий градиент, перейдя в раздел меню «Редактирование» (Edit) в верхней части экрана и выбрав пункт «Выполнить заливку» (Fill):
Выбираем «Редактирование» > «Выполнить заливку» (Edit > Fill)
Когда откроется диалоговое окно «Заполнить» (Fill), я установлю для опции «Содержимое» (Contents) значение «Белый» (White) и нажму ОК. В результате задний фон заполнится белым цветом:
Диалоговое окно «Заполнить»
Далее, я добавлю новый слой для моего градиента, нажав и удержав клавишу Alt (Win) / Option (Mac) и кликнув по значку «Создать новый слой» в нижней части панели слоев:
При нажатой клавише Alt (Win) / Option (Mac) кликаем по значку «Создать новый слой»
Удержание нажатой клавиши Alt (Win) / Option (Mac) позволяет перед добавлением слоя открыть диалоговое окно «Новый слой» (New Layer), где мы можем ввести имя слоя. Я назову слой «Градиент», а затем нажму ОК:
Диалоговое окно «Новый слой»
Программа добавит новый пустой слой под названием «Градиент» выше слоя заднего фона. Теперь я могу нарисовать мой градиент на этом новом слое и отделить его от всего остального (под «всем остальным» в данном случае понимается задний фон, но, тем не менее, рисовать на отдельных слоях - хорошая рабочая привычка):
Теперь у меня есть отдельный слой для градиента
Область перехода
В процессе рисования градиентов важно не только направление перемещения курсора, но и расстояние между начальной и конечной точками градиента.
Причина состоит в том, что в действительности при применении инструмента «Градиент» вы определяете не только направление градиента, но и область перехода между цветами. Расстояние, на которое вы перемещаете курсор от начальной до конечной точки, определяет величину области перехода между цветами. Более длинные расстояния дают нам более плавные переходы, в то время как короткие дистанции создают резкие и внезапные переходы.
Для наглядного примера, я воспользуюсь градиентом от основного цвета к фоновому в черно-белом варианте. Сначала я нарисую градиент слева направо, начав рядом с левым краем документа и закончив около правового края. Область между начальной и конечной точками градиента является областью перехода между двумя цветами (в моем случае, между черным и белым):
Рисуем градиент с большой областью перехода
Я отпущу кнопку мыши, и программа закончит рисовать градиент. Поскольку между начальной и конечной точками градиента было много места, переход между черным цветом слева и белым цветом справа получился постепенным и плавным:
Градиент с последовательным переходом между цветами
Я отменю этот градиент для простоты восприятия, перейдя в раздел «Редактирование» (Edit) в верхней части экрана и выбрав пункт «Отменить градиент» (Undo Gradient). Я также мог бы нажать на клавиатуре сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac):
Выбираем «Редактирование» > «Отменить градиент» (Edit > Undo Gradient).
На этот раз я нарисую градиент в том же направлении (слева направо), но с гораздо меньшим расстоянием между начальной и конечной точками:
Рисуем градиент с маленькой областью перехода
Когда я отпущу кнопку мыши, то можно увидеть, что, несмотря на то, что градиент был нарисован в том же направлении что и предыдущий, переход между черным и белым цветами получился резким и внезапным. Таким образом, при рисовании градиента расстояние между начальной и конечной точками так же важно, как направление градиента:
Похожий градиент, но с меньшей областью перехода
Прежде чем мы продолжим, давайте взглянем на панель слоев. Поскольку я ранее добавил новый слой, мой градиент стал нарисован на отдельном слое “Градиент», а не на слое заднего фона. И снова, в данном уроке нам это не важно, но если вы приучите себя рисовать каждый объект на отдельном слое, вам будет легче работать в программе Photoshop:
Градиент теперь расположен на отдельном слое, выше слоя заднего фона
Градиент «От основного к прозрачному»
До сих пор мы с вами, главным образом, изучали градиент по умолчанию – «От основного к фоновому» (Foreground to Background), однако существует еще один часто используемый градиент – «От основного к прозрачному» (Foreground to Transparent). Я предлагаю также его рассмотреть, потому что принцип работы данного градиента немного отличается от остальных. Я выберу градиент из палитры градиентов, дважды кликнув по его миниатюре, расположенной рядом с миниатюрой градиента от основного цвета к фоновому:
Выбираем градиент «От основного к прозрачному»
Градиент от основного цвета к прозрачному похож на градиент от основного цвета к фоновому тем, что он использует текущий цвет переднего плана, и вы легко можете изменить цвет градиента, выбрав другой цвет переднего плана. Отличает же данный градиент то, что у него нет второго цвета. Вместо этого происходит переход от единственного цвета к прозрачному.
Я отменю мой текущий градиент, перейдя в раздел «Редактирование» (Edit) и выбрав пункт «Отменить градиент» (Undo Gradient). Затем я выберу цвет, кликнув по образцу цвета переднего плана на панели инструментов, который в данный момент заполнен черным цветом:
Кликаем по образцу цвета переднего плана
Когда откроется палитра цветов, я выберу фиолетовый цвет и нажму ОК:
Выбираем фиолетовый цвет в качестве нового цвета переднего плана
Выбрав фиолетовый цвет в качестве нового цвета переднего плана, в окошке предварительного просмотра градиентов на панели настроек я смогу увидеть, что буду рисовать градиент от фиолетового цвета к прозрачному (узор шахматной доски отвечает в программе Photoshop за изображение прозрачности):
Градиент от фиолетового цвета к прозрачному
Я нарисую вертикальный градиент от верхнего края документа до центра:
Рисуем вертикальный градиент от основного цвета к прозрачному в верхней половине документа
Когда я отпущу кнопку мыши, нам может показаться, что мы нарисовали градиент от фиолетового цвета к белому. Однако белый цвет – это не часть градиента, а цвет заднего белого фона, расположенного под градиентом:
Фиолетовый цвет относится к градиенту, а белый – к заднему фону под ним
Для подтверждения своих слов, я временно отключу видимость слоя с задним фоном, кликнув по значку видимости слоев (в виде глазного яблока) на панели слоев:
Отключаем видимость слоя с задним фоном
В результате этого действия белый задний фон в документе перестанет быть видимым, и появится сам градиент. Теперь отчетливо видно, что это градиент от фиолетового цвета к прозрачному. И снова, с помощью узора шахматной доски программа Photoshop показывает прозрачность:
Действительный градиент от фиолетового цвета к прозрачному
Другое отличие градиента от основного цвета к прозрачному состоит в том, что программа не удаляет предыдущий градиент «От основного к прозрачному», если мы поверх предыдущего градиента рисуем новый. Вместо этого, она просто добавляет новый градиент к исходному. Я нарисую второй градиент от основного цвета к прозрачному, на этот раз от нижнего края документа до центра:
Добавляем второй градиент «От основного к прозрачному»
Я отпущу кнопку мыши, и программа Photoshop вместо перезаписи градиентов добавит второй градиент к первому. Если бы я нарисовал третий или четвертый градиенты (от левого и от правого края, например), программа бы также добавила эти градиенты к существующим:
Оба градиента смешались вместе
Я включу обратно видимость слоя с задним фоном, повторно кликнув по значку видимости слоев:
Включаем видимость слоя с задним фоном
И теперь нам снова виден градиент от фиолетового цвета к белому (и опять к фиолетовому), хотя мы знаем, что, в действительности, белый цвет – цвет заднего фона, проглядывающий сквозь прозрачный слой:
Тот же самый градиент с включенным слоем заднего фона
Опция «Прозрачность»
С помощью градиента от основного цвета к прозрачному можно затемнять края фотографии или небо на изображении, чтобы подчеркнуть детали (это мы рассмотрим в другом уроке). Но чтобы прозрачная часть градиента была нарисована, вы должны быть уверены, что опция «Прозрачность» (Transparency) на панели настроек выбрана:
Убедитесь, что опция «прозрачность» включена, когда вы рисуете градиент с прозрачной частью
Если во время рисования градиента опция прозрачность выключена, то, в конце концов, вы просто заполните слой или выделение выбранным цветом переднего плана
Без выбранной опции «Прозрачность» программа не сможет нарисовать прозрачную часть градиента
Градиент «Черный, белый»
Мы не будем рассматривать каждый градиент, который предлагает нам программа Photoshop (поскольку вы сами с легкостью сможете сделать), однако если вам нужно нарисовать черно-белый градиент, а ваши цвета переднего плана и фона отличаются от черного и белого, просто выберите градиент «Черный, Белый» (Black, White) из палитры градиентов (третий слева в верхнем ряду). В отличие от градиента от основного цвета к фоновому, градиент «Черный, Белый» всегда использует черный и белый цвет, независимо от того, какие текущие цвета переднего плана и фона:
Миниатюра градиента «Черный, Белый»
Стили градиентов
До сих пор мы с вами изучали примеры градиентов, в которых были переходы цвета от начальной точки к конечной по прямой линии. Такой тип градиента называется линейным, и он, в действительности, является одним из пяти различных стилей градиентов, которые можно выбрать в программе Photoshop.
Если мы посмотрим вправо от окошка предварительного просмотра градиентов на панели настроек, то увидим пять значков, обозначающих различные стили градиентов (слева направо): Линейный (Linear), Радиальный (Radial), Конусовидный (Angle), Зеркальный (Reflected) и Ромбовидный (Diamond)
Линейный, Радиальный, Конусовидный, Зеркальный и Ромбовидный градиенты
Давайте изучим, на что способен каждый из этих стилей градиентов. Я нажму несколько раз сочетание клавиш Ctrl+Alt+Z (Win) / Command+Option+Z, чтобы отменить предыдущие шаги и вернуться к пустому документу, заполненному белым цветом. Далее я переключусь обратно на градиент «От основного к фоновому» (Foreground to Background), выбрав его в палитре градиентов:
Выбираем градиент «От основного к фоновому»
Я нажму клавишу D, чтобы вернуть настройки цветов переднего плана и фона по умолчанию: на черный и белый. Далее, чтобы было интереснее работать, я изменю цвет фона с белого на светло-голубой:
Цвета переднего плана и фона (последний вариант)
Линейный градиент
По умолчанию, в программе выбран стиль градиента «Линейный» (Linear). Вы также можете выбрать его вручную, кликнув по первому слева значку:
Выбираем стиль градиента «Линейный»
Мы с вами уже рассмотрели несколько примеров линейного стиля градиента, который дает возможность рисовать градиент по прямой линии от начальной до конечной точки в направлении перемещения курсора. Опция «Инверсия» (Reverse) позволяет изменять порядок цветов на обратный:
Пример обычного линейного градиента
Радиальный градиент
Радиальный стиль (второй слева значок) дает возможность рисовать круговой градиент по направлению от начальной точки:
Выбираем стиль градиента «Радиальный»
Я удалю нарисованный линейный градиент, нажав сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac). Для того чтобы нарисовать радиальный (Radial) градиент, я кликну в центре документа, чтобы определить начальную точку, а затем начну перемещать курсор по направлению к внешнему краю:
Рисуем радиальный градиент от центра документа
Я отпущу кнопку мыши, и перед нами появится радиальный градиент. Он начинается с цвета переднего плана (черного) в начальной точке в центре документа и по мере приближения к краю переходит в цвет фона (голубой):
Радиальный градиент
Если бы я выбрал опцию «Инверсия» (Reverse) на панели настроек, то цвета поменялись бы: в центре был бы голубой цвет с постепенным переходом к черному:
Тот же самый радиальный градиент с обратным порядком цветов
Конусовидный градиент
Конусовидный стиль (средний значок) более интересен для нас (хотя, возможно, не так полезен):
Выбираем Конусовидный стиль градиента
Так же как и радиальный стиль, конусовидный (Angle) стиль использует начальную точку в качестве центра градиента. Но вместо того чтобы совершать равномерный переход во всех направлениях, он начинает закручиваться вокруг начальной точки против часовой стрелки. Я снова нажму сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac) для отмены последнего градиента. Далее я начну рисовать конусовидный градиент таким же способом, как и радиальный: кликнув кнопкой мыши в центре документа для определения начальной точки и переместив курсор по направлению к краю:
Рисуем конусовидный градиент от центра
На скриншоте ниже представлен конусовидный градиент после того, как отпущу кнопку мыши. Как и во всех стилях градиентов, выбор опции «Инверсия» (Reverse) приведет к замене местами используемых цветов:
Конусовидный стиль градиента позволяет закрутить градиент вокруг начальной точки против часовой стрелки
Зеркальный градиент
Зеркальный (Reflected) стиль (четвертый значок слева) градиента очень похож на стандартный линейный стиль за исключением того, что он зеркально отражает цвета с двух сторон от начальной точки:
Выбираем зеркальный стиль градиента
Итак, я кликну в центре документа для определения начальной точки и затем перемещу курсор вверх:
Рисуем зеркальный градиент
Когда я отпущу кнопку мыши, программа нарисует обычный линейный градиент в верхней половине документа от начальной до конечной точки, но затем зеркально отразит его в нижней половине документа:
Зеркальный градиент
А вот как будет выглядеть зеркальный градиент, если мы поменяем местами цвета:
photoshop-master.ru
Градиенты. Новые цвета для web
Цвета являются одним из самых важных и мощным элементом дизайна. Поскольку дизайн - это эволюция, наше восприятие цветов (и способов их использования) постоянно меняется.
Я заметил, что в дизайне есть новая и свежая тенденция, которая включает заметное использование градиентов в пользовательском интерфейсе, брендинг, иллюстрации, типографику и многое другое. Похоже, нам стало скучно всех существующих цветов в мире, поэтому мы начали создавать новые способы их использования.
Градиент создается с использованием двух или более разных цветов для отображения одного элемента, постепенно стирая между ними границы. Градиенты позволяют дизайнерам создавать нечто, похожее на новый цвет. Тон, которого раньше не было, нечто уникальное, современное и освежающее.
Новый способ использования цветов
Сейчас плоские цвета старомодны. Хотя об этом может сказать только время, потому что-то новое в наши дни считается «трендом». Мы все знаем, что большинство тенденций меняются с годами, и многие из них сами становятся старомодными. И тогда Instagram может снова изменить свой логотип.
Почему использовать градиенты стало модно?
1. Градиенты запоминаются
Градиенты - это то, чего мы не привыкли видеть, наши глаза воспринимают их как нечто новое и запоминающееся. Это именно то, что нужно для дизайна, чтобы он оставил положительный след в памяти пользователя.
Наш мозг ограничен определенной структурой восприятия для описание цветов. Поэтому, если вдруг мы увидим то, что мы не можем назвать «синим» или «фиолетовым», мы этот цвет обязательно запомним. Это работает по тому же принципу, когда мы посещаем новые места или пробуем, что-то новое на вкус.
2. Градиенты уникальны
Давайте будем честными, в мире недостаточно разных цветов, чтобы бренды создавали свою уникальную индивидуальность. Я думаю, что есть около 20 общих цветов, которые мы можем назвать и распознать, а с другой стороны, сотни тысяч брендов пытаются создать свою собственную уникальную индивидуальность. Вы не можете выбрать синий, потому что Facebook уже это сделал, вы попробуйте голубой цвет, и вы понимаете, что Twitter взял его. Недостаточно цветов для всех.
Вот где градиенты меняют игру. Дизайнеры могут размывать несколько разных цветов, и использование градиентов фактически добавляет множество дополнительных опций к количеству доступных «тонов». Количество брендов, которые используют «Blurple» (градиент между синим и фиолетовым), действительно мало, поэтому дает брендам возможность получить уникальную цветовую идентичность.
abraxabra.ru
Как работать с Редактором градиентов
В прошлом уроке мы научились рисовать градиенты с помощью инструмента «Градиент». Также мы рассмотрели, как использовать палитру градиентов и выбирать необходимый градиент из множества предложенных градиентов. Однако независимо от того, как много градиентов включено в программу Photoshop, полезнее (и всегда веселее) уметь создавать собственный градиент!
В этом уроке мы научимся создавать, редактировать и сохранять наши собственные градиенты с помощью Редактора градиентов. Далее вы увидите, что Редактор градиентов позволяет не только выбирать необходимый градиент из готовых образцов (как и Палитра градиентов), но и редактировать градиенты, выбирая другие цвета, добавляя новые, изменяя их порядок и удаляя лишние цвета. Мы можем добавлять градиенту прозрачность и даже регулировать переход цветов! И, наконец, мы можем сохранять наш градиент как готовый образец, что позволит нам быстро выбирать его в дальнейшей работе в случае необходимости!
В прошлом уроке мы рассмотрели основы рисования градиентов, поэтому сегодняшний урок мы посвятим изучению Редактора градиентов. Если вы еще не знаете, как использовать инструмент «Градиент» (Gradient Tool) или как рисовать градиенты, я советую вам изучить прошлый урок по рисованию градиентов. В данном уроке я буду работать в версии программы Photoshop CC, но и версия Photoshop CS6 также подойдет. Итак, приступим!
Создаем новый документ
Давайте начнем урок с создания нового документа. Для этого, я перейду в раздел «Файл» (File) в строке меню в верхней части экрана и выберу пункт «Новый» (New):
Выбираем Файл > Новый (File > New)
В результате, откроется диалоговое окно «Новый» (New). Поскольку мы будем изучать сам Редактор градиентов, размер файла для нас не важен. Но если вы работаете вместе со мной, давайте создадим файл того же размера, что и в прошлый раз: Ширина (Width) 1200 пикселей, Высота (Height) 800 пикселей. Параметр «Разрешение» (Resolution) я оставлю без изменения по умолчанию – 72 пикселя на дюйм (pixels/inch), а параметр «Содержимое заднего фона» (Background Contents) - «Белый» (White). Я нажму ОК, когда закончу вводить данные, чтобы закрыть диалоговое окно, и на экране появится новый документ с белым фоном:
Создаем новый файл размером 1200х800 px
Выбираем инструмент «Градиент»
После создания нового документа я выберу инструмент «Градиент» (Gradient Tool) на панели инструментов:
Выбираем инструмент «Градиент»
Открываем Редактор градиентов
Как мы с вами узнали из прошлого урока, после активации инструмента «Градиент» существует два способа выбрать градиент. Мы можем выбрать его из образцов готовых градиентов в Палитре градиентов или создать и отредактировать собственный градиент при помощи Редактора градиентов. Для того чтобы открыть Редактор градиентов, кликните прямо по окошку предварительного просмотра градиентов на панели настроек. Если вы кликните по маленькой стрелке с правой стороны окошка просмотра, то откроете Палитру градиентов, которую мы изучали ранее. Однако на этот раз нам нужен Редактор градиентов, поэтому кликните по самому окошку:
Кликаем по окошку предварительного просмотра градиентов на панели настроек
В результате этого действия откроется Редактор градиентов (Gradient Editor). Вначале он может выглядеть для вас несколько пугающе, но вскоре мы убедимся, что в действительности в нем работать очень легко:
Редактор градиентов
Область готовых образцов градиентов
В процессе использования Редактора градиентов можно выделить два этапа. В действительности, мы не создаем градиент с нуля. Вместо этого, мы сначала выбираем образец готового градиента, который будет служить для нас отправной точкой. Затем мы редактируем цвета образца, чтобы создать собственный градиент.
Редактор градиентов разделен на две основных секции: вверху расположена область готовых образцов градиентов (Наборы), внизу – секция редактирования градиентов. Область готовых образцов работает в Редакторе градиентов так же, как и в Палитре градиентов, отображая миниатюры всех готовых образцов градиентов. Для того чтобы выбрать нужный градиент, просто кликните по его миниатюре. Название градиента, по которому вы кликнули, появится под областью готовых образцов:
Кликаем по миниатюре, чтобы выбрать нужный градиент из готовых образцов.
Первоначально, нам предоставлено ограниченное количество готовых образцов градиентов, однако в программу Photoshop включены и другие наборы образцов, которые мы можем загрузить в Редактор градиентов, так же как и в палитру градиентов. Для того чтобы увидеть перечень дополнительных наборов, кликните по маленькой иконке шестерни:
Кликаем по иконке шестерни
В конце списка появившегося на экране меню вы увидите другие наборы градиентов, каждый из которых имеет определенную тематику, например, «Гармонизированные цвета» (Color Harmonies), «Металлик» (Metals), «Пастель» (Pastels) и т.д. Для выбора какого-либо набора кликните по его названию. В моем случае, я выберу набор Гармонизированные цвета 1 (Color Harmonies 1):
Выбираем набор «Гармонизированные цвета 1»
Программа спросит вас, необходимо ли заменить текущие градиенты новыми из набора. Если вы нажмете кнопку «Добавить» (Append), вместо замены градиентов программа добавит новые градиенты к уже существующим. Мне нравится, когда на экране у меня порядок и нет нагромождения иконок, поэтому я нажму ОК, чтобы заменить градиенты, тем более восстановить исходные будет очень просто (как мы с вами узнаем позже):
Нажимаем ОК, чтобы заменить текущие градиенты по умолчанию новыми из набора
И теперь нам видно, что вместо исходных градиентов появились новые градиенты из набора:
Градиенты из набора «Гармонизированные цвета 1»
Для восстановления исходных градиентов по умолчанию, опять кликните по иконке шестерни:
Кликаем по иконке шестерни
Затем из появившегося меню выбираем команду «Восстановить градиенты» (Reset Gradients):
Выбираем команду «Восстановить градиенты»
Программа Photoshop спросит вас о необходимости замены текущих градиентов градиентами по умолчанию. Нажмите ОК:
Нажимаем ОК, чтобы восстановить градиенты по умолчанию
И теперь мы снова можем видеть исходные градиенты:
Исходные градиенты были восстановлены
Область редактирования
Если назначение Редактора градиентов в том, чтобы создавать собственные градиенты, то зачем же тогда ему множество готовых образцов градиентов, которые мы с таким же успехом можем выбрать и в Палитре градиентов? Как я уже упоминал ранее, в действительности, мы не создаем градиенты с нуля, вместо этого мы выбираем один из готовых образцов градиентов и затем начинаем редактировать его цвета.
Причина, по которой нам предоставляется доступ к образцам градиентов в Редакторе, заключается в том, что из готовых образцов мы можем выбрать похожий на тот, который нам требуется создать. Таким образом, понадобится затратить меньше усилий. Например, если мне нужно создать градиент с переходом между тремя цветами, то я могу выбрать готовый образец, который уже включает в себя три цвета. Возможно, цвета будут не те, но, по крайней мере, их уже будет три.
Так же, если мы будем создавать градиент с переходом от сплошного цвета к прозрачному, мы можем сэкономить себе время, выбрав для начала готовый образец градиента с переходом к прозрачному цвету.
Или если градиент будет использовать, например, пастельные тона, то, возможно, будет проще сначала загрузить набор «Пастель» (Pastels) и выбрать оттуда готовый образец с подходящими цветами.
По крайней мере, это один из вариантов. Однако на самом деле создавать любой градиент с помощью Редактора градиентов так легко, что часто вы будете для начала просто выбирать один из основных градиентов «Черный, белый» (Black, White). Я выберу его, кликнув по соответствующей миниатюре (третья слева в верхнем ряду):
Выбираем градиент «Черный, белый»
Все параметры и средства редактирования градиентов расположены в нижней части Редактора градиентов. Как только вы выбрали нужный образец градиента, он появится у вас на шкале градиента, которая является для нас рабочей областью. Это то место, где мы будем «строить» наш градиент. В моем случае, поскольку я выбрал черно-белый градиент, шкала стала отражать переход от черного цвета слева до белого цвета справа:
Выбранный градиент появился на шкале предварительного просмотра градиента
Тип градиента
Если вместо градиента с плавным переходом, вы увидите на шкале градиента ряд разноцветных линий, то это значит, что параметр «Тип градиента» (Gradient Type) установлен не на «Непрерывный» (Solid), а на «Шум» (Noise). Мы рассмотрим такие градиенты в отдельном уроке, поскольку они не только выглядят по-другому, но и этапы их создания также другие. В общем говоря, всякий раз, как вы захотите создать обычный градиент с плавным переходом между двумя цветами, вам нужно установить тип градиента «Непрерывный» (Solid).
Убедитесь, что в качестве типа градиента выбран «Непрерывный»
Замена цветов в градиенте
Если вы посмотрите под шкалу градиента, то увидите контрольные точки цвета (образцы цвета в виде маленьких квадратиков со стрелками, указывающими на градиент над ними). На каждый цвет в градиенте приходится по одной точке цвета. Поскольку я выбрал черно-белый градиент, то у него имеется две точки цвета: одна, заполненная черным цветом, слева и другая, заполненная белым цветом, справа. Эти точки цвета указывают программе Photoshop на два важных момента – какие цвета использовать в градиенте и как их разместить:
Контрольные точки цвета под каждым из краев градиента
Для того чтобы изменить текущий цвет, сначала кликните по соответствующей контрольной точке для ее выбора. Далее, кликните по образцу цвета в секции «Контрольные точки» (Stops) в нижней части Редактора градиентов, чтобы выбрать другой цвет. Например, допустим, я хочу изменить цвет в моем градиенте с черного на красный. Для этого, я кликну по черной точке цвета:
Щелкаем по точке того цвета, который вы хотите изменить
Выбрав точку, я кликну по образцу цвета
Щелкаем по образцу, чтобы изменить цвет
В результате, откроется Палитра цветов (Color Picker). Я выберу темно-красный в качестве нового цвета, а затем нажму ОК для выхода из Палитры:
Выбираем в Палитре цветов красный цвет
После этого, мой исходный черно-белый градиент превратится в красно-белый градиент:
Черный цвет в моем градиенте изменился на красный
То же самое я проделаю и с другим цветом, изменив его с белого на желтый. Но на этот раз, я воспользуюсь более быстрым способом замены цвета. Вместо того чтобы кликнуть по точке и выбрать ее, а потом щелкнуть по образцу цвета, все, что мне потребуется – это дважды кликнуть кнопкой мыши по точке:
Дважды кликаем кнопкой мыши по белой контрольной точке цвета
В результате двойного щелчка кнопки мыши произойдет мгновенное открытие Палитры цветов. Я выберу желтый цвет и затем нажму ОК, чтобы закрыть Палитру:
Изменяем белый цвет в градиенте на желтый
Таким образом, после нескольких кликов, наш исходный черно-белый градиент превратился в новый красно-желтый градиент:
Новые цвета градиента
Настройка средней точки цвета
Если вы посмотрите на шкалу между двумя контрольными точками цвета, то увидите маленький значок в форме ромба. Это значок средней точки цвета, которая отмечает середину перехода между цветами (то место, где два цвета смешиваются между собой). Если вы не видите значок средней точки, кликните по любой из контрольных точек цвета, и он появится.
Значок средней точки цвета
Мы можем изменить положение средней точки, переместив значок поближе к одному или другому цвету. Например, я перемещу среднюю точку по направлению к левому краю, чтобы она стала ближе к красной точке цвета. Обратите внимание, что тогда произойдет с градиентом. Сместив среднюю точку влево, я укоротил область перехода между красной точкой цвета и средней точкой и удлинил переход между средней точкой и желтой точкой цвета:
Настраиваем область перехода с помощью перемещения средней точки цвета
Параметр «Позиция»
По мере перемещения иконки средней точки цвета параметр «Позиция» (Location) под шкалой градиента меняется, отражая в процентах точное место, где средняя точка расположена между двумя цветами. По умолчанию, значение местоположения средней точки равно 50% (точно посередине между цветами), но после перемещения средней точки влево значение местоположения изменяется до 25%. Другими словами, переход между цветом градиента слева и средней точкой занимает теперь четвертую часть от всей длины градиента, а переход между средней точкой и цветом градиента справа - три четверти от всей длины:
Текущая позиция средней точки цвета
Мы с вами уже рассмотрели, как можно изменить позицию средней точки цвета при помощи перемещения ее значка, однако также мы можем изменить ее месторасположение, введя конкретные значения в окошко ввода данных параметра «Позиция» (Location). Если я захочу, например, переместить среднюю точку с отметки «1/4» до отметки «3/4», то я смогу сделать это, изменив значение параметра «Позиция» с 25% до 75%:
Вручную вводим новое значение параметра «Позиция»
И теперь нам видно, что средняя точка переместилась на отметку 75%, одновременно удлинив расстояние между красной точкой цвета и средней точкой и сократив расстояние между средней точкой и желтой точкой цвета:
Новая позиция средней точки цвета
Я верну среднюю точку обратно на ее исходную позицию по молчанию, установив значение параметра «Позиция» (Location) на 50%:
Средняя точка вернулась обратно на середину градиента
Добавление к градиенту цветов
Для того чтобы добавить к градиенту новых цветов, все, что нужно – кликнуть под градиентом по тому месту, где следует добавить новый цвет. Программа Photoshop добавит на данную позицию новую контрольную точку цвета. Например, для добавления третьего цвета между двумя исходными цветами, я кликну в нужном месте под градиентом (обратите внимание, что я кликаю под значком средней точки, а не по нему):
Кликаем кнопкой мыши в соответствующем месте, чтобы добавить третий цвет
В результате, в этом месте появится новая контрольная точка цвета. Для того чтобы изменить ее цвет, дважды кликните по ней кнопкой мыши:
Дважды кликаем кнопкой мыши по новому образцу цвета
Затем в появившейся Палитре цветов выберите нужный цвет. В моем случае, я выберу голубой:
Выбираем для градиента третий цвет
Далее я нажму ОК, чтобы закрыть Палитру цветов, и мой двухцветный градиент преобразовался в трехцветный. Не так уж и плохо, особенно учитывая, что мы изначально выбрали черно-белый градиент:
Третий цвет был добавлен
Перемещение цветов в градиенте
Мы можем не только добавлять к градиенту цвета, но и перемещать их и даже менять порядок, в котором они появляются. Существует несколько способов переместить цвета. Первый заключается в том, чтобы просто кликнуть по контрольной точке цвета и переместить ее влево или вправо. В моем случае, я кликнул по голубой точке цвета в центре и переместил ее поближе к желтой точке цвета. Так же, как и в случае с перемещением средней точки, значение параметра «Позиция» (Location) при этом изменится и отобразит точное местоположение точки в процентах:
Передвигаем цвет с помощью перемещения его контрольной точки вдоль градиента
Второй способ перемещения цвета – это кликнуть по его контрольной точке для выбора цвета, а затем ввести в окошко ввода данных параметра «Позиция» конкретные значения. Я кликну по желтой точке цвета, чтобы ее выбрать. Обратите внимание, что ее текущая позиция равна 100%:
Выбираем желтую точку цвета
Я изменю местоположение точки, введя значение, равное 50%, что приведет к перемещению желтой точки на середину градиента:
Перемещаем цвет с помощью ввода новых значений параметра «Позиция»
Далее я кликну по голубой точке цвета, чтобы выбрать ее:
Выбираем голубую точку цвета
Я перемещу ее до конца правого края, туда, где раньше находилась желтая точка цвета, и таким образом эффективно поменяю местами два цвета градиента:
Перемещаем голубую точку цвета до конца правого края градиента
Удаление цвета
Для того чтобы удалить из градиента какой-либо цвет, кликните по его контрольной точке для выбора, затем начните перемещать точку вниз за шкалу градиента до тех пор, пока она не исчезнет. Я удалю голубой цвет, кликнув по его контрольной точке для выбора:
Выбираем голубую контрольную точку цвета
Я перемещу ее вниз за шкалу градиента, и нам станет видно, что голубой цвет из градиента исчез, в то время как красный и желтый цвета остались. Программа Photoshop при редактировании градиентов дает нам возможность отменить одно действие, поэтому если вы по ошибке удалили нужный цвет, просто нажмите сочетание клавиш Ctrl+Z (Win) / Command+Z (Mac), чтобы отменить последнее действие и восстановить цвет:
Перемещаем контрольную точку цвета вниз для ее удаления
Копирование существующего цвета
Еще один способ добавления цвета к градиенту заключается в создании копии существующего цвета. Для этого, необходимо нажать и удержать клавишу Alt (Win) / Option (Mac) по мере выделения контрольной точки цвета и перемещения ее вправо или влево. Таким образом, вместо передвижения исходной точки вы переместите копию точки, которую впоследствии можно разместить на вашем градиенте в нужном месте.
Предположим, что я в действительности хочу создать градиент с переходом от красного к желтому цвету и опять к красному. У меня уже есть красный цвет с левой стороны градиента. Вместо того чтобы добавить еще один цвет к градиенту и вручную подобрать в Палитре цветов тот же оттенок красного, я просто нажму и удержу клавишу Alt (Win) / Option (Mac), затем кликну по красной точке цвета и перемещу ее вправо, создав точную копию:
Кликните по точке цвета и переместите ее при нажатой клавише Alt (Win) / Option (Mac), чтобы создать копию
Далее я перемещу точку до правого края градиента и таким образом создам градиент с переходом от красного к желтому цвету и обратно к красному:
Создание копий точек цвета позволяет с легкостью добавлять те же самые цвета к различным частям градиента
Добавление прозрачности
Если вы посмотрите выше шкалы градиента, то увидите значки, похожие на дополнительные точки цвета. В действительности, это контрольные точки непрозрачности. Они позволяют нам регулировать непрозрачность различных частей градиента. На скриншоте ниже можно увидеть по одной контрольной точке непрозрачности с каждого конца градиента:
Контрольные точки непрозрачности
Некоторые из готовых образцов градиентов уже содержат прозрачность, некоторые – нет, но мы с легкостью можем добавить ее к градиенту по мере необходимости. Например, если я хочу, чтобы мой градиент имел переход от сплошного цвета слева до полностью прозрачного справа, то я могу достичь этого, кликнув по точке непрозрачности, расположенной над шкалой градиента с правой стороны. В результате, станут активными опции прозрачности в секции «Контрольные точки» (Stops) под градиентом. Обратите внимание, что текущее значение параметра «Непрозрачность» (Opacity) 100%, и это означает, что на данном участке градиента прозрачности нет совсем:
Выбираем контрольную точку непрозрачности с правой стороны
Для того чтобы добавить прозрачность, я кликну по стрелке с правой стороны от текущего значения непрозрачности и уменьшу значение параметра, переместив бегунок влево. Я снижу значение до 0%, чтобы сделать правую сторону градиента полностью прозрачной. Вы также можете создать частичную прозрачность градиента, выбрав значение в пределах от 0% до 100%.
Обратите внимание, что цвет контрольной точки непрозрачности изменился с черного на белый. Черный цвет означает, что значение непрозрачности равно 100%, белый – что значение непрозрачности равно 0% (полностью прозрачный цвет). Частичная непрозрачность представлена различными оттенками серого. Заметьте также, что шкала градиента теперь имеет переход от сплошного цвета слева до узора шахматной доски справа. Узор шахматной доски отвечает в программе Photoshop за изображение прозрачности:
Уменьшаем значение непрозрачности контрольной точки справа до 0%
Перемещение контрольных точек непрозрачности
Помимо перемещения контрольных точек цвета по шкале градиента, мы можем также перемещать контрольные точки непрозрачности. Например, что делать, если я хочу нарисовать переход к прозрачному цвету от желтого цвета в середине градиента, а не от красного цвета с левой стороны? Я могу сделать это несколькими способами. Во-первых, я могу просто кликнуть по контрольной точке непрозрачности с левой стороны и перетащить ее на середину градиента, чтобы она расположилась над желтым цветом. Таким образом, градиент останется полностью непрозрачным до середины шкалы (до желтого цвета), и лишь затем начнется переход к прозрачному цвета в правой стороне:
Перемещаем контрольную точку непрозрачности от левого края до центра градиента
Добавление контрольных точек непрозрачности
Во-вторых, я могу оставить две исходных точки непрозрачности на их исходных позициях и просто добавить третью точку над серединой шкалы градиента. Для начала я верну контрольную точку непрозрачности обратно на ее исходную позицию в левой части градиента, изменив значение параметра «Позиция» (Location) с 50% на 0%:
Так же, как и контрольные точки цвета, контрольные точки непрозрачности можно перемещать с помощью изменения значения параметра «Позиция»
Далее я кликну над шкалой градиента в том месте, где я хочу добавить новую точку, в моем случае - в середине:
Кликаем кнопкой мыши в середине градиента, чтобы добавить третью точку непрозрачности
Программа Photoshop добавит новую точку непрозрачности. Обратите внимание, что значение параметра «Непрозрачность» (Opacity) для данной точки уже равно 100%, поэтому нам его менять не нужно. Однако я мог бы при необходимости ввести любое значение непрозрачности от 0% до 100%. Также заметьте, что значение параметра «Позиция» (Location) равно 50%, но снова, при необходимости я мог бы изменить данное значение либо с помощью перемещения самой точки, либо ввода нового значения в окошко параметра «Позиция». Вы можете добавлять к градиенту столько контрольных точек непрозрачности, сколько вам требуется для лучшего контроля перехода цвета:
Каждая точка непрозрачности полностью независима от других
Вы можете копировать существующие контрольные точки непрозрачности, так же как вы это делали с контрольными точками цвета. Просто нажмите и удержите клавишу Alt (Win) / Option (Mac) при перемещении точки непрозрачности влево или вправо, чтобы создать копию и поместить ее в нужном месте. Так же, как и в случае с контрольными точками цвета, вы можете увидеть значок средней точки непрозрачности для каждого набора точек непрозрачности. Кликните по данному значку и переместите его поближе к одной или к другой точки непрозрачности, чтобы настроить нужным образом переход между цветами:
Смещаем среднюю точку непрозрачности вправо
Удаление контрольных точек непрозрачности
Чтобы удалить контрольную точку непрозрачности, кликните по ней для выбора и далее переместите вверх за пределы градиента до тех пор, пока она не исчезнет. Я удалю точку непрозрачности с правого края, кликнув по ней и переместив вверх. Поскольку только у этой точки из трех существующих степень непрозрачности (Opacity) отличалась от 100%, при ее удалении наш градиент опять стал полностью непрозрачным:
Удаляем контрольную точку непрозрачности справа
И наконец, чтобы вернуть градиент к исходному состоянию (хотя это не требуется, поскольку у градиента больше нет прозрачных участков), я кликну по контрольной точке непрозрачности в середине градиента и перемещу ее вправо:
Перемещаем контрольную точку непрозрачности из середины градиента в правую часть
Параметр «Гладкость»
Последний параметр, который нам надо рассмотреть в сегодняшнем уроке – параметр «Гладкость» (Smoothness), который отвечает за плавность и постепенность перехода между основными цветами. По умолчанию, его значение равно 100%, и все переходы распределены как можно более равномерно. По мере уменьшения его значения, при переходе между цветами появятся дополнительные тени, что приведет к появлению в градиенте нежелательных полос. В большинстве случаев, лучше оставлять параметр «Гладкость» равным 100%:
Параметр «Гладкость»
Сохранение градиента в качестве нового образца
Когда вы будете довольны видом получившегося градиента, вы можете сохранить его как новый образец. Для этого, сначала введите название градиента в поле «Имя» (Name). Я назову свой градиент «Красно-желто-красный»:
Даем название новому градиенту
Затем, кликните по кнопке «Новый» (New):
Щелкаем по кнопке «Новый»
В результате, программа Photoshop добавит новый градиент к остальным образцам, присвоив ему собственную миниатюру, кликнув по который вы можете в следующий раз выбрать при необходимости новый градиент:
Новый градиент появится в области готовых образцов градиентов
Когда вы закончите, нажмите ОК, чтобы закрыть Редактор градиентов:
Щелкните по кнопке ОК
И вот мы закончили! Мы научились создавать, редактировать и сохранять собственные градиенты с помощью Редактора градиентов! Для того чтобы научиться рисовать градиенты, изучите урок «Как рисовать градиенты в программе Photoshop»!
Автор: Стив Паттерсон (Steve Patterson)
photoshop-master.ru
Как сделать градиент? | hronofag
В этой статье я хочу рассказать вам о том, как в Фотошопе можно сделать градиент. Если вы задались такой целью, то у вас ровно три возможности применить градиент.
- Применить градиент через стили слоя Gradient Overlay
- Применить градиент инструментом Gradient Tool
- Применить градиент через слой заливки Fill Layer
Я намеренно поставил стили слоя на первое место, потому что на мой взгляд сегодня в Фотошопе это самый разумный способ применения градиента. За ним следует градиент через слой заливки, для задних фонов. Исключением являются ситуации, при которых нам нужно применить простой и быстрый градиент, не требующий никаких изысков. Например, быстро и без затей скрыть часть изображения черно белым градиентом, в режиме Multiply. Другая причина, по которой вы можете захотеть пользоваться этим инструментом Фотошопа — градиент для маски.
В отсутствии возможности настраивать инструмент Gradient Tool на лету лежит основа работы всех инструментов Фотошопа. Мы выбираем инструмент, будь то Gradient Tool, или Brush Tool или Paint Bucket, или Clone Stamp. Кликаем по рабочей области, и получаем результат, в виде изменения пикселей. И этот результат является изменение пикселей на прямую. Он окончателен и его невозможно изменить «на лету» поменяв настройки.
В этом уроке я подробно разберу инструмент Gradient Tool, его возможностях, создании градиента, редактор градиента, а так же различные способы применения.
Градиент в дизайне
Градиентом в дизайне, да и не только в нем, является постепенный переход цвета из одного оттенка в другой. Это устоявшийся прием, такой же как окантовка или тень, который никуда не пропадет, никогда не станет не модным или не популярным. Пользоваться им нужно с умом. Самые естественные и приятные градиенты — мало контрастные.
Самый простой и доступный способ применить градиент в Фотошопе, это выбрать инструмент Gradient Tool. Кликнуть по рабочей области и не отпуская клавишу мышки, провести курсором по рабочей области.
Точка А является началом градиента, а точка Б окончанием. Диапазон между этими точками и является переходом цвета А в цвет Б. Соответственно чем больше этот диапазон, и чем менее контрастные цвета, тем мягче и плавнее градиент.
Чем уже диапазон, чем контрастнее цвета — тем резче и стремительнее градиент. Вплоть до прямой смены цвета.
Панель настроек градиента
Панель настроек позволяет нам создавать такой градиент, какой нам нужен. И, конечно, содержит ряд полезных фич. Если у вас нет панели настроек откройте Windows > Options По умолчанию все панели настроек для всех инструментов начинаются с менеджера настроек Preset Manager. Подробности работы этого менеджера можно прочитать в статьях Preset manager и Preset Manager Tool.
В целом, эта панель позволяет записывать инструменты с заранее готовыми настройками. Допустим, вам постоянно необходим инструмент градиента от черного к невидимому, с прозрачностью 20% и режимом наложения Multiply. Вы проставляете настройки инструменту и записываете их в панель Presets Tool. Теперь ваш шаблон всегда под рукой.
Панель градиента
Из этой панели вы можете быстро выбрать нужный вам градиент, если он, конечно, там есть. В обратном случае вам придется настраивать собственный градиент в Редакторе градиентов. Но о нем мы поговорим ниже.
Кликнув по круглой кнопке вы попадаете в меню панели градиента. Это стандартное меню, точно такое же есть и у кистей, стилей, контуров, фигур. Везде это меню делает одно и тоже. Позволяет создать и сохранить новый градиент. Переназвать, удалить. Вызвать Preset manager в котором можно больше всякого. Загрузить новые градиенты, или сохранить те что есть, очистить, вернуть к стандартным настройками и, конечно, загрузить готовые шаблонные коллекции градиентов Фотошопа, которые тоже не лишние.
Виды градиентов
Не сказать что у Фотошопа очень много разновидностей градиента. Вид — это метод, которым фотошоп создает градиент. Всего их пять.
Linear gradient (Линейный градиент) — заливает градиент по прямой линии от цвета А к цвету Б.
Radial gradient (Радиальный градиент) — заливает градиент в виде окружности от цвета А к цвету Б.
Angle gradient (Конусовидный градиент) — создает вращающийся градиент по 360 оси от цвета А к цвету Б.
Reflected gradient (Зеркальный градиент) — вариация линейного градиента, с одной лишь разницей. Этот градиент отражает сам себя и возвращается к первоначальному цвету. В этом случае градиент движется от цвета А, к цвету Б и опять к А.
Diamond gradient (Ромбовидный градиент) — создает ромбовидные градиент от цвета А к цвету Б.
Далее я постараюсь быстро рассказать об остальных настройках этой панели и поскорее перейти к самому градиенту, то есть диалоговому окну редактора градиента Gradient Editor
Режимы наложения и невидимость
Следующие опции — режимы наложения и степень невидимости. Здесь все просто. Невидимость определяет невидимость, а режимы наложения предлагают на выбор различные режимы наложения, подробно о которых я написал в статье Режимы наложения blending mode в Фотошопе.
Режимы наложения как таковые прикручены ко всем инструментам которые могут рисовать. Данные режимы являются неотменяемыми. Вы не сможете сменить их задним числом, как это можно сделать у слоя. Режим применяется сразу и необратимо. Открутить назад можно только в панели Истории History.
Дополнительные настройки градиента в Фотошопе
Интерес представляют следующие три галочки: Reverse, Dither, Transparency. Как обычно о них нет никакой информации нигде. Самые мощные сайты по фотошопу ограничиваются выдержками в пару слов, содранными с официального Хелпа. Интересно, кроме Хронофага их вообще кто-нибудь разбирает?
Reverse — пожалуй самая понятная и очевидная из этих настроек. Она очевидная тем, что мы кликаем по ней, и сразу понимаем что она делает. Reverse переворачивает градиент. Что весьма удобно если градиент нужно развернуть. Вместо того чтобы обращаться к редактору градиента и перестраивать ползунки мы просто ставим галочку Reverse.
Dither — не очевидная настройка. Что включай, что выключай. Все равно не понятно что происходит. Давайте разбираться. Тема галочки Dither заслуживает отдельной статьи, но я постараюсь объяснить этот момент кратко.
Когда мы применяем градиент к какой то области, Фотошоп распределяет промежуточные исходной цвет и конечный. Между ними располагаются промежуточные цвета. В некоторых ситуациях количества этих цветов может не хватать. Допустим мы используем очень слабый градиент, от серого к темно серому, на очень большой рабочей области. Пусть эта область будет, к примеру 1000 пикселей.
Фотошопу нужно как-то распределить градации серого по 1000 пикселям, при этом мы должны получить плавный переход из одной градации в другую. Стоит заметить что ступеней цвета от белого к черному и так не очень много. Их всего 256. То есть идеальный градиент от черного к белому получается на области 256 пикселей. Если же мы хотим применить такой градиент на области в два раза больше, то Фотошопу придется просто дублировать каждую полоску пикселя по два раза. А если градация градиента ещё уже? А область ещё больше? На практике получаются следующие полосы.
Метод Dither применяет к градиенту в Фотошопе иной способ совмещения пикселей. Он как бы перемешивает пиксели между собой россыпью. Результат смешения увидеть не сложно. При включении галочки Dither видно только то, что градиент неожиданно стал гладким. Вот что происходит с пикселями при использовании Dither. Я специально увеличил рабочую область и даже немного усилил контрастность, чтобы вы лучше видели как именно смешиваются пиксели.
Transparency — позволяет градиенту быть полупрозрачным. То есть если эта галочка не включена, вы не сможете сделать полупрозрачный градиент в редакторе градиентов. Сделать вы его конечно сделаете, но работать как полупрозрачный он просто не будет. Нет никакого смысла отключать эту галочку. Всегда держите её включенной.
Редактор градиента Gradient Editor
Ну и наконец пришла пора подробно разобрать сам редактор градиента. Как же в нем делать свои градиенты? Как делать полупрозрачный, как записывать, как сохранять? Чтобы попасть в редактор градиента сделайте двойной клик по полоске градиента и вот оно диалоговое окно Gradient Editor.
В окне Presets вы выбираете сохраненные готовые градиенты. Круглая кнопка с стрелочкой делает уже знакомые вам вещи. Создать, удалить, загрузить, сохранить и так далее.
Как сделать и сохранить градиент?
Самый верный способ сделать градиент, это настроить ползунки нужного вам цвета, вписать в графу Name любое название и нажать по кнопочке New. Градиент готов к употреблению.
Мягкость градиента
Параметр Smoothness определяет мягкость градиента. Пожалуй без спец подготовки эту мягкость не просто разглядеть. Если выбрать стандартный градиент с двумя цветами, можно очень долго вглядываться в полоску градиента, меня параметр Smoothness то на 0 то на 100 и так и не понять, в чем заключается мягкость. Более явно изменения видны в сложных градиентах с множеством ползунков цвета.
Как настроить градиент
Настраивать градиент очень просто. У вас есть полоска, она же градиент, с четырьмя ползунками, два снизу два сверху. Нижние ползунки определяют цвет. Чтобы настроить цвет вам нужно выбрать ползунок, то есть кликнуть по нему. Кликнув по ползунку у вам открывается ряд настроек.
На панели редактора градиента вы видите местоположение градиента Location и цвет Color. Location — это местонахождения ползунка на полоске градиента. Цвет можно выбрать из цвета заднего и передних фонов, которые установлены на панели инструментов Tools. Или произвольный цвет, который вы выберете в диалоговом окне Color Picker. Не обязательно выбирать цвет внизу диалогового окна. Вы можете вызвать Color Picker просто кликнув по ползунку дважды.
Манипуляции с ползунками
Активируя ползунок вам становится доступна кнопка удаления. Её тоже не обязательно нажимать чтобы удалить ступень цвета. Для удаления просто утяните ползунок с полоски градиента.
Чтобы добавить новый ползунок, кликните по полоске градиента снизу. Удалить базовые ползунки нельзя. У градиента должно обязательно остаться два ползунка.
Стандартный градиент имеет 2 ползунка цвета, и небольшой индикатор между ними. Индикатор тоже можно двигать, он определяет степень мягкости перехода из одного цвета в другой.
Как сделать полупрозрачный градиент?
Верхние ползунки регулируют прозрачность. По умолчанию они черные, это значит что прозрачность на нуле. Кликните по одному из них или создайте новый, кликнув по пустому месту полоски, но выше неё.
Теперь вам доступны другие настройки, настройки прозрачности градиента. Степень прозрачности, местонахождение и удаление.
Как и с цветными ползунками, у ползунков прозрачности есть индикаторы степени прозрачности.
Режимы градиента в Фотошопе
У градиента в Фотошопе есть два режима: Solid и Noise.
- Solid — обычный стандартный градиент, сплошной переход от одного цвета к другому.
- Noise — создает хаотичный шумовой градиент и настраивается совершенно иначе. Переключить режимы можно прямо в диалоговом окне Gradient Editor.
Переключившись на шум, вы сразу попадаете в другие настройки, смысл которых в следующем:
У вас есть полоска градиента, но в этот раз вы не можете добавлять никаких ползунков. Чтобы создать свой первый шумовой градиент нажмите на кнопку Randomize, которая произвольно выбирает любые цвета, и создает произвольный градиент.
Чтобы контролировать процесс и получать более менее нужные вам градиенты, рассмотрим настройки цвета и кнопки Randomize.
- Restrict Colors — исключает особенно яркие или перенасыщенные цвета из шумового градиента. То есть если вы эту галочку поставили, то при нажатии на Randomize Фотошоп исключает слишком выбивающиеся из общего ряда цвета.
- Add Transperancy — добавляет невидимость. Если выставить эту галочку вместе с произвольными цветами вы получите и произвольную невидимость. Фотошоп сам будет решать где и как она появится. Она может появиться либо вначале, либо в конце, либо местами в середине, и у вас нет возможности контролировать этот процесс.
Нажимая на Randomize вы оперируете всеми цветами. Но что если вы хотите создать градиент очень определенной цветовой гаммы. Для этого вам даны ползунки с цветом. Двигая их от краев, вы снижаете действие определенного канала цвета, исключая цвета из градиента. Если вы не знаете как работает цветовая гамма RGB, читайте статью RGB каналы в Фотошопе. Она поставит все на места.
Лучше переключитесь на более понятную схему HSB. Допустим я хочу получить шумовой градиент в голубой тональности. Тогда я уменьшаю действие ползунков исключая лишний цвет.
Черный цвет мне тоже не нужен, как и оттенки серого, поэтому я уменьшу действие и этих ползунков. Далее вы можете сколько угодно нажимать на кнопку Randomize подыскивая подходящую вам комбинацию.
Настройка Roudness определяет степень грубости и резкости ваших цветов от самого обычного мягкого градиента до взрывного и кислотного.
Теперь вы знаете все о градиентах в Фотошопе, надеюсь вы извлекли для себя что то новое. Удачных экспериментов!
Автор:
Дмитрий Веровски
hronofag.ru
