Az előző számban azt ígértem, hogy körüljárom az átlátszó GIF-ek problémáját. Talán kezdjük ezzel! 

A GIF

A hagyományos GIF formátum már elég régóta létezik, 256 vagy kevesebb színű képek tárolását teszi lehetővé Interlaced vagy non-Interlaced sorrendezéssel és veszteségmentes tömörítéssel. Viszonylagos egyszerűsége, és kis mérete miatt vált az Internet elsődleges képformátumává - amíg a JPEG ki nem szorította. Ma már talán nem is találkoznánk vele, ha nem vértezték volna fel néhány olyan "fegyverrel", ami ma is létjogosultságot biztosít neki. Ilyen "fegyverek" az átlátszóság és az animálás lehetősége.

Mi is az átlátszó GIF vagy GIF89a?

A régi, egyszerű GIF-ek első néhány azonosító bájtja GIF87a, az átlátszó GIF-ek első néhány bájtja GIF89a - innen a név.

Az átlátszó GIF nem sokban különbözik korosabb társainál, csupán annyit változtattak az eredeti formátumon, hogy a palettába tettek egy kitüntetett színt (ezzel a maximálisan használható színek száma 255-re csökkent), amelyet aztán a beolvasáskor ki kell lyukasztani. Ez a megoldás gyakorlatilag fájdalommentes, hiszen a kép nem lesz nagyobb, a lyukaszásra lefoglalt szín nem hiányzik senkinek, és mégis meg van oldva az átlátszóság. Egyrészről jó, hogy nem kell küzdeni nagyobb képfájlok letöltögetésével, másrészről viszont van egy csomó hiányosság: 

  • Mi van, ha nekem mosott szélűvé kell tennem egy képet? 
  • Mi van, ha kevés a 255 szín? 
  • Mi van, ha átlátszósági fokozatokat szeretnék?

Sajnos a fenti kérdésekre még nem született meg a válasz (lehet, hogy ezek a lehetőségek csak nekem hiányoznak?) de azért így is megéri küzdeni átlátszó képekkel, mert jópofa hatásokat lehet velük elérni.
 

GIF 87a

A képen jól látható, hogy ronda fehér téglalapban van.
Ugyanaz GIF 89a-ban

Ezt a képet átlátszó GIF-be mentettem, 
látható, hogy eltűnt a fehér keret.

Lássuk, miként!

Eszközként most is a PhotoShop-ot, alapanyagként pedig a legutóbb elkészített pacnikat fogom használni. 

Először a kézenfekvő megoldás: Fogjuk az illető gombot (külön layeren van) és csak ennek a láthatóságát hagyjuk bekapcsolva.

Ezek után nincs más dolgunk, mint a File/Export/Gif89a Export... menüpontra kattintani és beállítgatni az egyes értékeket.

Lássuk: 

  • Transparency From Mask - Itt állíthatjuk be, hogy milyen színt szeretnénk átlátszóságként definiálni. Ennek ilyen képeknél csak annyiban van jelentősége, hogy a PhotoShop ebbe a színbe fogja bele mosni a kép határait (Antialias). Ettől a mosástól tűnnek el a kép széleiről a rücskök, amik egyébként a pixelek méretei és a szélsőséges kontrasztok (pl: fekete háttér - sárga gomb) miatt látszanának.


  •  
  • Palette - lehet Adaptive vagy System. Fentebb említettem, hogy a GIF csak 256 illetve 255 színű lehet. E korlátozás miatt kénytelenek vagyunk 16 millió színben szerkesztett ábráinkat 255 színre butítani. Szerencsére ez a butítás a legtöbb esetben nem szokott látszani mivel azt, hogy melyik 255 színt fogjuk használni, mi választjuk ki. 

    • Adaptive beállításban a PhotoShop a kép színeit úgy válogatja össze, hogy az a lehető legjobban hasonlítson az eredeti ábrára.


    •  
    • System beállításban a képek színei egy előre meghatározott Windows palettából kerülnek kiválasztásra. Ezt a beállítást akkor kell használni, ha 255 vagy kevesebb színben fogják nézni a web oldalt, amit készítünk (van még ilyen?). 

  • Colors - Itt adhatjuk meg, hogy hány színt szeretnénk felhasználni a rendelkezésre álló 255-ből. Célszerű a lehető legnagyobb értéket választani, hacsak az nem nagyobb, mint amiben majd nézni fogják az oldalt.

  • Interlaced - A kép sorrendezését állíthatjuk be - ma már nincs jelentősége.

A konverziós beállító ablak - húúúú milyen tudományosan hangzott - szóval a fent látható párbeszédpanel csak akkor néz ki így, ha True Color képet szeretnénk konvertálni. Ha palettázott képet szeretnénk átlátszóvá tenni, akkor a következő ablak jelenik meg:

Itt gyakorlatilag ugyanazok a beállítási lehetőségek, mint az előbb, azzal a különbséggel, hogy az átlátszó színeket mi jelölhetjük ki a palettából vagy a képhez tartozó csatornák egyikéből. 

Érdemes megjegyezni, hogy ha csatornákat is tartalmazó palettázott képet mentünk GIF-be (nem átlátszóba),  a PhotoShop a csatronákat automatikusan felhasználja átlátszósági információnak.

Úgy gondolom, az átlátszó képek készítésére több szót nem érdemes vesztegetni.

A következő probléma az előbb megismert tetszőleges alakú gomboknál az, hogy a gomb akkor is benyomódik, ha az egér csak a befoglaló téglalapba ér. Erre is van megoldás:

MAP fájlok használata

A MAP fájlok a HTML-hez hasonló szöveges információkat hordoznak és azt szokás bennük leírni, hogy egy adott kép mely területeihez milyen linkek tartoznak, vagyis ezeket a fájlokat képekhez rendelhetjük és megadhatjuk bennük, hogy melyek a képek interaktív részei, amelyekhez linkeket rendelünk. Legtöbbször nem négyzet alakú gomboknál használják, hogy kattintani csak a gomb területe felett lehessen.

Mindez a gyakorlatban

<img SRC="gomb.jpg" USEMAP="#map1">

A fenti tag egy kép beszúrás egy HTML oldalon. Az img a kép kulcsszava, az SRC jelenti a kép forrását, a Usemap kulcs pedig a hozzárendelt map. A map-eket a HTML-ek végére szokták rakni <MAP> és </MAP> közé (fantáziadúsan).

Map-ek felépítése

<MAP NAME="map1">

<AREA Shape="POLYGON" 
      COORDS="0,0, 100,0, 50,100" 
      HREF="ize.htm">

</MAP>

Az itt látható HTML részlet egy olyan map, amely a 0,0; 100,0; 50,100 csúcspontokkal rendelkező háromszög területén belül az ize.htm fájlra linkel. 

A map-ben AREA tag-ok követik egymást, a Shape kulcs határozza meg a körülhatárolni kívánt terület alakját. A shape lehet:

  • Rect - téglalap 

  • A Coords kulcsban a bal felső sarok és a jobb alsó sarok koordinátáit kell megadni.
     
  • Polygon - sokszög 

  • A Coords kulcsban a sokszög csúcsainak koordinátáit kell megadni.
     
  • Circle - kör 

  • A Coords kulcsban a kör középpontjának koordinátáit és a sugár nagyságát kell megadni.

Egy map-ben több area tag-ot is megadhatunk, vagyis egyetlen kép több helyre is mutathat. Az Area tag-ban használhatók a képekhez és hivatkozásokhoz használatos további kulcsok is pl.: OnMouseMove, OnMouseOver, OnMouseOut, Target.

Egész eddig arról beszéltem, hogy itt mindenféle koordinátákat kell megadni. Ezek a koordináták pixelben kifejezett értékeket jelentenek mégpedig úgy, hogy a 0,0 koordináta a kép bal felső sarka. Érdemes még megjegyezni, hogy ha nagyítjuk vagy kicsinyítjük a képet a HTML oldalon, akkor a böngésző nem fogja újraszámolni a koordinátákat vagyis elcsúsznak az általunk meghatározott területek.

Egyébként ettől az egész map-es őrülettől megkímélhetjük magunkat, ha valamilyen kifejezetten web-es képszerkesztővel vagy CorelDraw 8.0-val dolgozunk. Mivel ezek az eszközök nem mindenki számára hozzáférhetők, maradjunk a jól bevált PhotoShop-nál - már csak azért is, mert a 26. PC-X CD-n van belőle egy kipróbálható verzió.

A PhotoShopban a fent emlegetett koordinátákat a Window menü Show Info pontjában előbukkanó ablakban lehet megtalálni.

Most már nincs is más dolgunk, mint az egérrel szépen körbe járni a linkként felhasználni kívánt területet és írogatni a koordinátákat.

Végezetül két példa:
Vidd az egeret a kutya és a gombok fölé!


MELLÉKLETEK
A legelső ellipszis alakú gomb gomboc.psd
Az első példa kutya.psd
A második példa korgomb.psd
A PC-X User alapjai alapok.zip
A példák HTML forrásai kutya.htm