• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Základy Grafiky
 

Základy Grafiky

on

  • 909 views

 

Statistics

Views

Total Views
909
Views on SlideShare
909
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Základy Grafiky Základy Grafiky Presentation Transcript

    • 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• specialtikou je webová grafika
    • 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