Подобрать картинку по цветовой гамме: Цветовой поиск — Cut the Fish! — LiveJournal

4 способа и 2 онлайн-сервиса подбора цветовой гаммы в веб-дизайне

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

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

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

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

Правила подбора цветовой гаммы для сайта:

• Кол-во цветов: 2-3 шт.
• Цвет текста: белый или черный (исключение заголовки)
• Контрастные цвета фона и элементов сайта (если у вас фон темный, то цвет текста или элемента сайта поверх фона должен быть светлый и наоборот)

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

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

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

Также стоит учитывать то, что постоянной рекламой через телевизор, билборды, листовки и т.п. нам «запрограммировали» в мозг ассоциации цвета с какими-то компаниями и соответсвенно какими-то качествами. Например зеленый — сбербанк (очереди, негатив), красный- cocacola (жажда, радость).

Крайне не рекомендую подбирать цвета на основе своих чувств или чувств заказчика. Лучше посмотрите кто целевая аудитория — это даст вам больше понимания какие лучше цвета подобрать.

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

• Игровой портал (аудитория: школьники и студенты) — соответсвенно у них все хорошо со зрением поэтому можно использовать 3-7 цветов и очень яркие оттенки.
• Информационный сайт по выращиванию морковки (аудитория: пенсионеры) — со зрением почти у всех буду проблемы, поэтому цветов 1-2 максимум, фон обязательно белый или светло-серый и никаких ярких оттенков.

Как сфера деятельности сайта влияет на подбор цветовой гаммы?
Давайте для примера возьмем два сайта:

• Сайт бизнес-тематики — тут все должно быть очень строго и просто. Если вы посмотрите топовые сайты в этой нише, то увидите, что основные цвета белый и черный, иногда коричневый. (как собственно и в реальной жизни: костюмы, машины, аксесуары)
• Женский форум — обычно у людей которые там сидят «парящее» настроение и зачастую там идет обсуждение не вещей и предметов, а эмоций, поддержка друг друга и т.п. Поэтому здесь лучше подобрать легкие постельные тона розового или голубого цвета.

Как тип сайта может повлиять на выбор цветов для сайта?
Давайте рассмотрим еще один пример:

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

Как цель страницы может вносить изменения в цветовую гамму сайта?
У каждой страницы есть цель: например человек должен перейти на следующую страницу или он должен позвонить или оставить свои контакты или положить что-то в корзину магазина, кликнул по рекламе и т.д. Иногда случается так что основной цветовой гаммы не хватает и если у владельца сайта есть большое желание в ущерб дизайну повысить конверсию и прибыль, то вы можете выделять нужные элементы яркими контрастными цветами привлекая к ним внимание. Например на всем сайте у вас будут зеленые и белые оттенки, но чтобы привлечь внимание к форме заявки вы можете обвести ее красным или синим. Из личного опыта могу сказать что это гарантированно повысить конверсию за счет контраста, но будет убого смотреться. Тут стоит ориентироваться на цели и задачи сайта. Лично я предпочитаю конверсию, мне все равно что это кому-то не понравится 🙂 Но на первоначальном этапе, особенно если вы перфекционист вас будет ломать словно наркомана чтобы принять решение оставить убогий дизайн в угоду конверсии 🙂

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

Итак способы подбора цветовой гаммы на сайте:
1) Подбор цветов на основе природы (небо, земля, растения, животные и т.д.) там все гармонично и если вы возьмете все что создано Богом, то сможете выбрать на основе этого гармоничную цветовую гамму. Например давайте возьмем дерево.

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

3) Подбор цветовой гаммы на основе логотипа.
Часто если вы будете работать с более-менее крупной компании то у нее будет логотип. И проще всего воспользоваться уже существующими на лого цветами, потому как вероятнее всего вас все равно об этом попросят:) Единственное исключение — не стоит использовать данный способ, если логотип состоит из всех цветов радуги, иначе у вас получится не сайт, а мигающий баннер.

4) Самый лучший способ, не придумывать а скопировать уже оптимальную цветовую гамму:
Зайдите на themeforest или 365psd и просто возьмите самые популярные шаблоны, с вероятность в 80-90% там будет гармоничная цветовую гамму.
Дальше вам просто нужно сохранить картинку, открыть в фотошопе и с помощью пипетки определить основные цвета.

[sociallocker id=»346″]

Теперь давайте рассмотрим 2 классных сервиса которыми я сам пользуюсь и рекомендую вам, особенно если вы любите стили flat и material:

• www.flatuicolors.com — здесь уже заготовка из 20 готовых цветов в стиле flat, даже если вы будете тыкать мышкой наугад, то скорее всего цветовая гамма все равно получится гармоничной, чтобы ее испортить нужно еще иметь талант 🙂
• www.materialpalette.com — аналогичный сервис, также с подборкой из 20 готовых цветов, но уже в стиле material (в отличаи от flat гораздо более ярких). Лично я использую почти всегда именно этот сервис.

[/sociallocker]

Трендовые Инструменты и Цветовые Схемы для Разработки

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

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

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

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

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

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

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

Какие инструменты являются наиболее подходящими и популярными для выбора схем веб-цвета в оформлении

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

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

Kuler

Пример интерфейса сервиса Kuler. Источник.

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

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

Плагины этого сервиса доступны для многих структур Adobe, Photoshop, Illustrator и InDesign. Все эти факторы делают этот сервис необходимым для работы многофункциональным инструментом.

ColorExplorer

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

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

Color on the Web

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

ColourLovers

Пример подборки палитры по картинке при помощи ColourLovers. Источник.

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

Также это пространство постоянно пополняется с учетом последних тенденций в области веб-дизайна.

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

Pictaculous

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

Этот инструмент имеет возможность для совмещения с Colourlovers и Kuler. Такое отношение позволяет использовать данный ресурс как самостоятельный компонент, а также как сопутствующий портал.

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

Contrast-A

Объемная цветовая подборка из Contrast-A. Источник.

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

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

ColoRotate

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

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

При работе можно совмещать этот инструмент с различными приложениями, например, Creative Suite. Дополнительно он представлен в качестве отдельного приложения для устройств с операционной системой iOS. Его можно интегрировать с Photoshop, при этом сервис будет работать в качестве цветовой консоли.

Color Scheme Designer

Цветовая палитра и ее отображение в Color Scheme Designer. Источник.

Благодаря этому порталу можно получать несколько различных и интересных в своем исполнении вариантов для воспроизведения цветовых схем. Данный  инструмент относится к группе онлайн сервисов и имеет некоторые схожие черты с Adobe Kuler.

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

• яркости;
• насыщенности;
• контрастности.

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

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

Copaso

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

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

ColourGrab

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

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

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

ColorBlernder

Интерфейс ColorBlernder. Источник.

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

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

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

После получения идеальной подборки можно сразу произвести выгрузку готовой палитры в инструмент Photoshop или Illustrator. Выгрузка производится в формате EPS.

Colrd

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

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

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

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

Colourmod

Этот сервис представляется в виде виджета для рабочего стола. С его помощью можно легко подобрать необходимую цветовую гамму для оформления. При его использовании можно осуществлять выбор цветов из любой зоны, где применяется этот инструмент. Его можно интегрировать в программу Dashboard, которая применяется на MacBook. Вместе с этим его можно использовать для программы Konfabulator, осуществляющая свою работу на базе операционной системы Windows. Такое разнообразие применения делает этот виджет максимально универсальным в плане подбора для разных устройств.

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

Выводы

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

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

На сегодняшний день популярностью пользуются:

• монохромное оформление страниц;
• мнималистичные и некричащие цвета;
• наличие градиентных переходов;
• присутствие спокойных оттенков в светлом подтоне;
• или локаничные темные выделения ключевых деталей.

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

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

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

Определить цвет по фото онлайн

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

Содержание

• Get Color — программа для определения цвета
• Imgonline — сервис, который поможет подобрать цвет по фото
• Color Palette Generator — генерация палитры онлайн
• Colr.org — определяет цвет по картинке
• Colourlovers — покажет HEX-код любой фотографии
• ColorGrab — приложение для идентификации цвета по фото
• Coolors — онлайн-сервис для анализа цветовой палитры
• Imagecolorpicker — поможет понять, какие цвета использованы на картинке

Get Color — программа для определения цвета

В программе Get Color можно узнать HEX-код цвета и его название, а также получить на него ссылку. Чтобы ознакомиться с доступными функциями, перейдите по ссылке get-color.ru. Данные онлайн-сервис специализируется на создании красивых и гармоничных палитр на основе заданных оттенков по фото.

HEX представляет собой систему унификации. Согласно ей, каждому цвету присваивается 16-значный код. Он может быть переведен в:

• HSL. Модель конвертирует цвета в различные градации серого.
• RGB/RGBA. Формат для художников и веб-дизайнеров.
• CSS/CSS3. Так называется кодировка для верстки HTML.
• CMYK. Это модель для применения в полиграфическом дизайне.

HEX-код представляет цвет в виде цифробуквенных комбинаций. Например, #CC2E2E. Первая пара символов представляет собой насыщенность красным цветом, вторая указывает на уровень зеленого. Третья расскажет о содержании синего. Нужного оттенка можно добиться, манипулируя сочетаниями символов.

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

Изменение фона в приложении GetColor

В самом верху экрана есть клавиша для перехода к инструменту «Пипетка».

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

Читайте также: Как подобрать цвет волос онлайн по фото бесплатно.

Imgonline — сервис, который поможет подобрать цвет по фото

Отличный многофункциональный онлайн-сервис, который позволяет проводить за считанные секунды все ключевые операции по обработке изображений. Зайти в нужный раздел сайта можно по данной ссылке imgonline.com.ua.

Как определить цвет по фото с его помощью:

1. Загрузить картинку с компьютера;
   Выбрать изображение на IMGonline
2. Задать нужные настройки и кликнуть ОК;
   Завершение настройки IMGonline
3. Получить результат и скачать изображение с привязанной к нему палитрой.
   Как сохранить результат IMGonline

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

Color Palette Generator — генерация палитры онлайн

Сервис по этой ссылке degraeve.com/color-palette автоматически сгенерирует палитру из основных цветов предложенной вами иллюстрации.

Как с ним работать для определения цвета по фотографии:

1. Просто вставьте URL понравившейся иллюстрации в поле для ввода. Опции «Загрузить со своего компьютера» тут не предусмотрено.
2. Нажмите на кнопку Color-Palette-ify!
   Кнопка для генерации палитры
3. Скопируйте коды нужных цветов или сделайте скриншот страницы. Сохраните результат. После этого можно будет подгружать его в графический редактор и забирать цвет пипеткой.

У того же разработчика есть также такая программа как ColorHunter. Она позволяет очень легко и быстро подбирать красивые коллекции оттенков на основе фотографий. Найти ее можно тут colorhunter.com.

Интерфейс ColourHunter

Цвет будет подобран по HEX-коду. Программа поддерживает API для загрузки изображений с Flickr.

Еще один интересный проект от того же создателя – Logo Maker logoshi.com.

Сервис Logoshi

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

Это может быть полезным: Как узнать название комнатного цветка по фото.

Colr.org — определяет цвет по картинке

Данный сервис colr.org красиво раздробит ваше изображение на составляющие цвета. Это будет выглядеть следующим образом:

Интерфейс онлайн-сервиса Colr

Colourlovers — покажет HEX-код любой фотографии

Это инструмент для определения HEX-кода по фото онлайн. Здесь вы сможете сделать палитру из своего фото, или взяв любое изображение на Flickr. Чтобы поработать с ним, отправляйтесь сюда colourlovers.com/palettes/add.

 

Интерфейс Colourlovers

ColorGrab — приложение для идентификации цвета по фото

Для владельцев смартфонов на базе Андроид существует приложение Color Grab.

Как с ним работать, чтобы определить цвет по фотографии в режиме онлайн:

1. Запустите программу. Наведите фотокамеру на нужный объект.
2. Приложение немедленно выведет информацию об обнаруженном цвете: координаты HSV, RGB, название. Сохраните его в библиотеке.
3. После этого цвет можно экспортировать в графический редактор, разослать в виде текстового файла по почте или в соцсетях, отправить в Dropbox, поставить на рабочий стол.

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

Коллекция цветов в Colorgrab

Coolors — онлайн-сервис для анализа цветовой палитры

Сервис Coolors поможет проанализировать основные цвета снимка или картинки.

Как с ним работать, чтобы узнать, что за цвет изображен на фото:

1. Сверху на панели инструментов видно схематичное изображение фотокамеры. Щелкните по ней.
   Создание палитры по фото в Coolors
2. Перед вами появится окно для загрузки. Найдите картинку с интересной цветовой гаммой на своем компьютере и залейте ее на сайт. Также можно вставить в специальную графу ссылку на изображение, лежащее на стороннем ресурсе.
   Загрузка картинки на сайт Coolors
3. Вы можете вручную выбирать основные цвета, формируя палитру. Поставьте курсором точку на ячейку, в которую будет сохраняться ваш выбор. Затем щелкните по месту на картинке, чтобы взять нужный цвет.
   Как добавить цвет с фото в палитру Coolors
4. Нажав на кнопку «Next», можно экспортировать палитру в формате png или просмотреть информацию о выбранных оттенках.
   Где найти кнопку Next в онлайн-программе Coolors

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

Кнопка для перехода к созданию коллажа

Далее:

1. Покрутите снизу на шкале настройки, чтобы добиться наиболее удачного цветового расклада.
   Как менять цветовой расклад Coolors
2. Нажмите «Next». Найдите в маленьком всплывающем меню опцию «Create Collage». Кликните по ней.
   Как создать коллаж в Coolors
3. Посмотрите, как может выглядеть ваша палитра.
   Внешний вид палитры
4. Выбирайте, какой аспект картинки будет отображаться.
   Выбор аспекта в Coolors
5. Определитесь, как именно организовать цвета.
   Возможности сервиса Coolors

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

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

Названия кнопок:	Назначение:
View shades.	Щелкните здесь, и сервис покажет список родственных оттенков – от самого светлого до самого темного.
Drag.	Нажатие этой кнопки позволит вам затем произвольно перемещать цвет по палитре. Так можно проверить, как он смотрится в другом окружении.
Lock.	Если кликнуть на эту опцию, то при каждом обновлении палитры выбранный вами цвет останется зафиксированным.

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

Дальтонизм Coolors

Нажав на кнопку Explore, вы увидите подборку популярных цветовых палитр. Большое множество настроек делает данный ресурс крайне удобным для художников и дизайнеров.

Раздел Популярное в Coolors

Читайте также: Поиск по фото в соц. сетях.

Imagecolorpicker — поможет понять, какие цвета использованы на картинке

Простой онлайн-сервис Imagecolorpicker.com позволяет быстро определить ключевую цветовую палитру.

Как определить цвет по фото с его помощью:

1. Залейте на сайт нужную картинку;
2. После загрузки сервис автоматически подскажет, какой цвет является доминирующим.
3. Нажмите на кнопку «Показать больше»;
   Где находится кнопка Узнать больше
4. Вы получите исчерпывающую информацию по любому из оттенков на палитре.
   Окно с дополнительной информацией

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

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

Как работать с сайтом Coolors.co

Опубликовано 21 июля 2020 в рубрике «Программы»

Как использовать инструмент GIMP «Выбор по цвету» для выделения — Parker Photographic

Фото Джессики Льюис

Знание того, какой параметр выбора использовать в GIMP, — это полдела при редактировании изображений. Другая половина знает, как его использовать. Когда дело доходит до инструмента «Выбор по цвету», он делает то, что следует из его названия; делает выбор на основе цвета!

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

Содержание

Что такое инструмент «Выбрать по цвету»,

в GIMP

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

Выделение по цвету в некотором роде похоже на нечеткое выделение. Оба делают выбор на основе цвета. Но разница есть…

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

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

И Fuzzy, и Select by Color имеют почти идентичные возможности настройки параметров. Он имеет пять основных разделов для точной настройки того, что выбрано. Давайте рассмотрим каждый раздел, чтобы вы знали, как каждый из них влияет на то, что выбрано.

Сначала откройте инструмент «Выбор по цвету» с помощью сочетания клавиш Shift + O. Если панель «Параметры» еще не видна, выберите «Окна» > «Закрепляемые диалоговые окна» > «Параметры инструмента».

В этом разделе вы найдете четыре значка со следующими свойствами…

• Заменить: Основной режим, создающий начальную точку. Если вы останетесь в этом режиме и щелкнете еще раз, он отобразит новые цвета и соответствующим образом отрегулирует выбранное.
• Добавить: Эта опция добавит к выбранному.
• Вычесть: Это вычитает из того, что выбрано.
• Intersect: Я понятия не имею, что это делает, и у GIMP нет документации по этому поводу.

Поведение

Эти настройки улучшат качество краев выбранного объекта.

• Сглаживание: Этот параметр активирован по умолчанию и уменьшает неровные края.
• Feather Edges: Чтобы дополнительно уточнить, насколько гладкими будут края, используйте это и отрегулируйте ползунок радиуса, отображаемый при активации.
• Выбрать прозрачные области: Если на изображении есть прозрачные области, используйте этот параметр, чтобы включить их в выборку.
• Sample Merged: Это полезно, когда у вас есть несколько слоев в вашем изображении. Активный слой полупрозрачен или установлен в режим слоя, отличный от нормального. Если этот параметр не отмечен, будет выбран только цвет активного слоя. Если он активирован, он проверит оттенки во всех видимых слоях.

Threshold

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

Выберите по

Используйте эту настройку, если вы хотите настроить таргетинг на определенный канал оттенка: Композитный (RGB), Красный, Зеленый, Синий, Альфа, Оттенок HSV, Насыщенность HSV, Значение HSV, Яркость LCh, Цветность LCh, и LCh Hue.

Нарисовать маску

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

Советы по использованию инструмента «Выбор по цвету»

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

Простое фото

Фото Дельфины Хурлей

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

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

После понижения порогового значения до 50 я использовал режим «Добавить», чтобы уточнить выделение. Потребовалось несколько кликов по каждому фрагменту, чтобы выбрать 95%.

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

Комплекс Фото

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

На этой фотографии показано, что выбрано при пороговом значении 25…

Фото Маркуса Списке

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

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

Что дальше?

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

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

Понравилась статья? Если это так, пожалуйста, поделитесь!

Выбор цветовых диапазонов в Photoshop

Руководство пользователя Отменить

Поиск

1. Руководство пользователя Photoshop
2. Знакомство с Photoshop
   1. Мечтай. Сделай это.
   2. Что нового в Photoshop
   3. Отредактируйте свою первую фотографию
   4. Создание документов
   5. Фотошоп | Общие вопросы
   6. Системные требования Photoshop
   7. Перенос предустановок, действий и настроек
   8. Знакомство с Photoshop
3. Photoshop и другие продукты и услуги Adobe
   1. Работа с иллюстрациями Illustrator в Photoshop
   2. Работа с файлами Photoshop в InDesign
      
   3. Материалы Substance 3D для Photoshop
   4. Photoshop и Adobe Stock
   5. Используйте встроенное расширение Capture в Photoshop
   6. Библиотеки Creative Cloud
   7. Библиотеки Creative Cloud в Photoshop
   8. Использование панели Touch Bar с Photoshop
   9. Сетка и направляющие
   10. Создание действий
   11. Отмена и история
4. Photoshop на iPad
   1. Photoshop на iPad | Общие вопросы
   2. Знакомство с рабочим пространством
   3. Системные требования | Фотошоп на iPad
   4. Создание, открытие и экспорт документов
   5. Добавить фото
   6. Работа со слоями
   7. Рисовать и раскрашивать кистями
   8. Сделать выбор и добавить маски
   9. Ретушь ваших композитов
   10. Работа с корректирующими слоями
   11. Отрегулируйте тональность композиции с помощью Кривых
   12. Применить операции преобразования
   13. Обрезка и поворот композитов
   14. Поворот, панорамирование, масштабирование и сброс холста
   15. Работа с текстовыми слоями
   16. Работа с Photoshop и Lightroom
   17. Получить отсутствующие шрифты в Photoshop на iPad
   18. Японский текст в Photoshop на iPad
   19. Управление настройками приложения
   20. Сенсорные клавиши и жесты
   21. Сочетания клавиш
   22. Измените размер изображения
   23. Прямая трансляция во время создания в Photoshop на iPad
   24. Исправление недостатков с помощью Восстанавливающей кисти
   25. Создание кистей в Capture и использование их в Photoshop
   26. Работа с файлами Camera Raw
   27. Создание смарт-объектов и работа с ними
   28. Отрегулируйте экспозицию ваших изображений с помощью Dodge and Burn
5. Photoshop в Интернете, бета-версия
   1. Общие вопросы | Photoshop в Интернете, бета-версия
   .
   2. Введение в рабочее пространство
   3. Системные требования | Photoshop в Интернете, бета-версия
   4. Сочетания клавиш | Photoshop в Интернете, бета-версия
   5. Поддерживаемые типы файлов | Photoshop в Интернете, бета-версия
   6. Открытие и работа с облачными документами
   7. Сотрудничать с заинтересованными сторонами
   8. Применение ограниченных правок к вашим облачным документам
6. Облачные документы
   1. Облачные документы Photoshop | Общие вопросы
   2. Облачные документы Photoshop | Вопросы по рабочему процессу
   3. Управление и работа с облачными документами в Photoshop
   4. Обновление облачного хранилища для Photoshop
   5. Невозможно создать или сохранить облачный документ
   6. Устранение ошибок облачного документа Photoshop
   7. Сбор журналов синхронизации облачных документов
   8. Делитесь доступом и редактируйте свои облачные документы
   9. Делитесь файлами и комментируйте в приложении
7. Рабочее пространство
   1. Основы рабочего пространства
   2. Настройки
   3. Учитесь быстрее с помощью панели Photoshop Discover
   4. Создание документов
   5. Поместить файлы
   6. Сочетания клавиш по умолчанию
   7. Настройка сочетаний клавиш
   8. Инструментальные галереи
      
   9. Параметры производительности
   10. Использовать инструменты
   11. Предустановки
   12. Сетка и направляющие
   13. Сенсорные жесты
   14. Использование панели Touch Bar с Photoshop
   15. Сенсорные возможности и настраиваемые рабочие области
   16. Превью технологий
   17. Метаданные и примечания
   18. Сенсорные возможности и настраиваемые рабочие пространства
       
   19. Размещение изображений Photoshop в других приложениях
   20. Линейки
   21. Показать или скрыть непечатаемые дополнения
   22. Укажите столбцы для изображения
   23. Отмена и история
   24. Панели и меню
   25. Позиционные элементы с привязкой
       
   26. Положение с помощью инструмента «Линейка»
8. Дизайн веб-сайтов, экранов и приложений
   1. Photoshop для дизайна
   2. Монтажные области
   3. Предварительный просмотр устройства
   4. Копировать CSS из слоев
   5. Разрезать веб-страницы
   6. Опции HTML для фрагментов
   7. Изменить макет среза
   8. Работа с веб-графикой
   9. Создание фотогалерей в Интернете
9. Основы изображения и цвета
   1. Изменение размера изображений
   2. Работа с растровыми и векторными изображениями
   3. Размер изображения и разрешение
   4. Получение изображений с камер и сканеров
   5. Создание, открытие и импорт изображений
   6. Просмотр изображений
   7. Недопустимая ошибка маркера JPEG | Открытие изображений
   8. Просмотр нескольких изображений
   9. Настройка палитр цветов и образцов
   10. Изображения с высоким динамическим диапазоном
   11. Сопоставьте цвета на изображении
   12. Преобразование между цветовыми режимами
   13. Цветовые режимы
   14. Стереть части изображения
   15. Режимы наложения
   16. Выберите цвет
   17. Настройка индексированных таблиц цветов
   18. Информация об изображении
   19. Фильтры искажения недоступны
   20. О цвете
   21. Настройка цвета и монохрома с использованием каналов
   22. Выбор цветов на панелях «Цвет» и «Образцы»
   23. Образец
   24. Цветовой режим или Режим изображения
   25. Цветной оттенок
   26. Добавить условное изменение режима к действию
   27. Добавить образцы из HTML CSS и SVG
   28. Битовая глубина и настройки
10. Слои
    1. Основы слоев
    2. Неразрушающее редактирование
    3. Создание и управление слоями и группами
    4. Выберите, сгруппируйте и свяжите слои
    5. Поместите изображения в рамки
    6. Непрозрачность слоя и смешивание
    7. Слои маски
    8. Применение смарт-фильтров
    9. Композиции слоев
    10. Переместить, сложить и заблокировать слои
    11. Слои маски с векторными масками
    12. Управление слоями и группами
    13. Эффекты и стили слоя
    14. Редактировать маски слоя
    15. Извлечение активов
    16. Отображение слоев с помощью обтравочных масок
    17. Создание ресурсов изображения из слоев
    18. Работа со смарт-объектами
    19. Режимы наложения
    20. Объединение нескольких изображений в групповой портрет
    21. Объединение изображений с помощью Auto-Blend Layers
    22. Выравнивание и распределение слоев
    23. Копировать CSS из слоев
    24. Загрузить выделение из границ слоя или маски слоя
    25. Knockout для отображения содержимого других слоев
    26. Слой
    27. Выпрямление
    28. Композитный
    29. Фон
11. Выборки
    1. Рабочая область выбора и маски
    2. Сделать быстрый выбор
    3. Начало работы с выборками
    4. Выберите с помощью инструментов выделения
    5. Выберите с помощью инструментов лассо
    6. Выберите диапазон цветов в изображении
    7. Настройка выбора пикселей
    8. Преобразование между путями и границами выделения
    9. Основные сведения о каналах
    10. Перемещение, копирование и удаление выбранных пикселей
    11. Создать временную быструю маску
    12. Сохранить выделение и маски альфа-канала
    13. Выберите области изображения в фокусе
    14. Дублировать, разделять и объединять каналы
    15. Вычисления каналов
    16. Выбор
    17. Ограничительная рамка
12. Настройки изображения
    1. Деформация перспективы
    2. Уменьшить размытие изображения при дрожании камеры
    3. Примеры лечебных кистей
    4. Экспорт таблиц поиска цветов
    5. Настройка резкости и размытия изображения
    6. Понимание настроек цвета
    7. Применение регулировки яркости/контрастности
    8. Настройка деталей теней и светлых участков
    9. Регулировка уровней
    10. Настройка оттенка и насыщенности
    11. Настройка вибрации
    12. Настройка насыщенности цвета в областях изображения
    13. Быстрая настройка тона
    14. Применение специальных цветовых эффектов к изображениям
    15. Улучшите изображение с помощью настройки цветового баланса
    16. Изображения с высоким динамическим диапазоном
    17. Просмотр гистограмм и значений пикселей
    18. Сопоставьте цвета на изображении
    19. Как обрезать и выпрямить фотографии
    20. Преобразование цветного изображения в черно-белое
    21. Корректирующие слои и слои-заливки
    22. Настройка кривых
    23. Режимы наложения
    24. Целевые изображения для прессы
    25. Настройка цвета и тона с помощью пипеток «Уровни» и «Кривые»
    26. Настройка экспозиции и тонирования HDR
    27. Фильтр
    28. Размытие
    29. Осветлить или затемнить области изображения
    30. Выборочная настройка цвета
    31. Заменить цвета объектов
13. Adobe Camera Raw
    1. Системные требования Camera Raw
    2. Что нового в Camera Raw
    3. Введение в Camera Raw
    4. Создание панорам
    5. Поддерживаемые объективы
    6. Эффекты виньетирования, зернистости и удаления дымки в Camera Raw
    7. Сочетания клавиш по умолчанию
    8. Автоматическая коррекция перспективы в Camera Raw
    9. Как выполнять неразрушающее редактирование в Camera Raw
    10. Радиальный фильтр в Camera Raw
    11. Управление настройками Camera Raw
    12. Открытие, обработка и сохранение изображений в Camera Raw
    13. Исправление изображений с помощью инструмента Enhanced Spot Removal Tool в Camera Raw
    14. Поворот, обрезка и настройка изображений
    15. Настройка цветопередачи в Camera Raw
    16. Обзор функций | Adobe Camera Raw | 2018 выпусков
    17. Обзор новых функций
    18. Версии процесса в Camera Raw
    19. Внесение локальных корректировок в Camera Raw
14. Исправление и восстановление изображений
    1. Удаление объектов с фотографий с помощью Content-Aware Fill
    2. Content-Aware Patch and Move
    3. Ретушь и исправление фотографий
    4. Исправить искажение изображения и шум
    5. Основные действия по устранению неполадок для устранения большинства проблем
15. Преобразование изображений
    1. Преобразование объектов
    2. Настройка кадрирования, поворота и размера холста
    3. Как обрезать и выпрямить фотографии
    4. Создание и редактирование панорамных изображений
    5. Деформация изображений, форм и путей
    6. Точка схода
    7. Используйте фильтр Liquify
    8. Контентно-зависимое масштабирование
    9. Преобразование изображений, форм и контуров
    10. Деформация
    11. Преобразование
    12. Панорама
16. Рисование и раскрашивание
    1. Рисование симметричных узоров
    2. Рисование прямоугольников и изменение параметров обводки
    3. О чертеже
    4. Рисование и редактирование фигур
    5. Малярные инструменты
    6. Создание и изменение кистей
    7. Режимы наложения
    8. Добавить цвет к путям
    9. Редактировать пути
    10. Краска с помощью кисти-миксера
    11. Наборы кистей
    12. Градиенты
    13. Градиентная интерполяция
    14. Выбор заливки и обводки, слоев и контуров
    15. Рисование с помощью инструментов «Перо»
    16. Создание шаблонов
    17. Создание шаблона с помощью Pattern Maker
    18. Управление путями
    19. Управление библиотеками шаблонов и пресетами
    20. Рисовать или рисовать на графическом планшете
    21. Создание текстурных кистей
    22. Добавление динамических элементов к кистям
    23. Градиент
    24. Нарисуйте стилизованные мазки с помощью Art History Brush
    25. Краска с рисунком
    26. Синхронизация пресетов на нескольких устройствах
17. Текст
    1. Добавить и отредактировать текст
       
    2. Единый текстовый движок
    3. Работа со шрифтами OpenType SVG
    4. Символы формата
    5. Формат абзацев
    6. Как создавать текстовые эффекты
    7. Редактировать текст
    8. Интервал между строками и символами
    9. Арабский и еврейский шрифт
    10. Шрифты
    11. Устранение неполадок со шрифтами
    12. Азиатский тип
    13. Создать тип
    14. Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Виндовс 8
18. Видео и анимация
    1. Видеомонтаж в Photoshop
    2. Редактировать слои видео и анимации
    3. Обзор видео и анимации
    4. Предварительный просмотр видео и анимации
    5. Красить кадры в слоях видео
    6. Импорт видеофайлов и последовательностей изображений
    7. Создать анимацию кадра
    8. Creative Cloud 3D-анимация (предварительная версия)
    9. Создание анимации временной шкалы
    10. Создание изображений для видео
19. Фильтры и эффекты
    1. Использование фильтра «Пластика»
    2. Использовать галерею размытия
    3. Основы фильтра
    4. Артикул эффектов фильтра
    5. Добавить световые эффекты
    6. Используйте адаптивный широкоугольный фильтр
    7. Используйте фильтр масляной краски
    8. Эффекты и стили слоя
    9. Применить определенные фильтры
    10. Размазывание областей изображения
20. Сохранение и экспорт
    1. Сохранение файлов в Photoshop
       
    2. Экспорт файлов в Photoshop
    3. Поддерживаемые форматы файлов
       
    4. Сохранение файлов в графических форматах
    5. Перемещение дизайнов между Photoshop и Illustrator
    6. Сохранение и экспорт видео и анимации
    7. Сохранение файлов PDF
    8. Защита авторских прав Digimarc
21. Печать
    1. Печать 3D-объектов
    2. Печать из фотошопа
    3. Печать с управлением цветом
    4. Контактные листы и презентации в формате PDF
    5. Печать фотографий в макете пакета изображений
    6. Плашечные цвета для печати
    7. Дуотоны
    8. Печать изображений на коммерческой типографии
    9. Улучшение цветных отпечатков из Photoshop
    10. Устранение проблем с печатью | Фотошоп
22. Автоматизация
    1. Создание действий
    2. Создание графики, управляемой данными
    3. Сценарий
    4. Обработка пакета файлов
    5. Воспроизведение и управление действиями
    6. Добавить условные действия
    7. О действиях и панели Действия
    8. Инструменты записи в действиях
    9. Добавить условное изменение режима к действию
    10. Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
23. Управление цветом
    1. Понимание управления цветом
    2. Поддержание согласованности цветов
    3. Настройки цвета
    4. Работа с цветовыми профилями
    5. Документы с управлением цветом для онлайн-просмотра
    6. Управление цветом документов при печати
    7. Импортированные изображения с управлением цветом
    8. Пробные цвета
24. Подлинность содержимого
    1. Узнайте об учетных данных содержимого
    2. Идентификация и происхождение для NFT
    3. Подключить аккаунты для атрибуции креативов
25. 3D и техническое изображение
    1. Photoshop 3D | Общие вопросы о снятых с производства 3D-функциях
    2. Creative Cloud 3D-анимация (предварительная версия)
    3. Печать 3D-объектов
    4. 3D живопись
    5. Усовершенствования 3D-панели | Фотошоп
    6. Основные концепции и инструменты 3D
    7. 3D-рендеринг и сохранение
    8. Создание 3D-объектов и анимации
    9. Стеки изображений
    10. Рабочий процесс 3D
    11. Измерение
    12. DICOM-файлы
    13. Photoshop и MATLAB
    14. Подсчет объектов на изображении
    15. Объединение и преобразование 3D-объектов
    16. Редактирование 3D-текстур
    17. Настройка экспозиции и тонирования HDR
    18. Настройки панели 3D

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

Чтобы уточнить существующий выбор, несколько раз используйте команду «Цветовой диапазон», чтобы выбрать подмножество цветов. Например, чтобы выбрать зеленые области в голубом выделении, выберите «Голубой» в диалоговом окне «Диапазон цветов» и нажмите «ОК». Затем снова откройте диалоговое окно «Цветовой диапазон» и выберите «Зеленые». (Результаты тонкие, потому что этот метод выбирает части цветов в цветовом сочетании.)

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

1. Выберите «Выбор» > «Цветовой диапазон».

   Вы также можете использовать Цветовой диапазон для уточнения маски слоя. См. раздел Настройка непрозрачности и краев маски.

2. В меню «Выбор» выберите один из следующих вариантов:

   Тона кожи

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

   Образцы цветов

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

   • Цветовой или тоновый диапазон. Если вы используете эту опцию, вы не сможете изменить выбор.

3. Выберите один из вариантов отображения:

   Выбор

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

   Изображение

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

   Для переключения между предварительным просмотром изображения и выделения в диалоговом окне «Цветовой диапазон» нажмите клавишу Ctrl (Windows) или Command (Mac OS).

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

   Пробный цвет

   Для настройки выбора:

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

   Чтобы временно активировать плюсовую пипетку, зажать шифт. Удерживая клавишу Alt (Windows) или Option (Mac OS), чтобы активировать минус пипетку.

5. Настройка диапазона выбранных цветов с помощью ползунка «Размытость» или путем ввода значения. Нечеткость настройка определяет, насколько широк диапазон цветов в выборе, и увеличивает или уменьшает количество частично выделенных пикселей (серый области в предварительном просмотре выделения). Установите низкое значение Fuzziness, чтобы ограничить цветовой диапазон, более высокое значение увеличивает диапазон.

   Увеличение размытости расширяет выбор

   Если вы выбрали Localized Color Clusters, используйте ползунок Range для управления насколько далеко или близко цвет должен быть от точек выборки, чтобы быть включенным в выборе. Например, ваше изображение содержит желтое пятно. цветы как на переднем, так и на заднем плане, но вы хотите чтобы выбрать только цветы переднего плана. Попробуйте цвета в цветы переднего плана и уменьшите Диапазон так, чтобы похожие по цвету цветы на заднем плане не выбраны.

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

   Никто

   Показывает исходное изображение.

   Оттенки серого

   Отображает полностью выделенные пиксели белым цветом, частично выделенные — серым, невыбранные — черным.

   Черный матовый

   Показывает исходное изображение для выбранных пикселей и черного цвета. для невыбранных. Этот вариант хорош для ярких изображений.

   Белый матовый

   Показывает исходное изображение для выбранных пикселей и белого цвета. для невыбранных. Этот вариант хорош для темных изображений.

   Быстрая маска

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

7. Чтобы вернуться к исходному выбору, удерживайте клавишу Alt (Windows) или Option (Mac OS) и нажмите «Сброс».

8. Чтобы сохранить и загрузить настройки цветового диапазона, используйте кнопки «Сохранить» и «Загрузить» в диалоговом окне «Цветовой диапазон», чтобы сохранить и повторно использовать текущие настройки.

   Вы можете сохранить настройки выбора телесных тонов в качестве предустановки.

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

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

Чтобы сохранить настройки тонов кожи в качестве предустановки:

1. Выберите «Выделение» > «Цветовой диапазон».

2. В диалоговом окне «Цветовой диапазон» выберите «Оттенки кожи» в меню «Выбор».

3. Для более точного выбора оттенка кожи выберите «Обнаружение лиц», а затем отрегулируйте ползунок «Размытость» или введите значение. Чтобы упростить выбор, убедитесь, что для параметра отображения установлено значение «Выделение», и выберите «Предварительный просмотр выбора», чтобы просмотреть выбранные элементы в окне документа.

4. Нажмите кнопку «Сохранить» и в окне «Сохранить» введите имя файла для предустановки тона кожи, а затем нажмите «Сохранить».

Чтобы загрузить пресет оттенков кожи:

1. В диалоговом окне «Цветовой диапазон» нажмите кнопку «Загрузить».

2. В окне «Загрузить» выберите нужный файл предустановки и нажмите «Загрузить».

Больше похожего

• Выделение
• Сохранить выделение и маски альфа-канала
• Преобразование контуров в границы выделения
• Галерея инструментов выделения

Войдите в свою учетную запись

Войти

Управление учетной записью

Как выбрать все одинаковые цвета в Photoshop

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

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

Зачем выбирать один и тот же цвет в Photoshop?

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

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

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

Начало работы

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

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

Вы можете загрузить это изображение с Pexels, чтобы следить за ним.

Начнем!

Использование инструмента «Цветовой диапазон» для выбора цвета в Photoshop

Начнем с самого очевидного выбора. Инструмент Color Range в Photoshop является одним из нескольких инструментов выделения в меню Select . Мы будем использовать его, чтобы просто удалить весь голубой и синий цвета с фона.

1. После загрузки изображения в Photoshop перейдите к Выберите > Цветовой диапазон .
2. В меню Color Range убедитесь, что в раскрывающемся меню указано Sampled Colors . Установите ползунок Fuzziness на 0 и установите Диапазон на 100 процентов . Щелкните, чтобы выбрать параметр Invert , и установите для Selection Preview значение None .
3. Нажмите на значок +Пипетка , который представляет Добавить к образцу 9инструмент 0023. Щелкая левой кнопкой мыши, обведите весь голубой цвет на изображении. Вы также можете просто щелкнуть в областях, которые вы пропустили. Все цвета Черный — ваш выбор.
4. Далее давайте очистим все черные точки от всего, что не является голубым или синим на изображении. Для этого выберите значок -Пипетка , который представляет собой инструмент Вычесть из образца .
5. Как и прежде, щелкните левой кнопкой мыши и удерживайте ее, проводя мышью везде, где вы видите черный цвет, который не является частью неба. Также обязательно кликните внутри зонта и на наших объектах. Вы хотите, чтобы этот выбор был все Белый , как показано. Затем нажмите OK .
6. Ваш выбор будет выделен. Затем перейдите к Выберите > Выберите и замаскируйте .
7. В нижней части меню Свойства измените Вывод на на Новый слой с маской . Затем нажмите OK .

Голубой и синий цвета полностью удалены с изображения.

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

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

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

Вот как это работает:

1. Загрузив изображение в Photoshop, нажмите Ctrl + J , чтобы продублировать слой.
2. Перейдите к Окно > Свойства .
3. В разделе Быстрые действия щелкните Удалить фон .
4. Отмените выбор фонового слоя (нижний слой), щелкнув значок Eye , чтобы было видно только выделение.
5. Переключить X , пока белый цвет не станет основным. Затем нажмите B для инструмента Кисть .
6. С выбранной маской слоя на дубликате слоя (верхний слой), закрасьте цветом White все, кроме неба. Убедитесь, что Непрозрачность и Поток установлены на 100 процентов и выбрана Круглая кисть .

При рисовании с помощью инструмента «Кисть» помните о следующих советах:

• Параметры Кисть расположены в верхней строке меню в Photoshop.
• Используйте скобки [ ] , чтобы увеличить или уменьшить размер кисти для лучшего контроля.
• Если вы рисуете на небе, переключите клавишу X так, чтобы передний план стал Black , и просто сотрите небо.
• Используйте Ctrl + + и Ctrl + — для увеличения и уменьшения масштаба.

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

Использование инструмента «Выделение неба» в Photoshop для выбора цвета

Одним из самых быстрых способов выделения всех одинаковых цветов в Photoshop, по крайней мере, для изображения с голубым небом, является инструмент Sky Select .

Вот как это работает:

1. Загрузив изображение в Photoshop, перейдите к . Выберите > Небо .
2. Поскольку мы хотим сохранить все, кроме неба, перейдите к . Выберите > , инвертировать .
3. Перейти к Выберите > Выберите и замаскируйте .
4. Выберите среднюю кисть, инструмент Refine Edge и закрасьте красным цветом область рядом с шеей объекта (слева). Кроме того, закрасьте красным цветом облако, чтобы выделить его.
5. Измените вывод на на Новый слой с маской слоя и нажмите OK .

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

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

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

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

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

1. Загрузив изображение в Photoshop, щелкните меню инструментов Eraser или нажмите E для стандартного инструмента Eraser . Выберите инструмент Magic Eraser .
2. Щелкайте по всем областям неба на изображении, пока большая часть цвета не исчезнет. Не волнуйтесь, если вы не можете выбрать все небо. Мы рассмотрим это далее.
3. В меню инструментов Ластик выберите инструмент Ластик .
4. Просто закрасьте остальную часть неба, чтобы сделать выделение полностью прозрачным.

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

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

Другие инструменты в Photoshop для выбора всех цветов одного цвета

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

Другие инструменты для выбора одного и того же цвета в Photoshop включают инструмент Vibrance , инструмент Focus Area и инструмент Subject select.