Градиенты: большой обзор

Сетчатые градиенты

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

В 2020–2021 годах мода на сетчатые градиенты набрала обороты — они действительно выглядят очень эффектно, и поэтому не удивительно, что дизайнеры их любят.

Упаковка шоколада Laroché. Изображение: дизайн Martin Naumann, Andrius Martinaitis

Естественно, как и с обычными градиентами, сетчатые можно выбрать из наборов готовых, например на meshgradients.design или products.ls.graphics. Но с точки зрения уникальности гораздо эффективнее делать mesh-градиенты самостоятельно.

Плагин Mesh Gradient в Figma

Для создания сетчатого градиента в Figma нужно использовать плагин Mesh Gradient. На плоскости устанавливаются опорные точки, которые будут «вершинами» градиента — краска по ним будет «стекать», смешиваясь с краской с других «вершин». На краях плоскости точки установлены по умолчанию.

Рассмотрим интерфейс плагина. В нём можно настроить размер сетки, цвета из углов градиента, отображение элементов управления, а также управление опорными точками mesh-градиента. Для ленивых сделана кнопка Randomize, которая создаёт случайный сетчатый градиент.

Изображение: Skillbox Media

Чтобы включить отображение сетки, проходящей через опорные точки, в параметре Control visibility нужно переключиться на режим Lines. Параметры опорной точки: положение, цвет, регулировки сетки.

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

Изображение: Skillbox Media

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

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Теперь остаётся только нарисовать красивый градиент, используя положение точек и цвета углов. Можно добавить дополнительные точки. Затем выберите размер в правой части кнопки Generate: размер «1x» создаёт файл в размере 512×512 px, размер «5x» — 2560×2560 px. Теперь можно нажать на кнопку Generate.

Изображение: Skillbox Media

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

Веб-сервис Mesh

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

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

Скриншот: сайт meshgradient.com
Скриншот: сайт meshgradient.com

Чтобы добавить точку, нужно кликнуть мышью в произвольном месте, для удаления — нажать на точку, удерживая Shift. Минимальное количество точек — 4, максимальное — 11.

Описать работу сервиса сложнее, чем им пользоваться, поэтому просто переходите в Mesh и создавайте красоту. После создания нажмите Export в правом верхнем углу и сохраните градиент в размере 2000×2000 рх в формате PNG.

Инструмент Контур

Этот инструмент предназначен для создания и редактирования контуров.

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

Контур состоит из узлов и сегментов (линий), которые соединяют узлы.

Существует три режима работы инструмента Контур: режим создания, правки и перемещения. Изменить режим можно в диалоге Параметры инструментов.

Чтобы создать контур нужно:

1.Взять инструмент Контур и щелкая на изображение создать контрольные точки (узлы).

2.Чтобы замкнуть контур нужно удерживая клавишу CTRL щелкнуть в той точке, с которой начинали создание контура.

3.Придать нужную форму передвигая узлы и сегменты.

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

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

Режим создания

Добавить узел: если активный узел находится в конце контура, курсор становится «+» и его нажатие вне активного узла создаёт новый узел, соединённый с предыдущим сегментом. Активный узел отмечается маленьким пустым кругом.

Переместить один или несколько узлов: над узлом курсор становится крестом из четырёх стрелок. Чтобы переместить узел нужно нажать на него и подвинуть в нужное место. Можно выбрать несколько узлов нажатием клавиши SHIFT.

Изменить сегмент: при нажатии на сегмент курсор становится крестом из четырёх стрелок. Чтобы изогнуть сегмент нужно на нем нажать и подвинуть в нужное положение. Как только начнётся движение, появятся манипуляторы по обоим концам сегмента. Удерживание клавиши SHIFT заставляет манипуляторы двух узлов редактируемого сегмента двигаться симметрично.

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

Режим правки

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

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

Удалить сегмент из контура: удерживая комбинацию клавиш SHIFT+CTRL, подведите курсор к сегменту. Рядом с курсором появится знак «-». Щёлкните, на сегменте, чтобы его удалить.

Добавить узел к контуру: подведите курсор к сегменту. Рядом с курсором появится знак «+». Щёлкните в том месте, где хотите добавить узел.

Удалить узел: удерживая комбинацию клавиш SHIFT+CTRL подведите курсор к узлу. Курсор примет вид «-». Щёлкните на узле, чтобы его удалить.

Добавить манипуляторы к узлу: Щелкните на узле, при этом должен появиться манипулятор кривизны.

Режим перемещения

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

Параметры инструмента Контур

Тип действия. Позволяет выбрать режим работы с контуром (создание, правка или перемещение).

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

Выделение из контура. Эта кнопка создаёт выделение, которое основано на текущем контуре. Заметьте, что контур всё ещё существует: активный инструмент всё ещё контур, и этот контур можно изменять, не изменяя выделения, которое стало независимым. Если выбрать другой инструмент, то контур становится невидимым, но он остаётся в диалоге контуров, и его можно активировать снова.

Если контур не закрыт, GIMP закроет его прямой линией.

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

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

Создать новый контур Переместить контур выше Переместить контур ниже Создать копию контура

Преобразовать контур в выделение Преобразовать выделение в контур Обвести контур инструментом рисования Удалить текущий контур

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

В Figma для работы с градиентами используют плагины Webgradients и uiGradients.

Первым делом нужно установить плагины в Figma Community, для этого на странице плагина нажмите на кнопку Install в правом верхнем углу.

Изображение: Skillbox Media

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

Выбрать его можно через поиск, для этого нажмите клавиши Ctrl (⌘) и «/» одновременно, начните вводить название плагина и выберите нужный, кликнув по его названию. Либо можно нажать правую кнопку мыши на объекте, выбрать в открывшемся меню Plugins и кликнуть по названию плагина в появившемся списке. Первый вариант удобнее, если плагинов установлено много.

Изображение: Skillbox Media

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

Изображение: Skillbox Media

В других редакторах градиенты часто добавляют в стандартные шаблоны, но можно воспользоваться веб-сервисом WebGradients, при помощи которого можно получить HEX-значения цветов градиента, CSS-код с параметрами или готовый к использованию файл PNG в размере 2400×2000 px.

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

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

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

Сохранить для Интернета

Когда вы повышаете качество изображения в GIMP, размер файла также увеличивается. Попробуйте уменьшить размер файла и качество ухудшится. Это может быть довольно неприятно, особенно когда вам нужно использовать файл изображения в Интернете. Здесь на помощь приходит этот плагин. Это помогает найти баланс между качеством изображения и размером файла. Он изменяет различные аспекты изображения, которые, как правило, увеличивают размер файла, но не оказывают значительного влияния на качество, такие как количество цветов, размер изображения, степень сжатия и многое другое. Вы можете скачать плагин из http://registry.gimp.org/node/33

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

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

На панели редактора градиента вы видите местоположение градиента Location и цвет Color. Location — это местонахождения ползунка на полоске градиента. Цвет можно выбрать из цвета заднего и передних фонов, которые установлены на панели инструментов Tools. Или произвольный цвет, который вы выберете в диалоговом окне Color Picker. Не обязательно выбирать цвет внизу диалогового окна. Вы можете вызвать Color Picker просто кликнув по ползунку дважды.

Добавить первые два цвета в градиент

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

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

Вейвлет-шумоподавление

Иногда вы щелкаете фотографию, и она идеально отображается на ЖК-дисплее камеры. Но когда вы видите это на большом экране, шум становится очевидным. Обычно фотографии, сделанные в условиях слабого освещения и низкого ISO, содержат много шума. Вы можете использовать различные инструменты GIMP, чтобы уменьшить шум. Но Wavelet Denoise объединяет все элементы управления шумоподавлением в одном окне. Это не только облегчит вашу работу, но и сэкономит много времени. Wavelet Denoise доступен по адресу http://registry.gimp.org/node/4235 и имеет многоязычный пользовательский интерфейс, окно предварительного просмотра, высокую производительность и эффективное профилирование шума.

Также читайте: — Загрузить фотографии и видео в Instagram с Mac

Эффекты слоя

GIMP имеет некоторые встроенные эффекты слоев, но они могут не подходить для сложных проектов. Плагин Layer Effects заполняет пробел и предоставляет GIMP множество эффектов для редактирования слоев. Некоторые из наиболее часто используемых эффектов — это падающая тень, внешнее свечение, обводка, наложение градиента и другие. Хотя большинство эффектов применяется к существующим слоям, для многих требуется создание нового слоя. Коллекция Layer Effects достаточно хороша для большинства пользователей. Загрузите его на http://registry.gimp.org/node/186

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Режимы градиента в Фотошопе

У градиента в Фотошопе есть два режима: Solid и Noise.

• Solid — обычный стандартный градиент, сплошной переход от одного цвета к другому.
• Noise — создает хаотичный шумовой градиент и настраивается совершенно иначе. Переключить режимы можно прямо в диалоговом окне Gradient Editor.

Переключившись на шум, вы сразу попадаете в другие настройки, смысл которых в следующем:

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

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

• Restrict Colors — исключает особенно яркие или перенасыщенные цвета из шумового градиента. То есть если вы эту галочку поставили, то при нажатии на Randomize Фотошоп исключает слишком выбивающиеся из общего ряда цвета.
• Add Transperancy — добавляет невидимость. Если выставить эту галочку вместе с произвольными цветами вы получите и произвольную невидимость. Фотошоп сам будет решать где и как она появится. Она может появиться либо вначале, либо в конце, либо местами в середине, и у вас нет возможности контролировать этот процесс.

Нажимая на Randomize вы оперируете всеми цветами. Но что если вы хотите создать градиент очень определенной цветовой гаммы. Для этого вам даны ползунки с цветом. Двигая их от краев, вы снижаете действие определенного канала цвета, исключая цвета из градиента. Если вы не знаете как работает цветовая гамма RGB, читайте статью RGB каналы в Фотошопе. Она поставит все на места.

Лучше переключитесь на более понятную схему HSB. Допустим я хочу получить шумовой градиент в голубой тональности. Тогда я уменьшаю действие ползунков исключая лишний цвет.

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

Настройка Roudness определяет степень грубости и резкости ваших цветов от самого обычного мягкого градиента до взрывного и кислотного.

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

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

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

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

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

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

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

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

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

Создание градиентов

Технически создание простого градиента не составляет труда, достаточно выбрать цвета для перехода, направление и тип градиента: Linear (линейный), Radial (круговой, радиальный), Angular (угловой, конусный), Diamond (ромбовидный, алмазный).

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Для настройки цветов выделите точку градиента и укажите её цвет и непрозрачность.

Изображение: Skillbox Media

Чтобы задать направление градиента, надо выделить точку на конце отрезка градиента и передвинуть её. Если в этот момент удерживать клавишу Shift, направление градиента будет кратно 45°.

Если надо добавить ещё один цвет в градиент, то надо кликнуть по линии между двумя цветами в нужном месте. Для удаления цвета кликните по точке и нажмите Delete на клавиатуре.

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

Что это за программа

GIMP (GNU Image Manipulation Program) – это мощнейший инструмент по обработке графики, который обладает отличной гибкостью, мощным функционалом и мало чем уступает пресловутому Photoshop. При этом наша программа полностью бесплатна. В ГИМП можно рисовать, работать с дизайном для WEB-сайтов, или обрабатывать другую графику. При помощи приложения легко получить доступ к огромному количеству уже готовых эффектов и других инструментов, аналогов Фотошоп.

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

Основные возможности программы:

• фотографии можно сделать более красочными, передающими настроение;
• можно убрать со снимков лишние детали;
• плакаты и коллажи;
• поддержка работы с графическими планшетами (Wacom, Genius и т. д.);
• подготовка WEB-дизайна и обработка уже существующих проектов;
• поддержка работы с научными данными FITS, DICOM;
• множество различных графических контейнеров, включая PSD или ABR;
• можно использовать маски, слои, различные фильтры, а также алгоритмы смешивания;
• масса самых разных инструментов для редактирования и рисования;
• фоторедактор GIMP можно гибко персонализировать;
• кисти могут работать в динамическом режиме;
• отображается размер слоя. Благодаря поддержке перемещения картинок за пределы слоя, создавать контент стало еще удобнее;
• присутствует несколько режимов умного обесцвечивания;
• масса плагинов, при помощи которых можно значительно расширить функционал программы;
• поддержка вспомогательных палитр, кистей и градиентов (как анимированных, так и растровых). Можно использовать даже кисти от Photoshop;
• поддержка назначения «Горячих клавиш»;
• наша программа полностью выполнена на русском языке. Все названия инструментов хорошо читаются, а при помощи перетаскивания панелей можно настроить программный интерфейс удобным для себя образом;
• GIMPshop имеет открытый исходный код, он предоставляется по лицензии GNU GPL.

Как создать градиент в GIMP

Чтобы создать градиент от красного до зеленого и синего:

1. Щелкните правой кнопкой мыши в любом месте окна предварительного просмотра градиента и выберите «Цвет левой конечной точки» .

2. Выберите оттенок красного и нажмите OK в открывшемся диалоговом окне.

3. Снова щелкните правой кнопкой мыши в окне предварительного просмотра и выберите Цвет правой конечной точки .

4. Выберите оттенок синего и нажмите ОК .

5. Щелкните правой кнопкой мыши по предварительному просмотру и выберите « Разделить сегмент в средней точке» . Каждая сторона теперь будет рассматриваться как отдельный градиент.

   

   

   

   

   

   

   

   

   

   

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

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

7. Выберите оттенок зеленого из диалогового окна и нажмите ОК .

   Запишите число в поле нотации HTML, чтобы вы могли выбрать точно такой же цвет на шаге 9.

8. Выберите правый сегмент, затем щелкните правой кнопкой мыши и выберите цвет левой конечной точки .

9. Выберите тот же оттенок зеленого из диалогового окна и нажмите ОК .

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

Инструмент Текст

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

Редактор текста

Диалог ввода текста

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

Текст можно перемещать с помощью инструмента перемещения, но в этом случае закрывается редактор. Редактирование можно продолжить позже.

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

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

Параметры инструмента Текст

Шрифт. Существует два способа выбора шрифта в GIMP. Первый — из меню диалогов/шрифтов. Второй — из параметра шрифта этого инструмента. Результат выбора шрифта сразу применяется к тексту.

Размер. Позволяет задать размер шрифта в любых единицах измерения.

Сглаживание. Сглаживание покажет текст с более мягким контуром. Это достигается лёгким размыванием границ. Этот параметр может намного улучшить вид текста.

Цвет. Определяет цвет текста. Чёрный цвет установлен по умолчанию. При нажатии появляется диалог выбора цвета.

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

Отступ первой строки. Определяет расстояние от левого края.

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

Выбор исцеления

Вы когда-нибудь испытывали потребность синтезировать часть изображения? Специалистам по редактированию изображений часто необходимо использовать инструмент восстановления, чтобы исправить определенные части изображений. В GIMP есть собственный инструмент исцеления, но многие считают его не очень эффективным. Родной инструмент не такой интуитивно понятный, как вам хотелось бы. Но инструмент Heal Selection делает работу за вас гораздо лучше. В большинстве случаев вы будете использовать этот инструмент для восстановления частей изображений. Но вы также можете исцелить все изображение за один раз, если вам нужно. Вы можете скачать его с http://registry.gimp.org/node/15118.

Также проверьте: — 8 лучших приложений для скрытия фотографий для Android и iOS

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

Во-первых, лучше сразу перевести макет в цветовое пространство CMYK, потому что некоторых цветов из модели RGB в модели CMYK нет.

О том, почему не все цвета RGB воспроизводятся в CMYK и почему не все цвета CMYK можно получить в RGB, читайте .

Переключение в режим CMYK в разных редакторах отличается, но мы остановим свой выбор на Adobe Illustrator как одной из самых популярных программ для графического дизайна и допечатной подготовки. Поэтому, открыв файл, выберите меню «Файл», перейдите в пункт «Цветовой режим документа» и кликните по CMYK.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

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

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

В Adobe Illustrator для растрирования нужно выделить объект с градиентом, затем перейти в меню «Объект» и выбрать «Растрировать…», после чего нажать на ОК.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

В дополнение к растрированию также рекомендуют добавить шум — он смажет градиент и сделает его более равномерным.

В Adobe Illustrator для добавления шума нужно выделить объект, затем перейти в меню «Эффект», выбрать в нем «Текстура» и затем «Зерно». В появившемся окне выставите степень зернистости и нажмите ОК.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

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

Заливки

• Плоская заливка 
• Градиент

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

По умолчанию у инструмента выбран тип заливки – Цвет переднего плана. Изменить тип заливки можно в диалоге Параметры инструментов, выбрав нужный тип заливки.

Параметры инструмента Заливка

Режим. Список режима дает выбор режимов наложения краски. Таким образом, можно получить множество эффектов.

Непрозрачность. Этот параметр определят уровень непрозрачности заполнения.

Тип заливки. GIMP предоставляет три типа заливки: Заливка переднего плана, Заливка фона и Заливка текстурой.

Текстура. Этот список позволяет выбрать текстуру для заливки.

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

Поиск похожих цветов

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

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

Примеры Плоской заливки

Градиент

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

Градиент – это плавный цветовой переход между заданными цветами.

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

Пример заливки градиентом с разной длиной смещения курсора: слева – смещение равно ширине рисунка, справа – меньше.

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

В GIMP есть одиннадцать форм градиента:

Линейный градиент начинается с цвета переднего плана в начальной точке цветового перехода, перетекает постепенно в цвет фона в конечной точке перехода.

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

Радиальный градиент дает круг, центр которого окрашен в цвет переднего плана, края – в цвет фона.

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

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

Спиральная (по часовой стрелке) и  Спиральная (против часовой стрелки). Рисуют спираль, чья ширина повторения зависит т длины нарисованной линии.

Линейная форма	Билинейная форма	Радиальный градиент	Квадратная форма
Коническая сфера	Спиральная форма	Очертания (сфера)	Очертания (рябь)

Параметры инструмента Градиент

Режим. Список режима дает выбор режимов наложения краски. Таким образом, можно получить множество эффектов.

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

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

Форма. Позволяет выбрать одну из существующих форм градиента.

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

Заливка инструментом Градиент в разных режимах повтора: зубцевидная волна (слева) и треугольная волна (справа).

Как итог

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

1. Не ограничивайтесь стандартными инструментами. При работе в Figma используйте плагины:

• Webgradients и uiGradients в качестве набора готовых градиентов;
• Easing Gradients или Easing Gradient для смягчения градиентов;
• Chromatic Figma, чтобы сделать градиенты яркими без серых переходов.

2. Если вы работаете с другим редактором или не хотите устанавливать плагин, то используйте онлайн-сервисы:

• веб-версию плагина WebGradients для выбора красивого готового градиента;
• UI Gradient Generator — он поможет создать чистый градиент, убрав серые оттенки при соединении противоположных цветов;
• Lch and Lab colour and gradient picker для создания чистого градиента по методу Дэвида Джонстона.

3. Не стоит и пытаться создать сетчатый градиент стандартными средствами. Используйте:

• базы готовых градиентов meshgradients.design или products.ls.graphics;
• плагин Mesh Gradient для Figma;
• веб-сервис Mesh.

4. Прокачайте знания по теории цвета, в этом вам помогут наши материалы:

• статья о цветовом круге Иттена;
• подробный гайд по теории цвета Иоханнеса Иттена;
• подборка из девяти лучших книг о цвете;
• большой обзор цветовых пространств.

Что же в итоге?

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

По своему функционалу графический редактор способен конкурировать с Фотошопом и побеждать его. А если учесть, что последний стоит немалых денег, можно в очередной раз убедиться в том, что ГИМП Про остается единственным достойным вариантом для людей, профессионально занимающихся графикой. Еще одним важнейшим преимуществом GIMP является его кроссплатформенность. Программа работает на Windows XP, Windows Vista, Windows 7, Windows 8, Windows 10, Linux и MacOS. Немного ниже будет описана установка официальной версии ГИМП, бесплатно скачать которую можно на этой же страничке.