Цвет градиент фото: Изображения Градиент | Бесплатные векторы, стоковые фото и PSD

Как сделать наложение градиента в Adobe Photoshop

Лидия Лукьянова создает художественный цветной дизайн для фото-силуэта. Посмотрите, как она добавляет градиент на черно-белую фотографию в Adobe Photoshop.

Взгляните на технику Лукьяновой на минуту; шаги описаны ниже.

Перед тем, как начать

Используйте этот образец изображения, если хотите, или поупражняйтесь на своем собственном.

Шаг 1. Начните с контрастности

Этот метод лучше всего работает с высококонтрастными фотографиями, поэтому Лукьянова применила его к этой черно-белой фотографии. Затем она выбрала Волшебную палочку (W) и щелкнула, чтобы выбрать черное платье.

Шаг 2. Раскрасьте выделенную область

Затем она добавила корректирующий слой Gradient.

Шаг 3: Выберите свою палитру

Лукьянова просмотрела доступные предустановки градиента, прежде чем выбрать тот, который ей понравился.В конце концов, она выбрала один из пресетов от оранжевого до фиолетового из категории «Красные» в диалоговом окне «Градиентная заливка» и нажала «ОК».

Шаг 4: Сделайте его своим

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

Шаг 5. Увидимся до конца

Чтобы добавить прозрачности к верхнему цвету, Лукьянова нажала кнопку «Непрозрачность» и снизила непрозрачность.

Шаг 6. Сделайте плавный переход

Лукьянова смогла создать плавный градиент, перемещая точки цвета и средние точки цвета, чтобы получить желаемый вид. Она нажала ОК, когда была довольна результатами.

Шаг 7. Уточните края

Регулировка «Градиентная заливка» создает маску слоя над слоем модели, заполняя выбранную область фотографии цветным градиентом.Лукьянова хотела уточнить края маски, поэтому она щелкнула большим пальцем маски градиентной заливки на панели «Слои» («Окно»> «Слои»). Затем она выбрала инструмент «Кисть (B)», установила мягкий круглый край и закрасила черным, чтобы обнажить верхнюю часть платья. Она уточнила край выделения, используя кисть меньшего размера, и нарисовала белой кистью по маске, чтобы выявить части градиента, которые она случайно скрыла.

Шаг 8: Цветовая оценка композиции

Для тонкой коррекции цвета Лукьянова добавила к изображению корректирующий слой сплошного фиолетового цвета, нажала кнопку «ОК» и снизила непрозрачность для нового корректирующего слоя.

Создай свой образ

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

Примечание. Файлы проекта, включенные в это руководство, предназначены только для практических целей.

Полное руководство по инструменту Gradient Tool в Adobe Photoshop

Узнайте о многих функциях инструмента «Градиент» в Photoshop и о том, как их можно быстро применить к фотографиям для получения модного образа.

Изображение на обложке через Ксению Перминову.

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

Следуйте инструкциям, чтобы узнать об особенностях инструмента Gradient Tool в Adobe Photoshop и о том, как применять градиенты для создания визуально потрясающих изображений. После того, как вы разобрались с инструментом «Градиент» в Photoshop, перейдите к нашему руководству по инструменту «Градиент» в Illustrator.

Градиентная заливка

Включите инструмент Gradient Tool в Photoshop, нажав G или выбрав значок прямоугольного градиента , расположенный на левой панели инструментов в программе. После активации инструмента Gradient Tool (G) выберите градиент по вашему выбору на верхней панели инструментов: линейный, радиальный, угловой, отраженный и ромбовидный.

Когда активирована градиентная заливка, появится курсор, напоминающий знак плюс . Найдите начальную точку для градиента, затем щелкните и перетащите курсор в конечную точку градиента, затем отпустите курсор. Удерживайте нажатой клавишу Shift , чтобы сохранить начальную и конечную точки с шагом 45 градусов.Для более плавного градиента расположите начальную и конечную точки дальше друг от друга; более короткие начальная и конечная точки создают более резкую градиентную заливку.

Давайте рассмотрим, как каждый градиент выглядит при применении к слою.

Линейный градиент

Линейные градиенты позволяют цвету переходить по прямой линии из одной точки в другую.

Радиальный градиент

Радиальные градиенты создают более круговой переход; начальная точка начинает радиальную форму и переходит в конечную точку.

Угловой градиент

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

Отраженный градиент

Отраженный градиент похож на отражение в том, что он создает зеркальный эффект с цветом конечной точки, расположенным по обе стороны от цвета начальной точки.

Алмазный градиент

Как следует из названия, этот градиент создает форму ромба.Начальная точка начинается с ромбовидной траектории, переходящей в конечную точку.

Библиотека градиентов

Adobe Photoshop предлагает огромную библиотеку предустановленных градиентных заливок, когда выбран инструмент Gradient Tool (G) . Найдите их, щелкнув стрелку раскрывающегося списка рядом с диалоговым окном градиентной заливки.

При активации вы увидите выбранные Photoshop градиенты по умолчанию. Добавьте больше градиентов в свою библиотеку, нажав значок настроек и выбрав из библиотек, таких как Pastels , Color Harmonies и другие.Вы можете добавить новый выбранный градиент в вашу текущую библиотеку или полностью заменить их, нажав OK .

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

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

могут быть созданы как градиент типа solid или noise . Сплошные градиенты — это плавный переход между двумя или более цветами, а градиенты noise имеют более случайную дисперсию оттенков.

Создание сплошного градиента

Если тип градиента указан как solid , появляется ползунок плавного градиента, который позволяет полностью настроить внешний вид градиента.

• Гладкость: Влияет на переход цвета в градиенте. При 100% ваш градиент создает более плавный переход; значения менее 100% переходят более резко.
• Color Stop: Указывает цвета в градиенте. Для редактирования дважды щелкните , чтобы открыть диалоговое окно «Палитра цветов ». Вы также можете перемещать каждую цветовую границу внутри ползунка градиента, чтобы влиять на переход цвета.
• Средняя точка: Эта форма ромба управляет потоком вашего градиента. По умолчанию средняя точка равна средней точке, или 50%, между точками цвета для плавного градиента. Вы можете перемещать среднюю точку, чтобы настроить переход и поток.
• Остановка непрозрачности: Эти остановки, расположенные над отметкой цвета, влияют на непрозрачность каждого цвета в градиенте. Просто нажмите на остановку непрозрачности, чтобы отрегулировать ее непрозрачность в меню Остановки .Значения менее 100% покажут узор шахматной доски , указывающий уровни прозрачности.
• Расположение: Влияет на фактическое расположение точек цвета и непрозрачности. Расположение по адресу 0% расположено слева от ползунка, а 100% — справа от ползунка.
• Удалить: Позволяет удалить границы цвета или непрозрачности в пределах ползунка градиента. Нажмите на стоп, чтобы включить черный треугольник , затем нажмите Удалить .
• Добавление точек: Добавьте точку цвета или непрозрачности к ползунку градиента, щелкнув над , ползунок для значений непрозрачности , или ниже , ползунок для остановок цвета .

Когда вы закончите создавать свой собственный градиент, присвойте ему имя и нажмите Новый , чтобы добавить его в свою библиотеку градиентов. Вы также можете выбрать Сохранить , чтобы экспортировать градиент в виде файла GRD для использования позже.

Создание градиента шума

Сразу видно, что градиенты noise кардинально отличаются от плавных градиентов.Давайте рассмотрим, что означает каждый параметр.

• Шероховатость: Значения шероховатости больше, чем 20% создаст отчетливые цветные линии на ползунке градиента; по мере увеличения значения линии становятся более резкими. Значения меньше 20% будут напоминать плавный градиент.
• Цветовая модель: Выберите из цветовых режимов RGB , HSB и LAB . RGB сочетает в себе красный, зеленый и синий цвета для получения широкого диапазона оттенков. HSB использует Hue , Saturation и Brightness для создания цветов. LAB описывает человеческое восприятие цвета и описывает, как цвет выглядит, что делает его цветовой моделью в зависимости от устройства. Ползунки с серыми стрелками и со стрелками определяют диапазон оттенков, присутствующих в градиенте шума.
• Ограничить цвета: Если этот флажок установлен, цвета, представленные в ползунке градиента, будут ограничены менее насыщенными оттенками.
• Добавить прозрачность: Если этот флажок установлен, ползунок добавляет шум прозрачности, обозначенный шаблоном шахматной доски .
• Произвольный: Щелкните, чтобы рандомизировать оттенки, присутствующие в ползунке градиента.

Как применять градиенты к фотографиям

Теперь, когда мы рассмотрели все тонкости инструмента Gradient Tool в Photoshop, давайте применим его к фотографии, чтобы получить простой, но модный вид. В этом уроке я буду использовать художественную фотографию в сочетании с моим градиентом.

Загрузите изображение в Photoshop, затем добавьте корректирующий слой Black & White на панель Layers . Настройте внешний вид вашего изображения с помощью ползунков цвета.

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

Чтобы связать градиент с вашей фотографией, настройте Blend Mode на Screen на панели Layers . Та-да! Вы создали визуально интересное наложение градиента на простых изображениях.

Лицензируйте потрясающий контент с планом, который соответствует вашим потребностям.

Посмотреть цены

Хотите расширить свои знания в области Adobe Photoshop? Ознакомьтесь с этими информационными статьями:

Использование CSS-градиентов — CSS | MDN

CSS-градиенты представлены типом данных <gradient> (en-US), специальным типом <image> (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient), круговой (создаётся с помощью radial-gradient) и конический (создаётся с помощью функции conic-gradient (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Градиенты могут быть использованы везде, где может быть использован тип <image>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.

Мы начнём с того, что покажем вам линейные градиенты, затем покажем возможности, поддерживаемые всеми типами градиентов, используя линейные градиенты в качестве примера, затем перейдём к круговым, коническим и повторяющимся градиентам.

Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.

Обычный линейный градиент

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

.simple-linear {
  background: linear-gradient(blue, pink);
}

Изменение направления

По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

Диагональные градиенты

Вы можете даже создать градиент, проходящий диагонально, из угла в угол.

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

Использование углов

Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

Расположение точек остановок цветов

Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на 0%, а последняя – на 100%, а все остальные точки остановки будут расположены на полпути между соседними точками остановки.

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

Создание резких переходов

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

.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

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

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

Создание цветных линий и полосок

Чтобы добавить внутрь градиента сплошную цветную область без плавного перехода, добавьте две позиции для точки остановки. Точки остановки могут быть в двух позициях, что эквивалентно двум подряд точкам остановки с тем же цветом на разных позициях. Цвет достигнет полной насыщенности на первой точке, проследует с той же насыщенностью до второй точки остановки и перейдёт в цвет следующей точки остановки через первую позицию следующей точки остановки.

.multiposition-stops {
   background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
   background: linear-gradient(to left,
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}
.multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
   background: linear-gradient(to left,
      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

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

В обоих примерах градиент написан дважды: первый – это метод из CSS-изображений уровня 3 использующий повторения цвета на каждой остановке, а второй пример – это метод из CSS-изображений уровня 4, где в линейном объявлении точек остановки используются множественные точки остановки с двумя значениями длин точек остановки.

Управление переходом градиента

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

.colorhint-gradient {
  background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, black, cyan);
}

Перекрытие градиентов

Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

Наслаивание градиентов

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

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

Обычный круговой градиент

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

.simple-radial {
  background: radial-gradient(red, blue);
}

Размещение круговых точек остановки

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

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Расположение центра градиента

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

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

Задание размеров кругового градиента

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

Пример: ближайшая сторона для эллипса

В этом примере используется значение размера closest-side, которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: самый дальний угол для эллипса

Этот пример схож с предыдущим, за исключением того, что его размер указан как farthest-corner, что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner at 90% 90%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для круга

Этот пример использует closest-side, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

.radial-circle-close {
  background: radial-gradient(circle closest-side at 25% 75%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Наложение круговых градиентов

Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.

.stacked-radial {
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.

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

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

Обычный конический градиент

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

.simple-conic {
  background: conic-gradient(red, blue);
}

Расположение конического центра

Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова «at».

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа <angle>, с предшествующим ему ключевым словом «from».

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
}

Функции linear-gradient, radial-gradient и conic-gradient (en-US) не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeating-linear-gradient для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Множественные повторяющиеся линейные градиенты

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
}

Клетчатый градиент

Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);

  background:
      repeating-linear-gradient(90deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(0deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(-45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px),
      repeating-linear-gradient(45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px);
}

Повторяющиеся круговые градиенты

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Множественные повторяющиеся круговые градиенты

.multi-target {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat,
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

• Градиентные функции: linear-gradient, radial-gradient, conic-gradient (en-US), repeating-linear-gradient, repeating-radial-gradient (en-US), repeating-conic-gradient (en-US)
• Типы данных CSS, связанные с градиентами: <gradient> (en-US), <image> (en-US)
• Свойства CSS, связанные с градиентами: background, background-image
• Галерея шаблонов градиентов CSS, от Lea Verou
• Библиотека градиентов CSS3, от Estelle Weyl
• Генератор градиентов CSS

Настройка карты градиента для черно-белого фото

Если вы посмотрите на края бара предварительного просмотра градиента, вы увидите ползунки контрольных точек цветов. Эти два ползунка управляют прерыванием двух основных цветов, из которых градиент. Тот, что слева управляет черным, а находящийся с правой стороны, будет белым (так как наш градиент идет от черного слева к белому справа):

Если Вы кликните по любому из ползунков, по между ними появится небольшой, ромбической, формы маркер средней точки цвета (в англ. — Midpoint):

Как вы уже могли догадаться из его названия, этот маркер задаёт место, в котором будет среднее значение цвета между двумя основными цветами. По умолчанию, он расположен в середине, но для нас это не обязательно. Мы можем двигать среднюю точку цвета, просто перетаскивая маркер его влево или вправо. Если вы знакомы с тем, как работает в Photoshop регулировка Уровней, вы знаете, что перемещая ползунки, мы можем делать ярче или темнее полутона в изображении (полутона — это уровни яркости, которые находятся между чисто черным и чисто белым цветами). То же самое мы можем делать и с помощью этого маркера. Путем перетаскивания маркера влево или вправо, можно регулировать яркость полутонов в нашем черно-белом изображении.

Если вы кликните по маркеру средней точки цвета (Midpoint) и посмотрите вниз, то увидите подсветившуюся синим цветом опцию «Позиция» (Location ), расположенную в нижней части диалогового окна редактора градиента, вы увидите, что она имеет значение в 50%. Это означает, что наша Midpoint изначально находится на полпути между цветами на обоих концах градиента.

Я собираюсь перетащить этот маркер немного влево, что подвинет середину градиента ближе к черному. По мере перемещения к чёрному, значение «Позиции» уменьшается. Я собираюсь остановиться, когда «Позиция» будет иметь значение около 43%, так как обычно не нужно перемещать маркер очень далеко, чтобы увидеть заметные изменения в изображение (вы должны будете отпустите кнопку мыши после перетаскивания маркера, после чего изображение в окне документа обновится):

Перемещение средней точки градиента ближе к черному осветлило полутона и теперь изображение кажется ярче (для сравнения стем, что было до перемещения маркера, наведите мышку на изображение, либо смотрите фото в первой части):

Кроме того, мы можем перетащить маркер Midpoint вправо, это действие подвинет середину градиента ближе к белому, при этом величина значения «Позиции» (Location) вырастает:

Перемещение средней точки градиента ближе к белому затемняет полутона. В моем случае, фото сейчас выглядит слишком темным, но, конечно, ваше собственное изображение будет отличаться (опять-таки, для сравнения наведите мышку на фото):

Градиент

Инструмент «Градиент» позволяет рисовать градиенты семи типов и во многих форматах. Цветовые градиенты отображаются как переход между Основным и Дополнительным цветами. Кроме этого, используя градиенты в режиме прозрачности, можно получить эффект «затухания» или «слияния» двух изображений в одно.

Типы Градиентов

Каждый из семи типов градиента можно выбирать на Панели инструментов.

Рисование градиента

Чтобы нарисовать градиент, выберите инструмент Градиент, кликните на холсте и протяните указателем мыши. Градиент будет нарисован как переход между Основным и Дополнительным цветами (Цветового режима) при движении мыши.

После отпускания кнопки мыши градиент можно отрегулировать, перетащив Управляющие маркеры. Щелчок правой кнопкой мыши по маркеру сменит роли Основного и Дополнительного цветов, эффективно изменив направление градиента.

Цветовой режим

Тип градиента по умолчанию — это градиент цвета, который влияет на все цветовые каналы и альфа-канал. Градиент будет переходить от Основного цвета к Дополнительному. Если перетащить градиент Правой кнопкой мыши, то роли Основного и Дополнительного цветов будут поменяны местами.

Режим прозрачности

Целенаправленно режим прозрачности обычно используется для создания постепенного «исчезновения» части изображения. Это может быть полезно для смешивания двух изображений вместе. Для перехода в этот режим, выберите его в Панели инструментов.

Этот тип градиента влияет только на альфа-канал активного слоя. Градиент будет исчезать от альфа-значения Основного цвета до инверсии альфа-значения Дополнительного цвета. Следовательно, вполне возможен переход между двумя состояниями частичной прозрачности.

При использовании правой клавиши мыши градиент будет двигаться в противоположном направлении.

Пример применения Градиента

Для применения всех типов Градиента будем использовать следующее исходное изображение.

Ниже приведены примеры воздействия каждого из 7 типов градиента на изображение. Слева показаны изображения после обработки градиентом в режиме Цвет с двумя непрозрачными цветами (и значением альфа 255). Справа показаны изображения после обработки градиентом в Режиме прозрачности.

Смешивание изображений

Чтобы сделать затухание или смешивание, поместите два изображения на отдельные слои, а затем используйте прозрачный градиент любой формы на верхнем слое.

На нижеследующем примере вы можете увидеть плавный переход одного изображения в другое. Данный эффект можно легко создать «протянув» прозрачный градиент с левого до правого края изображения.

Режимы повтора

Режимы повтора определяют действие градиента за пределами границ формы. Пользователю доступно 3 режима: Не повторять, Повторять и Отражать.

1. Не повторять — градиентная градация не выходит за пределы ограничений, налагаемых управляющими маркерами. 
2. Повторять — градиент между управляющими маркерами повторяется во фрагментах такой же ширины, как и текущее расстояние между управляющими маркерами. Фрагменты отделены резкой гранью окончания одного градиента и началом следующего.
3. Отражать — градиент зеркально отражен вдоль краев. Это приводит к повторяющемуся бесшовному паттерну.

Режимы смешивания

Градиенты можно создавать, используя опции режимов смешивания, выбранные на Панели инструментов из выпадающего меню.

Градиент будет применен в соответствии с другими параметрами (Цвет/Прозрачность, Режим повторения и т.д.), а затем проинтерпретируется так, как если бы пиксели были на своем слое с установленным режимом смешивания слоев. На изображении ниже вы увидите наше исходное изображение и примененный к нему Линейный градиент в режиме Экранное осветление. 

%d0%93%d1%80%d0%b0%d0%b4%d0%b8%d0%b5%d0%bd%d1%82 %d1%86%d0%b2%d0%b5%d1%82%d0%b0 PNG, векторы, PSD и пнг для бесплатной загрузки

Волшебство стемпинга чудеса градиента

Привет!

Как и обещала Полина, у нас в эфире рассылка со всякой разной красотой, созданной при помощи пластин MoYou London 🙂 И сегодняшняя тема говорит сама за себя — градиенты!

Я ещё помню время, когда градиент сам по себе являлся украшением маникюра. А сейчас всё чаще можно увидеть его в виде подложки для других видов дизайна. Предлагаю взглянуть, как он смотрится под стемпингом. Как оказалось, вариантов — масса!

Начнём, пожалуй, с обычного градиента в одной гамме:

На фото: Sailor 06 и Pro XL 12

Более ярким и заметным маникюр сделает использование в виде подложки нескольких цветов:

На фото: Princess 13 и Princess 10

Яркие неоновые цвета сами по себе притягивают взгляд, а если их ещё украсить соответствующим рисунком, может получиться подобная красота:

На фото: Explorer 23 и Explorer 22

А если использовать для стемпинга цвет, сходный с одним из цветов подложки, получится, что рисунок будто растворяется к краю ногтя 🙂

На фото: Fashionista 06 и Zodiac 10

Так же разнообразить маникюр можно как бы «перевернув» градиент на нескольких пальцах:

На фото: Princess 13 и Sailor 07

«Перевернуть» можно и градиент из нескольких цветов. Такой дизайн, на мой взгляд, обречён притягивать к себе взгляды 🙂 

На фото: Fashionista 11 и Suki 07

Так же в качестве подложки можно смешать несколько цветов в случайном порядке, получится не менее красиво 🙂 

На фото: Holy Shapes 07 и Princess 09

А завершу я совершенно потрясающей, по моему мнению, идеей. Она не нова, но от этого не теряет своей интересности 🙂 Мне очень нравится смешивать цвета прямо на пластине. То есть сам узор получается градиентным! Правда классно?)

На фото: Kitty 12 и Cook Book 07

Напоследок сообщу небольшую новость, которые многие уже, наверно, слышали 🙂 В продажу поступили новые пластины Fashionista 16 и Fashionista 17! Свотчей к ним, к сожалению, пока нет. Но когда появятся, вы обязательно их увидете в одном из писем 😉

Ну что, будем прощаться?) Была рада провести с вами немного времени. Надеюсь, я кого-нибудь вдохновила на что-нибудь интересное и творческое 🙂 

Приятных вам выходных! И до встречи через две недели 🙂

Искренне ваши,

Наташа

и вся команда ЛакоДома.

Раскрашивание изображений с помощью градиентов в Photoshop

Как раскрасить изображение с помощью градиента

Шаг 1. Создайте индивидуальную черно-белую версию изображения

Прежде чем мы начнем раскрашивать изображение градиентом, давайте сначала удалим существующие цвета и создадим собственную черно-белую версию. Это поможет нам в конце уточнить результаты. Если вы используете Photoshop CS3 или выше (я использую CS4 в этом уроке), самый простой способ создать великолепно выглядящую индивидуальную черно-белую версию — это использовать корректирующий слой Black & White , что я и добавлю через мгновение.Если вы используете Photoshop CS2 или более раннюю версию, используйте либо корректирующий слой Channel Mixer , либо Hue / Saturation для создания своей черно-белой версии. Вы найдете полную информацию об этих и других способах преобразования цветных изображений в черно-белые в нашем разделе Photo Editing .

Если мы посмотрим на нашу палитру слоев, мы увидим, что в настоящее время у нас есть только один слой, фоновый слой, который является слоем, содержащим наше изображение. Чтобы добавить корректирующий слой Black & White, щелкните значок New Adjustment Layer в нижней части палитры слоев и выберите Black & White из появившегося списка корректирующих слоев:

Щелкните значок «Новый корректирующий слой» и выберите в списке «Черно-белый» (Photoshop CS3 и выше).

Как только вы выберете корректирующий слой «Черно-белый», вы увидите, что ваше изображение в окне документа внезапно становится черно-белым, в соответствии с настройками по умолчанию для настройки. В Photoshop CS3 элементы управления для корректирующего слоя «Черно-белый» откроются в диалоговом окне на экране. В CS4 они появятся внутри Панели настроек, которая появилась впервые в CS4. В любом случае принцип работы один и тот же. Просто перетащите любой из ползунков цвета (красный, желтый, зеленый, голубой, синий и пурпурный) влево или вправо, чтобы осветлить или затемнить области изображения, которые изначально содержали этот конкретный цвет.Перетаскивание ползунка влево затемнит области этого цвета, а перетаскивание вправо сделает их светлее.

Например, оттенок кожи всегда содержит много красного, поэтому, чтобы осветлить чью-то кожу в черно-белой версии изображения, просто перетащите ползунок «Красные» вправо. Деревья и другие растения обычно содержат много желтого (даже если они кажутся нам зелеными), поэтому, чтобы сделать их ярче или темнее, просто перетащите ползунок «Желтые». Всегда следите за своим изображением в окне документа, перетаскивая ползунки, чтобы оценить результат:

Перетащите ползунки цвета влево или вправо, чтобы затемнить или осветлить различные области черно-белой версии.

Если вы довольны результатом, нажмите «ОК», чтобы выйти из диалогового окна, если вы используете Photoshop CS3. В CS4 панель настроек может оставаться открытой. Вот мое изображение после его преобразования в черно-белое:

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

Если мы снова посмотрим на нашу палитру слоев, мы увидим, что теперь у нас есть два слоя. Исходное изображение все еще находится на фоновом слое, а прямо над ним находится наш корректирующий слой. Только что примененное черно-белое преобразование полностью содержится в самом корректирующем слое.Исходное изображение ниже остается полноцветным, нетронутым и не затронутым ничем, что мы только что сделали, поэтому мы всегда должны использовать корректирующих слоев , когда это возможно:

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

Шаг 2. Добавьте корректирующий слой карты градиента

Теперь, когда у нас есть черно-белая версия, мы можем раскрасить изображение градиентом. Для этого мы воспользуемся еще одним корректирующим слоем, на этот раз Gradient Map. Снова щелкните значок New Adjustment Layer в нижней части палитры слоев и выберите Gradient Map из списка:

Еще раз щелкните значок «Новый корректирующий слой» и на этот раз выберите «Карта градиента».

Как и в случае с предыдущим корректирующим слоем, если вы используете Photoshop CS3 (или более раннюю версию), элементы управления для карты градиента откроются в диалоговом окне на вашем экране. В CS4 они появляются на Панели настроек.

Шаг 3. Создайте собственный градиент

По умолчанию Photoshop использует градиент на основе ваших текущих цветов переднего плана и фона, которые, если вы их не изменили, будут черным (передний план) и белым (фон), что дает нам градиент от черного к белому.Мы можем увидеть, как выглядит текущий градиент, в области предварительного просмотра градиента :

Область предварительного просмотра показывает нам текущие цвета градиента.

Поскольку мы хотим раскрасить наше изображение, градиент от черного к белому не принесет нам много пользы, поэтому давайте изменим цвета и создадим собственный градиент! Щелкните прямо в области предварительного просмотра градиента, чтобы открыть более крупный Gradient Editor . В верхней части редактора градиентов находится серия миниатюр, каждая из которых представляет собой заранее созданный градиент (известный как градиент , предустановленный ), который мы можем выбрать, просто щелкнув его миниатюру.Однако мы не собираемся этого делать (поэтому не нажимайте ни на одну из них), потому что мы увидим, насколько легко создать собственный градиент.

Область Presets в верхней части редактора градиентов содержит набор готовых градиентов.

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

Давайте изменим черный цвет слева от градиента на что-нибудь другое.Щелкните по черному ограничителю цвета, чтобы выбрать его, затем щелкните по образцу цвета:

Щелкните по черному ограничителю цвета, чтобы выбрать его, затем щелкните по образцу цвета, чтобы изменить его цвет.

Откроется палитра цветов в Photoshop . Для достижения наилучших результатов вы обычно хотите создавать градиенты, которые переходят от более темных цветов к более светлым, поэтому я выберу темно-фиолетовый из Палитры цветов, который заменит черный в градиенте:

Замена черного в градиенте на темно-фиолетовый.

Нажмите «ОК», когда закончите, чтобы выйти из палитры цветов. Если мы посмотрим на мое изображение в окне документа, мы увидим, что при замене черного в градиенте на фиолетовый, все темные области на фотографии теперь выглядят фиолетовыми, а не черными:

Темные области изображения теперь выглядят пурпурными.

Давайте сделаем то же самое для границы белого цвета ниже правого края области предварительного просмотра градиента. Щелкните цветовой ограничитель, чтобы выбрать его, затем щелкните образец цвета, чтобы изменить его цвет:

Изменение белого цвета в крайнем правом углу градиента.

Когда появится палитра цветов, я выберу ярко-желтый вместо белого:

Замена белого цвета в градиенте на ярко-желтый.

Нажмите OK, чтобы выйти из палитры цветов, и мы увидим, что области изображения, которые изначально были белыми (или светлым оттенком серого), теперь становятся желтыми:

Темные области по-прежнему остаются фиолетовыми, а теперь светлые области становятся желтыми.

Добавление дополнительных цветов
На данный момент наш градиент состоит только из двух цветов, но мы можем добавить столько цветов, сколько захотим, просто добавив больше цветовых точек.Чтобы добавить цветовую границу, просто щелкните под областью предварительного просмотра градиента в том месте, где вы хотите, чтобы он появился. Я добавлю третью цветовую точку ниже середины градиента. Как только вы щелкнете, появится новая цветовая шкала:

Щелкните в любом месте внизу градиента, чтобы добавить еще одну цветовую точку.

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

Выбор среднего оранжевого цвета вместо среднего серого в градиенте.

Я нажму «ОК», чтобы снова выйти из палитры цветов, и в окне документа мы увидим, что средние тона в моем изображении теперь становятся оранжевыми. Более темные области по-прежнему фиолетовые, а более светлые — желтые благодаря трехцветному градиенту, который я создал для раскрашивания изображения:

Более темные области имеют фиолетовый цвет, более светлые области — желтый, а средние тона — оранжевый благодаря пользовательскому трехцветному градиенту.

Мы можем не только добавлять новые цвета к градиенту, но и перемещать существующие цвета. Чтобы переместить любой из цветов и изменить внешний вид градиента, просто нажмите на ограничитель цвета и перетащите его влево или вправо вдоль нижней части области предварительного просмотра градиента. Вы также можете щелкнуть и перетащить маленькую форму ромба, которая появляется между двумя точками цвета, чтобы изменить расстояние, необходимое для перехода одного цвета в другой. Следите за изображением в окне документа, чтобы оценить результаты. Наконец, чтобы удалить цвет из градиента, просто щелкните и перетащите его цветовой ограничитель из области предварительного просмотра градиента, пока он не исчезнет, ​​затем отпустите кнопку мыши:

Перетащите любой из ограничителей цвета, чтобы изменить положение цветов в градиенте.Перетащите маленькие ромбовидные формы, чтобы изменить переход от одного цвета к другому.

Когда вы закончите создание и редактирование градиента, нажмите «ОК», чтобы выйти из редактора градиентов, затем нажмите «ОК», чтобы выйти из диалогового окна «Карта градиента» (Photoshop CS3 и более ранние версии).

Шаг 4. Измените режим наложения или уменьшите непрозрачность

Если вы обнаружите, что начальный эффект окраски слишком интенсивен (как у меня), есть несколько простых способов придать ему более тонкий вид.Один — путем изменения режима наложения корректирующего слоя Gradient Map. Я собираюсь изменить свой режим наложения с Нормального (режим наложения по умолчанию) на Мягкий свет :

Измените режим наложения корректирующего слоя «Карта градиента» на «Мягкий свет».

Вы также можете попробовать режим наложения Overlay для получения более контрастного изображения. В моем случае Soft Light работает лучше и дает гораздо более приглушенный цветовой эффект:

Изменение режима наложения дает более тонкий эффект.

Другой способ уменьшить интенсивность эффекта — уменьшить непрозрачность и корректирующего слоя «Карта градиента». Я верну свой режим наложения обратно на Нормальный, и на этот раз я уменьшу параметр Непрозрачность (прямо напротив параметра режима наложения) до 25%:

Уменьшите непрозрачность карты градиента, чтобы уменьшить ее интенсивность.

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

Уменьшение непрозрачности создает более мягкий эффект окраски.

Откройте для себя силу цвета с помощью PicMonkey Gradient Tool

Какая сегодня одна из самых горячих и крутых тенденций в дизайне? Градиенты. Градиент — или переход от одного цвета к другому — уже некоторое время постепенно проникает в дизайнеров, но когда Instagram использовал его для своего нового логотипа, увлечение градиентами резко возросло. Наш новый, простой в использовании инструмент градиента гарантирует, что участники PicMonkey не останутся без внимания. Посмотрите наш видеоурок ниже или прочтите, чтобы узнать, как его использовать, и вдохновитесь великолепным дизайном.

1. Щелкните Create , чтобы открыть изображение в редакторе PicMonkey.

2. На вкладке «Эффекты» (значок волшебной палочки) щелкните «Градиент».

3. Щелкните цветные круги, чтобы выбрать цвета.

4. Поиграйте с режимами наложения и ползунками Direction и Fade , чтобы получить желаемый вид.

5. Нажмите Применить , и все готово!

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

Градиенты можно добавить к любому объекту в вашем дизайне: фотографии, графике, фону или фрагменту текста; по сути, это тот же процесс.

Щелкните палитру Layers (значок с квадратным расположением слоев на нижней панели инструментов) и выберите слой с элементом, к которому вы хотите добавить градиент. Щелкните вкладку Эффекты (значок волшебной палочки) в крайнем левом углу. Затем в меню справа от вкладок прокрутите вниз до группы Paintbox и нажмите «Градиент».В элементах управления градиентом щелкните цветные кружки вверху, чтобы указать желаемые цвета.

Цвета можно выбирать с помощью спектра, палитры или пипетки. Затем щелкните раскрывающийся список в разделе «Режим наложения» и изучите все варианты. Поэкспериментируйте с ползунками Direction и Fade и нажмите Apply , когда закончите.

Измените свой дизайн, но сохраняйте градиент

Слоны никогда не забывают, как и функция градиента PicMonkey.Итак, если вы наложите градиент на текст, а позже вы решите отредактировать текст на этом изображении, PicMonkey сохранит те же варианты градиента с вашим новым текстом.

Если вы замените фотографию другой фотографией, градиент также останется — пока это слой, а не фон. Если это фон, нажмите «Преобразовать в слой» в палитре «Слои» . Затем щелкните новый слой с фотографией, чтобы открыть палитру «Графика» , и нажмите « Заменить », чтобы заменить новую фотографию.

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

Вы можете выбрать несколько объектов (текст, графику, текстуры), удерживая клавишу Shift при щелчке по ним в дизайне или на палитре слоев. Нажмите «Градиент», затем нажмите «», «Применить », и градиентный фон отобразится сразу для всех.

Хорошо выбирайте цвета

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

Создание связей

При разработке изображений одна из самых важных вещей — установить надежную связь со зрителем. Поскольку градиенты являются частью мира природы, который окружает нас каждый день, мы склонны к интуитивной реакции на них.Градиенты можно найти во фруктах, листьях, деревьях, горах, небе, океане, восходах и закатах. Их можно увидеть даже на нашем собственном теле, от радужной оболочки глаз до тонких градаций наших волос. Так что попробуйте градиенты и посмотрите, что они могут сделать для вашего дизайна.

Gradient Tool — Классические уроки Pixelmator

Используйте инструмент «Градиент» для заливки изображений, слоев или выделенных областей плавными многоцветными переходами, называемыми градиентами. Простой градиент обычно состоит из двух цветов, которые переходят друг в друга, но есть также более сложные градиенты, которые состоят из многих цветов и даже включают прозрачность.Вы можете использовать градиенты, чтобы добавить красочный фон за объектами, создать тени, придать металлический оттенок или придать изображениям большую глубину. В сочетании с другими инструментами инструмент «Градиент» может помочь вам создавать потрясающие художественные изображения.

Шаг 1

Создайте новое изображение желаемого размера с помощью Pixelmator. Выберите «Файл»> «Создать». В диалоговом окне «Создать» выберите размер изображения и нажмите «ОК».

Шаг 2

Щелкните, чтобы выбрать инструмент «Градиент» на палитре «Инструменты».Значок инструмента «Градиент» станет больше, чтобы вы знали, что это именно тот инструмент, который вы сейчас используете.

Шаг 3

Чтобы рисовать с помощью инструмента «Градиент», выберите предустановку градиента на панели параметров инструмента. Щелкните область градиента и выберите предустановку в появившемся всплывающем окне. Чтобы следовать руководству, выберите градиент цвета радуги.

Шаг 4

Чтобы начать рисование, щелкните в любом месте изображения, чтобы задать начальную точку. Затем переместите указатель в другое место и щелкните еще раз, чтобы установить конечную точку.Более близкая конечная точка создает более короткие градиенты, а более удаленная конечная точка создает более плавный и длинный градиент.

Шаг 5

Все предустановки градиента имеют типы, позволяющие изменять способ рисования каждого градиента. Чтобы изменить тип градиента, откройте палитру «Градиенты» («Просмотр»> «Показать градиенты»). Затем выберите один из переключателей типа градиента: линейный, радиальный или угловой.

• Линейный — закрашивает цвета вдоль нарисованной линии.
• Radial — закрашивает цвета по кругу.
• Angle — Раскрашивает цвета по траектории.

Шаг 6

Вы также можете изменить общий вид градиента. Каждый градиент состоит из двух или более цветовых точек, которые помогают изменить внешний вид градиента. Вы можете легко добавить больше цветов, или удалить, переместить или изменить цвета для любой из цветовых точек. Например, выберите предустановку синего градиента (первая предустановка в верхнем левом углу палитры «Градиенты»).

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

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

Затем попробуйте добавить новую цветовую точку. Чем больше цветовых точек имеет градиент, тем более разнообразным он может быть. Чтобы добавить цветовую границу, переместите указатель на ползунок градиента, пока рядом с указателем не появится знак «плюс». Затем щелкните. Новая цветовая отметка появится прямо в том месте, где вы нажали. Чтобы удалить цветовую границу, просто перетащите ее из палитры «Градиенты».

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

Вы также можете изменить способ рисования градиентных цветов. Для этого щелкните меню «Действие» на панели параметров инструмента и выберите «Обратное направление». Это временно изменит способ, которым точки цвета рисуют градиент. Если вы хотите навсегда изменить цвета градиента, щелкните ползунок градиента, удерживая клавишу Control, и выберите в меню «Обратить цветовые отметки».

Шаг 7

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

Чтобы удалить набор настроек градиента из палитры «Градиенты», щелкните меню «Действие» в палитре «Градиенты» и выберите «Удалить градиент».

Шаг 8

Вы также можете экспортировать созданные вами градиенты (или импортировать другие градиенты).Чтобы экспортировать градиент, просто перетащите его из палитры «Градиенты» на рабочий стол. Значок экспортированного градиента отобразит предварительный просмотр экспортированного градиента.

Это охватывает практически все параметры инструмента «Градиент». Сообщество Pixelmator создало несколько потрясающих предустановок градиента, которые вы можете загрузить и импортировать в свою палитру градиентов, и, конечно же, если вы создадите свои собственные прекрасные градиенты, вы можете поделиться ими с другими!

Создать цветовой градиент поверх изображения, подобного этому, в Photoshop?

Сеть обмена стеков

Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 4 года, 6 месяцев назад

Просмотрено 1к раз

На этот вопрос уже есть ответ :

Закрыт 4 года назад.

Как создать градиент цвета на подобном изображении? Я бы хотел, чтобы фон был достаточно жирным, чтобы можно было видеть поверх цвета.

Создан 03 ноя.

1122 бронзовых знака

Вы начинаете с обычного цветного изображения, верно? Все, что вам нужно сделать, это обесцветить исходное изображение (проще всего использовать корректировку), а затем перетащить градиент с примененным режимом наложения цвета.

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