Základy grafiky   Ondřej Bartas
Obsah přednášky• co je to grafika• rozdíl mezi vektorovou a rastrovou grafikou• open source / komerční programy• specialtiko...
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• Gr...
Užitá grafika• nejčastější použití grafiky• najdete ji úplně kdekoli  • internet, kavárna, noviny,     televize, knihy, plak...
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)          ...
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 b...
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, opaci...
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á• vel...
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 tele...
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 roz...
Rozsekané komponenty
Výsledná podoba
ondrej@bartas.cz
Základy Grafiky
Základy Grafiky
Základy Grafiky
Základy Grafiky
Upcoming SlideShare
Loading in …5
×

Základy Grafiky

1,030 views

Published on

Published in: Art & Photos, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,030
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Základy Grafiky

  1. 1. Základy grafiky Ondřej Bartas
  2. 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. 3. Co je to grafika?
  4. 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. 5. Užitá grafika• nejčastější použití grafiky• najdete ji úplně kdekoli • internet, kavárna, noviny, televize, knihy, plakáty
  6. 6. Umělecká grafika• umění• malíři
  7. 7. Vektor vs. Rastr
  8. 8. Rastrová grafika (používanější)• fotky• zápis dat • tabulka (rozměr) • buňka (1px) • barvy - RGB(A) • 8bit - 32bit
  9. 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. 10. Rastrová grafika - pro a proti• PRO: • fotografie• PROTI: • loga, ikony • nedá se dobře zvětšovat • velikost
  11. 11. Vektorová grafika
  12. 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. 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. 14. Open source programy
  15. 15. GIMP - rastrová grafika• http://www.gimp.org/• práce s fotkou• retuše• změnšování• vrstvy
  16. 16. Inkscape - vektorová grafika• http://inkscape.org/• loga• billboardy• tisk velkých formátů
  17. 17. Komerční programy
  18. 18. Adobe Photoshop - rastrová grafika• www.adobe.com/photoshop• práce s fotkou• retuše• změnšování• vrstvy
  19. 19. Adobe Illustrator - vektorová grafika• www.adobe.com/illustrator• loga• billboardy• tisk velkých formátů
  20. 20. Specialita - Webová grafika
  21. 21. Webová grafika• Formáty: jpg, png, gif• PNG a GIF podporují průhlednost• SVG - vektor jen částečně 80%
  22. 22. 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ů
  23. 23. 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
  24. 24. Rozsekané komponenty
  25. 25. Výsledná podoba
  26. 26. ondrej@bartas.cz

×