Tvorba grafiky - díl 1.

23.06.2007 22:12

    Určitě existuje hodně lidí, kteří vytváří webové stránky, videa, avatary, bannery a další média, kde se dá využít obrázková grafika.Proto jsem pro Vás přichystal tento článek, který by Vám mohl být nápomocen při úpravách webdesignu, úpravě fotek, a mnoha dalších věcí. V tomto článku se dočtete pár informací o Softwaru k editaci grafiky, něco si povíme o některých používaných grafických formátech a snad získáte pár užitečných tipů pro vaši vlastní tvorbu. Rád bych se však zaměřil na oblast webdesignu.

Obecně o webdesignu
    Než začneme vytvářet grafiku pro web, je potřeba zauvažovat jaký bude mít vzhled celý web. Aby se sladily barvy, typy písma, rozměry obrázků, animace bannerů atd. Začneme tím, že si zvolíme cca 3 barvy do kterých bude zasezen celý design webu, potom už jen stačí regulovat odstíny barev, aby pasovaly k zvoleným cca 3 barvám. jako další krok zvolímebarvu pozadí webu, potom je důležité hlavní logo, které vždy většinou bývá vycentrováno v horní části stránky. Když máme tedy zvolenou barvu pozadí, je dobré logo vytvořit tak aby se barvy sladily s pozadím. Doporučuji používat podobné odstíny barev, jak je psáno výše, ale takové odstíny barev aby byli čitelné a aby "nebily" do očí. Dalším bodem je tvorba nějakých navigačních lišt, pokud tedy netvoříme web založený na jiné bázi. Navigační lišty jsou vlastně malé obrázky, které obsahují název sekce, např: Menu. Pod navigačním obrázkem se už nacházejí samostatné odkazy, které mohou být tvořeny také grafikou. Tyto dva typy obrázků (navigační lišty a odkazy) je vhodné udělat zase ve stejných barvách akorát s rozdílnýmy odstíny. Web může také obsahovat nadpisové obrázky v jednotlivých sekcích webu, které by měly být shodné s logem a samozřejmně také s odstíny webu.

Bitmapová grafika
    Pro tvorbu a úpravu grafiky je určitý Software. Neznámějším programem na práci s grafikou je Adobe Photoshop. Photoshop je bitmapový program, tzn. že upravuje obrázky na principupixelů. Pixel je vlastně jeden bod. A právě z těchto bodů je složen celý bitmapový obrázek. Tento program obsahuje vlastně pracovní plátno, ve kterém se grafika zpracovává. Vlevo od plátna se nachází okno s nástroji pro úpravu obrázku. Vpravo od plátna se nacházejí jednotlivá okna s odstíny barev, vrstvami, histogramem a dalšímy grafickými pomůckami. Nevýhoda tohoto programu je ta, že není zdarma, ale musíte si ho koupit. Photoshop obsahuje také aplikaci Adobe ImageReady, ve které můžeme vytvářet podobným způsobem jako ve photoshopu. Nejčastěji se v ImageReady vytvářejí pohyblivé bannery. Existuje i vektorová grafika. O té se teď rozepisovat nebudu, protože ta funguje úplně na jiném principu.

    Existuje mnoho dalších programů, které fungují na bázi bitmapové grafiky, např.
Gimp, PhotoFiltre, a další ... na těchto programech je výhoda, ta že jsou volně šiřitelné. (tzn. jsou zadarmo)

Grafické formáty
    Nejznámejší formát pro grafiku obrázků je formát s kompresí JPEG, používají příponu .jpg
JPEG se vyznačuje dobrou kvalitou, velikost souboru není až tak příliš velká, používá se hlavně na fotky, a obrázky na webových stránkách s většímy rozměry, ale také i malých rozměrů. Např: v JPEG se dělají loga na web.

    Další známý formát je formát GIF s příponou .gif
Tento formát obsahuje pouze 256 barev narozdíl od JPEG, který má ohodně více barev. Také má menší velikost a používá se na obrázky menších rozměrů - hlavně pro web např. tlačítka, bannery atd ...

Také existuje formát PNG, který by měl nahradit formát GIF a má fungovat na stejné bázi.

    Docela důležitým formátem pro tvorbu ve Photoshopu je formát PSD, když v Photoshopu chceme uložit rozpracovaný projekt, tak ho uložíme do PSD, nevýhoda tohoto formátu je jeho velikost - je několikrát větší než u formátu JPEG. Proto doporučuji nepoužívat tento formát k publikaci na webu.

    Existuje mnoho dalších obrázkových formátů, ale zatím bude stačit znát tyto, které jsem vypsal. Přidal jsem také nějaké odkazy na stažení software. Naleznete v odkazech článku.

    No to je zatím tak vše co jsem chtěl napsat k tomuto téma a časem přibyde článek, kde se dozvíte nějaké konkrétní informace k tvorbě. Např: k tvorbě loga webu. Doufám, že se bude článek líbit a bude pomocníkem těm, kteří chtějí pracovat s grafikou.