Vektorová grafika

• Vektorový obrázek je složen ze základních geometrických útvarů

  • body, přímky, křivky a mnohoúhelníky

• Obrázek je složen z křivek – vektorů

  • čára definovaná v kartézském souřadném systému svým počátečním a koncovým bodem

• 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

    • křivka je popsána pomocí dvou krajních bodů (tzv. kotevní body) a dvou bodů, které určují tvar křivky (tzv. kontrolní body).

Výhody vektorové grafiky:

• Je možné libovolné zmenšování nebo zvětšování obrázku bez ztráty kvality

• Je možné pracovat s každým objektem v obrázku odděleně

• Výsledná paměťová náročnost obrázku je obvykle mnohem menší než u rastrové grafiky

Nevýhody vektorové grafiky:

• Oproti rastrové grafice zpravidla složitější pořízení obrázku

• Překročí-li složitost grafického objektu určitou mez, začne být vektorová grafika náročnější na operační paměť a procesor než grafika bitmapová

Vznik vektorové grafiky

• Vektorový popis obrazu vzniká

  • především ručně - člověk v kreslícím programu vytváří požadované geometrické tvary a nastavuje jim odpovídající vlastnosti

    • V případě např. grafů nebo diagramů může příslušné tvary vytvořit i sám program, stačí mu zadat typ grafu či diagramu a potřebná data (hodnoty pro graf či vztahy pro diagram)

  • tzv. vektorizací rastrového obrázku – proces převodu rastrového obrázku na vektorový

    • Vektorizace bývá úspěšná, pokud jsou na obrázku jednoduché objekty s jasným ohraničením, v opačném případě jsou výsledky často neuspokojivé

Použití vektorové grafiky

• Vektorová grafika je vhodná především pro jednodušší obrázky (méně objektů), které se snadno popisují geometrickými tvary (jednoduché tvary objektů)

• Mezi typická použití vektorové grafiky patří například:

  • Diagramy a grafy

  • Loga firem a písmo

  • GPS navigace

  • Oblast počítačového návrhu (CAD = Computer Aided Design)

    • např. oblast strojírenství, stavebnictví a architektury, návrhu elektrotechnicky, geografie apod.

    • často se provádí ve třech rozměrech (3D = 3 dimensions), tj. ne jen na ploše, ale v prostoru

Programy pro úpravu vektorové grafiky

• Programy pro vektorovou grafiku často patří mezi složitější (a dražší)

  • Jednoduché diagramy a grafy lze vytvářet i v Microsoft Office (Word, Excel, popř. specializovaný Visio) nebo OpenOffice.org (Writer, Calc, popř. specializovaný Draw)

  • Pro složitější obrázky lze použít např. programy Adobe InDesign, CorelDRAWnebo zdarma dostupný Inkscape

  • Mezi programy zvládající práci s prostorovou (3D) grafikou patří např. programy AutoCAD nebo Autodesk 3ds Max.

• Soubory s vektorovou grafikou nejsou příliš rozšířené, protože jejich zobrazení nebo úprava často vyžaduje programy, které nejsou zdarma

  • Program Adobe InDesign ukládá do souborů *.aj

  • program CorelDRAW do *.cdr

  • Kliparty mívají podobu souborů *.wmf (Windows Metafile)

  • Diagramy uložené v programu Visio jsou soubory *.vsd, kresby programu OpenOffice.org Draw zase *.odg (OpenDocument Graphics)

  • Mezi vektorovou grafiku lze zařadit i technologii Flash (*.swf) a dokumenty PDF (*.pdf)

Grafika a text

• Každý text má svou grafickou podobu – jednotlivé znaky textu nějak vypadají

• Popis tvaru znaků se označuje jako písmo nebo také font, například:

  • ABCabc (písmo Times New Roman)

  • ABCabc (písmo Arial)

  • ABCabc (písmo Courier New)

• Většina písem má dnes vektorovou podobu (tvary znaků jsou popsány geometrickými křivkami), proto není problém používat různé velikosti písma – na obrazovce i při tisku budou znaky vykresleny vždy v nejvyšší možné kvalitě

Digitalizace textu – OCR

• Digitalizací tištěného textu rozumíme převod textu z tištěné předlohy (obrázku textu, noviny, knihy, …) na posloupnost znaků a jejich uložení v počítači – OCR (Optical Character Recognition)

• Typicky se k digitalizaci textu používá skeneru, postup je zhruba následující:

  • Tištěný text (předlohu) vložíme do skeneru a skenujeme

  • Vznikne obrázek – datový soubor v rastrové grafice

  • Obrázek se načte do OCR programu, kde probíhá rozpoznávání jednotlivých znaků (písmen) - z rastrové předlohy se rozpoznávají samostatné objekty, které se srovnávají s předlohami písmen, a pokud vyhovují, prohlásí se spojitá rastrová oblast za jeden znak

  • Eventuálně je provedena korektura – některá písmena nemusí být rozpoznána správně

  • Nakonec uložíme data do zvoleného typu souboru

Skener

• Skener je zařízení, které převádí tištěnou předlohu na obrázek v rastrové grafice

  • Obrazová předloha je po řádcích osvětlována, tmavé oblasti odrážejí méně světla než plochy světlé

  • Odražené světlo dopadá soustavou zrcadel na světlocitlivýsnímač CCD (Charge CoupledDevice), světelné senzory obsažené v tomto snímači převedou obrazovou informaci na digitální signál (jeho intenzita odpovídá množství odraženého světla)

  • Intenzita odraženého světla je pak chápána jako barva jednotlivých bodů předlohy

Barva a barevné modely

Barva

• Barva – směs záření o různých vlnových délkách

  • Část spektra viditelného záření, odraženého předmětem, jehož barvu posuzujeme okem pozorovatele

• Barva je závislá na mnoha okolních podmínkách:

  • spektrální složení dopadajícího světla a směr jeho dopadu

  • směr pohledu pozorovatele

  • vlastnosti povrchu

  • vlastnosti pozorovatele (kvalita zraku, přizpůsobení okolnímu světlu, apod.)

Barevný model RGB

• Barevný model RGB neboli červená-zelená-modrá (Red Green Blue)

  • aditivní způsob míchání barev používaný ve všech monitorech a projektorech (jde o míchání vyzařovaného světla), tudíž nepotřebuje vnější světlo (monitor zobrazuje i v naprosté tmě)

  • RGB je barevný model, ve kterém je smícháno společně červené, zelené a modré světlo různými cestami k reprodukci obsáhlého pole barev

• Všechny tři základní barvy:

  • nejnižší intenzita => černá

  • nejvyšší intenzita => bílá

  • stejná intenzita => šedá

• Každá barva je udána mohutností tří základních barev, mohutnost se udává

  • v procentech (dekadický způsob), např. (80%, 80%, 20%)

  • podle použité barevné hloubky jako určitý počet bitů vyhrazených pro barevnou komponentu

    • pro 8 bitů na komponentu je rozsah hodnot 0 – 255, pro 16 bitů na komponentu je rozsah hodnot 0 – 65535

  • řetězcem šestnáctkových (hexadecimálních) cifer, kde každé základní barvě odpovídá vždy dvojice cifer v šestnáctkové soustavě

    • Např. řetězec "FFFF00„ znamená intenzitu červené FF (tj. 255), zelené FF (tj. 255) a modré 00 (tj. 0) -> výsledná barva je žlutá

Použití modelu RGB

• Model RGB se používá u zařízení založených na vyzařování světla, např. u obrazovek, monitorů, projektorů, …

Barevný model CMYK

• CMYK je barevný model založený na subtraktivním míchání barev (mícháním od sebe barvy odčítáme, tedy omezujeme barevné spektrum, které se odráží od povrchu)

• CMYK se používá především u reprodukčních zařízení, která barvy tvoří mícháním pigmentů (např. inkoustová tiskárna)

• Model obsahuje čtyři základní barvy:

  • azurovou (Cyan)

  • purpurovou (Magenta)

  • žlutou (Yellow)

  • černou (blacK), označovanou také jako klíčovou (Key)

    • v ideálním případě by složením C-M-Y měla vzniknout černá barva, ve skutečnosti však vzniká barva tmavě šedivá

• Skládání barev

  • nejnižší intenzita => bílá

  • nejvyšší intenzita => černá

Použití modelu CMYK

• Model CMYK se používá u zařízení založených na barevném pigmentu, např. u inkoustových nebo laserových tiskáren

Firemní web

Cíle firemního webu

• Typický firemní web může plnit jeden či více z následujících účelů:

  • poskytování základních informací o firmě

    • jednostránkové shrnutí činnosti firmy a kontaktní údaje, ale také rozsáhlý soubor informací pro potenciální partnery, novináře a akcionáře

  • přímý prodej

    • získání nových zákazníků,

    • zvýšení obratu,

    • snížení nákladů na prodej,

    • snížení nákladů na marže prodejců,

    • zvýšení komfortu pro zákazníky

  • podpora prodeje

  • budování značky

    • po reklamně poptávka na webu prakticky neexistuje. Funguje jen to, co uživatelům přináší jasný užitek a je s firmou těsně nějak spojeno

  • zákaznická podpora

  • public relations

  • průzkum poptávky

Modely návštěvníků webu

• Persona je člověk, budoucí návštěvník vašeho webu, kterého si vytvoříte uměle na papíře na základě údajů o vaší cílové skupině

  • jméno, fotka

  • věk

  • bydliště

  • zájmy

  • rodinný stav

  • vzdělání

  • zaměstnání (příjem)

  • vztah k vašim produktům či službám, znalost jejich používání

  • motivace, s jakou tento člověk přišel na váš web

  • situace, v jaké se člověk nachází při návštěvě webu

Uživatelské scénáře

• Uživatelský scénář je popis úkolů uživatelů na webu

  • Jedná se v podstatě o krátké příběhy, které popisují chování lidí na budoucím

  • k jednotlivým personám reprezentujícím typy uživatelů tedy přiřazujete úkoly a úkony, které budou chtít na webu řešit

• Pokud už vám vaše fantazie nevystačí nebo se pohybujete v oboru, kde není stanovení scénářů tak jednoduché, pomůže vám následující:

  • Dotazování lidí z cílové skupiny vašeho webu

    • Jedná se pravděpodobně o nejlepší variantu, bohužel bývá ale dost nákladná a časově náročná.

  • Dotazování zaměstnanců vaší firmy, kteří komunikují se zákazníky (prodejci, prodavači, pracovníci call centra, obchodníci...)

    • Tito zaměstnanci obvykle ví o potenciálních uživatelích webu mnoho užitečných informací