Skicování jako základ vektorové ilustrace
Profesionální vektoroví ilustrátoři zpravidla nezačínají přímo v softwaru. Ruční skica na papíře nebo digitální kresba na grafickém tabletu slouží jako konstrukční základ, ze kterého se teprve odvíjí přesné vektorové obkreslení. Přístup „čisté konstrukce" – kdy se ilustrátor snaží vybudovat tvar přímo z Bézierových cest bez podkladové skici – je méně časově efektivní, ale někteří jej volí pro geometricky přesné kompozice (ikony, loga).
Pro digitální skicování se v českém prostředí nejčastěji používají grafické tablety Wacom (řada Intuos nebo Cintiq), případně iPad s Apple Pencil v kombinaci s Kritou nebo Procreate. Skica se poté importuje do vektorového editoru jako šablona (template vrstva) a obkresluje nástrojem pera.
Nástroj pera a tvorba cest
Nástroj pera (Pen Tool) je centrálním prvkem vektorové ilustrace. Kliknutím se vytváří uzlové body (anchor points), tažením se nastavují řídicí body Bézierovy křivky. Práce s nástrojem pera vyžaduje praxi – intuitivní pochopení toho, jak řídicí body ovlivňují tvar křivky, přichází až po hodinách cvičení.
Doporučovaným postupem je minimalizovat počet uzlových bodů: čím méně bodů křivka má, tím plynulejší a editovatelnější zůstává. Složitý organický tvar (postava, list rostliny) by měl být konstruován z oddělených cest, nikoli z jediné cesty se stovkami bodů.
Uzavřené a otevřené cesty
Otevřená cesta má volný začáteční a koncový bod – hodí se pro linie, kontury a tahy. Uzavřená cesta (počáteční bod splyne s koncovým) definuje tvar s vnitřní plochou, které lze přiřadit výplň (fill). Vektorová ilustrace zpravidla kombinuje oboje: uzavřené tvary jako barevné plochy a otevřené cesty jako kontury nebo detaily.
Barevné zpracování vektorových ilustrací
Tradiční přístup vektorové ilustrace pracuje s plochými barevnými plochami (flat design) bez přechodů. Tento styl je charakteristický pro ikony, piktogramy a moderní grafický design. Barvy se přiřazují jako atributy fill a stroke jednotlivým cestám.
Složitější ilustrace využívají přechody (gradients): lineární nebo radiální. V SVG jsou přechody definovány v sekci <defs> a referencovány atributem fill="url(#gradientId)". Některé programy nabízejí mesh gradients (síťové přechody) pro simulaci prostorového modelování – tato funkce je dostupná v Inkscape i Adobe Illustratoru, ale není součástí základní SVG specifikace.
Barevná paleta a konzistence
Profesionální ilustrace pracuje s omezenou paletou – typicky 4 až 8 základních barev s jejich světlými a tmavými variantami. Globální barvy (global swatches) v Illustratoru nebo palety v Inkscape umožňují přebarvit celou ilustraci změnou jedné hodnoty, což zjednodušuje práci s klientskými zakázkami.
Pro konzistentní barevnou práci v SVG je doporučeno definovat barvy přes CSS proměnné (:root { --primary: #f54e00; }) přímo v SVG. Tím je ilustrace snadno přebarvitelná přes CSS bez otevírání designového editoru.
Typografie v digitální ilustraci
Text je ve vektorové grafice plnohodnotným designovým prvkem. Typografická hierarchie (nadpis, perex, popis) se v ilustraci dodržuje stejně jako v sazbě. Při přípravě tiskového souboru je nutné buď vložit fonty do PDF, nebo je nastínit (convert to outlines) – převést na křivky, aby tiskárna nepotřebovala konkrétní font nainstalován.
Pro webové SVG platí opačné pravidlo: text zachovaný jako editovatelný text je přístupnější pro odečítače obrazovky a vyhledávače. Font se pak načítá přes CSS (@font-face nebo Google Fonts).
Pracovní postup od skici po export
| Krok | Popis | Nástroj |
|---|---|---|
| 1. Skica | Ruční nebo digitální nákres kompozice | Papír, iPad/Wacom + Krita |
| 2. Import šablony | Skica jako zamčená podkladová vrstva | Inkscape / Illustrator |
| 3. Obkreslení | Tvorba vektorových cest nástrojem pera | Pen Tool |
| 4. Barevné vyplnění | Přiřazení barev a přechodů tvarům | Fill / Stroke panel |
| 5. Typografie | Sazba textových vrstev | Text Tool |
| 6. Optimalizace | Zjednodušení cest, smazání šablony | SVGO, Simplify Paths |
| 7. Export | SVG pro web, PDF/X-3 pro tisk | Export dialog |
Export pro tisk versus web
Export pro webové nasazení preferuje formát SVG s minimalizací metadat (SVGO). Výsledný soubor může být inline vložen do HTML nebo načten jako externí <img src="ilustrace.svg">. Pro rasterizovaný web výstup (například náhledové obrázky) se doporučuje PNG s průhledností při rozlišení 2× (retina).
Pro tisk je standardem PDF/X-3 nebo PDF/X-4 s vloženými barvovými profily a nastíněnými fonty. Výstupní profil závisí na tiskárně: rotační ofset zpravidla vyžaduje CMYK s Fogra39, digitální tisk přijímá RGB-to-CMYK konverzi na výstupní straně.
Animace SVG ilustrací
SVG podporuje nativní animaci přes CSS transitions, CSS @keyframes nebo SMIL (SVG Animation). CSS animace jsou dnes preferovanou metodou pro jednoduchou kinematiku (pohyb prvků, změna barvy, průhlednosti). Komplexní animace s tvarovými přechody (morphing) vyžaduje specializované nástroje jako GreenSock GSAP nebo Lottie (pro After Effects workflow).
