Сложность: для начинающих
Продолжительность: короткая

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

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

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

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

1. Начинаем с одного насыщенного цвета

Прежде чем запустить Photoshop или InDesign, посмотрите на ваше изображение. На примере ниже вы можете увидеть несколько наиболее сильных цветов, таких, как например, коричневый и зеленовато-голубой. Именно их и правильнее всего будет использовать в качестве основы цветовой схемы дизайна. В данном конкретном случае зеленовато-голубой можно использовать в области заголовка и фона, а коричневый – для текстового контента, отсветов и декоративных элементов дизайна, вроде прямоугольников и кругов. Так же, очень эффектно будет выглядеть заголовок, выполненный в цвете сливок. Этим же цветом можно набрать текст, и расположив его на темном фоне.

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

3. Использование оттенков и теней

В большинстве случаев вы будете использовать в своих работах более двух цветов. И вместо добавления какого-либо случайного цвета я предлагаю вам обратить внимание на оттенки уже выбранных контрастирующих цветов. Либо того самого доминирующего цвета композиции. Для лаконичного дизайна следует использовать не более 3 основных цветов. Здесь главное правильно выбрать и правильно сочетать при тонировании их оттенки. Использование оттенков существующих цветов значительно расширяет простор для творчества в плане работы с цветом, и, к тому же, исключает появление на холсте случайных, ни с чем не сочетающихся цветов. Вернемся к первому примеру, и попробуем выбрать дополнительные цвета в виде оттенков коричневого и голубовато-зеленого. Оттенок, который впоследствии можно будет использовать для отсветов, получается за счет примеси белого. Это делает результирующий цвет более светлым. А оттенок для будущей тени – за счет примеси черного. То есть исходный оттенок будет затемнен. Другими словами, цветовую схему композиции можно разнообразить осветляя или затемняя базовые цвета. Диапазон, в котором можно производить осветление или затемнение – безграничен, что обеспечивает примерно такой же безграничный простор для экспериментов с оттенками.

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

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

Создание цветовой палитры

Шаг 1
Нажмите Control+O, выберите стоковое изображение и отройте его в фотошопе.

Шаг 2
Выберите инструмент Пипетка (Eyedropper Tool (I)) и кликните по участку, содержащему базовый цвет. Затем нажмите X, и повторите процесс, выбирая контрастирующий цвет. Контрастирующий цвет лучше всего выбирать сразу после выбора основного цвета. На показанном ниже примере видно, что в качестве основного цвета выбран темно-зеленый, а оптимальным контрастирующим с ним цветом оказался красный, который мы и используем для отсветов. Обратите внимание что красный – вовсе не обязательно должен быть эталонно-красным. В данном случае на фото выбран мутновато-красный цвет, содержащий розоватый подоттенок.

Шаг 3
Далее нам понадобится отдельный документ, на котором мы соберем образцы цвета. Этот шаг позволит вам сохранить выбранные цвета для последующего использования, причем вне зависимости от того какую программу вы используете: Photoshop или InDesign. Сохраненный, таким образом, набор, возможно, пригодится вам и для следующих проектов.
Итак, создайте новый документ (Control+N) размером 800x200 пикселей, разрешением 72 пикселя на дюйм (pixels/Inch). Назовите этот документ “Образцы цвета”.

Шаг 4
Выберите инструмент Эллипс (Ellipse Tool) и начертите круг произвольного размера. В моем случае диаметр круга составляет 2 дюйма. Теперь дважды кликните по этому слою на палитре слоев. Вы увидите, что курсор превратится в Пипетку (Eyedropper Tool (I)), и откроется окно выбора цвета. Так, в левой части окна вы сможете задать базовый цвет в качестве Основного/Фонового цвета.

Шаг 5
Повторите этот шаг, задавая контрастирующий цвет.

Шаг 6
Теперь, при активном слое с кругом контрастирующего цвета, зажмите Alt+Shift и указателем мыши сместите этот круг в сторону. Отпустите кнопку мыши, расположив круг, примерно так, как показано ниже. Повторите процесс, создавая следующий дубликат слоя с кругом. В конце концов, у вас должно получиться 4 слоя с кругами. Последние два круга предназначены для нейтрального и тонирующего цвета.

Шаг 7
Вернитесь к своей фотографии и повторите шаг 2, выбирая нейтральный серый цвет. Затем переключитесь на документ с создаваемой палитрой, дважды кликните по слою с третьим кругом и, с помощью инструмента Пипетка (Eyedropper Tool (I)), возьмите образец серого цвета.

Шаг 8
Последний цвет нужен для оттенения базового цвета. Выберите инструмент Пипетка (Eyedropper Tool (I)) и кликните по темно-зеленому кругу, находящемуся слева. Затем двойным кликом по слою с крайним правым кругом, выберите с помощью пипетки зеленый цвет. Теперь нужно выбрать более светлый оттенок этого цвета, находящийся ближе к белой области окна. Остановимся на красивом зеленоватом цвете морской пены, не очень светлом, но и не очень темном.

Шаг 9
Теперь измените порядок слоев с цветными кругами на палитре слоев так, чтобы вам удобнее было ими пользоваться. Ниже показан вариант расположения цветов от базового к контрастирующему. Чтобы сохранить этот документ в качестве изображения, пройдите в меню Файл > Сохранить как > JPEG (File>Save As>JPEG). Присвойте ему какое-нибудь имя, типа “Финальные образцы цвета”. В результате у вас появится палитра, которую вы, при необходимости, сможете использовать и в других проектах.

Хотите узнать больше?

Выбор цвета очень важный этап в работе дизайнера, и для этой цели вы вполне можете использовать уже готовые стоковые изображения. В этом случае, без каких либо дополнительных усилий в вашем распоряжении окажется замечательный цветовой набор. Как этому научиться? Предлагаю вам курс Fundamentals of Print Design, предназначенный для новичков. Он познакомит вас с основами графического дизайна. В нем описан сквозной процесс, начинающийся с дизайна концепта брошюры, и заканчивающийся подготовкой продукта к печати в InDesign.

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

Примечание

Так как эта команда меню не доступна в виде корректирующего слоя, то перед работой не забудьте сделать дубликат слоя, нажав комбинацию клавиш Ctrl+J .

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

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

ШАГ 1

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

ШАГ 2

Щелкните мышью по окну документа, содержащему целевое изображение, чтобы сделать его активным, и выберите в меню команду Изображение => Коррекция => Подобрать цвет . Появится диалоговое окно, в котором текущий документ автоматически будет выбран в качестве целевого (вот почему перед тем, как выбрать в меню команду, вы сделали документ активным).

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

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

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

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

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

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

Существует несколько приемов «подбора цвета» в Фотошоп. Я обычно использую способ коррекции при помощи Карты градиента (Gradient Map) . Чтобы открыть окно данной коррекции, нажмите внизу панели слоев на иконку корректирующих слоев (черно-белый круг) и из списка выберите слой «Карта градиента» (Gradient Map) .

Карта градиента (Gradient Map) .

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

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

Вы можете попробовать несколько цветных градиентов с различными режимами (Blending Mode) их смешивания для достижения разных эффектов.
На изображении ниже вы видите, что средние тона (Midtones) окрашены в зеленый цвет, тени (Shadows) в фиолетовый, а света (Highlights) в оранжевый. Режим смешивания использован Нормальный (Normal) и Карта градиента влияет только на фон.

Вот как это выглядит с тем же градиентом, но с режимом смешивания Жесткий свет (Hard Light) и непрозрачностью (Opacity) 50%.

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

Цветовой баланс (Color Balance) .

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

Коррекция Цветовой баланс (Color Balance) разделяет изображение по всем трем каналам: Тени (Shadows) , средние тона (Midtones) и света (Highlights) , что позволяет настроить цвета отдельно для каждого канала. В нашем примере я увеличил количество зеленых и немного желтых уровней на изображении девушки.

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

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

Причина того, почему я используя коррекцию «Цветовой баланс» (Color Balance) объясняется удобством контроля за всеми тремя каналами изображения.

Цветовой баланс можно также использовать для коррекции основного оттенка изображения. На примере ниже я использовал только канал Светов (Highlights) , чтобы сделать рубашку ярче. Я отбелил рубашку, избавляясь от желтоватого оттенка, увеличив количество голубого и синего цветов (Blue and Cyan) .

Другие способы подбора цвета.

Существует много других способов подбора цвета для элементов композиции. Например, вы можете создать корректирующий слой «Цвет» (Solid Color) , и, после выбора подходящего цвета, изменить режим смешивания (Blending Mode) этого слоя или отрегулировать его непрозрачность (opacity) . Всегда используйте корректирующие слои с Обтравочными масками (Clipping Mask) , если вы хотите, чтобы коррекция влияла только на определенный объект композиции. Вы можете создать Обтравочную маску, нажав пр.кн.мыши по миниатюре корректирующего слоя и выбрав из меню пункт – Create Clipping Mask (Создать обтравочную маску) .

На примере ниже я подобрал изображение девушки на черно-белом фоне. Я хочу, чтобы изображение модели соответствовало цвету фона, и для этого буду использовать корректирующий слой «Цвет» (Solid Color) .

Режим смешивания корректирующего слоя изменяем на «Цвет» (Color) и снижаем непрозрачность (opacity) до 61%. Для повышения контраста изображения девушки я использовал корректирующий слой «Уровни» (Levels) . На обеих коррекциях создаем Обтравочные маски (Clipping Mask) , чтобы они влияли только на слой с моделью.

Фотофильтр (Photofilter) .

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

Если ваш выбранный цвет выглядит непривлекательно в определенном режиме смешивания, попробуйте выбрать менее насыщенные цвета или более темные тона, поскольку действие режима смешивания зависит от степени яркости и насыщенности используемого цвета. Например, темный ненасыщенный синий цвет работает лучше, чем яркий насыщенный синий и использованием режима смешивания Осветление основы (Color Dodge) .

Коррекция Варианты (Variations) .

Существует еще один способ, который я использую в финале своих фотоманипуляций. Он состоит в дублировании (Ctrl+J) слоя, который вы хотите использовать для замены цвета и применения коррекции Варианты (Variations) с последующим снижением непрозрачности (Opacity) слоя. Доступ к данной коррекции выполняется через меню Изображение-Коррекция-Варианты (Image>Adjustments>Variations) . Имейте ввиду, что действие этой коррекции необратимо, поэтому всегда здесь используйте дубликат слоя.

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

У нас есть изображение с красной будкой и нам нужно выделить будку. Как сделать это быстро и качественно? Есть несколько способов, но сегодня мы будем использовать функцию Color Range , которая находится в меню «Выделение» (Select) .

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

Кроме того, если в списке «Демонстрация выделения» (Selection Preview) внизу выбрать Black Matte наше выделение немного поблекнет.

Поэтому мы будем использовать другой метод — выбор цвета (Sampled Colors) . Это позволит выбрать несколько оттенков основного цвета. Нажимайте на телефонную будку, и изменяйте значение Fuzziness . Чем выше будет значение, тем больше выделение будет включать в себя оттенков.

Удерживайте клавишу Shift и нажимайте на оттенки красного на будке, чтобы добавить их к выделению.

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

Вы также можете активировать функцию Localized Color Clusters и изменить значение Range Slider . Это может помочь сфокусировать ваш выбор вокруг области с выбранными цветами. Значение диапазона будет уменьшать выделение вокруг объекта.

Даже после того, как вы настроили эти ползунки, вы можете вернуться назад и удерживая Shift + щелкнуть на области, которые, возможно, вы забыли добавить. Ваш результат не будет 100% совершенен, но мы поработает над этим позже.

Когда вас полностью устроит результат, нажмите «OK» и инвертируйте выделение.

Лучше всего добавить корректирующий слой (Adjustment Layer) , чтобы иметь возможность вернуться к исходному результату.

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

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

Перевод: Дежурка