Inkscape a SVG filtry - Drop Shadow

Vektorový editor Inkscape již delší dobu podporuje bitmapové SVG filtry, což je jedna z nejzajímavějších a nejmocnějších částí SVG specifikace. Bohužel je to také dost komplikovaná část, plná nesrozumitelných matematických vzorců, a tak je použití filtrů pro běžného grafika obtížnější než např. ve Photoshopu. Nedělám si iluze, že by nějakému grafikovi dělalo potěšení bádat nad maticovými transformacemi. V následujícím článku ukážu, jak lze pomocí SVG filtrů v Inkscape celkem jednoduše vytvořit jeden z nejpoužívanějších efektů – drop shadow, a to tak, aby jej bylo možné ovládat a přizpůsobit stejně snadno, jako ve Photoshopu. Viděl jsem už několik tutoriálů na tvorbu drop shadow v Inkscape, ale ve všech případech na to šli jejich autoři poněkud nešikovně. Následující řešení je jednoduché a prakticky použitelné.

Stručně k bitmapovým filtrům. SVG filtry se od efektů ve Photoshopu dost zásadně liší. Zatímco ve Photoshopu je k dispozici sada prefabrikovaných efektů, které lze přizpůsobit různými pevně danými parametry, v SVG nic takového není. V SVG si nejprve musíte filtr sami vyrobit – poskládat z jednotlivých elementárních stavebních prvků. Vzájemnou kombinací těchto základních stavebních prvků lze získat nepřeberné množství různých efektů. Pro popis teorie viz např. starší článek na Intervalu. Já se zaměřím na praktické použití.

Postup budu aplikovat na následujícím nápisu. Je to klasický případ inverzního textu, který je vhodné od tmavšího pozadí trošku odrazit:

Krok 1: Výplň plochy

Mnoho tutoriálů začíná zduplikováním samotného objektu, který se poté rozmaže a posune, ale takovýto postup neumožňuje žádnou kontrolu nad sílou efektu a barvou. Další možností je vzít alfa kanál objektu, což je jen o málo lepší. Ideální nástroj pro náš účel se ovšem skrývá pod nenápadným a zdálnivě nepoužitelným prvkem – Flood Fill. Ten nedělá nic jiného, než že vyplní oblast zvolenou barvou, což je perfektní základ pro celou řadu efektů. Oblastí je celá plocha, na kterou se aplikuje filtr – bounding box objektu – zvětšená o „rezervu“, o kterou výsledný filtr přesahuje plochu objektu – tento přesah lze nastavit v záložce Filter General Settings (standardně je to 10 % na každou stranu). Zde jsem tedy nechal výplň černou barvou s krytím 100 %:

Vstupem této komponenty je sice zdrojová grafika, ale na funkci to nemá vliv. Toto je výsledek:

Zatím nic moc, že?

Krok 2: Ořez

Teď by se hodilo, aby černá plocha, která bude tvořit stín, vyplnila pouze písmo, nikoliv celý obdélník. K tomu využiju prvek zvaný Composite. Ten slučuje dva zdroje podle různých algoritmů, řízených čtyřmi operátory. Jsou zde i přednastavené některé nejpoužívanější kombinace operátorů a mně se bude hodit preset zvaný In:

Výsledkem je omezení černého obdélníku z předchozího kroku na průnik s plochou zdrojového obrázku:

Krok 3: Rozostření

Správný stín není ostrý, ale mírně rozostřený. K tomu se hodí nejprofláknutější efekt vůbec – Gaussovské rozostření:

Ponechám decentní rozmaz o poloměru jednoho pixelu. Mimochodem – rozostření lze zadat i pro každý směr zvlášť, což se může hodit u různých speciálních efektů. A už se nám rýsuje pěkně rozmazaný stín:

Krok 4: Posun

Správný stín samozřejmě nemůže být přímo pod objektem, ale obvykle je o pár pixelů posunutý. K tomu je SVG vybaveno prvkem Offset:

Tady není co řešit – já jsem zvolil posun o jeden pixel doleva a o dva pixely dolů. Vy si samozřejmě zvolte posun podle vašeho postavení vůči slunci :) Aby to nebylo tak nudné, provedl jsem tady ještě drobnou korekci u Flood Fillu – snížil jsem krytí na nějakých 0,75:

Krok 5: Dokončení a finalizace

Stín by byl hotový, ale zato nemáme původní objekt. Nic není ztraceno, na pomoc přichází poslední komponenta – Merge. Ta nedělá nic jiného, než že smíchá několik zdrojů bitmapy do jedné. Stejného efektu lze mimochodem docílit i komponentou Blend, ale Merge je jednodušší a pro náš účel stačí. Takže smícháme vytvořený stín se zdrojovou grafikou:

A výsledkem je hotový stín:

Výhodou uvedeného postupu je, že lze následně snadno měnit parametry stínu (konkrétně barva stínu, krytí, poloměr rozostření a posun). Efekt je uložen v zásobníku a lze jej aplikovat na libovolné množství objektů. Veškeré změny parametrů se projevují v reálném čase na všech objektech, ke kterým je efekt přiřazený. Efekt je samozřejmě nedestruktivní, takže nyní můžeme text přepsat na něco smysluplného a stín se přizpůsobí novému textu. Mě už ale nic smysluplného nenapadá, takže tímto tutoriál končím. Nepotřebné instalačky Photoshopu házejte do kontejneru na plasty, komentáře pod článek.