Att använda SVG att Skapa ett Tvåfärgat Effekt på Bilder

0
71

Allt är möjligt med SVG, eller hur?!

Efter ett år av samarbete med några stora designers och experimenterar för att uppnå några ganska häftiga visuella effekter, det börjar kännas som det är. En snabb sökning på “SVG” på CodePen kan intyga detta. Från bokstäver, former, figurer, animationer och image manipulation, allt är bättre med hjälp av SVG. Så när en ny visuell trend träffat på nätet förra året, det var ingen överraskning att SVG kom till undsättning för att tillåta oss att genomföra det.

Den gnista av en trend

Annonser överallt välkomnade 2016 nya året med gnista av en färglägga teknik populariserades av Spotifys 2015 År i Musik webbplats (här är förra årets), som har infört fet, tvåfärgat bilder till deras varumärke.

Spotify 2015 År i Musik webbplats visar tvåfärgat bilden teknik.

Denna teknik är en av rastrerade reproduktion av en bild genom att lägga till en färg (traditionellt svart) med en annan. Med andra ord, den mörkare tonen kommer att mappas till skuggor i bilden, och den ljusare tonen, mappad till höjdpunkterna.

Vi kan uppnå tvåfärgat teknik i Photoshop genom att tillämpa en gradient map (Layer > New Adjustment Layer > Gradient Map) i två färger över en bild.

Välj önskad färg kombination för gradient map
En jämförelse av den ursprungliga bilden (till vänster) och när gradient map tillämpas (till höger)

Högerklicka (eller alt + klicka) justering för lager och skapa en urklippsmask att tillämpa gradient map att bara bilden lagret direkt under denna, i stället för den som ansöker om att alla lager.

Det används för att ta finjustering <canvas> – elementet för att beräkna färg kartläggning och måla leder till DOM eller använda CSS-blandning-lägen för att komma nära den önskade färgen effekt. Bra, tack vare potentiellt livräddande befogenheter SVG, kan vi skapa dessa Photoshop-liknande “justeringslager” med SVG-filter.

Låt oss få Spara!

Att bryta ner SVG

Vi är redan bekanta med vectorful storhet SVG. Förutom att producera skarp, flexibel, och små grafik, SVGs även stöd för över 20 filter som tillåter oss att sudda, morph, och göra så mycket mer för att våra SVG-filer. För detta tvåfärgat effekt, kommer vi att använda två filter för att konstruera vår gradient map.

feColorMatrix (tillval)

Den feColorMatrix effekt tillåter oss att manipulera färgerna i en bild som bygger på en matris av rbga-kanaler. Una Kravets detaljer färg manipulation med feColorMatrix i denna djupa dyk och det är ett starkt rekommenderat att läsa.

Beroende på din bild, kan det vara värt att balansera färgerna i bilden genom att ställa det till gråskala med color matrix. Du kan justera rbga-kanaler som du vill för önskad gråskala effekt.

<feColorMatrix typ=”matris” result=”gråskala”
värden=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
feComponentTransfer

Nästa steg är att kartlägga två färger över högdagrar och skuggor av vår bild i gråskala med feComponentTransfer filter effekt. Finns det specifika element attribut för att hålla i åtanke för det här filtret.

Attribut
Vad den Gör
Värde
färg-interpolation-filter (krävs) Anger färgen utrymme för lutning interpoleringar, färg animationer, och alfa compositing. sRGB
resultat (tillval) Tilldelar ett namn till detta filter effekt och kan användas/refereras till genom ett annat filter primitiva med i attribut. tvåfärgat

Medan resultat attribut är valfritt, jag gillar att ta det för att ge ytterligare kontext till varje filter (och som en handy observera för framtida referens).

Den feComponent filter hanterar färg kartläggning som bygger på överföring av funktioner för varje rbga-komponent anges som underordnade element för den förälder feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Vi använder dessa rbga funktioner för att beräkna värden av de två färgerna i gradient map.

Här är ett exempel:

Den Peachy Pink gradient map i skärmdumparna ovan använder sig av en gul färg (#bd0b91) , med värden för R(189) G(11) B(145).

Dela varje RGB-värdet av 255 för att få värdena från den första färgen i matrisen. RGB-värden i den andra kolumnen resultat i #fcbb0d (guld). Liknande i vår Photoshop gradient map, den första färgen (vänster till höger) får mappas till skuggorna, och den andra höjdpunkter.

<feComponentTransfer färg-interpolation-filter=”sRGB” result=”tvåfärgat”>
<feFuncR typ=”tabell” tableValues=”(189/255) 0.9882352941″></feFuncR>
<feFuncG typ=”tabell” tableValues=”(11/255) 0.7333333333″></feFuncG>
<feFuncB typ=”tabell” tableValues=”(145/255) 0.05098039216″></feFuncB>
<feFuncA typ=”tabell” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
Steg 3: Applicera Effekten med en CSS-Filter

Med SVG filter komplett, vi kan nu ansöka om det till en bild med hjälp av CSS-filter egendom och miljö url() filter-funktion för att ID SVG-filter.

Det är värt att notera att SVG innehåller filter kan bara vara ett dolt element som sitter i din HTML-kod. På det sättet är det massor och är availble för användning, men inte gör på skärmen.

background-image: url (sökväg/till/img’);
filter: url(/sökväg/till/svg/tvåfärgat-filter.svg#duotone_peachypink);
filter: url(#duotone_peachypink);
Webbläsare-Stöd

Är du förmodligen intresserad av hur väl underbyggd denna teknik är rätt? Tja, SVG-filter har en bra webbläsare.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
8 9 3 10 12 6

Mobil / Surfplatta

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

Som sagt, CSS-filter är inte så brett stöd. Det innebär att vissa graciös nedbrytning överväganden kommer att behövas.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Inga 17 6*

Mobil / Surfplatta

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

Till exempel, Internet Explorer (IE) inte har stöd för CSS-Filter url() funktion, och inte heller stöd för CSS bakgrund-blandning-lägen, är den nästa bästa vägen för att uppnå tvåfärgat effekt. Som ett resultat, är en fallback för IE kan vara ett helt placerad CSS gradient overlay på bilden för att efterlikna filter.

Dessutom, jag hade problem i Firefox när du använder filtret bygger på vägen för SVG-filter när jag ursprungligen för detta synsätt på ett projekt. Firefox verkade fungera endast om filtret var refereras med den fullständiga sökvägen till den SVG-fil istället för filter-ID ensam. Detta verkar inte vara fallet längre, men är värt att hålla i åtanke.

Att föra Alla Tillsammans

Här är en hel exempel på filter:

<svg xmlns=”http://www.w3.org/2000/svg”>
<filtrera id=”duotone_peachypink”>
<feColorMatrix typ=”matris” result=”gråskala”
värden=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
<feComponentTransfer färg-interpolation-filter=”sRGB” result=”tvåfärgat”>
<feFuncR typ=”tabell” tableValues=”0.7411764706 0.9882352941″></feFuncR>
<feFuncG typ=”tabell” tableValues=”0.0431372549 0.7333333333″></feFuncG>
<feFuncB typ=”tabell” tableValues=”0.568627451 0.05098039216″></feFuncB>
<feFuncA typ=”tabell” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
</filter>
</svg>

Här är den inverkan som när den appliceras på en bild:

En jämförelse av den ursprungliga bilden (till vänster) med filtrerad effekt (till höger) med hjälp av SVG!

Se Pennan Tvåfärgat Demo av Lentie Ward (@lentilz) på CodePen.

För fler exempel, du kan leka med mer tvåfärgat filter i den här pennan.

Resurser

Följande resurser är bra referenspunkter för de tekniker som används i det här inlägget.

  • SVG-Filter primitiva element – MDN dokumentation
  • Finjustering feColorMatrix – Una Kravets’ detaljerade inlägg på A List Apart