Met behulp van SVG te Maken van een Duotone Effect op de Beelden

0
61

Alles is mogelijk met SVG, toch?!

Na een jaar van samenwerken met een aantal grote ontwerpers en experimenteren te bereiken sommige pretty cool visuele effecten, het begint te voelen zoals het is. Een snelle zoektocht van “SVG” op CodePen zal dit beamen. Uit letters, vormen, sprites, animaties, en beeldmanipulatie, alles is beter met de steun van SVG. Dus wanneer u een nieuwe visual trend van de web hit van vorig jaar, het was geen verrassing dat SVG kwam de redding te kunnen uitvoeren.

De vonk van een trend

Advertenties overal verwelkomd in 2016 het nieuwe jaar met de vonk van een inkleuren techniek gepopulariseerd door Spotify 2015 Jaar in de Muziek-website (hier is vorig jaar) die geïntroduceerd vet, duotoon beelden van hun merk identiteit.

De Spotify-2015 Jaar in de Muziek site toont de duotoon-afbeelding techniek.

Deze techniek is een raster-weergave van een afbeelding door de overlapping van één kleur (traditioneel zwart) met een ander. In andere woorden, de donkere toon zal worden toegewezen aan de schaduwen van de afbeelding, en de lichtere toon, toegewezen aan de hoogtepunten.

We kunnen het bereiken van de duotoon techniek in Photoshop door het toepassen van een gradient map (Layer > New Adjustment Layer – > Gradient Map) van twee kleuren boven een afbeelding.

Kies de gewenste kleurencombinatie voor het verloop toewijzen
Een vergelijking van het originele beeld (links) en wanneer het verloop kaart is toegepast (rechts)

Klik met rechts (of alt + klik) de aanpassing van de laag en maak een clipping mask toepassen van het verloop toewijzen aan de afbeelding laag direct onder in plaats van het toepassen van alle lagen.

Het wordt gebruikt om finessing het <canvas> element voor het berekenen van de kleur kaart brengen en verf het resultaat aan de DOM of gebruik te maken van CSS mix-modi om dichtbij te komen tot de gewenste kleur effect. Goed, dankzij het potentieel levensreddende bevoegdheden van SVG, kunnen we deze Photoshop-achtige “aanpassingslagen” met SVG-filters.

Laten we Besparen!

Het afbreken van de SVG

We zijn al vertrouwd met de vectorful grootheid van SVG. Naast het produceren van scherpe, flexibele en kleine grafische afbeeldingen, SVGs ook ondersteuning van meer dan 20 filter effecten die ons in staat stellen om te vervagen, morph, en nog veel meer doen om onze SVG-bestanden. Voor deze duotone effect, zullen we gebruik maken van twee filters aan de bouw van onze gradient map.

feColorMatrix (optioneel)

De feColorMatrix effect stelt ons in staat om te bewerken van de kleuren van een afbeelding op basis van een matrix van rbga kanalen. Una Kravets details kleur manipulatie met feColorMatrix in deze diepe duik en het is een zeer aan te bevelen lezen.

Afhankelijk van uw afbeelding, het kan de moeite waard de afweging van de kleuren in het beeld door in te stellen grijstinten met de kleur matrix. U kunt de rbga kanalen als je wilt voor het gewenste effect grijstinten.

<feColorMatrix type=”matrix”, result=”grijswaarden”
waarden=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
feComponentTransfer

Naast het in kaart de twee kleuren over de hooglichten en schaduwen van onze grijstinten met de feComponentTransfer filter effect. Er zijn specifieke element attributen om in gedachten te houden voor dit filter.

Kenmerk
Wat het Doet
Waarde
kleur-interpolatie-filters (verplicht) Hiermee kunt u de kleurruimte voor de gradiënt van interpolaties, kleur animaties, en alpha compositing. sRGB
resultaat (optioneel) Kent een naam toe aan deze filter effect en kan worden gebruikt of waarnaar wordt verwezen door een andere filter primitieve met de in-attribuut. duotoon

Terwijl het resultaat attribuut is optioneel, ik wil nemen om te geven extra context van elk filter (en als een handige opmerking voor toekomstige referentie).

De feComponent filter zorgt voor de kleur toewijzing op basis van transfer functies van elk rbga component opgegeven als onderliggende elementen van de ouder feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Wij gebruiken deze rbga functies voor het berekenen van de waarden van de twee kleuren in het verloop toewijzen.

Hier is een voorbeeld:

De Peachy Roze verloop kaart in de screenshots hierboven maakt gebruik van een magenta kleur (#bd0b91) , met waarden van R(189) G(11) B(145).

Verdeel elk RGB waarde van 255 te krijgen van de waarden van de eerste kleur in de matrix. De RGB-waarden van de tweede kolom resultaat in #fcbb0d (goud). Vergelijkbaar met in onze Photoshop-verloop kaart, de eerste kleur (van links naar rechts) wordt toegewezen aan de schaduwen, en de tweede tot de hoogtepunten.

<feComponentTransfer kleur-interpolatie-filters=”sRGB” result=”duotone”>
<feFuncR type=”tabel” tableValues=”(189/255) 0.9882352941″></feFuncR>
<feFuncG type=”tabel” tableValues=”(11/255) 0.7333333333″></feFuncG>
<feFuncB type=”tabel” tableValues=”(145/255) 0.05098039216″></feFuncB>
<feFuncA type=”tabel” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
Stap 3: het Effect Toepassen met een CSS-Filter

Met de SVG-filter, kunnen we nu toepassen op een afbeelding met behulp van CSS eigenschap filter en het instellen van de url() functie filter de ID van de SVG-filter.

Het is vermeldenswaard dat de SVG-met de filter kan gewoon een verborgen element zit in uw HTML-code. Op die manier laadt en is beschikbaar voor gebruik, maar wordt niet weergegeven op het scherm.

background-image: url (‘/pad / naar/img’);
filter: url(/pad/naar/svg/duotoon-filters.svg#duotone_peachypink);
filter: url(#duotone_peachypink);
Browser Ondersteuning

U bent wellicht ook geïnteresseerd in hoe goed ondersteund deze techniek is, toch? Goed, SVG filters hebben een goede steun van de browser.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
8 9 3 10 12 6

Mobiele / Tablet

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

Dat gezegd hebbende, CSS-filters zijn niet zo breed ondersteund. Dat betekent dat sommige graceful degradation overwegingen nodig is.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Geen 17 6*

Mobiele / Tablet

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

Bijvoorbeeld, in Internet Explorer (IE) ondersteunt het CSS-Filter-url() functie, noch vormt het een ondersteuning voor CSS background-mix-functies, de volgende beste route voor het bereiken van de duotone effect. Als een resultaat, een fallback voor IE kunt een absoluut gepositioneerd CSS gradient overlay op de afbeelding om na te bootsen de filter.

Bovendien, ik deed problemen in Firefox bij het openen van het filter zelf is gebaseerd op het pad voor de SVG filter wanneer ik in eerste instantie heeft deze aanpak van een project. Firefox leek te werken, alleen als het filter is verwezen met het volledige pad naar de SVG-bestand in plaats van de filter-ID alleen. Dit lijkt niet meer het geval, maar is de moeite waard om in gedachten.

Om het Allemaal Samen

Hier is een volledig voorbeeld van het filter in gebruik:

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter-id=”duotone_peachypink”>
<feColorMatrix type=”matrix”, result=”grijswaarden”
waarden=”1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 1 0″ >
</feColorMatrix>
<feComponentTransfer kleur-interpolatie-filters=”sRGB” result=”duotone”>
<feFuncR type=”tabel” tableValues=”0.7411764706 0.9882352941″></feFuncR>
<feFuncG type=”tabel” tableValues=”0.0431372549 0.7333333333″></feFuncG>
<feFuncB type=”tabel” tableValues=”0.568627451 0.05098039216″></feFuncB>
<feFuncA type=”tabel” tableValues=”0 1″></feFuncA>
</feComponentTransfer>
</filter>
</svg>

Hier is de impact die het heeft wanneer het wordt toegepast op een afbeelding:

Een vergelijking van het originele beeld (links) met de gefilterde effect (rechts) met behulp van SVG!

Zie de Pen Duotoon Demo door Lentie Wijk (@lentilz) op CodePen.

Voor meer voorbeelden, die je kunt spelen rond met meer duotoon-filters in de pen.

Bronnen

De volgende bronnen zijn goede aanknopingspunten voor de technieken die worden gebruikt in deze post.

  • SVG Filter primitieve elementen – MDN documentatie
  • Finessing feColorMatrix – Una Kravets’ gedetailleerde plaatsen op Een Lijst uit Elkaar