Работа с цветом – Как работать с цветовой палитрой

Принципы работы с цветом

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

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

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

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

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

Как вам?

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

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

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

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

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

Обычно, я начинаю выстраивать свою палитру в 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, примененных к стандартной цветовой палитре, которую мы выстроили вначале этой статьи.

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

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

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

Источник: deadsign.ru

Оригинал статьи: medium.com

uxguide.ru

Простые догмы при работе с цветом в интерфейсах / Habr

Привет, username!

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

Цвет — это метод создания баланса элементов


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

Характерно, что последовательность восприятия, у большинства пользователей, будет несколько отлична от нумерации рабочих областей, а именно: workspace 2 → workspace 1 → workspace 3, при этом workspace 2 и 3, очевидно, будут восприниматься как основная и второстепенная часть одного сценария.

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

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

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

Используй только сознательно подобранные цвета


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


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

Есть несколько ограничений, которые нужно всегда держать в голове:

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

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


Use the Kuler, Luke!


Во время разработки палитры интерфейса у тебя всегда должен быть открыт Kuler (который Adobe, кстати, на днях переименовала просто в color) или его аналог. Конечно, бывают люди с повышенной чувствительностью к цвету, которые могут навсидку создавать палитры из 4-5 контрастных цветов, но большинство развивает в себе подобное умение годами.
По сути дела, после выбора основного цвета пространство для маневра сразу ограничивается вот этими правилами цветовых отношений:

Можно выделить несколько рекомендаций для работы с кулером:

  • Наилучший второй цвет к уже подобранному основному находится либо по Complementary, либо по правой стороне Triad
  • «Серые» оттенки к основному цвету следует подбирать в Monochromatic, контрастный блеклый фон находится слева от основного цвета, хотя обычно ему приходится либо понижать opacity, либо делать еще более серым вручную (по умолчанию он слишком активный)
  • Акценты находятся по левую сторону Triad
  • Сухой, темный оттенок для контрастного текста обычно находится слева в Compound

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

Делай контраст тоньше


Человеческое зрение очень хорошо умеет адаптироваться к условиям различного контраста, например, его статический контраст равен примерно 100:1, а динамический может достигать 1.000.000:1, поэтому не следует бояться его понижения внутри элементов. При этом восприятие контрастности повышается с уменьшением циклов (грубо говоря, разноцветных элементов). В отличие от реального мира, компьютерный интерфейс имеет весьма примитивную структуру контрастов, небольшое количество цветов и типов элементов. Хороший пример грамотно выстроенного контраста — текущая версия Facebook:

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

Делай естественно


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

Один акцент


Эта рекомендация пересекается так же с рекомендациями из общего маркетинга: следует давать пользователю ясный фокус на одном первостепенном сценарии и делать остальные сценариии явно второстепенными. Отсюда следует хрестоматийное call-to-action. Однако следует понимать, что в 90% случаев call-to-action является кнопкой и предваряется какой-то информативной частью. Это означает что она должна быть легко находима, но не бросаться в глаза первой. Это достигается, например, при помощи яркого, активного цвета в элементе небольшого размера.


Call-to-action как часть сценария workspace 2


Call-to-action как часть сценария workspace 3


Call-to-action как отдельный сценарий. Его можно было, также, сделать одинакового цвета с шапкой

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


Пример из реальной жизни.

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

PS На плохих мониторах и мониторах и с пониженной яркостью приведенные примеры могут смотреться неконтрастно.

habr.com

15 отличных ресурсов для работы с цветом

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

Тут полный набор инструментов для работы с цветом в Web: переводы из одного цветового представления в другое, color picker, color chart и даже много туториалов про цвета.

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

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

Цвета, палитры,  паттерны – все вычисляется, делится, настраивается из заданной картинки. Очень удобный онлайн инструмент для работы с цветом. Убедитесь сами!

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

С помощью этого приложения вы можете увидеть многоаспектный характер цветов и отношения между ними. Все представлено в 3D виде. Свои палитры вы можете импортировать или экспортировать в Adobe Swatch Exchange. В ColoRotate есть свое сообщество, где можно просмотреть темы, созданные другими пользователями.

Главная “достопримечательность” этого ресурса – библиотеки цветов и возможность создавать свои. Приятный интерфейс и хорошо организованные функции. Зацените!

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

Пользуясь тремя ползунками RGB или HSV вы автоматически получите сочетание из шести цветов и затем сможете настраивать их как вам нравится. Цвета автоматически представляются в виде цветового HTML кода и кода RGB. Вы можете экспортировать их в виде цветовых таблиц в Photoshop и Illustrator.

Загружайте свое фото на этот ресурс, разложите его на пиксели и возьмите нужный вам  цвет, сохраните его и используйте!

24 сочных градиента от дизайнера Luke Davies.

 

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

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

Это тот инструмент, который всегда должен быть под рукой у дизайнера. Открывшийся сайт покажет вам пустой экран с единственной ссылкой на черный цвет (#000000). Перемещая курсор по экрану, вы будете видеть, как изменяется цвет фона, а окошко в центре будет показывать соответствующий hex-код этого цвета. Клик мышью создаст полоску текущего цвета с цифровым значением этого цвета.

Этот сайт анализирует другие сайты, а именно их цветопалитру, и выдает вам ее с цветовым кругом и гистограммой.

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

Читайте также:

15 сайтов, которые взорвут ваш мозг

10 приложений с красивейшим дизайном

Как понять, что ваш дизайн завершен?

say-hi.me

Десять ресурсов для работы с цветом

.

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

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

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

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

1. Adobe Kuler

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

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

Несомненным плюсом Adobe Kuler является наличие его плагина в графическом редакторе Adobe Photoshop. То есть вы можете работать с  Adobe Kuler он-лайн, либо используя программу Adobe Photoshop на своём компьютере.

2. ColorScheme

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

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

3. BigHugeLabs

BigHugeLabs – ещё один ресурс, на котором существует сервис Color Palette Generator, позволяющий подобрать цветовую палитру по изображению. Вы можете загрузить изображение с компьютера или прямо из социальных сетей (Фейсбук, Инстаграм).

После загрузки нажимаете «Create palette» (создать палитру) и получаете цветовую палитру. При этом каждому цвету в палитре будет присвоено название и специальный код. Полученную палитру вы можете скачать в формате ASE и использовать в дальнейшем для работы в Adobe Photoshop.

4. Pictaculous

Pictaculous.com – ресурс, позволяющий загрузить изображение и получить его цветовую схему. Несмотря на простоту использования, работать в Pictaculous очень удобно, так как он совместим с другими цветовыми сервисами: Kuler и COLOURLovers. Поэтому, помимо основной схемы изображения вы получите схемы, составленные этими сервисами.

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

5. COLOURlovers

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

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

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

6. ColorCombos

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

Вы можете воспользоваться уже готовыми цветовыми темами, которые находятся в библиотеке цветов. Под каждой цветовой темой имеется html-код, который необходим при написании кода веб-страницы. Если нужно, вы можете составить собственную цветовую тему, зайдя во вкладку Combo Tester.

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

7. ColorExplorer

ColorExplorer – многофункциональный ресурс с большими возможностями работы с цветом. Он был разработан специально для профессиональных дизайнеров. Набор инструментов данного ресурса позволяет не только подбирать цвета и составлять цветовые палитры, но и изучать популярные библиотеки цветов, объединять библиотеки, экспортировать палитры в такие программы, как Adobe Photoshop, Illustrator, InDesign и др.

Для того чтобы получить цветовую тему понравившегося изображения, следует загрузить его через вкладку Image Color Import. Вы увидите все цвета и оттенки (от 3 до 50), имеющиеся на данном изображении.

Очень интересно работать во вкладке Color Matching – это цветовой блендер, позволяющий изменять компоненты цвета с помощью значений RGBи HSL. Подобрав необходимую цветовую палитру, вы можете добавить её к уже существующей, либо сделать замену, ну, и как вариант, сохранить в своих палитрах My Palettes.

8. ColoRotate

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

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

ColoRotate прекрасно работает самостоятельно или в паре с Adobe Photoshop. Также он доступен в качестве приложения для iPad.

9. ColRD

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

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

10. Яндекс

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

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

Автор: Екатерина Малярова
Имиджмейкер, создатель тренингов по имиджу и стилю, автор сайта Гламурненько.ru. С 2007 года свыше 500 клиентов сходили со мной на шоппинги. Более 5000 человек проходили тренинги и семинары по имиджу и стилю.

www.glamurnenko.ru

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

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

Инструменты

Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.

Multicolr — полезный поисковый сервис, который умеет находить по одному или нескольким цветам фотографии на Flickr (более 10 миллионов под лицензией Creative Commons).

Check My Colours — сервис, проверяющий читабельность текста на любом сайта. На скриншоте — часть результатов Хабра.

Sphere — выбор цветов в соответствии с теорией цвета, почти научный подход к выбору палитры

.>

0to255 — помогает тонко выбрать нужный оттенок цвета.

CSS Color Names — наглядно демонстрирует все 147 названий цветов на английском.

Color Hexa — небольшая интерактивная энциклопедия цвета с полезными функциями.

Color Blender — «смешивает» два цвета, находя промежуточный

Таблица «безопасных» цветов, которые можно использовать в веб-дизайне, от Студии Артемия Лебедева. Штука несколько устаревшая, полезна скорее для общего развития, чем практического применения.

Color Palette Generator — составляет цветовую палитру любого изображения.

color.hailpixel.com — полноэкранный выбор цветов, удобно.

Flat UI Colors — простой сервис для выбора цветов из набора Flat UI от Designmodo.

Статьи

В качестве введения полезны статьи из Википедии: Цвет и Список цветов.

Статья о теории цвета на Хабре.

Серия статей о цвете от Smashing Magazine с упором на веб-дизайн, теория и практика, обязательна к прочтению:

  1. Color Theory For Designers, Part 1: The Meaning of Color
  2. Color Theory For Designers, Part 2: Understanding Concepts And Terminology
  3. Color Theory For Designers, Part 3: Creating Your Own Color Palettes

Colors in Web Design: An Exploration — статья на Six Revisions, где на практических примерах объясняется правильное использование цветов в веб-дизайне.

An Introduction to Color Theory for Web Designers — статья от Tutsplus для веб-дизайнеров об использовании цветов на сайтах, в том числе в типографике.

How to Calibrate Color for the Web — подробно описывается калибровка цветов в изображениях, предназначенных для интернета.

Colors in Web Design: Choosing a right combination for your Website — статья от 1stwebdesigner, рассказывающая о пользовательском восприятии цветов в веб-дизайне.

20 colour tips for website design — лаконичные советы по правильному использованию цветов в веб-дизайне.

Книги и другое полезное чтиво

Искусство Цвета, автор Иоханнес Иттен (1888-1967) — одна из самых популярных книг по теории цвета во всем мире. Есть на Озоне.

Color Design Workbook: A Real World Guide to Using Color in Graphic Design — хорошая книга об использовании цветов в дизайне.

The Ultimate Guide to Fantastic Color Usage — не совсем книга от Smashing Magazine, просто так называется, очень практично и структурированно рассказывается о цвете, применительно к веб-дизайну.

The Psychology of Color — удобная памятка о восприятии цветов.

UPD

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

© rutm, habrahabr.ru

infogra.ru

17 инструментов для работы с цветом

Цвет — один из главенствующих факторов успеха любого дизайн-проекта.

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

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

Один из самых мощных инструментов для подбора цветовых палитр. Особенно радует возможность взглянуть (пусть и приблизительно), как эта палитра будет работать на сайте, например. А если ну совсем ничего не получается — можно потыкать в Randomize 🙂

Удобный конвертер цвета в различные цветовые модели.

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

Сервис предоставляет информацию о цвете в различных цветовых моделях.

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

Сервис, который извлекает и хранит информацию о цветах, используемых на популярных (и не очень) сайтах.

Инструмент для создания цветовой палитры на основе изображения, которое вы ему «скормите».

Поиск изображений с лицензией Creative Commons по заданному цвету.

Мощный инструмент для подбора цветовых палитр с помощью цветового круга.

Автоматически генерируемые цветовые градиенты. Обновляются каждый 48 часов.

Коллекция фирменных цветов крупнейших брэндов.

Сервис для генерации цветовой палитры проекта на основе цветов из Google Material Design.

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

Готовые цветовые палитры.

Ещё цветовые палитры.

Куча цветовых палитр, разбитых на категории.

Источник: webtools

infogra.ru

Обработка фотографий. Работа с цветом

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

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

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

Понимание работы с цветом

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

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

Но зато эти фотографии будут отличным примером для понимания целей и задач обработки.

Итак, у нас есть задача – обработать фотографии для фотоальбома. А именно:

  • Сделать реалистичные, красивые цвета.
    Именно реалистичные и именно красивые. Никому не нужно «уникальное видение художника». Поэтому забудем о ч/б, кросс-процессах и прочих интересных цветостилизациях. На наших фотографиях все должно быть как оно есть, но красиво.
  • Обработать фотографии «под формат»
    Каждая из этих фотографий будет занимать целую страницу фотоальбома. Что это значит? Очень просто – каждая из фотографий должна задержать на себе взгляд зрителя. Нам нужно обработать так, чтобы зритель, увидев фотографию, не перешел на следующую страницу. Мы должны создать у зрителя желание внимательно рассмотреть фотографию, приглядеться к деталям. И только потом перевернуть страницу и увидеть новую фотографию.
  • Соблюсти единую стилистику обработки
    Это очень важный момент. Все фотографии должны быть обработаны в одном стиле, чтобы после просмотра фотоальбома у зрителя осталось ощущение целостности всего альбома. Некоторые фотографии могут немного выбиваться из общего стиля (если это оправдано), это даже хорошо. Но это должны быть единичные работы.

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

«Подсолнухи»

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

Зритель, смотря на фотографию, подумает: «Обязательно надо приехать туда, встать посреди поля и насладиться видом подсолнухов до горизонта». Именно эти мысли нам и нужны. Как же вызвать такие мысли у зрителя?

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

Самая большая проблема с обработкой цвета поля – это сочетание зеленого с желтым. Очень важно сделать цвета такими, чтобы зеленый цвет не желтил, а желтый — не зеленил. Только тогда удастся передать «сочность» подсолнухов. Добиться этого довольно сложно, и процесс это трудоемкий. Если вкратце, то это можно делать несколькими путями, в том числе и через работу в каналах LAB. А проверять цвета лучше всего через CMYK – так проще всего узнать соотношение цветовых оттенков на конкретном участке картинки.

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

Осталось только получить вкусную голубизну цвета. Это можно сделать с помощью инструмента Selective Color в фотошоп, или выделить только область неба на картинке и воспользоваться инструментом Hue/Saturation.

«Груши»

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

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

«Резной дедок»

Давайте внимательно посмотрим на оригинальный вариант этой фотографии и подумаем: а почему она нам кажется неинтересной? С композицией все в порядке, свет – объемный. Но почему кадр кажется скучным? Все дело в цвете. В этой фотографии нет цветового объема, из-за этого кадр кажется скучным и не цепляет взгляд. У нас же задача – сделать так, чтобы каждый кадр «держал» страницу фотоальбома. Значит, надо работать с цветом.

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

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

Что было сделано?

  • Прежде всего, необходимо уравновесить всю картинку по яркости. На заднем плане не должно быть пересветов – в данном случае это отвлекло бы наше внимание от главного плана.
  • Также на заднем плане должны быть «свои» цвета. То есть, цвета главного и заднего планов не должны совпадать. Этим приемом мы выделим задумчивого дедка в свой собственный мирок. Он как будто сидит в своих мыслях, вне этого мира.
  • Теперь займемся главным планом. Прежде всего подумаем, какой настрой у фотографии? Добрый и светлый. А значит, и цвета должны быть теплыми. Поэтому раскрасим верхнюю часть дедка теплыми цветами. И обязательно сделаем теплые цвета на стене за ним – ведь свет не может просто оборваться на нашем дедке? Он должен куда-то продолжать падать, а именно – на стену дома.
  • Пришла очередь заняться тенями. В них мы добавим фиолетово-синие оттенки. Это нужно, чтобы, во-первых, создать цветовой объем в кадре, а во-вторых, подчеркнуть задумчивый и загадочный образ нашего дедка.

«Во ржи»

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

В данном случае мы воспользуемся самым «рабочим» приемом привлечения внимания к фотографии – контрастность картинки. Именно контрастность может разбить единую массу ржи на картинке и придать драматизма кадру. Но если мы увеличим только контраст, картинка получится чрезмерно жесткой и потеряет переходы цветов. Чтобы этого избежать, в RAW конвертере поработаем с Shadow/Highlights – света, вытянутые из теневых областей, добавят объема в кадре.

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

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

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

Автор фотографий — Василий Гуреев

fototips.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *