Promijeniti boju PNG slike putem CSS-a? (10)
Uredi--
Font-Awesome koristi drugačija imena klasa u novoj verziji, vjerovatno zato što čini CSS datoteke značajno manjim i izbjegava dvosmislene CSS klase. Dakle, sada biste trebali koristiti:
Nema potrebe da kucate ceo font ako želite samo jednu ikonu, plus osećam da je više "čist" kao samostalni element. Dakle, za ovu svrhu u HTML5 možete postaviti SVG direktno unutar toka dokumenta. Zatim možete definirati klasu u .CSS listi stilova i pristupiti njenoj boji pozadine koristeći svojstvo fill:
Imajte na umu da sam u primjeru koristio :hover da ilustrujem ponašanje; ako samo želite promijeniti boju za "normalno" stanje, trebali biste ukloniti pseudo-klasu.
Odgovaram jer sam tražio rješenje za ovo.
Ručica na @chrscblls dobro odgovara ako imate bijelu ili crnu pozadinu, ali ja nisam. Osim toga, slike su generirane pomoću ng-repeat tako da nisam mogao imati svoj url u svom css-u i ne možete koristiti ::after na img tagovima.
Zato sam odlučio da ga isprobam i pomislio sam da bi moglo pomoći ljudima ako se i oni spotiču ovdje.
Tako da sam uradio skoro istu stvar sa tri glavne razlike:
- url koji se nalazi u mojoj img oznaci, stavio sam ga (i oznaku) u drugi div koji ima:: nakon posla.
- "mix-blend-mode" je postavljen na "razlika" umjesto "multiply" ili "screen".
- Dodao sam a::before sa potpuno istom vrednošću tako da ::after pravi "razliku" od "razlika" koje je napravio ::before i poništava je.
Da biste je promijenili iz crne u bijelo ili bijelo u crno, boja pozadine mora biti bijela. Od crne do boje, možete odabrati bilo koju boju. Od bijele do one boje morate odabrati boju suprotnu od one koju želite.
DivClass( pozicija: relativna; širina: 100%; visina: 100%; poravnanje teksta: lijevo; ) .divClass:hover::after, .divClass:hover::before( pozicija: apsolutna; širina: 100%; visina: 100%; pozadina: #FFF; mix-blend-mode: razlika; sadržaj: ""; )
img oznake imaju svojstvo pozadine kao i bilo koje druge. Ako imate bijeli PNG prozirnog oblika, poput matrice, možete učiniti sljedeće:
Da biste doslovno promijenili boju, možete omogućiti CSS prijelaz pomoću filtera -webkit, gdje ćete, kada se nešto dogodi, koristiti filter -webkit po vašem izboru. Na primjer:
Img ( -webkit-filter:sina sive(0%); prijelaz: -webkit-filter .3s linearni; ) img:hover ( -webkit-filter:sina (75%); )
Našao sam ovaj sjajan primjer codepen-a koji ubacujete u vrijednost heksadecimalna boja, i vraća potreban filter za primjenu te boje na png
na primjer, trebao mi je moj png da ima sljedeću boju #1a9790
tada biste trebali primijeniti sljedeći png filter na vas
Filter: invert (48%) sepija (13%) zasićenje (3207%) nijansa-rotiranje (130 stepeni) svjetlina (95%) kontrast (80%);
Uspio sam to učiniti koristeći SVG filter. Možete napisati filter koji množi boju originalne slike bojom koju želite promijeniti. U donjem isječku koda boja poplave je boja kojoj želimo promijeniti boju slike (u ovom slučaju je crvena). FeComposite govori filteru kako obrađujemo boju. FeComposite formula sa aritmetikom je (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) gde su i1 i i2 ulazne boje za in/in2 respektivno. Dakle, navođenje samo k1 = 1 znači da će to učiniti samo i1 * i2, što znači množenje obje ulazne boje zajedno.
Bilješka. Ovo radi samo sa HTML5 jer koristi inline SVG. Ali mislim da ovo možete učiniti sa starijim pretraživačem tako što ćete staviti SVG u zasebnu datoteku. Nisam još isprobao ovaj pristup.
Evo isječka:
Glavna stvar je da naznačite sliku na računaru ili telefonu, odaberete željene boje za zamjenu, kliknite OK na dnu stranice, pričekajte nekoliko sekundi i preuzmite gotov rezultat.
Fotografija ruže bez promjena i sa ružičastom bojom zamijenjena sa: ljubičasta, plava, tirkizno, zeleno I žuta:
Za kreiranje gornjih primjera korištene su sljedeće postavke: " Boja za zamjenu" - "ružičasta", " Boja za zamjenu" - "ljubičasta" (za sljedeću obradu "plava" itd.), " Intenzitet zamjene boje" - "45".
Ako sve postane jednobojno, zamijenjeno je previše ili su druge boje pogođene, tada morate smanjiti “Intenzitet zamjene boje”. Suprotno tome, ako se ne vide nikakve promjene ili boja nije u potpunosti zamijenjena, tada morate povećati "Intenzitet zamjene boje" i također provjeriti da li ste ispravno naveli boje i da niste pomiješali, na primjer, crvenu s ružičastom. Da biste preciznije odredili boju, možete koristiti HEX format. Postavke se mogu razlikovati za različite slike, ovisno o boji i veličini u pikselima.
Imajte na umu da ne možete zamijeniti crna, siva ili bela na nekima zasićena boja, ali zasićenu boju možete zamijeniti gotovo bijelom, crnom ili sivom bojom. Jednostavno rečeno, možete zamijeniti bilo koju duginu boju ili blizu onih boja koje su dostupne na padajućim listama u postavkama. Razlog za to je što je algoritam zamjene boje povezan s promjenom tona, što ne utječe na sivu ili crno-bijelu sliku. Ako trebate obraditi veliku sliku veću od 14 megapiksela (≈4592x3048), pošaljite je u poštansko sanduče sa potrebnim postavkama - to će biti urađeno besplatno u roku od 24 sata.
Originalna slika nije promijenjena ni na koji način. Dobit ćete još jednu obrađenu sliku.
Zapravo postoji mnogo načina za promjenu boje objekta u Photoshopu. Ranije smo već pogledali kako to učiniti koristeći, a također smo naučili kako promijeniti boju kose u Photoshopu koristeći.
Ovo nisu sve metode, danas ću pokazati dvije vrlo jednostavne, au budućim člancima ću govoriti o još nekoliko metoda koje koriste druge slojeve za podešavanje.
Metoda br. 1
Ukratko ću govoriti o primjeni ove metode. Otvorite sliku i kreirajte novi sloj (podsjećam vas na sve tehnike).
Zatim promijenite način miješanja ovog sloja odabirom Hue sa padajuće liste na vrhu palete slojeva (koja se nalazi na dnu liste).
Nakon toga, odaberite pritiskom na tipku B, kliknite na indikator boje prednjeg plana, u dijaloškom okviru palete koji se pojavi odaberite nijansu i kliknite na dugme OK. Nakon što ste prethodno odabrali novi sloj, nacrtajte na vrhu objekta.
Ako prefarbate preko viška, možete privremeno odabrati alat Eraser pritiskom i držanjem tipke E. Takve situacije možete unaprijed spriječiti dodavanjem maske sloja novom sloju i sakrivanjem područja koje ne treba mijenjati crnom bojom.
Bilješka
Ako je područje koje prefarbate okruženo crnom, bijelom i sivom bojom, možete bezbedno da farbate preko ove druge i one se uopšte neće promeniti. To je zato što u načinu miješanja nijansi, područja ispunjena bojom utječu samo na ona područja donjeg sloja koja već sadrže boju.
Metoda br. 2
Sjećate se komande menija? Slična komanda menija Zamijenite boju može se koristiti za isticanje jedne nijanse i zamjenu drugom. Ova komanda radi vrlo dobro ako je boja koju treba zamijeniti manje-više ujednačena i koncentrisana na određenom području, kao što je karoserija automobila na gornjoj slici.
Odabir komande iz menija Slika - Ispravka - Zamijeni boju, vidjet ćete dijaloški okvir istog imena.
Već ima odabran alat Eyedropper, pa kliknite na nijansu na slici koju želite zamijeniti. Pojaviće se u kvadratu sa natpisom Boja u kontrolnoj grupi Odabir na vrhu dijaloškog okvira.
U kontrolnoj grupi Zamjena na dnu dijaloškog okvira kliknite na kvadrat iznad natpisa Rezultat za odabir nove nijanse. Kada kliknete na dugme OK. Ako trebate podesiti odabranu nijansu, možete koristiti klizače Ton boje, Saturation I Osvetljenost(također se nalazi u kontrolnoj grupi odabira). Evo šta se dogodilo:
Imajte na umu da se pored obične pipete u blizini nalaze i pipete sa malim ikonama "+" (plus) i "-" (minus). Koristite ih da proširite/suzite raspon nijansi koje je potrebno promijeniti.
Kao što vidite, malo sam pretjerao i točkovi su mi također postali ljubičasti. To sugerira da ova metoda možda nije uvijek korisna.
Ako primijetite grešku u tekstu, odaberite je i pritisnite Ctrl + Enter. Hvala ti!
Ako trebate urediti datoteku u PNG formatu, mnogi žure da preuzmu Photoshop, koji se ne distribuira samo uz naknadu, već je i prilično zahtjevan za računarske resurse. Nisu svi stari računari sposobni za pokretanje ove aplikacije. U takvim slučajevima u pomoć priskaču razni onlajn uređivači koji vam omogućavaju da promijenite veličinu, skalirajte, komprimirate i izvršite brojne druge operacije s datotekama.
Danas ćemo pogledati najfunkcionalnije i najstabilnije stranice koje vam omogućuju rad sa slikama u PNG formatu. Prednosti ovakvih online usluga uključuju činjenicu da nisu zahtjevne za resurse vašeg računala, jer se sve manipulacije s datotekama izvode korištenjem cloud tehnologija.
Online uređivači ne moraju biti instalirani na vašem računalu - to značajno smanjuje vjerovatnoću zaraze virusom.
Metoda 1: Online Image Editor
Najfunkcionalniji i stabilniji servis koji ne smeta korisnicima nametljivim oglašavanjem. Pogodan za svaku manipulaciju sa PNG slikama, apsolutno nezahtjevan za resurse vašeg računala i može se pokrenuti na mobilnim uređajima.
Nedostaci usluge uključuju nedostatak ruskog jezika, međutim, uz duže korištenje ovaj nedostatak postaje manje uočljiv.
Stranica ne zahtijeva registraciju, lako je razumjeti uslugu, čak i ako ne znate engleski. Ne bojte se eksperimentirati, ako nešto pođe po zlu, uvijek možete to poništiti pritiskom na samo jedno dugme.
Metoda 2: Photoshop Online
Programeri pozicioniraju svoju uslugu kao online Photoshop. Funkcionalnost uređivača je zaista slična svjetski poznatoj aplikaciji, podržava rad sa slikama u različitim formatima, uključujući PNG. Ako ste ikada radili sa Photoshopom, neće biti teško razumjeti funkcionalnost resursa.
Jedini, ali prilično značajan nedostatak stranice je stalno zamrzavanje, posebno ako radite s velikim slikama.
Prilikom obavljanja jednostavnih manipulacija rad s uslugom je zgodan i udoban. Ako trebate obraditi veliku datoteku, preporučljivo je da preuzmete i instalirate poseban softver na svoj PC, ili budite strpljivi i pripremite se za stalna zamrzavanja stranice.
Metoda 3: Fotor
Zgodna, funkcionalna i što je najvažnije besplatna stranica za rad sa slikama u PNG formatu, Fotor vam omogućava izrezivanje, rotiranje, dodavanje efekata i korištenje drugih alata. Funkcionalnost resursa je testirana na datotekama različitih veličina i nisu pronađeni nikakvi problemi. Stranica je prevedena na ruski; u postavkama možete odabrati drugi jezik sučelja uređivača ako je potrebno.
Pristup dodatnim funkcijama je omogućen korisnicima tek nakon kupovine PRO naloga.
Fotor je moćan alat za rad sa PNG-om: osim skupa osnovnih funkcija, sadrži mnogo dodatnih efekata koji će oduševiti i najzahtjevnijeg korisnika.
Online uređivači fotografija jednostavni su za korištenje, ne zahtijevaju instalaciju na računaru, tako da im možete pristupiti čak i sa mobilnog uređaja. Na vama je koji uređivač ćete koristiti.
