Web Page Design for Designers

 


 

 

A manapság használatos böngészők többsége képes háttérkép megjelenítésére. A háttérképek alapja lehet kis, négyszögletű kép, amivel a böngésző háztető cserepeihez hasonló módon feltölti az oldal teljes hátterét. Bár minden egyes "cserép" tetszőleges nagyságú lehet, és egy 2x2 pixel méretű képecske nagyon gyorsan letölthető, a háttér feltöltése ilyen kis darabokkal sok időt vesz igénybe, minden egyes képernyőfrissítés fájdalmasan "látványos" lesz.

Ne készítsünk túl kis méretű háttérelemeket - az optimális letöltési és felrajzolási idő közötti kompromisszum megtalálása érdekében kísérletezzünk különböző méretekkel és ismétlődésekkel.

Ne feledjük, hogy a betűk általában a háttérkép fölött helyezkednek el. Ha a háttér mintája túl intenzív, a betűk felette nehezen olvashatóak. Minden különösebb gond nélkül használhatunk sötét betűket világos, illetve világos betűket sötét háttéren. Közepes árnyalatú háttér esetén esetleg kontrasztos színek segíthetnek a betűk kiemelésében, pl. a sárga - kék páros, de így nagyobb valószínűséggel kockáztatjuk az olvashatóságot.

tiletiletiletiletiletiletiletiletile

Egy GIF file 'megsokszorozása'

Ezek a hátterek kis GIF képekből állnak, amiket gyorsan le lehet tölteni és ki lehet rajzolni. Minden GIF vagy JPEG képre igaz, hogy ha már egyszer letöltődött, akárhányszor felhasználható az oldalon, különösebb időveszteség nélkül. A belőlük alkotott díszes vonalak, logók, felsorolásjelek vagy akár animált ikonok megváltoztathatják a legunalmasabb oldal hangulatát is, anélkül, hogy a felhasználót hosszabb várakozásra kényszerítenék.

Ha az oldal elejére nem teszünk

nagy képeket, a felhasználó már

olvashatja a szöveget miközben a

az oldal alsó, nem látható részének

letöltése még folyik

 


 

 

 

Nagyobb GIF vagy JPEG képek esetén

gyorsabb letöltődés látszatát kelthetjük

"progresszív renderelés" alkalmazásával

Nagyobb képek esetén gyorsabb letöltődés látszatát érhetjük el "progresszív renderelés" alkalmazásával. Ilyenkor szinte azonnal megjelenik a teljes kép, de csak alacsony, darabos felbontásban. A letöltés folyamán a felbontás egyre jobbá válik, míg végül a kép el nem éri eredeti minőségét. Így a fő részei már hamar felismerhetőkké válnak, és csak az esetleg beleírt kis méretű szöveget nem lehet elolvasni addig, míg le nem töltődik a kép nagy része. Ez e megoldás kedveltebb annál, mint hogy figyeljük, amint a kép szép lassan, felülről lefelé soronként felépül. Mindenesetre, az egyre élesebbé váló kép leköti az felhasználó figyelmét, ezzel feledtetve az idő múlását.

A progresszív renderelést a file mentésekor kell megadni, és alkalmazásához rendelkeznünk kell a megfelelő programmal. Az Adobe PhotoShop-hoz létezik egy Export plug-in, a GIF89a, aminek segítségével "Interlacing" opcióval menthetjük el a képet - a PageMill is hasonló módon működik. A webes grafikák manipulálására készült shareware programok között is találhatunk progresszív renderelési opcióval rendelkezőket - ezekről a Links oldalon találhatunk bővebb információt.

A GIF89a egyéb lehetőségei: áttetszőség és animáció

 

Az áttetszőség azt jelenti, hogy a GIF kép egyik színét "színtelennek" definiálhatjuk - mintha a képet átlátszó fóliára (acetát) rajzolnánk.

Így a kép fehér hátterét átlátszóvá tehetjük, ezzel körülvágott kép (halftone) hatását érve el. Ez a technika különösen kép szöveggel való körbefolyatásánál és egyenetlen körvonalú képek esetén hasznos.

 

animation

Ez egy kilenc képből álló sorozat
egyetlen GIF89a file-ba mentve,
0.15 másodpercenkénti váltással

 

 

A GIF89a formátum animációt is lehetővé tesz. Ez lényegében annyit jelent, hogy egyforma méretű képeket előre beállított késleltetéssel váltogatunk - és mindezt egy GIF file-ba mentjük el. Az animációhoz is a megfelelő programra van szükség - erről lásd a fentebb leírtakat.

Vigyázzunk arra, hogy ha egy web oldalon egy GIF animáció túl gyorsan fut, nehézkessé válhat egy gombra vagy linkre történő kattintás.


menunext