Webová grafika - specifika

Z WikiKnihovna
Přejít na: navigace, hledání

Autor: Eliška Hrabalová

Klíčová slova: webdesign, web, WWW

Synonyma: ---

Související pojmy:

nadřazené: ---
podřazené: ---


Obecné informace

Webová grafika je spojována s webovými stránkami a jejich vzhledem a je jednou ze součástí webdesignu. Slouží především ke zvýraznění webových stránek pomocí barev, obrázků, animací a speciálních efektů. Je také výsledkem kreativity webového grafika.[1] Webovou grafiku lze modifikovat pomocí kaskádových stylů (tedy CSS). Obecně platí, že webová grafika musí celkově zapadat do kontextu a účelu dané webové stránky. Pokud jsou webové stránky přeplněny animacemi a přespříliš barevnými schématy, je velmi pravděpodobné, že případné návštěvníky tyto efekty buď od návštěvy odradí, anebo se k tomu hlavnímu, tedy textu, ani nedostanou.[2]


Weboví grafici na svou práci užívají řadu nástrojů pro tvorbu grafiky, ať už se jedná o bitmapovou nebo vektorovou grafiku. Mezi nejznámější SW nástroje pracující s bitmapovou grafikou jsou Adobe Photoshop, Corel Paint Shop Pro Photo, Corel Painter, Corel Photo-Paint, Microsoft Paint nebo Ulead PhotoImpact. S vektorovou grafikou zase pracují Adobe Illustrator, CorelDRAW, Macromedia Freehand, Serif DrawPlus či Xara X.[3]

Aspekty webové grafiky

Srozumitelnost webových stránek – srozumitelnost se vyznačuje tím, že obsah webových stránek je uspořádán podle důležitosti a relevance Zobrazování – obrázky hrají důležitou roli, protože jejich úkolem je co nejlépe působit na případné návštěvníky webových stránek

Barvy – barvám je při tvorbě webových stránek přikládán velký význam. Ty totiž samy o sobě jsou jakýmsi jazykem. Barvy a jejich kombinace stimulují v lidech různé pocity a na každého člověka působí tatáž barva naprosto jiným způsobem. Barvy přidávají webové stránce na atraktivitě a celkovém vzhledu. Je však nesmírně obtížné najít vyváženou kombinaci barev, která by vypadala zároveň účelně i atraktivně. Není to však nemožné.

Barevný kontrast – jedná se o kontrast mezi textem a jeho pozadím. Je nezbytně nutné užívat takové barvy, které budou vyznívat přirozeně a budou v souladu s dalšími grafickými prvky. Správný barevný kontrast pak působí velmi příjemně na návštěvníky webu a je plně funkční, co se týče obsahu.

Čitelnost – velikost fontů hraje klíčovou roli především při tvorbě textu. Jednotlivé velikosti značí důležitost obsahu a také jeho vnitřní hierarchii. Je doporučováno využívat především různé druhy bezpatkového písma a také různé druhy zvýraznění textu (podtržení, ztučnění nebo kurzíva).

Efektivní text – ve většině případů je text mnohem efektivnější než samotná grafika, a proto by mu měla být věnována patřičná pozornost i ze strany grafika.

Layout stránek – layout stránek představuje rozvržení jednotlivých prvků webové stránky na obrazovce. Proto je velmi užitečné vytvořit si přesnou představu o tom, jak budou stránky vypadat, tedy kde bude umístěn text, logo, grafika, obrázky, menu apod.

Uspořádání – uspořádání textu musí být na webových stránkách na první pohled viditelné. Text zarovnaný vlevo je lehčeji čitelný než zarovnaný vpravo. Weboví grafici jsou si toho vědomi a všeobecně toto pravidlo dodržují.

3D efekty - 3D efekty jsou velmi oblíbené a jejich aplikací lze dosáhnout skvělých výsledků, co se týče atraktivity webových stránek.

Navigace – zcela jistě si zaslouží pozornost i po grafické stránce, protože je důležitá především pro orientaci návštěvníků webových stránek. Pokud není patrné na první pohled, kde je navigace umístěna, návštěvníci webu mohou stránky opustit, aniž by se snažili navigaci vyhledat.[4]

Poznámky

  1. What is Web Graphics. Rose India [online]. [cit. 2012-05-22]. Dostupné z: http://www.roseindia.net/services/webdesigning/corporatewebsitedesign/What-is-Web-Graphics.shtml
  2. SALVET, Pavel. Grafika pro webové stránky: nástroj zkázy?. Interval.cz [online]. 27.5. 2010 [cit. 2012-05-22]. Dostupné z: http://interval.cz/clanky/grafika-pro-webove-stranky-nastroj-zkazy/
  3. CHASTAIN, Sue. Pixel Image Editors and Vector Illustration Software. About.com [online]. ©2012 [cit. 2012-05-22]. Dostupné z: http://graphicssoft.about.com/cs/findsoftware/a/twotypes.htm
  4. What is Web Graphics. Rose India [online]. [cit. 2012-05-22]. Dostupné z: http://www.roseindia.net/services/webdesigning/corporatewebsitedesign/What-is-Web-Graphics.shtml

Použitá literatura

  1. What is Web Graphics. Rose India [online]. [cit. 2012-05-22]. Dostupné z: http://www.roseindia.net/services/webdesigning/corporatewebsitedesign/What-is-Web-Graphics.shtml
  2. SALVET, Pavel. Grafika pro webové stránky: nástroj zkázy?. Interval.cz [online]. 27.5. 2010 [cit. 2012-05-22]. Dostupné z: http://interval.cz/clanky/grafika-pro-webove-stranky-nastroj-zkazy/
  3. CHASTAIN, Sue. Pixel Image Editors and Vector Illustration Software. About.com [online]. ©2012 [cit. 2012-05-22]. Dostupné z: http://graphicssoft.about.com/cs/findsoftware/a/twotypes.htm