Grafika
Pro práci s grafikou je vhodné mít:
- zkalibrovaný monitor, projektor, tiskárnu, skener, fotoaparát atd. (např. kalibrační sonda x-rite)
- při předávání dokumentů předávat i barevný profil monitoru (ICC, ICM)
- při úpravách fotografií používejte příslušný Minilab ICC (ICM) profil prostřednictvím kterého budete fotografie tisknout
- osvětlení 5200 K
- co možná největší zobrazovací plochu
- tablet (tablet notebook, tablet pc, apple tablet)
Pro média je vhodné na web umístit logo ve vektorové grafice společně s informacemi o barvách a písmu (např. Loga a grafický manuál | Česká pojišťovna)
Rastrová grafika
V rastrové (bitmapové) grafice je celý obrázek popsán pomocí jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky. Každý bod má určen svou přesnou polohu a barvu. Kvalitu záznamu obrázku ovlivňuje především rozlišení (zobrazení 96 dpi, tisk 300 dpi) a barevná hloubka (počet barev).
Výhody:
- obrázek je možné vytvořit pomocí digitálního fotoaparátu nebo skeneru
Nevýhody:
- velké nároky na výkon počítače (plocha m2 ≈ souboru o velikosti 1 GB)
- při změně velikosti dochází ke zhoršování kvality
Použití:
- úprava digitálních fotografií
- webová grafika
- vlastní grafická díla
Editory:
- Gimp (XCF)
- Adobe Photoshop (PSD)
- Corel PHOTO-PAINT (CPT)
Ukázka: Dove Evolution
Otázky
Jaký bude obrázek při změně rozlišení monitoru z 1024x768 px na 800x600 px?
- menší
- stejně velký
- větší
Kolik pixelů má 12 Mpx foťák?
- 120 milionů
- 12 milionů
- 12 tisíc
Vektorová grafika
Vektorový obrázek je složen ze základních geometrických útvarů jako jsou body, přímky, křivky a mnohoúhelníky.
Výhody:
- změna velikosti bez ztráty kvality
- obrázek je rozdělen na samostatné objeky, se kterými je možné pracovat odděleně
- mnohem nižší nároky na výkon počítače než u rastrové grafiky
Nevýhody:
- pracné vytvoření obrázku
- příliš složiné objekty zvyšují nároky na výkon počítače (nevhodné pro fotografie)
Použití:
- logo
- počítačová sazba
- diagramy
- animace
- vlastní grafická díla
Editory:
- Inkscape (SVG)
- Adobe Illustrator (AI)
- CorelDraw (CDR)
Bézierova křivka
Obrázek není složen z jednotlivých bodů, ale z křivek – vektorů.
Křivky spojují jednotlivé kotevní body a mohou mít definovanou výplň (barevná plocha nebo barevný přechod). Tyto čáry se nazývají Bézierovy křivky, které umožňují pomocí čtyř bodů popsat libovolný úsek křivky.
Křivka je popsána pomocí dvou krajních kotevních bodů a dvou editačních bodů, které určují tvar křivky. Spojnice mezi kotevním a editačním bodem se nazývá směrová úsečka a je tečnou k výsledné křivce.
Grafické formáty
Rastrové (bitmapové) formáty
Přehled základních rastrových formátů
Vlastnost |
GIF |
JPEG |
PNG |
TIFF |
Model RGB |
256 barev
(8 bitů) |
16 milionů
(24 bitů) |
16 milionů
(24 bitů) |
16 milionů
(24 bitů) |
Model CMYK |
|
4 miliardy
(32 bitů) |
|
4 miliardy
(32 bitů) |
Gama korekce |
|
|
|
|
Průhlednost |
2 úrovně
(1 bit) |
|
256 úrovní
(8 bitů) |
256 úrovní
(8 bitů) |
Komprese |
bezztrátová |
ztrátová |
bezztrátová |
bezztrátová |
Proklad |
|
|
|
|
Animace |
|
|
|
|
Vrstvy |
|
|
|
|
GIF (Graphics Interchange Format)
- určení: archivace, webová grafika, nadpisy, plakáty, loga
- nevhodné pro: barevné fotografie
JPEG (Joint Photographic Experts Group)
- určení: fotografie, hladké přechody v tónu a barvě
- nevhodné pro: mnohonásobné zpracování a fotomontáže, perokresbu, text, ikonky (rušivé artefakty)
PNG (Portable Network Graphics)
- určení: archivace, text, čárová grafika, čisté barevné plochy a ostré rozhraní barev
- nevhodné pro: fotografie (5-10x větší soubor oproti JPEG)
- průhlednost PNG umí až IE7+
- pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku
TIFF (Tag Image File Format)
- určení: tisk, archivace obrázků
ICO
Ikona favicon.ico (Favorite Icon – favicon) usnadňuje uživateli vizuální odlišení jednotlivých webů. Obsahuje několik vrstev stejného obrázku v různé kvalitě.
- Vrstva (adresní řádek prohlížeče, minimalizované okno atd.):
- velikost: 16x16 px
- počet barev: 16 (4 bity)
- Vrstva (hlavní panel systému atd.):
- velikost: 32x32 px
- počet barev: 256 (8 bitů)
- Vrstva (pracovní plocha atd.):
- velikost: 48x48 px
- maximální počet barev: 232 (32 bitů)
Asi nejrychleji můžete vytvořit ale hlavně zkontrolovat funkčnost favicony pomocí online služby Realfavicongenerator.
Další rozměry:
- Favicon
- favicon-16x16.png - The classic favicon, displayed in the tabs
- favicon-32x32.png – Main panel, Safari on Mac OS
- favicon-48x48.png – Desktop
- favicon-96x96.png - Google TV
- favicon-160x160.png - Opera Speed Dial
- favicon-192x192.png - Android Chrome M36+
- Apple Icons
- apple-touch-icon.png
- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch
- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7
- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≤ 6
- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS ≥ 7
- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS ≤ 6
- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS ≥ 7
- apple-touch-icon-144x144.png - iPad (with 2× display) iOS ≤ 6
- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS ≥ 7
- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS ≥ 8
- apple-touch-icon-precomposed.png (180x180)
- Windows 8 Icons
- mstile-70x70.png - Windows 8.1 / IE11
- mstile-144x144.png - Windows 8 / IE10
- mstile-150x150.png - Windows 8.1 / IE11
- mstile-310x150.png - Windows 8.1 / IE11
- mstile-310x310.png - Windows 8.1 / IE11
- Apple Startup Images
- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait)
- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape)
- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait)
- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape)
- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5
- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina)
- apple-touch-startup-image-320x460.png - iOS 6 iPhone
Odkaz na ikonu umístěte do hlavičky (X)HTML dokumentu:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Nejlepším místem pro soubor favicon.ico je kořenový adresář (root) webu.
apple-touch-icon.png
Apple zařízení iPhone, iPod a iPad hledá pro zobrazení ikony webu na plože níže uvedené soubory:
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png (129x129 px)
- použije se náhled webu (ovšem v logu webu budou chybová hlášení 404 – soubor nenalezen)
Obrázky se umisťují buď přímo do kořene webu nebo se pomocí meta tagu k nim definuje cesta (jedna):
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
nebo více cest pro každý rozměr (57x57, 72×72, 114×114 a 129x129 px) zvlášť:
<link rel="apple-touch-icon" sizes="57×57" href="images/apple-touch-icon-ipad-57.png" />
<link rel="apple-touch-icon" sizes="72×72" href="images/apple-touch-icon-ipad-72.png" />
<link rel="apple-touch-icon" sizes="114×114" href="images/apple-touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="129×129" href="images/apple-touch-icon-iphone-129.png" />
V nejjednodušší variantě stačí pouze umístit do kořene webu apple-touch-icon.png o rozměrech 129x129 px. Zařízení si velikosti přizpůsobí dle potřeb (k zakulacení rožků dochází automaticky). Při použítí pouze souboru apple-touch-icon.png nebudou použity žádné další efekty.
Tvorba a editace
Asi nejrychleji můžete vytvořit favicon pomocí online služby Bradicon. Pro vytváření a editaci je možné použít např. aplikaci Gimp.
Poznámka:
V Internet Exploreru se ikona zobrazuje až po přidání webové stránky do oblíbených položek.
XCF
- nativní formát aplikace Gimp
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
PAT
- formát obrázků používaných nástrojem Plechovka a Razítko pro výplně vzorkem
- v aplikaci Gimp se ukládají do adresáře
patterns
ABR
GBR
- formát pro stopy štětce
- mód:
- RGB – otisk štětce je barevnou kopií stopy
- odstíny šedi – pro otisk se použije aktuální barva popředí
GIH
- formát pro animované stopy štětce citlivé na směr pohybu štětce
PSD
- nativní formát aplikace Adobe Photoshop
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
CPT
- nativní formát aplikace Corel PHOTO-PAINT
- umožňuje ukládat společně rastrové i vektorové obrázky
- zachovává vrstvy, kanály a cesty
TGA
- textury 3D modelovacích programů
Vektorové formáty
SVG
AI
- nativní formát aplikace Adobe Illustrator
- umožňuje ukládat společně rastrovou i vektorovou grafiku
- lepší vektory než EPS
CDR
- nativní formát aplikace CorelDraw
- umožňuje ukládat společně rastrovou i vektorovou grafiku
PS (PostScript)
- nezávislý na zařízení, na kterém se má tisknout
- tisknutelná oblast je celý list papíru
EPS (Encapsulated PostScript)
- nezávislý na zařízení, na kterém se má tisknout
- tisknutelná oblast je pouze obrázek
- umožňuje ukládat společně rastrovou i vektorovou grafiku
- lepší barvy než AI
Digitální negativ
RAW [ro:] (surový, nezpracovaný)
- data digitálního snímače, která nejsou nijak zpracovaná (soubor RAW není jako obrázek přímo použitelný, ale obsahuje všechny potřebné informace k jeho vytvoření)
- vlastnosti fotografie (např. vyvážení bílé) se dají upravit ještě stažením do počítače
- každý výrobce používá svoji vlastní příponu RAW soboru (RAW, NFG, DNG, CRW, CR2, NEF, ORF, MRW atd.)