Головне потрібно вказати картинку на вашому комп'ютері або телефоні, вибрати потрібні кольори для заміни, натиснути кнопку ОК внизу сторінки, почекати пару секунд і завантажити готовий результат.
Фото троянди без змін і з заміненим рожевим кольором на: фіолетовий, синій, бірюзовий, зелений і жовтий:
Для створення вищевказаних прикладів були використані такі настройки: " Колір для заміни"-" рожевий "," Колір, на який замінювати"-" фіолетовий "(для наступної обробки" синій "і т.д.)," Інтенсивність заміни кольору" - "45".
Якщо все стає одноколірним, замінюється занадто багато або зачіпаються інші кольори, то потрібно знижувати "Інтенсивність заміни кольору". І навпаки, якщо не видно змін або колір замінюється в повному обсязі, то потрібно підвищувати "Інтенсивність заміни кольору", а також переконатися в тому, що ви правильно вказали кольору і не переплутали, наприклад, червоний колір з рожевим. Для більш точного зазначення кольору можна використовувати формат HEX. Для різних картинок настройки можуть бути різними, це залежить як від забарвлення, так і від розміру в пікселях.
Зверніть увагу, що не вийде замінити чорний, сірий або білий колір на який-небудь насичений колір, А от замінити насичений колір на майже білий, чорний або сірий колір можна. Простіше кажучи можна замінювати будь-які кольори веселки або близькі до тих квітів, які доступні в випадних списках в налаштуваннях. Причина цього полягає в тому, що алгоритм заміни кольору пов'язаний зі зміною тону, який не впливає на відтінки сірого або на чорно-біле зображення. Якщо потрібно обробити велику картинку більш 14 мегапікселів (≈4592x3048), то надсилайте її на ящик з потрібними вам настройками - буде зроблено безкоштовно протягом доби.
Початкове зображення не змінюється. Вам буде надана інша оброблена картинка.
Насправді існує безліч способів як змінити колір об'єкта в фотошопі. Раніше ми вже розглянули як це зробити за допомогою, а також навчилися змінювати колір волосся в фотошопі за допомогою.
Це далеко не всі способи, сьогодні я покажу два дуже простих, а в майбутніх статтях я розповім ще про парочку методах за допомогою інших коригувальних шарів.
спосіб №1
Коротко розповім про застосування даного методу. Відкрийте зображення і створіть новий шар (нагадую все прийоми).
Потім змініть режим накладання даного шару, вибравши пункт Тон в списку у верхній частині палітри шарів (розташований в нижній частині списку).
Після цього виберіть, натиснувши клавішу В, клацніть по індикатору кольору переднього плану, в діалоговому вікні палітри виберіть відтінок і клацніть мишею по кнопці ОК. Попередньо виділивши новий шар, малюйте поверх об'єкта.
Якщо ви закрасите зайве, можна на час вибрати інструмент Ластик, натиснувши і утримуючи клавішу Е. А можна заздалегідь попередити такі ситуації, додавши до нового шару шар-маску і приховавши області, які не потрібно змінювати, чорним кольором.
Примітка
Якщо перефарбовувати область оточена чорним, білим і сірим кольорами, можна сміливо фарбувати поверх останніх, і вони нітрохи не зміняться. Так виходить тому, що в режимі накладення Тон заповнені кольором області впливають тільки на ті ділянки лежачого нижче шару, які вже містять колір.
спосіб №2
Пам'ятайте команду меню? Схожу команду меню замінити колір можна використовувати для виділення одного відтінку і заміни його іншим. Ця команда дуже добре працює, якщо колір, який потрібно замінити, більш-менш однорідний і зосереджений в деякій області, як, наприклад, кузов автомобіля на малюнку вище.
Вибравши в меню команду Зображення - Корекція - Замінити колір, Ви побачите діалогове вікно.
У ньому вже обраний інструмент Піпетка, так що клацніть по тому відтінку на зображенні, який хочете замінити. Він з'явиться в квадраті з написом колір в групі елементів управління виділення у верхній частині діалогового вікна.
У групі елементів управління заміна в нижній частині діалогового вікна клацніть по квадрату, розташованому над написом результат, Щоб вибрати новий відтінок. Коли ви клацнете мишею по кнопці ОК. Якщо необхідно підправити вибраний відтінок, можна використовувати ползунковиє регулятори Кольоровий тон, насиченість і яскравість (Також знаходяться в групі елементів управління Виділення). Ось що вийшло:
Зверніть увагу, що крім звичайної піпетки, поруч є піпетки з маленькими значками «+» (плюс) і «-» (мінус). Використовуйте їх, щоб розширити / звузити діапазон відтінків, які необхідно змінити.
Як бачите, я трохи перестарався і у мене колеса автомобіля також забарвилися в фіолетовий. Це говорить про те, що даний спосіб може бути не завжди корисним.
Помітили помилку в тексті - виділіть її та натисніть Ctrl + Enter. Спасибі!
Змінити колір зображення PNG через CSS? (10)
Редагувати--
Font-Awesome використовує різні імена класів в новій версії, ймовірно, тому що це робить файли CSS значно менше і уникає двозначних класів CSS. Отже, тепер ви повинні використовувати:
Немає необхідності в наборі всього шрифту, якщо вам потрібен тільки один значок, плюс я відчуваю, що він більш «чистий» як окремий елемент. Отже, для цієї мети в HTML5 ви можете розмістити SVG безпосередньо всередині потоку документів. Потім ви можете визначити клас в таблиці стілей.CSS і отримати доступ до його кольором фону за допомогою властивості fill:
Зверніть увагу, що в прикладі я використовував: hover щоб проілюструвати поведінка; якщо ви просто хочете змінити колір для «нормального» стану, ви повинні видалити псевдоклас.
Відповідаючи, тому що я шукав рішення для цього.
ручка в @chrscblls відповідає добре, якщо у вас білий або чорний фон, але у мене не було. Aslo, зображення були згенеровані за допомогою ng-repeat, тому я не міг мати свій url в моєму css, і ви не можете використовувати :: after на img-тегах.
Отже, я вирішив зайнятися і подумав, що це може допомогти людям, якщо вони теж спотикаються тут.
Так що я зробив майже те ж саме з трьома основними відмінностями:
- url, що знаходиться в моєму тезі img, я поклав його (і ярлик) в інший div, на якому :: після роботи.
- «Mix-blend-mode» встановлюється на «різницю» замість «multiply» або «screen».
- Я додав a :: before з точно таким же значенням, щоб :: after виконав «різницю» «відмінності», зроблених :: before, і скасував його.
Щоб змінити його з чорного на білий або білий на чорний, колір фону повинен бути білим. Від чорного до кольору ви можете вибрати будь-який колір. Від білого до кольору tho вам потрібно вибрати протилежний колір того, який ви хочете.
DivClass (position: relative; width: 100%; height: 100%; text-align: left;) .divClass: hover :: after, .divClass: hover :: before (position: absolute; width: 100%; height: 100%; background: #FFF; mix-blend-mode: difference; content: "";)
Теги img мають властивість фону, як і будь-яка інша. Якщо у вас білий PNG з прозорою формою, наприклад, трафарет, ви можете зробити це:
Щоб буквально змінити колір, ви можете включити перехід CSS з фільтром -webkit, де, коли щось трапиться, ви будете використовувати фільтр -webkit за вашим вибором. наприклад:
Img (-webkit-filter: grayscale (0%); transition: -webkit-filter .3s linear;) img: hover (-webkit-filter: grayscale (75%);)
Я знайшов цей чудовий приклад codepen, який ви вставляєте в значення шістнадцятирічного кольору, і він повертає необхідний фільтр для застосування цього кольору до png
наприклад, я потребував моєму png, щоб мати такий колір # 1a9790
то ви повинні застосувати до вас наступний фільтр png
Filter: invert (48%) sepia (13%) saturate (3207%) hue-rotate (130deg) brightness (95%) contrast (80%);
Я зміг зробити це за допомогою SVG-фільтра. Ви можете написати фільтр, який примножує колір вихідного зображення на колір, який ви хочете змінити. У наведеному нижче фрагменті коду флуд-колір - це колір, який ми хочемо змінити колір зображення (в даному випадку це червоний). FeComposite повідомляє фільтру, як ми обробляємо колір. Формула feComposite з арифметикою дорівнює (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), де i1 і i2 - вхідні кольору для in / in2 відповідно. Таким чином, вказівка \u200b\u200bтільки k1 \u003d 1 означає, що він буде робити тільки i1 * i2, що означає множення обох вхідних квітів разом.
Примітка. Це працює тільки з HTML5, оскільки використовується вбудований SVG. Але я думаю, що ви зможете зробити цю роботу зі старим браузером, поставивши SVG в окремий файл. Я ще не пробував цей підхід.
Ось фрагмент:
Якщо необхідно відредагувати файл у форматі PNG, багато хто поспішає завантажити Photoshop, який не тільки поширюється на платній основі, але і досить вимогливий до ресурсів комп'ютера. Не всі старенькі ПК здатні працювати з даними додатком. У таких випадках на допомогу приходять різні онлайн-редактори, що дозволяють змінювати розмір, масштабувати, стискати і здійснювати численні інші операції з файлами.
Сьогодні ми розглянемо найбільш функціональні і стабільні сайти, що дозволяють працювати із зображеннями у форматі PNG. До переваг таких онлайн-сервісів можна віднести те, що вони не вимогливі до ресурсів вашого комп'ютера, так як всі маніпуляції з файлами виробляються за допомогою хмарних технологій.
Онлайн-редактори не потрібно встановлювати на ПК - це значно зменшує ймовірність підхопити вірус.
Спосіб 1: Online Image Editor
Самий функціональний і стабільний сервіс, який не набридає користувачам нав'язливою рекламою. Підходить для здійснення будь-яких маніпуляцій з зображеннями PNG, абсолютно невимогливий до ресурсів вашого комп'ютера, може бути запущений на мобільних пристроях.
До мінусів сервісу можна віднести відсутність російської мови, однак при тривалому використанні даний недолік стає малопомітним.
Сайт не вимагає реєстрації, розібратися з сервісом нескладно, навіть якщо ви не знаєте англійську мову. Не бійтеся експериментувати, якщо щось піде не так, ви завжди зможете скасувати це натисканням всього однієї кнопки.
Спосіб 2: Фотошоп Онлайн
Розробники позиціонують свій сервіс, як онлайн-фотошоп. Функціонал редактора дійсно схожий на всесвітньо відоме додаток, він підтримує роботу з картинками в різних форматах, в тому числі і PNG. Якщо ви коли-небудь працювали з Фотошопом, розібратися в функціоналі ресурсу буде нескладно.
Єдиний, але досить істотний недолік сайту - це постійні зависання, особливо якщо робота ведеться з великими зображеннями.
При здійсненні простих маніпуляцій працювати з сервісом зручно і комфортно. Якщо необхідно обробити великий файл, бажано завантажити і встановити на ПК спеціальне програмне забезпечення, або запастися терпінням і приготуватися до постійних зависань сайту.
Спосіб 3: Fotor
Зручний, функціональний, а головне безкоштовний сайт для роботи із зображеннями у форматі PNG Fotor дозволяє обрізати, повертати, додавати ефекти використовувати інші інструменти. Функціонал ресурсу був перевірений на файлах різного розміру, проблем при цьому виявлено не було. Сайт перекладений російською, в налаштуваннях можна вибрати іншу мову інтерфейсу редактора при необхідності.
Доступ до додаткових функцій надається користувачам лише після придбання PRO-аккаунта.
Fotor є потужним інструментом для роботи з PNG: крім набору базових функцій він містить безліч додаткових ефектів, які порадують навіть найвибагливішого користувача.
Онлайн-фоторедактори прості в роботі, вони не вимагають установки на комп'ютер, за рахунок чого доступ до них можна отримати навіть з мобільного пристрою. Яким редактором користуватися, вирішувати тільки вам.