Как изменить цвет пнг
Перейти к содержимому

Как изменить цвет пнг

  • автор:

Замена определённого цвета изображения на указанный цвет онлайн

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

Фото розы без изменений и с заменённым розовым цветом на: фиолетовый, синий, бирюзовый, зелёный и жёлтый:
Фото розовой розы Фиолетовая роза Синяя роза, розовый цвет заменён на синий
Бирюзовая роза Зелёная роза Жёлтая роза
Для создания вышеуказанных примеров были использованы такие настройки: «Цвет для замены» – «розовый», «Цвет, на который заменять» – «фиолетовый» (для следующей обработки «синий» и т.д.), «Интенсивность замены цвета» – «45».

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

Обратите внимание, что не получится заменить чёрный, серый или белый цвет на какой-нибудь насыщенный цвет, а вот заменить насыщенный цвет на почти белый, чёрный или серый цвет можно. Проще говоря можно заменять любые цвета радуги или близкие к тем цветам, которые доступны в выпадающих списках в настройках. Причина этого заключается в том, что алгоритм замены цвета связан с изменением тона, который не влияет на оттенки серого или на чёрно-белое изображение. Если нужно обработать большую картинку более 14 мегапикселей (≈4592×3048), то присылайте её на ящик с нужными вам настройками – будет сделано бесплатно в течение суток.

Исходное изображение никак не изменяется. Вам будет предоставлена другая обработанная картинка.

Как изменить цвет PNG изображения с помощью CSS

Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.

Свойство filter применяет визуальные эффекты к элементу (изображению).

Оно имеет следующие значения:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

С помощью этих значений мы можем изменить цвет изображения.

Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.

Давайте попробуем пошагово изменить цвет изображения:

1. Создайте HTML.

  • Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».
body> img src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> " src="https://ru.w3docs.com/snippets/css/%3C/span%3Ehttps://www.sccpre.cat/mypng/detail/%3Cspan%20%3E122%3C/span%3E-%3Cspan%20%3E1229311%3C/span%3E_bird-feathers-flying-macaw-wings-birds-with-white.png%3Cspan%20%3E" width="500px" height="250px" alt="filter applied" /> 

2. Добавьте CSS.

Теперь добавляем стили к классам «Image1» и «Image2».

  • Задайте ширину этих изображений с помощью свойства width.
  • Добавьте свойство filter , чтобы изменить цвет изображения.
  • Используйте значение «invert», которое инвертирует первое изображение. Здесь устанавливаем 100% для полного инвертирования изображения.
  • Используйте значение «sepia» (100%), которое превращает второе изображение полностью в сепию.
  

Посмотрим, каким получился результат:

Пример

html> html> head> title>Измените цвет изображения title> style> img < width:40%; float:left; > .image1 < filter: invert(100%); -webkit-filter: invert(100%); > .image2 < filter: sepia(100%); -webkit-filter: sepia(100%); > style> head> body> h2>Измените цвет PNG изображения h2> img class="image1" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> img class="image2" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> body> html>

Рассмотрим другой пример, где использованы восемь значений свойства filter:

Пример

html> html> head> title>Заголовок документа title> style> body < background-color:#03030a; min-width: 800px; min-height: 400px > img < width:20%; float:left; margin:0; > /*Filter styles*/ .saturate < filter: saturate(3); -webkit-filter: saturate(3); > .grayscale < filter: grayscale(100%); -webkit-filter: grayscale(100%); > .contrast < filter: contrast(160%); -webkit-filter: contrast(160%); > .brightness < filter: brightness(0.25); -webkit-filter:brightness(0.25); > .blur < filter: blur(3px); -webkit-filter: blur(3px); > .invert < filter: invert(100%); -webkit-filter: invert(100%); > .sepia < filter: sepia(100%); -webkit-filter: sepia(100%); > .huerotate < filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); > .opacity < filter: opacity(50%); -webkit-filter: opacity(50%); > style> head> body> h2>Измените цвет PNG изображения h2> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> body> html>

Можете также применить следующую технику:

  • Укажите элементы в основной части. Установите IDs для вашего div элемента. Здесь имеем ID «original» и «changed».
body> div >div> div >div> body> Начните применить стили для IDs. Установите filter: hue-rotate; к ID "changed
  • Начните применить стили для IDs. Установите filter: hue-rotate; к ID «changed».
#changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); >

Результат будет выглядеть следующим образом:

Пример

html> html> head> title>Измените цвет изображения title> style> #original, #changed < background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; > #changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); > style> head> body> h2>Измените цвет PNG изображения h2> div id="original"> div> div id="changed"> div> body> html>

Заменить цвет на фото легко онлайн

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

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

Измените фон женского изображения в Fotor

Заменить цвет на фото мгновенно

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

Измените цвет щенка корги и цветового прямоугольника

Онлайн-инструмент для изменения цвета PNG

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

Измените цвет логотипа бесплатно

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

В руке держится стакан с креативными украшениями

Выделите свое изображение, изменив его цвет

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

Салат с измененным цветом и окном настройки

Заменить цвет на фото, чтобы сделать ваши продукты броскими и привлекательными

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

Женщина и панели инструментов для шрифтов

Окрасьте ваше изображение с большим количеством настроек

Всё ещё не удовлетворены своими фотографиями? Кроме окраски фото, вы также можете исследовать больше возможностей для редактирования и дизайна с помощью инструментов редактирования от Fotor. Доведите свое изображение до совершенства, добавив стикеры, текст и другие фильтры и эффекты в онлайн-редакторе Fotor. Попробуйте сами!

Как заменить цвет на фото?

  • Нажмите кнопку «Изменить цвет изображения» ниже, чтобы начать.
  • Перетащите свои собственные изображения в область редактирования или нажмите «Открыть изображение», чтобы загрузить его.
  • Нажмите «HSL» и выберите цвет, который вам нужен.
  • Затем настройте оттенок (Hue), насыщенность (Saturation) и яркость (Lightness) по необходимости, чтобы изменить цвет вашего изображения.
  • После изменения цвета изображения нажмите «Скачать», чтобы сохранить вашу картинку.

Fotor делает процесс заменить цвет на фото простым

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

Замена цветов объекта тремя простыми способами

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

В Photoshop можно с легкостью заменить цвет объекта или поэкспериментировать с контрастными цветами. Примените коррекцию «Цветовой тон/Насыщенность» для получения потрясающих результатов с удивительной гибкостью и точностью. Если необходимо сгруппировать параметры, воспользуйтесь диалоговым окном «Замена цвета». И не забудьте попробовать инструмент «Замена цвета» , если нужно быстро заменить цвета.

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

Перед заменой цвета на изображении После замены цвета на изображении

Применение корректировки «Цветовой тон/насыщенность» к выделенным объектам

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

Выделите нужный объект. Для получения хороших результатов используйте инструмент «Быстрое выделение» (). Дополнительные сведения о других способах см. в разделах «Выбор цветового диапазона» и «Выделение и маска».

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

Чтобы заменить цвет объекта, передвиньте ползунки параметров «Цветовой тон» и «Насыщенность» на панели «Свойства» . Если исходный цвет создает оттенок для нового цвета, установите флажок «Тонирование» и исправьте настройки. (См. раздел «Коррекция цветового тона и насыщенности».)

Примечание: установите ползунок «Яркость» в значение 0 для сохранения контрастности. Чтобы сохранить и контрастность, и насыщенность, выберите для корректирующего слоя режим наложения «Цветовой тон» .

При необходимости можно увеличить или уменьшить область изменения путем рисования на маске черным или белым цветом. (См. раздел Редактирование слоя-маски.) Дополнительные сведения см. в разделе «Описание панели«Коррекция».

Использование диалогового окна «Замена цвета»

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

В этом диалоговом окне отсутствует параметр «Тонирование» , который есть в коррекции «Цветовой тон/Насыщенность» и который может потребоваться для полного изменения цвета. Кроме того, для изменения отдельных объектов метод с использованием корректирующего слоя может оказаться проще. Тем не менее, диалоговое окно «Замена цвета» отлично подходит для глобальной замены цвета, особенно при изменении цветов, выходящих за пределы цветового охвата, при подготовке к печати.

Перейдите в раздел «Изображение» > «Коррекция» > «Заменить цвет» .

Выбор замены цвета в Photoshop

Диалоговое окно «Замена цвета» в Photoshop

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

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

Чтобы сделать еще более точный выбор, выполните одно из следующих действий:

  • Чтобы добавить области, щелкните мышью, удерживая нажатой клавишу «Shift», или используйте инструмент «Пипетка для добавления оттенков к образцу» ().
  • Чтобы удалить области, щелкните мышью, удерживая нажатой клавишу «Alt» (Windows) или щелкните мышью, удерживая нажатой клавишу «Option» (macOS), либо воспользуйтесь инструментом «Пипетка для удаления оттенков из образца» ().
  • Нажмите на образец «Выбор цвета» , чтобы открыть палитру цветов . При помощи палитры цветов выберите цвет, на который нужно заменить текущий. По мере выбора цвета в палитре цветов маска в окне предварительного просмотра обновляется.

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

  • Перетащите ползунки параметров «Цветовой тон» , «Насыщенность» и «Яркость» (или введите значения в соответствующие текстовые поля).
  • Дважды нажмите на образец «Результат» и выберите цвет для замены в палитре цветов .

Примечание.

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

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

Использование инструмента «Замена цвета»

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

Инструмент «Замена цвета» недоступен в битовом и многоканальном цветовых режимах, а также в режиме индексированных цветов.

Выберите инструмент «Замена цвета» (). (Если инструмент не отображается, вызовите его, удерживая значок инструмента «Кисть» .)

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

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

В меню Ограничения выберите один из следующих вариантов:

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

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

Чтобы сделать края исправленных областей плавными, установите флажок «Сглаживание» .

Выберите основной цвет для замены нежелательного цвета. (См. раздел Выбор цветов в палитре инструментов.)

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

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