Webdesign na Amize - #2 Design, grafika a animace

Grafika, to je téma s webem velmi úzce související a přitom tak rozsáhlé, že mu byl věnován značný počet publikací. Mezi grafiku patří vlastně všechno, co na webové stránce vidíte, dokonce i text lze považovat za typ grafiky. Téma grafika na internetu nebylo pokud vím nikdy komplexně popsáno, protože to prostě není možné a taková učebnice by svým rozsahem byla určitě neúnosná. Poohlédnete-li se ale po jednotlivých nakladatelstvích - např. CPress, Grada a mnoha dalších, objevíte slušnou řádku knih, ze kterých můžete získat obrovskou spoustu informací a řadu tipů, jak a co udělat a co není pro web vhodné.

Design je ušlechtile znějící slovo a v případě počítačové grafiky a našeho tématu tohle slovo přímo souvisí s celým vzhledem webové stránky. Synonymem pro design bychom tedy mohli nazvat vkus, míru estetiky, a neméně tak i grafický talent. Všechny tyhle věci se bohužel nedají nikde získat (tzn. nikdo vám je nemůže prodat), dají se však do určité míry naučit. Tou jistou mírou myslím v případě webu dodržování základních i doporučených pravidel a principů (viz všechny ty učebnice apod.), jak a co vytvořit, případně jak a kde to použít. Nutností je zde samozřejmě i patřičná dávka sebekritiky, nikdo si nemůže dovolit prohlásit své dílo za bezchybné. Proto je také jednou z obecných zásad dělba práce grafik navrhne web, webdesignér mu to zkritizuje, protože se to špatně bude předělávat do HTML, grafik web předělá, webdesignér mu to zase trochu poopraví a tak se celkem brzo dostanete k použitelným výsledkům. Pokud si budete i grafiku kreslit či animovat sami, určitě je vhodné poptat se po známých a v okolí, co si o tom myslí a sveřepě netrvat na svém návrhu.
Návrh webu si můžete udělat kdekoliv a kdykoliv, klidně stačí na tácek či ubrousek od hamburgeru (také jste viděli excelentní film Good Will Hunting?), jen když přijde nějaký ten nápad. I když v dnešní době můžete na internetu čerpat náměty (bacha na bezduché plagiátorství) z obrovského množství webů, je snad logické vždy se zamyslet nad tím, k čemu má plánovaná WWW stránka sloužit a přizpůsobit těmto požadavkům grafiku. Konkrétní příklad - na informační a zpravodajský server určitě nebudete potřebovat animovaná tlačítka, ale budou stačit klasické jednoduché textové odkazy případně doplnění obrázkem rubrik. V hlavičce každé takové stránky je většinou ještě logo firmy/společnosti či organizace, jíž web patří, případně další nepříliš náročná grafika. Oproti tomu například firma nabízející služby související s grafikou, multimediálními produkcemi si teoreticky může dovolit bohatší grafiku s nějakou tou animací, případně zvukem. Za jakousi kritickou hranici délky veškeré grafiky na úvodní WWW stránce s přihlédnutím k rychlostem současných modemů (i mizerný modem by měl dnes umět alespoň 33600 baudů, tj. cca 3 kB/s, všechny novější modemy pak umí v závislosti na providerovi až 56000 baudů) já osobně považuji cca 100 kB, "delší" weby se už stahují příliš pomalu. Těch cca 100 kB samozřejmě není pravidlem, navíc každý na to má jiný názor pro některé je i 50 kB moc, někteří se zase vyžívají v několika set kB stránkách, které však už ztrácí smysl a působí spíše ostudným dojmem. Do celkového designu WWW stránky patří bezesporu i výběr vhodného pozadí, barvy textu, linků apod. Trendy v tomto směru jsou opět různé, celkový dojem ze stránky by však určitě neměl být kombinací základních barev některé z barvových stupnic a jejich kombinací (kontrastní červená, zelená, modrá, cyan, svítivá žlutá atd.), pak z webu bude pouze kýč. Publikování na webu se řídí podobnými zásadami jako DTP a tak i zde existuje několik příruček s dostatečně podrobnými návody, které barvy se nehodí kombinovat a které se mohou z hlediska tzv. webové safe palety používat (opět nemusí být nutným pravidlem). Mezi hlavní zásady každého webu by měla patřit důsledná optimalizace grafiky, se kterou je nutné počítat už v samotném grafickém návrhu. Žádný specializovaný software pro optimalizaci grafiky na Amize nenajdete, budete si tedy muset vystačit s nejrůznějšími kreslítky, nebo s konvertovacími programy typu ADPro, GfxCon apod. Pamatujte si, že prakticky každý obrázek lze téměř vždy o něco zkrátit bez znatelného újmu na kvalitě, například 256 barevné GIFy vypadají skoro vždy stejně pěkně v 64, někdy i ve 32 barvách s vhodně zvoleným typem rastrování. Za kuriozity hraničící až s extremismem příliš nesvědčící o inteligenci autora lze pak považovat třeba pozadí na webu v podobě fotografie s vysokým rozlišením nebo špatně na sebe navazující textury několik set kB dlouhé. Pokud chcete konkrétní příklad s čím vším se lze na webu setkat a zpestřit si čtení jedním odstrašujícím příkladem, mohu uvést cca 160 kB GIF pozadí typu "noise" (jakýsi nevkusný barevný šum) ve velkém rozlišení 567x283 bodů na jedné nejmenované stránce (poznámka: je to vesele inzerující firma zabývající se už několik let počítačovou grafikou, DTP a webdesignem!), to vše pochopitelně ve 256 barvách. Zajímavé je, že tohle pozadí na sebe navíc ani nenavazuje (!) a i při minimální optimalizaci rozlišení a barev ho lze v pohodě stlačit na pár kB. Takových věcí je tedy třeba se vyvarovat a pokud se to hodí, jako pozadí klidně použít i samotnou "čistou" barvu. Na téže stránce najdete i další obrázek (fotografie) v relativně malém rozlišení 200x161 bodů, přesto jeho délka činí zhruba 70 kB. Je to způsobeno tím, že autor zřejmě nepřemýšlel a stejně jako v případě pozadí se vzdal jakékoliv optimalizace. Navíc použil pro fotografii poněkud paradoxně formát GIF v max. počtu barev a jaksi zapomněl v obrázku evidentně ukládaném z Photoshopu alfakanál, což jeho délku prodloužilo o dobrých 50 kB. I těmto chybám se vyvarujte, neboť zavání čirým amatérismem a aspoň si neuděláte nikde zbytečnou ostudu. Mimochodem, tentýž obrázek zbavený alfakanálu má už jen 21 kB, po optimalizaci bez viditelné ztráty kvality pak jen 16 kB a uložený ve formátu JPEG (který je pro fotografie zpravidla nejvhodnější) pouhých 9 kB.
Protože se však náš seriál týká Amigy, budeme se teď chvilku věnovat konkrétním příkladům, jaký program je v oblasti grafiky k čemu vhodný, i když jsou to tak známá jména, že je není třeba nijak blíže představovat. Tip první, zapomeňte na Personal Paint a podobné kreslící programy, kterým chybí jakékoliv vyhlazování hran i písem. Zubatá grafika dnes už nikoho nezajímá a práce s grafickým programem postrádajícím vrstvy je otázkou pevných nervů a dlouhých pracovních postupů. Ideální grafiku z hlediska případných úprav si můžete připravit i ve vektorovém kreslítku, tedy například DrawStudio nebo ProVector, tyto programy totiž umí jednak importovat i bitmapovou grafiku, při exportu dokonale vyhladí hrany a protože používají vektorová písma, není žádný problém kdykoliv změnit velikost třeba o jeden či dva body. Také nutnost umět pracovat s vrstvami u vektorových kreslítek odpadá, protože vrstvy vlastně zastupují už samotné objekty. Z dalších kreslících programů jsou tu pak rozsáhlé balíky typu ImageFX, ArtEffect či Photogenics, které jednak umí pracovat s vrstvami (sice ne příliš rychle, ale dá se to vydržet) a jednak nabízí mnoho funkcí z oblasti image processingu, případně morfingu, v tom lepším případě umí i alespoň částečně pracovat s animacemi. Minimálně zajímavý je v oblasti profesionálních kreslítek třeba TV-Paint, který jednak dokonale vyhlazuje všechno co se dá včetně fontů a jednak je to už free-ware (najdete ho na ARCD #4). Podporuje sice 3 vrstvy (málo, ale někdy to stačí), ale bohužel vyžaduje grafickou kartu, což se řadě uživatelů asi líbit nebude. Velmi důležitá je při kreslení práce s výběrem, naneštěstí ji všichni výrobci bitmapových grafických programů pro Amigu zcela ignorují. Při tvorbě designu webových stránek totiž záleží v mnoha případech na každém pixelu a přesný výběr je tedy nezbytnou nutností. Jistě, můžete si vybrat libovolnou část obrazovky většinou pomocí několika typů výběrových nástrojů, ale co dál? Lze pak ještě výběr upravit? Rozhodně ne, zde prostě Amize stále chybí ta genialita Photoshopu. Na druhou stranu při tvorbě efektů se můžete zvláště u ImageFX vyřádit dosytosti.
Některé speciální efekty jsou doménou programů jako je CandyFactory pro tvorbu nejrůznějších plastických efektíků nebo WebFX, který používá ImageFX jako engine pro tvorbu stínů, animací apod. Pokud vyžadujete opravdu bez výhrady profesionální grafický nástroj, můžete zkusit Adobe Photoshop 4.0 (v5.x už je pouze pro PPC) v 68K verzi pod emulátorem Maca, určitě nebudete zklamáni jeho možnostmi, které (bohužel) výrazně převyšují prakticky všechny kreslící programy pro Amigu. Pokud bude někdy použitelný emulátor PPC Macintoshe - nemyslím tím PPC verze 68K emulátoru, ale plnohodnotný emulátor PowerPC Maca - budeme doufejme moci využívat i řadu z velmi kvalitních grafických nástrojů pro PPC Mac a i celá tvorba webu se může na "AmigoMacu" ubírat jiným směrem. Majitelé PowerPC procesorů a těch nejrychlejších 68K procesorů s grafickou kartou mají však ještě další možnosti v podobě alternativních operačních systémů jakými jsou například NetBSD a hlavně Linux. Pro Linux totiž existuje několik velmi kvalitních HTML editorů, třeba Allaire má už betaverzi jednoho z nejlepších HTML editorů na světě HomeSite. Za zmínku stojí i slušné grafické nástroje typu GIMP apod., které až na výjimky opět ta běžná Amigovská zpravidla o řád převyšují jak v pohodlí a rychlosti práce, tak i v nabídce funkcí.
Statické obrázky mohou být sice hezké, ale v naprosté většině případů jsou "mrtvé". Nenásilně zakomponované animace formátu GIF89a většinou web výrazně oživí a nemusí nijak dramaticky zpomalit natahování stránky. Animačních prográmků s kreslícími možnostmi není zrovna mnoho, mezi první patřil DPaint či Brilliance, většinou je nutné nakreslit jednotlivé snímky, které se pak sestavují v programech typu GIF-Toolkit, MainActor nebo v samotném DPaintu či Brillianci. Pro animace určené na web vždy platí, že čím je menší, tím lépe. Proto se používají různé optimalizační postupy, které zvládají pouze specializované prográmky a utility, třeba právě zmíněný GIF-Toolkit. Kapitola sama o sobě jsou pak reklamní bannery, které s animacemi souvisí ještě víc než by se mohlo zdát. Existují v několika variantách a podobách, nejčastěji se s nimi setkáte na kterémkoliv informačním/komerčním webu (není pravidlem!) a stejně jako u ostatních animovaných GIFů zde platí, že čím jsou kratší, tím lépe. Existuje spousta postupů, jak animovat pouze jednotlivé vrstvy v GIFu (vrstvy v GIFu jsou vlastně libovolně velké pravoúhlé výřezy) a výrazně tak zkrátit délku výsledné animace, pro Amigu je bohužel k dispozici velmi málo programů, jenž něco takového umožňují - jedním z nich je už několikrát uváděný GIF-Toolkit. S délkou animace téměř vždy souvisí i typ barvové palety, použít můžete bud lokální paletu pro každý snímek zvlášť nebo paletu globální. Nelze přesně říci, která metoda je lepší, záleží na okolnostech a samozřejmě hlavně rozsahu grafiky v animovaném GIFu. Každopádně je dobré vyzkoušet oba způsoby, a pokud to jen trochu půjde, zkusit animovat pouze jednotlivé vrstvy v GIFu. Animace na webu ovšem nemusí být pouze v GIFu, velmi efektní stránky lze vytvořit i s pomocí technologií Shockwave/Flash, kterou je možné teoreticky "přehrát" i na Amize s plug-inem pro webový browser. Teoreticky znamená že buď to fungovat bude nebo ne, současná verze Flash plug-inu žádné zázraky rozhodně nepředvádí. Jestli se ptáte, jak takové stránky na Amize vytvořit, pak musím odpovědět že nijak, žádný mne známý program nic takového neumí.
Druhý díl povídání o webdesignu a možnostech Amigy v této oblasti končí. Ve třetím pokračování seriál zakončíme krátkým povídáním o HTML editorech a webových prohlížečích, jejichž vývoj se nezastavil a v poslední době se objevují nové preview i oficiální verze.

Vytlačiť článok

Pozn.: články boli naskenované ako text a preto obsahujú aj zopár chýb. Taktiež neručíme za zdrojové kódy (Asm, C, Arexx, AmigaGuide, Html) a odkazy na web. Dúfame, že napriek tomu vám táto databáza dobre poslúži.

Žiadna časť nesmie byť reprodukovaná alebo inak šírená bez písomného povolenia vydavatela © ATLANTIDA Publishing

AMIGA REVIEW

ATLANTIDA NEWS