Теория цвета. Основы.
Любой цвет имеет три измерения: тон, светлота и насыщенность. Все многообразие цветов можно наглядно представить в виде упрощенной трехмерной модели — цветового шара. Каждый цвет измеряется тремя осями: L, a, b.
Итак, рассмотрим каждое измерение подробно.
Светлота (значение, яркость) измеряется координатой L. Это вертикальная ось в середине шара, сверху располагается белый, снизу – черный цвета, между ними представлены все нейтральные серые полутона. Когда цвет двигается по оси шара вверх-вниз, меняется только его светлота. Ее можно представить в одномерном пространстве в виде шкалы серого.
Значения тона и насыщенности находятся в двухмерном пространстве, которое можно представить в виде цветового круга равномерной светлоты. Тон и насыщенность измеряются координатами a и b. Координата а проходит через красный и зеленый цвет, b через синий и желтый.
Тон (оттенок). В горизонтальном сечении шара или круге представлены все тона, одинаковые по светлоте.
Двигаясь по окружности, мы достигаем разного значения тона.
Насыщенность (цветность). При движении вдоль радиуса меняется насыщенность. На внешней стороне окружности располагаются чистые, или спектральные цвета. Приближаясь к центру круга, спектральный цвет постепенно теряет насыщенность и смешивается с серым, тон и светлота при этом не меняются. И, наконец, в самом центре цвет теряет тон и становится ахроматическим. Все смешанные с серым цвета, расположенные между окружностью и центром цветового круга, называются неспектральными.
Рассмотрим различные виды гармоничных сочетаний, цветовые гаммы и палитры.
Ахроматическая гамма.Вся ахроматическая палитра сосредоточена в вертикальной оси цветового шара и представляет собой плавный переход тонов серого от белого к черному. Ахроматические цвета используются в графике, черно-белой фотографии, интерьере. Все искусство работы в ахроматической гамме заключается в выборе формы и светлоты.
Контраст между светлым и темным или, наоборот, плавность тоновых переходов – основные художественные приемы при работе с цветом. С помощью ахроматической гаммы делается акцент на форме или фактуре объектов, достигается успокаивающий или драматический эффект, энергичность или минимализм композиции. При неумелом выборе цветов ахроматическая гамма становится тусклой и невыразительной. Ахроматические цвета находятся в одномерном пространстве, из-за чего иногда выглядят плоскими.
Монохроматическая гамма.
Ахроматическую гамму можно представить в виде вертикальной шкалы с меняющимся значением светлоты. Тон и насыщенность, находящиеся в двухмерном пространстве, мы рассматривали в виде горизонтального круга. Теперь соединим все три параметра: светлоту, тон и насыщенность, но в другом двухмерном пространстве. Для этого представим себе другой круг, в виде вертикального сечения цветового шара. По вертикали меняется светлота, по горизонтали – насыщенность.
Если мы оставим одну половину цветового круга, например, с синим тоном, то получим монохроматическую гамму. Для монохроматической палитры можно взять любой тон, важно, чтобы этот параметр оставался неизменным, пока будут варьироваться светлота и насыщенность.
Если черно-белая фотография имеет ахроматическую гамму, то «сепия» — классический пример монохроматической гаммы. Добавляя всего один параметр – тон, мы получаем из одномерного цветового пространства двухмерное, а вместе с тем и более глубокую, богатую палитру. Вот почему вариант фотографии в тоне «сепия» выглядит более объемным и выигрышным по сравнению с черно-белым.
«сепия» отличается от черно-белой фотографии добавлением оранжевого тона
В использовании монохроматической гаммы легко подобрать оттенки и достигнуть общей гармонии, поскольку все цвета объединены одним тоном. Монохроматическая гамма используется в одежде для создания строгого и элегантного вида, хороша для создания фонов. Монохроматическая гамма в интерьере считается успокаивающей и наиболее подходит для спален, для других интерьеров используется с осторожностью, поскольку избыток одного цвета при длительном воздействии негативно влияет на психику.
Монохроматическая палитра может быть контрастной или нюансной. Если насыщенность и светлота тона варьируются слишком слабо, цветовая гамма становится монотонной, вызывает скуку и подавленное состояние.
контрастная монохроматическая гамма
нюансная монохроматическая гамма
Продолжение. Цветовой нюанс и контраст >>
Как выбрать цветовую гамму для сайта? ⋆ MAXIMUM Блог
Что чаще всего выдает начинающего веб-разработчика? Ошибки в коде? Возможно. Плохая структура сайта? Тут порой ошибаются и опытные разработчики.
В этой статье:
Всё должно быть гармоничноКак подобрать гармоничные цвета?Что влияет на выбор цветовой гаммы?Как составить свою цветовую палитруЛегче всего определить новичка по не самому приятному внешнему виду сайта. Несочетающиеся цвета, нечитаемый шрифт, слишком яркие кнопки — эти мелкие на первый взгляд ошибки говорят о небольшом опыте создания сайтов.
Как не выдать себя? Научиться правильно подбирать цветовую гамму для сайта — гармоничную и вызывающую правильные эмоции.
Всё должно быть гармонично
Когда мы говорим о гармонии цвета, то подразумеваем своё субъективное ощущение — «мне кажется, что этот цвет гармонирует с этим». Но на самом деле, гармония — это объективная закономерность: одни цвета всегда хорошо уравновешивают другие, из-за чего вся цветовая гамма выглядит сбалансированной и гармоничной.
Например, именно поэтому у Халка фиолетовые штаны, а у Железного человека красно-жёлтая броня. Художник не просто так совместил эти цвета — они в принципе хорошо сочетаются:
Как подобрать гармоничные цвета?
Чаще всего для этого используют цветовой круг. Его придумал Исаак Ньютон, когда открыл дисперсию света, разложив белый свет на цветовой спектр. В спектре находятся все возможные цвета, но видим мы только некоторые из них.
В цветовом круге различают основные цвета (красный, жёлтый и синий), которые нельзя получить смешением других цветов, и составные цвета (оранжевый, зелёный и фиолетовый), которые можно получить, смешивая между собой основные цвета.
Чтобы не приходилось подбирать цвета по цветовому кругу вручную, придумали цветовые схемы, которые всегда дают гармоничные комбинации цветов.
К примеру, к основному цвету можно подобрать дополнительный цвет. Такую пару называют комплементарными цветами. Они расположены друг напротив друга, поэтому в сочетании создают сильный контраст. Из-за этого их редко задействуют в качестве основных цветов на сайте — максимум чтобы сделать акцент на чём-то. Зато часто используют в иллюстрациях.
Другая схема — триады цветов. Это комбинации из трёх цветов, которые можно получить, если внутри круга нарисовать треугольник.
Классическая триада — равносторонний треугольник, то есть каждый цвет находится на равном расстоянии от остальных. Один цвет — главный, два других его дополняют.
Контрастная триада (или расщеплённые цвета) — равнобедренный треугольник. Выбираем один цвет в качестве основного, а затем — два дополнительных цвета напротив.
Аналогичные цвета — это соседние цвета на цветовом круге.
Такие сочетания цветов очень гармоничны, поэтому цветовая схема весьма популярна.
Это лишь некоторые из цветовых схем — в действительности их гораздо больше. Фактически, все сочетания цветов, которые можно получить, рисуя внутри цветового круга треугольники, квадраты и прямоугольники — гармоничные. При этом гармония не нарушится даже если эти фигуры вращать внутри круга.
Что влияет на выбор цветовой гаммы?
Иногда тема сайта задаёт тон и диктует условия. К примеру, если сайт связан с растительностью, основным цветом стоит взять оттенок зелёного, а если с водой — оттенок синего. На женских сайтах часто используют оттенки розового (хотя, это уже похоже на стереотип), а на финансовых — жёлтый или золотой цвет.
Дополнительные ограничения накладывает и вид сайта. Так, новостным и коммерческим сайтам подходят нейтральные, спокойные цвета, которые не будут отвлекать пользователя от важной информации. А интернет-магазины, наоборот, стараются быть яркими и красочными — как витрины реальных магазинов.
Также следует помнить, что у людей разного возраста разные предпочтения в цвете:
- детей и молодёжь привлекают яркие краски,
- людей среднего возраста — менее насыщенная гамма,
- старшее поколение — мягкие тона.
Как составить свою цветовую палитру
Можно выбрать цветовую гамму для сайта самостоятельно с помощью особого лайфхака.
Выбираем основной цвет
Старайтесь, чтобы основной цвет не пересекался с основными цветами конкурентных сайтов. И не ведитесь на стереотипы: к примеру, сайт для молодых девушек не обязательно должен быть в розовых тонах. Меньше клише — больше доверия со стороны аудитории.
Когда определитесь с цветом, зайдите на Designspiration, в раздел поиска по цвету, и отметьте на палитре оттенок, который больше всего подходит вашему сайту. Для сайтов, нацеленных на молодую и дерзкую аудиторию стоит выбирать светлые оттенки, а для серьёзных людей — не яркие.
Затем нажмите Search и посмотрите, как использовали этот цвет в своих проектах другие дизайнеры.
Среди их работ можно подглядеть оттенок, который вам подойдёт.
Создаём палитру
В цветовой гамме для сайта вам, скорее всего, потребуется около пяти цветов. В нагрузку к основному цвету нужно подобрать ещё акцентный и три нейтральных цвета. Больше нейтральных цветов добавлять не стоит, иначе может получиться каша.
Чтобы найти акцентный цвет, перейдите на сайт Paletton, укажите там основной цвет и выберите цветовую схему (аналогичные цвета, триада и т. д.) — сервис сам подберёт к вашему основному цвету несколько акцентов. Если результат вам не понравится, можно выбрать другие оттенки с помощью кнопки Randomize.
В качестве одного из трёх нейтральных цветов всегда нужно брать белый. К нему добавляем два оттенка серого: светло- и тёмно-серый. Тёмный оттенок — для текста, а светлый — для создания границ с белым.
В итоге вы получите гармоничную цветовую палитру, на основе которой можно делать визуальный дизайн сайта.
Если морочиться с подбором цветов совсем не хочется, можно воспользоваться одним из множества сервисов для автоматического подбора цветовой гаммы.
Например, Adobe Color CC. Впрочем, полностью автоматизировать этот процесс всё-равно нельзя — ни один сервис не сможет решить, какой основной цвет лучше всего сработает именно на вашем сайте.
Как использовать команду цветового диапазона в Photoshop
Где найти команду цветового диапазона
Первое различие между «Цветовым диапазоном» и «Волшебной палочкой» заключается в том, что «Цветовой диапазон» на самом деле вовсе не является инструментом выделения, поэтому вы не найдете его в сочетании с «Волшебной палочкой» и другими инструментами на панели «Инструменты». Цветовой диапазон — это команда выбора
Выберите «Выбор» > «Цветовой диапазон».
Откроется диалоговое окно «Цветовой диапазон». Если вы какое-то время пользовались волшебной палочкой и только сейчас впервые видите цветовой диапазон, вы можете подумать: «Боже, не чудо, большинство людей все еще используют волшебную палочку! Что, черт возьми, я смотрю? здесь?».
Диалоговое окно «Цветовой диапазон».
Выбор опции
Давайте быстро пробежимся по некоторым элементам, которые мы видим в диалоговом окне «Цветовой диапазон». Сейчас мы рассмотрим наиболее важные параметры, а остальные оставим на потом. В самом верху диалогового окна находится опция
Параметр «Выбрать» установлен на «Цвета выборки».
Параметр «Выбор» определяет, что именно мы будем выбирать на изображении. Если для параметра установлено значение «Выборочные цвета», команда «Цветовой диапазон» ведет себя так же, как «Волшебная палочка».
Мы можем выбрать пиксели, которые имеют одинаковый или похожий цвет, просто щелкнув область этого цвета на изображении. Photoshop «сэмплирует» цвет, на который мы нажали, и выбирает все пиксели, которые совпадают или находятся в определенном диапазоне этого цвета (отсюда и название «Цветовой диапазон»).
В большинстве случаев для параметра «Выбор» следует оставить значение «Выборочные цвета», но, в отличие от команды «Волшебная палочка», команда «Цветовой диапазон» дает нам дополнительные способы выбора пикселей. Если вы нажмете на слова «Выборочные цвета», вы откроете список различных вариантов выбора, которые мы можем выбрать. Например, мы можем мгновенно выбрать все пиксели определенного цвета (красные, желтые, синие и т. д.), просто выбрав этот цвет из списка. Или мы можем быстро выбрать самые яркие пиксели изображения, выбрав «Света», или самые темные пиксели, выбрав «Тени». Эти дополнительные параметры могут пригодиться в определенных ситуациях, но, как я уже упоминал, по большей части вы захотите оставить для параметра значение Sampled Colors, на чем мы сосредоточимся в этом уроке:
дает нам больше возможностей для выбора пикселей, чем то, что мы получаем с Magic Wand.
Инструменты для пипетки
При использовании волшебной палочки для выбора областей схожего цвета на изображении мы щелкаем по изображению самой волшебной палочкой. С Цветовым диапазоном мы нажимаем на изображение пипеткой. Фактически, цветовой диапазон дает нам три инструмента пипетки — один для первоначального выбора, один для добавления к выделению и один для вычитания из выделения — и они находятся в правой части диалогового окна.
Слева направо: основной инструмент «Пипетка» , используемый для первоначального выбора цвета (просто нажмите на изображение с помощью инструмента «Пипетка», чтобы выбрать нужный цвет), инструмент «Добавить в образец» для добавления дополнительных цвета к выделению, и инструмент Subtract from Sample Tool , чтобы удалить цвета из выделения. Мы можем переключаться между инструментами, нажимая на их значки, но на самом деле в этом нет необходимости. Основной инструмент «Пипетка» выбран для нас по умолчанию, и мы можем временно переключаться на другие инструменты прямо с клавиатуры.
Инструменты «Пипетка» (слева), «Добавить в образец» (в центре) и «Вычесть из образца» (справа).
Окно предварительного просмотра выбора
В нижней половине диалогового окна находится окно выбора предварительного просмотра , где мы можем видеть в реальном времени предварительный просмотр того, какие области изображения мы выбрали после щелчка пипеткой. В окне предварительного просмотра наш выбор отображается в виде изображения в градациях серого.
Если вы знакомы с тем, как работают маски слоя, окно предварительного просмотра работает точно так же. Полностью выделенные области изображения будут отображаться в окне предварительного просмотра белым цветом, а невыбранные области — черными. В моем случае в данный момент ничего не выбрано, поэтому мое окно предварительного просмотра в настоящее время заполнено сплошным черным цветом. Как мы увидим, команда «Цветовой диапазон» также способна частично выбирать пиксели, поэтому она дает нам лучшие и более естественные результаты, чем «Волшебная палочка». Частично выделенные области отображаются в окне предварительного просмотра в виде оттенков серого. Опять же, через мгновение мы увидим, как это работает:
Окно предварительного просмотра выбора.
Нечеткость
После того, как мы щелкнули цвет на изображении, Photoshop продолжает и выбирает все пиксели изображения того же цвета, а также пиксели, похожие на этот цвет, либо светлее, либо темнее. Но насколько точно могут быть светлее или темнее другие пиксели, чтобы их можно было включить в выделение? Нам нужен способ сообщить Photoshop, каков допустимый диапазон, чтобы все пиксели, попадающие в этот диапазон, были включены в выделение, а пиксели, выходящие за пределы этого диапазона, либо потому, что они слишком светлы, либо слишком темнее, чем цвет, на который мы нажали, не будет выбран.
И Magic Wand, и команда Color Range дают нам возможность сообщить Photoshop, каким должен быть приемлемый диапазон. С Magic Wand мы используем параметр
Если выбрана функция «Волшебная палочка», параметр «Допуск» на панели параметров устанавливает допустимый цветовой диапазон.
Диалоговое окно «Цветовой диапазон» дает нам аналогичный способ установки допустимого диапазона, за исключением того, что здесь он называется не «Допуск», а « Нечеткость» и имеет большое преимущество перед параметром «Допуск» в Magic Wand.
Мы используем значение Fuzziness так же, как мы используем Tolerance. Чем выше мы устанавливаем значение Fuzziness, тем больше уровней яркости мы включаем в допустимый диапазон. Значение Fuzziness, равное 40, например, выберет все пиксели того же цвета, что и пиксель, на который мы нажали, плюс все пиксели, которые в пределах 40 значений яркости светлее или темнее. Любые пиксели, яркость которых на 41 или более уровней светлее или темнее, будут исключены из выбора.
Вариант «Допуск», однако, очень похож на случай «попал или промахнулся». Если мы щелкнем изображение с помощью волшебной палочки и поймем, что не получили нужного выделения, потому что использовали неправильное значение допуска, все, что мы можем сделать, это ввести другое значение, затем щелкнуть изображение и повторить попытку. Этот подход «проб и ошибок» к выбору пикселей может очень быстро разочаровать. Именно здесь команда «Цветовой диапазон» действительно превосходит «Волшебную палочку». В отличие от значения допуска, которое заставляет нас угадывать правильное значение до мы нажимаем на изображение, значение размытости можно легко настроить после мы нажали! Все, что нам нужно сделать, это щелкнуть один раз по изображению, чтобы сделать начальный выбор, а затем мы можем настроить выделение, просто перетащив ползунок «Размытость» влево или вправо, чтобы увеличить или уменьшить диапазон.
Предварительный просмотр нашего выбора появится в окне предварительного просмотра, когда мы перетащим ползунок, поэтому вообще не нужно догадываться. Чуть позже мы увидим пример того, как работает Fuzziness:
Параметр «Размытость» — это версия «Цветовой диапазон» параметра «Допуск» Magic Wand.
Теперь, когда мы рассмотрели основы диалогового окна «Цветовой диапазон», давайте посмотрим на него в действии. Вот документ, который я открыл в Photoshop, состоящий из простого градиента от темно-голубого к светло-синему с желтой полосой посередине:
Синий градиент, разделенный по горизонтали желтой полосой, но вы это уже знали.
Допустим, я хочу выделить часть синего градиента с помощью команды «Цветовой диапазон». Во-первых, я пойду до Выберите меню в верхней части экрана и выберите Color Range . Затем, когда появится диалоговое окно «Цветовой диапазон», я удостоверюсь, что выбран мой основной инструмент «Пипетка» (который, как мы узнали, уже должен быть выбран по умолчанию):
Убедитесь, что основной инструмент «Пипетка» активен.
При активном основном инструменте «Пипетка» я щелкну где-нибудь в середине градиента, чтобы выбрать оттенок синего:
Щелчок в середине градиента с помощью инструмента «Пипетка».
Если мы посмотрим на окно предварительного просмотра выбора в диалоговом окне, мы увидим, что я выбрал часть изображения на основе оттенка синего, на котором я щелкнул. Белая область представляет выбранные пиксели, а черные области не являются частью выделения:
Мой первоначальный выбор в окне предварительного просмотра.
Если я нажму на другую часть градиента, я получу другой результат. На этот раз я нажму на более темный оттенок синего:
.Щелчок инструментом «Пипетка» на более темном оттенке синего.
Окно предварительного просмотра теперь показывает мне, что я выбрал другую часть изображения:
Щелчок по более темному оттенку синего привел к другому выбору.
И если я нажму на более светлый оттенок синего в градиенте:
Нажав на более светлый оттенок синего.
Окно предварительного просмотра обновляется, показывая, что я выбрал более светлую часть изображения:
Теперь выбраны более светлые оттенки синего. Более темные оттенки не выбираются.
Обратите внимание, что где бы я ни щелкал по синему градиенту, Photoshop полностью игнорировал желтую полосу посередине. Если я нажму на желтую полосу:
Щелчок по желтой полосе.
Предварительный просмотр теперь показывает мне, что выбрана желтая полоса, а синий градиент над и под ней игнорируется:
Теперь выбрана желтая полоса. Синий градиент — нет.
Я собираюсь снова щелкнуть в середине синего градиента, чтобы мы могли поближе рассмотреть параметр «Размытость» и то, как он позволяет нам корректировать выделение на лету:
Повторный щелчок в середине градиента.
Мы видим в окне предварительного просмотра, что я снова выделил область посередине:
Вернуться к исходному выбору.
Когда я нажал на середину градиента, мое значение Fuzziness было установлено на 40, что означает, что Photoshop выбрал именно тот оттенок синего, на который я нажал, плюс на 40 оттенков светлее или темнее.
Но что, если мое значение Fuzziness недостаточно велико, и мне нужно выбрать больший диапазон цветов? Не проблема! Все, что мне нужно сделать, это перетащить ползунок Fuzziness вправо, чтобы увеличить диапазон. Когда я перетаскиваю ползунок, окно предварительного просмотра обновляется, чтобы показать мне мой новый выбор. Я увеличу значение Fuzziness до 100, что означает, что теперь я выбираю все пиксели, которые в пределах 100 уровней яркости светлее или темнее, чем оттенок синего, на который я первоначально нажал. Я вижу в окне предварительного просмотра, что теперь я выбрал гораздо большую часть градиента. Точно так же я мог бы перетащить ползунок влево, чтобы уменьшить значение Fuzziness, и в этом случае было бы выбрано меньше градиента:
Увеличение значения Fuzziness с помощью ползунка увеличивает выделенную область в окне предварительного просмотра.
Обратите внимание, что отображение в окне предварительного просмотра не ограничивается только чисто белым и чисто черным цветом.
Вместо этого он плавно и постепенно переходит от белого к серому и к черному. Это потому, что команда Color Range способна частично выбирать пикселей . Любые пиксели, которые не имеют точного цвета, на который мы нажали, но все же попадают в допустимый диапазон яркости (задается значением Fuzziness), будут частично выделены. Это серые области в окне предварительного просмотра. Чем ближе область к цвету, на который мы нажали, тем больше она будет выделена, представленная более светлыми оттенками серого. Более темные оттенки серого представляют области, которые находятся дальше от цвета, по которому мы щелкнули, и менее выделены. Эта возможность «частично выбирать» пиксели может показаться немного странной, но именно поэтому команда «Цветовой диапазон» дает нам гораздо более плавные и естественные выделения, чем то, что мы могли бы получить с помощью «Волшебной палочки».
Добавление к выбору
Помимо изменения значения Fuzziness, мы также можем использовать инструмент Add to Sample , чтобы добавить области к нашему первоначальному выбору.
Однако, как мы уже узнали, нет необходимости тратить время на выбор инструментов пипетки в диалоговом окне. Все, что нам нужно сделать, чтобы временно переключиться с основного инструмента «Пипетка» на инструмент «Добавить в образец», — это нажать и удерживать клавишу Shift . При нажатой клавише Shift появится маленький знак плюс ( + ) появится в правом нижнем углу курсора-пипетки, сообщая вам, что вы переключили инструменты. Отпустив клавишу Shift, вы вернетесь к основному инструменту «Пипетка» (знак «плюс» исчезнет).
Я верну значение Fuzziness обратно к 40, просто чтобы было легче видеть:
Возврат значения Fuzziness к 40.
Чтобы добавить больше градиента к моему первоначальному выделению, я удерживаю нажатой клавишу Shift, которая переключает меня на инструмент «Добавить в образец», и я просто щелкаю область, которую хочу добавить. Я выберу более яркий оттенок синего:
Щелкните изображение с помощью инструмента «Добавить в образец» (удерживая клавишу Shift).
Если мы посмотрим на окно предварительного просмотра, то увидим, что к моему выбору добавились более светлые оттенки синего:
Выбрано больше градиента.
Вы также можете перетащить по области изображения с помощью инструмента «Добавить в образец», чтобы сразу добавить к выделению весь диапазон цветов или значений яркости. Опять же, я буду удерживать нажатой клавишу Shift, чтобы получить доступ к инструменту «Добавить в образец», затем я щелкну и перетащу через большую область градиента:
Перетаскивание с помощью инструмента «Добавить в образец».
И теперь мы видим в окне предварительного просмотра, что я добавил еще больше градиента к своему выделению:
Результат после перетаскивания с помощью инструмента «Добавить в образец».
Вычитание из выделенного
Мы также можем вычесть области из выделения с помощью инструмента Subtract from Sample Tool . Опять же, нет необходимости брать его из диалогового окна.
Просто удерживайте Alt (Win) / Вариант (Mac) на клавиатуре, чтобы временно переключиться на инструмент «Вычесть из образца». Маленький знак минус ( — ) появится в правом нижнем углу значка пипетки. Нажмите на область, которую вы хотите удалить из выделения, затем отпустите клавишу Alt (Win) / Option (Mac), чтобы вернуться к основному инструменту «Пипетка», когда вы закончите.
Я нажму на более темную область градиента с помощью инструмента «Вычесть из образца»:
Щелчок с помощью инструмента «Вычесть из образца».
Окно предварительного просмотра теперь показывает, что я удалил эти более темные оттенки синего из выделения:
Результат после щелчка инструментом «Вычесть из образца».
Одна проблема, однако, с инструментом «Вычесть из образца» заключается в том, что он не работает так же хорошо, как инструмент «Добавить в образец», и не всегда легко предсказать, какие результаты вы получите от него.
Если вы допустили ошибку с помощью инструмента «Добавить в образец» и добавили не ту область к своему выделению, часто бывает проще просто отменить последний шаг и повторить попытку. Команда «Цветовой диапазон» дает нам один уровень отмены, поэтому, если вы допустили ошибку с помощью инструмента «Добавить в образец», нажмите 9.0005 Ctrl+Z (Win) / Command+Z (Mac) на клавиатуре, чтобы отменить действие, затем повторите попытку.
Когда вы довольны предварительным просмотром выбора, нажмите «ОК» в правом верхнем углу диалогового окна «Цветовой диапазон», чтобы закрыть его:
Щелкните OK, чтобы закрыть диалоговое окно.
Затем Photoshop отобразит ваш выбор в документе в виде стандартного контура выделения «марширующих муравьев». Имейте в виду, однако, что в большинстве случаев команда «Цветовой диапазон» будет частично выделять определенные пиксели, и что Photoshop может отображать контур выделения только вокруг пикселей, которые выделены не менее чем на 50%.
Любые пиксели, выделенные менее чем на 50 %, будут выходить за пределы контура выделения, а это означает, что контур может быть не совсем точным представлением вашего выделения. Это не большая проблема, просто нужно помнить:
Теперь вокруг выделенной части градиента отображается стандартный контур «марширующих муравьев».
Давайте быстро взглянем на реальный пример, который также даст нам возможность взглянуть на оставшиеся параметры в диалоговом окне «Цветовой диапазон». На этом изображении я хотел бы выбрать только красные розы в букете, чтобы оставить их цветными, а остальную часть изображения преобразовать в черно-белую:
Розы нужно выбрать.
С открытым диалоговым окном «Цветовой диапазон» и активным основным инструментом «Пипетка» я щелкну один раз внутри одной из роз, чтобы сделать первоначальный выбор цвета:
Щелкните один раз, чтобы выбрать начальный оттенок красного.
Мы можем увидеть мой первоначальный выбор в окне предварительного просмотра:
Первоначальный выбор появляется в окне предварительного просмотра.
Чтобы добавить больше областей к моему выделению, я нажимаю и удерживаю клавишу Shift , которая временно переключает меня на инструмент «Добавить в образец», и я нажимаю на другие оттенки красного в розах. Я также могу перетаскивать область, как мы видели с градиентом, чтобы добавить сразу несколько оттенков красного к моему выделению:
Удерживая Shift, щелкните, чтобы выбрать больше оттенков красного.
В окне предварительного просмотра отображаются области, которые были добавлены к выделению:
Новые добавленные разделы отображаются в предварительном просмотре.
Параметры предварительного просмотра
Один из вариантов окна предварительного просмотра, который мы еще не рассматривали, — это возможность просмотра самого изображения внутри окна предварительного просмотра, а не просмотра выделенного в оттенках серого. Если вы посмотрите прямо под окном предварительного просмотра, вы увидите две опции — Выбор и Изображение .
Чтобы переключиться в режим просмотра изображения, выберите параметр Изображение . Вы даже можете щелкнуть изображение в окне предварительного просмотра, а не в окне документа, чтобы сделать и отредактировать свой выбор. Вы можете не найти эту опцию особенно полезной, но она есть, если вам это нужно. Чтобы вернуться к просмотру предварительного просмотра в градациях серого, выберите параметр Selection (который выбран по умолчанию):
Выберите «Изображение», чтобы просмотреть изображение в окне предварительного просмотра. Выберите «Выбор», чтобы просмотреть предварительный просмотр в оттенках серого.
Гораздо более полезная опция предварительного просмотра находится в самом низу диалогового окна «Цветовой диапазон». Параметр Selection Preview управляет тем, что мы видим в окне нашего документа. По умолчанию установлено значение None , что означает, что мы видим наше фактическое изображение в окне документа:
Опция предварительного просмотра выбора.
Если щелкнуть слово «Нет», откроется список дополнительных вариантов: Оттенки серого , Черный матовый , Белый матовый и Quick Mask — каждая из которых дает нам разные способы предварительного просмотра текущего выделения в окне документа. Я выберу первый, Оттенки серого:
Выбор оттенков серого в окне предварительного просмотра выбора.
И теперь, если мы посмотрим в окно моего документа, а не на изображение, мы увидим полноразмерный предварительный просмотр моего текущего выделения в градациях серого. Это тот же предварительный просмотр, который отображался в окне предварительного просмотра, но он гораздо полезнее при просмотре в полном размере:
Полноразмерная версия предварительного просмотра выбора в оттенках серого теперь отображается в окне документа.
Еще один очень полезный способ предварительного просмотра вашего выбора — выбрать Black Matte в опции Selection Preview:
Выбор черного матового изображения в окне предварительного просмотра выбора.
Это мой любимый способ предварительного просмотра моего выбора, потому что он отображает само фактическое изображение или, по крайней мере, области изображения, которые в данный момент находятся внутри моего выбора, на сплошном черном фоне:
Выбранные области изображения теперь отображаются на черном фоне в окне документа.
Вы также можете выбрать White Matte , который будет отображать выбранные области изображения на сплошном белом фоне, или Quick Mask для просмотра выделения с красным наложением Quick Mask. Все четыре параметра могут быть полезными для предварительного просмотра вашего выбора в окне документа. Чтобы вернуться к просмотру изображения, установите для параметра «Предварительный просмотр выбора» значение «Нет».
Локализованные кластеры цветов (Photoshop CS4 и выше)
Заметьте, однако, что я столкнулся с небольшой проблемой. Я хочу выделить на фотографии только красные розы, чтобы сохранить их в цвете, а остальную часть изображения преобразовать в черно-белую, но если вы посмотрите на самый верх документа на предыдущем снимке экрана, вы увидите что я также выбрал верхнюю часть женского платья, потому что она такого же красного цвета, как и розы.
В Photoshop CS4 Adobe добавила новую функцию в команду «Цветовой диапазон» под названием 9.0005 Локализованные кластеры цветов . Мы можем использовать эту опцию, чтобы ограничить области на фотографии, где Photoshop будет искать совпадающие цвета. Я щелкну внутри флажка, чтобы включить параметр (опять же, параметр «Локальные цветовые кластеры» доступен только в CS4 и выше):
Включение локализованных цветовых кластеров.
Как только мы включаем Localized Color Clusters, другая опция, Range , становится доступной непосредственно под ползунком Fuzziness. Если для параметра «Диапазон» установлено значение 100% (или если параметр «Локальные цветовые кластеры» отключен), Photoshop будет искать по всему изображению области совпадающего цвета, чтобы добавить их к нашему выбору. Но когда мы уменьшаем значение диапазона, перетаскивая ползунок влево, мы говорим Photoshop смотреть только на области фотографии, которые находятся ближе к областям, на которые мы нажали, и игнорировать области, которые находятся слишком далеко от того места, где мы нажали.
Другими словами, я могу сказать Photoshop игнорировать красную часть женского платья в верхней части фотографии и сосредоточиться только на областях, близких к розам (области, которые я щелкнул для выборки цветов), просто снизив диапазон. ценить. Я уменьшу значение диапазона примерно до 50% или около того. И сейчас. если мы посмотрим на верхнюю часть окна предварительного просмотра, то увидим, что оно стало сплошным черным, что означает, что женское платье больше не является частью выделения, потому что оно слишком далеко от роз:
.При уменьшении значения диапазона верхняя часть фотографии была удалена из выделения.
Я продолжу щелкать внутри роз с помощью инструмента «Добавить в образец», чтобы добавить больше областей к выделению. Затем я уточню свой выбор с помощью ползунка Fuzziness. В примере с градиентом, который мы рассмотрели ранее, мы увидели, как добавить к выделению, увеличив значение Fuzziness, но с этим изображением я на самом деле собираюсь немного сузить выделение, немного снизив значение Fuzziness.
Наконец, я изменю значение своего диапазона, чтобы еще больше сузить выбор, и после нескольких минут игры с настройками (вам часто придется переходить к настройкам назад и вперед, чтобы все было правильно), Я доволен своим окончательным результатом:
Мои окончательные настройки цветового диапазона.
Инвертирование выделения
И последнее, что мне нужно учитывать, это то, что в настоящее время у меня выбраны розы, но на самом деле мне нужно, чтобы все кроме розы были выбраны. Другими словами, мне нужно инвертировать мое выделение, чтобы все, что выделено в данный момент (розы), стало невыделенным, а все, что в данный момент не выделено (остальная часть фотографии), стало выделенным.
Чтобы инвертировать выделение в диалоговом окне «Цветовой диапазон», все, что нам нужно сделать, это выбрать параметр «Инвертировать » под пипетками. Это также инвертирует предварительный просмотр выделения в градациях серого в окне предварительного просмотра, поскольку мои розы (теперь залитые черным) больше не являются частью моего выбора, а остальная часть изображения (залитая белым) теперь выделена:
Выбор параметра «Инверсия».
Чтобы завершить выделение, я нажму «ОК» в правом верхнем углу диалогового окна, чтобы закрыть команду «Цветовой диапазон», и теперь мы видим стандартные контуры выделения «марширующие муравьи» в моем документе. Как я упоминал ранее, контур выделения появляется только вокруг пикселей, которые выделены не менее чем на 50%, а это означает, что то, что мы видим, часто не совсем точно:0011
В документе отображается стандартная схема выделения.
Чтобы быстро закончить эффект, я щелкну значок «Новый корректирующий слой» в нижней части панели «Слои»:
Щелкните значок «Новый корректирующий слой».
Затем я выберу корректирующий слой Black & White из появившегося списка:
Выбор черно-белого корректирующего слоя.
Добавляет черно-белый корректирующий слой над моим изображением на фоновом слое. Мы можем видеть на миниатюре предварительного просмотра маски слоя, что Photoshop применил выделение, которое я создал с помощью команды «Цветовой диапазон», к маске корректирующего слоя:
Недавно добавленный черно-белый корректирующий слой.
Я пока оставлю корректирующий слой «Черно-белый» с настройками по умолчанию, просто чтобы мы могли видеть, что благодаря возможности команды «Цветовой диапазон» выбирать розы на основе их цвета, я смог легко изолировать их от остальное изображение, чтобы они могли оставаться цветными, а все остальное преобразовывалось в черно-белое:
Окончательный результат.
применений и комбинаций • Silo Creativo
$89
Все наши премиальные темы в комплекте тем
При выборе цветовой гаммы для наших дизайнов нет абсолютной истины чтобы выбрать правильный, так как нет возможности ошибиться в выборе полностью (ну может такое и бывает 😉 ) Мы должны выбрать диапазон цветов, который лучше всего соответствует тому, что мы хотим отразить . И мы хотим отразить конкретную вещь, в зависимости от того, для кого предназначен дизайн. Как мы уже говорили: « вдохновение должно найти вас работающим, », так что давайте начнем с самого начала.
Объективность цвета
Мы знаем, что чувств больше, чем цветов, поэтому один и тот же цвет может напоминать нам разные чувства которые часто противоречат друг другу. Наглядный пример в минусе. Если мы думаем о красном, мы можем думать о «любви», чувстве, которое соединяет, или об «огоне», о чувстве, которое все разрушает. В зависимости от нашего настроения и нашего опыта одно из этих двух изображений будет появляться перед другим. Если я говорю зеленый, то мы с вами, конечно же, видим не один и тот же зеленый цвет. Я знаю, что Мар Валенсуэла увидит бирюзово-зеленый, Рикардо Прието увидит зеленый Бетис (футбольная команда), и каждый человек, читающий эту статью, будет думать в другой цветовой схеме.
Таким образом, мы находим, что цвет, возможно, является более субъективным фактором при разработке . Но, как мы видели в статьях о цветах, все цвета имеют различные объективные факторы, которые должны помочь нам выбрать, какой диапазон цветов подходит для нашего дизайна.
Нам нужно знать, какова функция нашего дизайна и аудитория, которой он адресован, и как только она будет прояснена, начать создавать дизайн для них. Например, если аудитория моего логотипа — дети, я буду использовать ряд ярких цветов, привлекающих их внимание; если вместо этого аудитория — это люди, которые пострадали от жестокого обращения, цвета будут пастельными и спокойными, возможно, голубыми, дающими необходимый им покой.
Когда у нас есть основной цвет, мы должны создать диапазон этого цвета, чтобы получить те цвета, которые так зависимы. Как и в типографике, есть комбинации, более подходящие, чем другие, и в цветах также есть диапазоны, более подходящие, чем другие, для конкретного дизайна. О шести цветах мы уже говорили в других статьях, поэтому запомним те, которые давали примеры цветовой гаммы. Что вы думаете?
ПРИМЕЧАНИЕ. В каждом из диапазонов отображаются номера веб-цветов (#), которые вы можете легко ввести в таких программах, как Illustrator или Photoshop.
ОРАНЖЕВЫЙ
Этот цвет связан с изменением . Это цвет современности, нового и необычного. Это не просто любой цвет. Хотя это не любимый цвет большинства людей, он нам нравится почти во всех дизайнах и рекламе. Каждый хочет быть другим и искать ту «вещь», которая делает нас разными, и именно это дает нам оранжевый цвет в дизайне. Это оригинальный цвет .
Оранжевая цветовая палитра
Этот диапазон даст нам теплота , в то время как он отмечает оригинальный символ, который мы можем использовать, если хотим выделиться среди конкурентов. Оранжевый прекрасно сочетается с зеленым , потому что они соединяют естественное с оригинальным, создавая место, где люди чувствуют себя комфортно. Мы также можем получить хороший диапазон цветов с землистыми тонами .
ЧЕРНЫЙ
Хотя многие это отрицают, черный — это цвет. На самом деле, это не просто любой цвет, а тот, который 9 мая0005 олицетворяет величайший страх из всех: смерть, и при этом остается самым элегантным цветом .
В большинстве случаев ему сопутствуют негативные коннотации, поскольку многие худшие события человечества описываются как черные. Однако ситуация изменилась, и теперь черный цвет означает роскошь, элегантность и эксклюзивность . Это ярчайший пример смены трендов.
Черная цветовая палитра
Будучи таким специфическим цветом, чаще всего мы используем его в дизайне один, подчеркивая это ощущение роскоши. Однако он сочетается со всеми цветами, хотя это рискованно в зависимости от того, что вы разрабатываете . В большинстве случаев черный сочетается с белым.
СИНИЙ
Если бы мы говорили, что цвета представляют собой противоречивые чувства, синий является исключением, так как он не относится ни к какому отрицательному чувству . Это цвет, который повсюду: дома, на одежде, в дизайне… Единственное место, где мы не находим этот цвет, — это еда. Хотя это классный цвет, он также подразумевает тишину и покой , поэтому холодность можно убрать с помощью сопоставления других цветов.
Это самый легкий цвет для запоминания, и он нравится большинству людей.
Синяя цветовая палитра
Может быть, это цвет с наибольшим количеством возможностей . Только с синими оттенками мы можем получить идеальный диапазон цветов для наших дизайнов. Синий тоже очень легко сочетается с зеленым и красным . Взяв зеленый и синий и выбрав три цвета, которые развиваются между ними, мы получим идеальный диапазон цветов. Это также цвет, который можно использовать в самых разных областях. мы могли бы говорят, что вы почти никогда не ошибетесь с этим цветом.
КРАСНЫЙ
Самый популярный цвет во всем мире. Хотя это не наш любимый цвет, нормально думать о красном, так как это первый цвет, который мы видим. Это цвет красок, цвет страсти и рекламы . Красный — это цвет, который представляет чувства, поэтому люди отождествляют себя с ним. Красный — это сила, страсть… и хотя это также и гнев, если мы правильно его используем, мы можем контролировать этот гнев.
Красная цветовая палитра
Это очень привлекательный цвет в дизайне, хотя мы можем использовать его с различными цветами, он также подходит для использования отдельно или в сочетании с белым. Однако он идеально сочетается с зеленым , с серым … Красный обладает большой силой, поэтому, если мы объединим его с серым, он сохранит и подчеркнет его силу. Наоборот, если мы объединим его с зеленым, его сила уменьшится. Это хорошо в тех случаях, когда использование красного цвета может быть насильственным. Мы думаем, что красный — это наш цвет, и мы комбинируем его с белым и серым, потому что нам нравится сила, которую он передает.
ЗЕЛЕНЫЙ
Больше, чем просто цвет, это чувство . Когда мы думаем о зеленом, мы представляем себе естественное; это цвет, который нравится людям. Это цвет, который находится посередине, поэтому он передает приятные чувства; ни холодно ни жарко. Это цвет здоровья и здоровья.
Но это также и цвет незрелости, отсутствия опыта. Хотя он имеет некоторые негативные коннотации, например, быть ядовитым, он не ассоциируется с плохим, что делает зеленый очень популярный цвет .
Зеленая цветовая палитра
Сочетается с серией землистых цветов . Коричневый, оранжевый или бежевый напоминают нам о натуральности и согревают. Все эти цвета дарят нам тепло и уют, напоминают о местах, где мы уже были и которые нам нравятся. Это диапазон цветов, используемый дома . Более того, как было сказано в синем, они идеально сочетаются.
ЖЕЛТЫЙ
Это, пожалуй, самый нестойкий цвет . Только с оттенком красного становится оранжевым, а синий с оттенком зеленого. Более того, как мы уже говорили, это один из цветов, которые представляют смешанные чувства. Это цвет оптимизма, но также и зависти, гнева… Некоторые бренды используют его, но это рискованный цвет в дизайне, потому что он небезопасен.