ДизайнУха
03
Dec

О работе с цветом

источникmedium.com
авторJustin Mezzell

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

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

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

Фото: Joshua Earle

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

Давайте посмотрим, как один цвет влияет на один и тот же объект:

Как вам?

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

Этот цвет в работе.

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

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

Соберите цветовую палитру

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

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

Познакомьтесь с вашим новым другом. Его Величество, Adobe Illustrator.

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

Это в основном Montana.

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

Принты этого произведения искусства на данный момент не доступны. Простите, чуваки.

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

Работа со слоями в Photoshop

Добро пожаловать в растровый мир снова! Теперь, когда мы получили наш рабочий файл, давайте перенесем его в удивительный мир фотошопа.

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

  • Curves: регулируемая кривая, которая контролирует тональный диапазон изображения

  • Levels: Регулируемый график, который корректирует тональный диапазон и цветовой баланс изображения с помощью регулировки уровня интенсивности теней, полутонов и яркости.

  • Selective Color: микшер, который непосредственно влияет на определенный цвет

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

Мы можем получить доступ к этим слоям, перейдя в Layer>New Adjustment Layer>, а затем указав, какой тип слоя мы будем добавлять. Для этого примера, давайте начнем работать с Кривыми (Curves).

Кривые (Curves)

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

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

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

Покрутите ей. Покрутите.

Для приведенного выше примера, мы просто работаем с Красным каналом, но мы хотим использовать все 3 в рабочем порядке. Мой личный фаворит — синий, так как он может сделать оттенки холоднее с помощью фиолетовых и синих, также как и сделать теплые желтые ярче.

Сделайте несколько счастливых маленьких ошибок.

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

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

ВВЕРХУ СЛЕВА: оригинальная картинка со стандартным набором палитры. ВВЕРХУ СПРАВА: то же самое изображение после цветокоррекции с помощью Кривых.

Levels (Уровни)

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

Этот розовый круг указывает на 2 слайдера (которые изменяют, слева направо, тень и яркость), с которыми мы сегодня будем работать. Опять же, это не все, что вы можете сделать с уровнями; всего несколько небольших советов для начала.

Кроме того, мы снова вернемся к RGB каналам, чтобы изменять наши каналы независимо друг от друга. Несколько вещей, о которых не стоит забывать: Мы собираемся изменять тени и яркость изображения там, где оно темнее всего и светлее. Это повлияет на «истинность» тонов, а это значит, что наши черные оттенки больше не будут в полной мере черными, а белые не будут по-настоящему белым.

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

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

Совет: Играя с изменением контрастности вашего изображения, вам, возможно, потребуется, немного покрутить Яркость и Контрастность, чтобы сохранить нужные настройки.

ВВЕРХУ СЛЕВА: оригинальная картинка со стандартным набором палитры. ВВЕРХУ СПРАВА: то же изображение с цветокоррекцией уровней.

Selective Color (Избирательная коррекция цвета)

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

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

Помните, когда мы создали этот паттерн, чтобы посмотреть на разные цвета вместе? Давайте проверим это еще раз с некоторыми измененными цветами (с помощью Кривых и Уровней):

О, привет, красный.

Похоже, они сочетаются, но этот красный слишком теплый. Если бы мы только могли отдельно изменить красный, правда? Ребят, похоже сегодня ваш счастливый день.

В таких ситуациях, Selective Color может быть именно тем инструментом, который нам нужен. С помощью него мы можем выбрать один цвет (с какой-то широкой классификацией), и менять его отдельно.

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

В этом примере, мы меняем синий.

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

На этом все (Пока)

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

Если нет, простите за потраченное время.

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

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

Ниже я собрал несколько примеров, получившихся в результате использования только Curves, Levels, и Selective Color, примененных к стандартной цветовой палитре, которую мы выстроили вначале этой статьи.

Цвета. Куда ни глянь.

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

Так что не теряйтесь, начните творить, и создайте сами что то совершенно новое.