1. Základy grafiky
Ondřej Bartas

2. Obsah přednášky
• co je to grafika
• rozdíl mezi vektorovou a rastrovou grafikou
• open source / komerční programy
• specialtikou je webová grafika

3. Co je to grafika?

4. 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á

5. Užitá grafika
• nejčastější použití grafiky
• najdete ji úplně kdekoli
• internet, kavárna, noviny,
televize, knihy, plakáty

6. Umělecká grafika
• umění
• malíři

7. Vektor vs. Rastr

8. Rastrová grafika (používanější)
• fotky
• zápis dat
• tabulka (rozměr)
• buňka (1px)
• barvy - RGB(A)
• 8bit - 32bit

9. 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

10. Rastrová grafika - pro a proti
• PRO:
• fotografie
• PROTI:
• loga, ikony
• nedá se dobře zvětšovat
• velikost

11. Vektorová grafika

12. 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

13. 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

14. Open source programy

15. GIMP - rastrová grafika
• http://www.gimp.org/
• práce s fotkou
• retuše
• změnšování
• vrstvy

17. Inkscape - vektorová grafika
• http://inkscape.org/
• loga
• billboardy
• tisk velkých formátů

19. Komerční programy

20. Adobe Photoshop
- rastrová grafika
• www.adobe.com/photoshop
• práce s fotkou
• retuše
• změnšování
• vrstvy

22. Adobe Illustrator
- vektorová grafika
• www.adobe.com/illustrator
• loga
• billboardy
• tisk velkých formátů

24. Specialita - Webová grafika

25. Webová grafika
• Formáty: jpg, png, gif
• PNG a GIF podporují
průhlednost
• SVG - vektor jen částečně 80%

26. 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ů

27. 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

28. Rozsekané komponenty

29. Výsledná podoba

30. ondrej@bartas.cz