Ved hjelp av SVG til å Opprette en Tofargede Effekt på Bilder

0
90

Alt er mulig med SVG, ikke sant?!

Etter et år på å samarbeide med noen gode designere og eksperimentere for å oppnå noen ganske kule visuelle effekter, det begynner å føles som det er. Et raskt søk på “SVG” på CodePen vil bevitne dette. Fra bokstaver, former, sprites, animasjoner, og bildemanipulering, alt er bedre med hjelp av SVG. Så når en ny visuell trend treffe nettet det siste året, var det ingen overraskelse at SVG kom til unnsetning for å tillate oss å gjennomføre det.

Gnist av en trend

Reklamer overalt velkommen 2016 nye året med gnist av en colorizing teknikken popularisert av spotifys 2015 År i Musikk-nettsted (her er fjorårets) som introduserte fet, tofargede bilder til deres merkevare identitet.

Spotify-2015 År i Musikk nettstedet viser den tofargede bildet teknikk.

Denne teknikken er en halvtone gjengivelse av et bilde av superimposing én farge (tradisjonelt svart) med en annen. Med andre ord, jo mørkere tone vil være knyttet til skygger av bildet, og den lysere tone, som er tilordnet til høydepunktene.

Vi kan oppnå det tofargede teknikk i Photoshop ved å bruke en gradient map (Layer > New Adjustment Layer > Gradient Map) to farger over et bilde.

Velg ønsket farge kombinasjon for gradient map
En sammenligning av det opprinnelige bildet (til venstre) og når gradient map er aktivert (høyre)

Høyreklikk (eller alt + klikk) justering lag og skape et utklipp maske for å bruke gradient map å bare bildet lag rett nedenfor det i stedet for som gjelder for alle lag.

Det brukes til å ta finessing <lerret> – element for å beregne kartlegging med farger og maling resultatet til den DOM eller benytte CSS-blanding-moduser for å komme nær til ønsket farge effekt. Vel, takket være potensielt livreddende krefter SVG, vi kan lage disse Photoshop-lignende “justering lag” med SVG-filtre.

La oss få Lagre!

Å bryte ned SVG

Vi er allerede kjent med vectorful storhet av SVG. I tillegg til å produsere skarpe, fleksibel og små grafikk, SVGs har også støtte for over 20 filtereffekter som gir oss mulighet til å gjøre, morph, og gjøre så mye mer til våre SVG-filer. For dette tofargede effekt, vil vi bruke to filtrene til å konstruere våre gradient map.

feColorMatrix (valgfritt)

Den feColorMatrix effekt gir oss muligheten til å manipulere farger i et bilde basert på en matrise av rbga-tv. Una Kravets detaljer farge manipulasjon med feColorMatrix i denne dype dykk, og det er et sterkt anbefalt å lese.

Avhengig av bildet, kan det være verdt å balansere fargene i bildet ved å sette den til gråtoner med color matrix. Du kan justere rbga tv som du ønsker for den ønskede gråtoner effekt.

<feColorMatrix type=”matrix” – resultat=”gråtoner”
verdier=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
feComponentTransfer

Neste er å kartlegge de to fargene over høylys og skygger av våre gråskalabilete med feComponentTransfer filter effekt. Det er bestemt element attributter for å holde i tankene for dette filteret.

Attributt
Hva den Gjør
Verdien som skal brukes
farge-interpolering-filtre (påkrevd) Angir farge plass for gradient interpolations, farge animasjoner, og alpha sammensetting. sRGB
resultat (valgfritt) Tilordner et navn til denne filter effekt og kan brukes/er referert til av en annen filter primitive med i attributtet. tofargede

Mens resultat egenskapen er valgfri, jeg liker å ta det med for å gi ytterligere kontekst for hvert filter (og som en praktisk merk for fremtidig referanse).

Den feComponent filter håndterer farge kartlegging basert på overføring av funksjoner av hver rbga komponent som er angitt som barn elementer av den overordnede feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Vi bruker disse rbga funksjoner for å beregne verdiene av de to fargene i gradient map.

Her er et eksempel:

Den Peachy Rosa gradient map i bildene ovenfor bruker en magenta (#bd0b91) , med verdier i R(189) G(11) B(145).

Del hver RGB-verdien av 255 for å få verdiene av den første fargen i matrisen. RGB-verdiene for den andre kolonnen resultere i #fcbb0d (gull). Lik i vår Photoshop gradient map, den første fargen (venstre til høyre) får tilordnet til skyggene, og den andre høydepunktene.

<feComponentTransfer farge-interpolering-filtre=”sRGB” resultat=”tofargede”>
<feFuncR type=”tabell” tableValues=”(189/255) 0.9882352941″></feFuncR>
<feFuncG type=”tabell” tableValues=”(11/255) 0.7333333333″></feFuncG>
<feFuncB type=”tabell” tableValues=”(145/255) 0.05098039216″></feFuncB>
<feFuncA type=”tabell” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
Trinn 3: Bruke den i Kraft med en CSS-Filter

Med SVG-filter fullført, og vi kan nå bruke den til et bilde ved hjelp av CSS filter eiendommen og angi url-adressen() filter-funksjonen til å ID-en for SVG-filter.

Det er verdt å merke seg at SVG inneholder filteret kan bare være en skjult element som sitter rett i HTML-koden. På den måten er det masse og er tilgjengelig for bruk, men ikke gjengis på skjermen.

background-image: url(‘path/til/img’);
filter: url(/sti/til/svg/tofargede-filtre.svg#duotone_peachypink);
filter: url(#duotone_peachypink);
Nettleserstøtte

Du er sannsynligvis interessert i hvor godt støttet denne teknikken er, ikke sant? Vel, SVG filtre har god nettleser støtte.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
8 9 3 10 12 6

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1 10 alle 4.4 62 57

Når det er sagt, CSS-filtre er ikke så mye støtte. Det betyr at noen grasiøs nedbrytning hensyn vil være nødvendig.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Ingen 17 6*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 37* Ingen 4.4* 62 57

For eksempel, Internet Explorer (IE) som ikke støtter CSS Filter url () – funksjonen, og heller ikke støtte CSS bakgrunn-blanding-modusene, er de nest beste ruten for å oppnå den tofargede effekt. Som et resultat, et tilbakefall for IE kan være en absolutt posisjonert CSS gradient overlegg på bildet for å etterligne filter.

I tillegg, jeg hadde problemer i Firefox når du har tilgang til filteret seg selv basert på banen for SVG-filter når jeg først implementert denne tilnærmingen på et prosjekt. Firefox så ut til å kun fungere hvis filteret ble referert til med full sti til SVG-fil i stedet for filter ID alene. Dette synes ikke å være tilfelle lenger, men er verdt å holde i tankene.

Å bringe det Hele Sammen

Her er et eksempel full av filter som er i bruk:

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”duotone_peachypink”>
<feColorMatrix type=”matrix” – resultat=”gråtoner”
verdier=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
<feComponentTransfer farge-interpolering-filtre=”sRGB” resultat=”tofargede”>
<feFuncR type=”tabell” tableValues=”0.7411764706 0.9882352941″></feFuncR>
<feFuncG type=”tabell” tableValues=”0.0431372549 0.7333333333″></feFuncG>
<feFuncB type=”tabell” tableValues=”0.568627451 0.05098039216″></feFuncB>
<feFuncA type=”tabell” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
</filter>
</svg>

Her er den innvirkning det har da lagt til et bilde:

En sammenligning av det opprinnelige bildet (til venstre) med filtrert effekt (til høyre) ved hjelp av SVG!

Se Penn Tofargede Demo av Lentie Menigheten (@lentilz) på CodePen.

For flere eksempler, kan du spille rundt med mer tofargede filtre i denne pennen.

Ressurser

Følgende ressurser er stor referansepunkt for de teknikker som brukes i dette innlegget.

  • SVG-Filter primitive elementer – MDN dokumentasjon
  • Finessing feColorMatrix – Una Kravets’ detaljerte innlegg på En Liste fra Hverandre