Základy Grafiky

Ondřej BartasZáklady grafiky

• co je to grafika

• rozdíl mezi vektorovou a rastrovou grafikou

• open source / komerční programy

• specialtikou je webová grafika

Obsah přednášky

Co je to grafika?

Co je to grafika?

• Wikipedie: visuální zobrazení na nějakém povrchu

• Do grafiky se počítá

• text

• ilustrace

• barvy

• Grafika je umělecká nebo užitá

Užitá grafika

• nejčastější použití grafiky

• najdete ji úplně kdekoli

• internet, kavárna, noviny, televize, knihy, plakáty

Umělecká grafika

• umění

• malíři

Vektor vs. Rastr

Rastrová grafika (používanější)

• fotky

• zápis dat

• tabulka (rozměr)

• buňka (1px)

• barvy - RGB(A)

• 8bit - 32bit

Rastrová grafika - 1pixel• 1 pixel | 1px

• skládá se z barev R, G, B

• každá barva je zapsána 8 - 32 bity

• čím více bitů, tím jemnější může být | nevýhodou je velikost

Rastrová grafika - pro a proti

• PRO:

• fotografie

• PROTI:

• loga, ikony

• nedá se dobře zvětšovat

• velikost

Vektorová grafika

Vektorová grafika

• souřadnicový systém

• objekt

• složen z bodů

• propojení přes Bezierovu křivku

• barva, opacita, gradient

• čára - barva, tloušťka

• umístění z-index

Vektorová grafika

• ukládá jen informace o tom jak by výsledek měl vypadat

• rozlišení nehraje roli, vše se dopočítává

• velikost je malá oproti rastru

Open source programy

GIMP - rastrová grafika

• http://www.gimp.org/

• práce s fotkou

• retuše

• změnšování

• vrstvy

Inkscape - vektorová grafika

• http://inkscape.org/

• loga

• billboardy

• tisk velkých formátů

Komerční programy

Adobe Photoshop- rastrová grafika

• www.adobe.com/photoshop

• práce s fotkou

• retuše

• změnšování

• vrstvy

Adobe Illustrator- vektorová grafika

• www.adobe.com/illustrator

• loga

• billboardy

• tisk velkých formátů

Specialita - Webová grafika

Webová grafika

• Formáty: jpg, png, gif

• PNG a GIF podporují průhlednost

• SVG - vektor jen částečně 80%

Webová grafika

• musíte řešit rozlišení uživatele

• používají se CSS styly

• řešit jak to bude třeba vypadat na mobilním telefonu

• velikost písma musí být rozumná

• v dnešní době už je rozumná podpora fontů

Vytvoření návrhu webové grafiky

• návrh na papír či rovnou v programu na vektory

• poté převedení do rastru ve správném rozlišení

• rozsekání celého vzhledu na komponenty

• napsání CSS stylu a HTML

Rozsekané komponenty

Výsledná podoba

ondrej@bartas.cz