Vektorová vs. rastrová grafika – kdy použít ten správný typ

| Kateřina Mrenová
Vektorová vs. rastrová grafika – kdy použít ten správný typ

Zamysleli jste se někdy nad tím, proč některé obrázky při zvětšení vypadají rozmazaně a jiné zůstávají ostré? Přesně v tom je rozdíl mezi rastrovou a vektorovou grafikou.


Prezentační web, grafický design nebo herní grafika – to všechno jsou oblasti, kde se setkáte s vektorovou i rastrovou grafikou. Oba formáty mají své místo a využití. V PUXu při návrhu firemních brožur používáme vektorovou grafiku pro loga a ikony díky její škálovatelnosti, zatímco fotografie zákazníků zpracováváme v rastrové grafice, která lépe zachytí detaily a barvy fotografií.

Klíčové rozdíly

Pixely vs. matematika

Rastrové obrázky se skládají z barevných pixelů uspořádaných tak, aby tvořily obraz. Pokud zvětšíte rastr, bude pixelovat nebo bude rozmazaný. Vektorová grafika, na druhou stranu, je tvořena matematickými rovnicemi, které se při změně jejich velikosti přepočítávají; můžete tedy nekonečně zvětšovat vektorovou grafiku a zachovat ostré hrany.

Skutečná Grafika

Vektorové obrázky se skládají z tvarů a každý tvar má svou vlastní barvu, což znamená, že nemohou dosáhnout barevných přechodů, stínů a stínování jako rastrové obrázky. Rastrované obrázky jsou schopny zobrazit nesčetné množství barev v jediném obrázku a umožňují úpravy barev nad rámec vektorového obrázku.

Typ a velikost souboru

Rastrované obrázky musí obsahovat všechny informace potřebné k vykreslení obrázku –  pixely, barvy, uspořádání pixelů a další. Komprese může pomoci minimalizovat tyto velikosti souborů. Vektory spoléhají na výpočty, takže jedinou informací, kterou musí obsahovat, jsou jejich matematické vzorce.

Vektorovou grafiku můžete zvětšovat do nekonečna a ještě dál

Vektorová grafika je tvořena matematickými rovnicemi, body, čarami a tvary.

To znamená, že se skládá z cest, z nichž každá má matematický vzorec (vektor), který říká, jak je cesta tvarována a jakou barvou je ohraničena nebo vyplněna. Díky těmto vzorcům může náš grafik vektorovou grafiku nekonečně škálovat bez ztráty kvality.

Naši grafici sáhnou po vektorové grafice, pokud:

  • potřebují obrázek, který jde zvětšit nebo zmenšit,a to bez ztráty kvality,
  • chtějí vytvořit soubor, který zabírá minimum místa,
  • vyžadují podporu formátů jako SVG, EPS, PDF nebo AI,
  • vytvářejí loga, ikony, ilustrace nebo typografii,
  • potřebují snadnou a rychlou úpravu grafiky,
  • hledají škálovatelné řešení.

Výhod vektorové grafiky je mnoho. Pojďme si je společně projít.

Na velikosti nezáleží 

Vektorová grafika je nesmírně flexibilní. Bez ohledu na to, jak moc potřebujete obrázek zvětšit nebo zmenšit, kvalita zůstane nedotčena. Vytvoříte tak grafiku, která vypadá dobře jak na vizitkách, tak na billboardech.

Navíc ušetříme hromadu místa na disku

Souborové velikosti vektorové grafiky jsou minimální –  je totiž založená na matematických vzorcích, a tak zabírá mnohem méně místa než klasická rastrová grafika. To je výhodné nejen pro úsporu místa na disku, ale i pro rychlé načítání webových stránek.

Mohu nabídnout SVG nebo raději PDF?

Na to by se vás vektorová grafika nejspíš zeptala, kdyby uměla mluvit – podporuje totiž formáty jako SVG, EPS, PDF a AI. To vám dává svobodu volby a zajišťuje, že vaše grafika bude kompatibilní s většinou softwarů a platforem.

Univerzálnost použití

Vektorová grafiku použijete při tvorbě pro loga, ikony, ilustrace a typografie.  Díky své čistotě a ostrosti je ideální pro designové prvky, které musí vypadat perfektně v jakékoliv velikosti. Ilustrace a typografie těží z nekonečné škálovatelnosti, která umožňuje bezproblémové zvětšení nebo zmenšení bez ztráty kvality.

V PUXu je vektorová grafika naším denním chlebem

Jak jsme psali již výše, naši grafici používají oba styly – vektor i raster. Mrkněte, jak si náš grafik Hynek parádně poradil s logy pro naše klienty ISAN a WBIO právě za použití vektoru.

Rastrová grafika nabízí svět plný barev a detailů

Rastrová grafika, také známá jako bitmapová, se skládá z jednotlivých pixelů barvy. Každý pixel přispívá k celkovému obrazu a poskytuje bohaté detaily a úpravy pixel po pixelu. Digitální fotoaparáty vytvářejí rastrové obrázky a všechny fotografie, které vidíte v tisku a online, jsou právě ty rastrové.

Naši grafici sáhnou po rastrové grafice, pokud:

  • potřebují obrázek s vysokou úrovní detailu a věrným zachycením složitých obrazů,
  • pracují s digitálními fotografiemi,
  • vytvářejí obrazy s detailními texturami,
  • využívají formáty souborů jako JPEG, PNG, TIFF, PSD,
  • chtějí pracovat s velkými soubory pro zachování kvality při vyšším rozlišení a počtu barev.

Rastrová grafika má dlouhou historii, sahající až k prvním počítačovým displejům, které byly schopné zobrazovat pouze malé množství pixelů. Postupně se vyvinula do dnešní podoby s vysokým rozlišením a bohatými barvami, které vidíme na moderních monitorech a tiskárnách.

Rastrová grafika má spoustu pravidel a výhod

Tady už na velikosti záleží

Rastrová grafika ztrácí kvalitu při změně rozměrů. Když zvětšíte obraz, pixely se stanou viditelnými a kvalita se sníží. Proto pracujte s vysokým rozlišením od začátku, ať dosáhnete požadované kvality i při úpravách.

Zachytí i sebemenší detail

Nabízí vysokou úroveň detailu a přesné zachycení složitých obrazů. Je ideální pro digitální fotografie a detailní grafické práce, které vyžadují pečlivé zobrazení jemných detailů, barev a textur.

Ale zabere více místa na disku

Velikost souborů u rastrové grafiky je větší, hlavně pokud pracujete s vysokým rozlišením a širokou škálou barev. I když získáte velmi detailní obraz, zabere vám více místa na disku.

Univerzální použití

Rastrová grafika je skvělá pro fotky, ilustrace s mnoha detaily a složité obrazy. Dobře funguje v tištěných materiálech, na webu nebo v digitálním umění, protože dokáže vykreslit i ty nejmenší detaily. Když se s ní pracuje správně, stává se nepostradatelným nástrojem pro vytváření krásných vizuálů.

 

Pojďme se na chvilku přenést do světa her

Pokud patříte mezi fanoušky her, stejně jako my v PUXu, určitě oceníte, jak vektorová grafika dokáže pozvednout vizuální kvalitu a zážitek z hraní. Podívejme se, kde ji můžete najít a jaká kouzla a efekty do světa her přináší. 

Příklady použití vektorové grafiky ve hrách

Ve světě her se vektorová grafika používá hlavně pro uživatelská rozhraní (UI) a herní loga. Například:

  • „Monument Valley“: tato hra využívá vektorovou grafiku k vytváření čistých geometrických tvarů, které se perfektně hodí pro mobilní zařízení.
  • „Mini Motorways“: arkádová hra, která využívá vektorové grafiky k vytváření jasných a ostrých tvarů.

Příklady použití rastrové grafiky ve hrách

Rastrovou grafiku najdete běžně ve hrách, které vyžadují vysoký stupeň detailů a realistické textury:

  • Grand Theft Auto V“: využívá rastrové textury k vytvoření živého a věrohodného městského prostředí.
  • „Minecraft“: i když má pixelový styl, každý jednotlivý pixel je důležitý a přispívá k celkovému vzhledu hry.

Kdy tedy použít rastr nebo vektor?

Rastrové obrázky:

  • Fotografie: rastrové obrázky jsou ideální pro fotografie, které vyžadují složité barevné směsi a detaily.
  • Digitální malby: ideální pro vytváření digitálních maleb v programech, jako je Photoshop a GIMP.
  • Webové obrázky: lze je komprimovat pro ukládání a obrázky optimalizované pro web.

Vektorové obrázky:

  • Loga a ilustrace: nejlepší pro loga, ilustrace, rytiny, lepty, umělecká díla, nápisy a výšivky.
  • Grafický design: ideální pro návrhy, které používají jednoduché plné barvy a škálovatelné tvary.
  • Tiskové materiály: vynikající pro tisk samolepek a dalších projektů, které neobsahují fotografie.

 

Pokud máte zájem o vytvoření grafického návrhu na míru nebo potřebujete poradit, zda je pro váš projekt vhodnější vektorová nebo rastrová grafika, neváhejte nás kontaktovat. Rádi vám pomůžeme najít nejlepší řešení.

Buďte v obraze ve světě webů a e-shopů
Přihlaste se k odběru našeho newsletteru

Každé 3 měsíce vám pošleme oběžník s horkými informacemi ze světa vývoje a webdesignu, novinkami v e-commerce sféře i akčními nabídkami pro ještě lepší web.
Přihlášením k newsletteru souhlasíte s našimi zásadami zpracování osobních údajů.

Umíme vše, co je pro váš projekt potřeba

Nebo vás nejprve zajímá, jak to u nás vypadá?

Zákulisní informace i to, na čem zrovna pracujeme, sdílíme na sociálních sítích. Sledujte nás.