Előszó Valamikor régen természetes volt, hogy a számítógépeken

csak betűket és számokat lehetett látni. Később már egyre

több olyan programmal találkoztunk, amelyek – ha kezdet-

leges módon is – grafikus felületet varázsoltak elénk. Nem

kellett sokáig várni arra, hogy magunk is profi, művészi

képeket tudjunk előállítani akár minimális grafikai ismere-

tek birtokában is.

Innen már csak egy ugrás, hogy művészi alkotásainkat, gon-

dolatainkat az egész világgal megismertessük, saját honlap-

jainkat elkészítsük és a világhálóra elhelyezzük.

Könyvünk célja, mindenkinek lehetőséget adni arra, hogy

elsősorban gyakorlati példákon keresztül tanulja és szeresse

meg a számítógépes grafika alapjait, a digitális kép-szer-

kesztés lényegét és alapvető fogásait.

Az ADOBE CS4 programcsomag Fireworks CS4 kép-szer-

kesztő programja, az internetes grafikát készítő szoftverek

között kiemelkedő.

A Fireworks CS4 segítségével mindenki el tudja készíteni

azokat a képeket, amelyeket később a saját honlapja elké-

szítésénél majd fel tud használni.

1. FEJEZET

Grafika

Ebben a fejezetben elsősorban a számítógépes grafika alap-

jaival ismerkedünk meg. Ahhoz, hogy az általunk készített,

illetve szerkesztett képek mindig az adott feladathoz iga-

zodjanak, ismernünk kell a színkezelési eljárásokat, a képek

méretével kapcsolatos alapvető tudnivalókat.

Hiába készítjük el a legszebb és legérdekesebb grafikát, és

rakjuk fel Weblapunkra, ha nem csökkentjük le méreteit.

Több megabájt méretű kép letöltéséhez ugyanis olyan hosz-

szú idő kell, amelyet már általában nem vár meg senki sem,

így grafikánkban legfeljebb csak mi gyönyörködhetünk.

Kezdjük tehát az alapokkal!

1. Lecke

Pixel A digitális képek szabályos sorokba és oszlopokba rende-

zett négyzetekből épülnek fel. Ezeket a képpontokat, más

szóval pixeleknek nevezzük. Minden pixelben egy-egy szín

található, egy pixelen belül már nincsenek árnyalati és

tónusbeli különbségek. A kép minősége a felbontástól függ.

Annál jobb képet kapunk, minél nagyobb a felbontás, azaz

minél több pixel alkotja.

Minden pixelhez rendelhetünk egy számsort, amely a kép-

pont színét határozza meg. Ha ez a számsor csak 8 biten

ábrázolható, akkor egyértelmű, hogy csak 256 színű képet

tudunk megjeleníteni. Ha a színek ábrázolásához hosszabb

számsort is adhatunk, akkor már a felhasználható színtar-

tomány száma lényegesen megnő. Ennek megfelelően

beszélhetünk 1, 2, 8, 24 bites képekről.

1 bit = 2 szín

2 bit = 4 szín

8 bit = 256 szín (High Color - magas színű)

24 bit = 16,7 millió szín (True Color - teljes színű) Color

Palette

2.

2. Lecke Színrendszerek

Additív színkeverés (RGB)

Az alapszínek (Red = vörös, Green = zöld, Blue = kék) meg-

felelő arányú hozzáadásával jön létre.

Ha ezt a három színt megfelelő formában keverjük, akkor

fehér színt kapunk. Mindhárom alapszín hiánya a feketét

eredményezi.

Szubtraktív színkeverés (CMY)

A vörös, a zöld és a kék színek kivonásával jön létre. (Cyán

= ciánkék, Magenta = bíborvörös, Yellow = sárga).

A három szín megfelelő keverékéből elvileg a fekete szín áll

elő. A gyakorlatban ez csak barnás árnyalattal állítható elő,

ezért a nyomtatási technikában önálló színként felvették a

fekete színt is. Ennek a színrendszernek a neve CMYK lett.

HSB színkeverés

Az emberi látórendszer felépítéséhez illeszkedő szabvány

(Hue = színezettség, Saturation = telítettség, Brightness

=fényesség).

A grafikai programokban be lehet állítani a megfelelő szín-

csatorna értékeit. Ha például R=255, G=255, B=255 láthat-

juk, hogy a szín fehér, R=0, G=0, B=0 értékek esetén fekete

színt kapunk.

3.

3. Lecke

Képméret

A digitális képeknél a méret nem a kép centiméterekben

megadott fizikai nagyságát jelenti. Ezt a nagyságot csak a

kinyomtatás után kapja meg a kép. A digitális képeknél a

méret a kép pixeleinek mennyiségéből és a képfájl bájtok-

ban megadott nagyságából tevődik össze.

A fájlméret függ a kép felbontásától és színmélységétől is.

Minél több pixelből áll egy állomány, annál nagyobb.

Ugyanígy, minél több bites képről van szó, annál nagyobb

méretet kapunk.

Ezt figyelembe véve szabályozni tudjuk a kép méretét olyan

mértékre is, hogy a kép minősége még megfelelő legyen, de

ne legyen túl nagy, így Weboldalaink megtekintésekor gyor-

san betölthetők legyenek.

Képtömörítés

A képméretet tudjuk csökkenteni a megfelelő tömörítési

eljárásokkal is. Ez a képméret csökkentés történhet adat-

vesztéssel és adatvesztés nélkül.

Adatvesztés nélküli tömörítés

Ha egy képen 4 vörös, 3 kék és 1 zöld színű pixel követi egy-

mást, akkor a képadatok pixelenkénti tárolása helyett a pixe-

leket csoportosíthatjuk: 4 x vörös, 3 x kék, 1 x zöld.

Ez az eljárás csökkenti az adatok számát, de nem csökken-

ti tartalmát.

Veszteséggel történő tömörítés

Lényege, hogy eltávolítja a ”felesleges” színadatokat. Mivel

az emberi szem csak kb. 2 000 színt tud egyszerre érzékel-

ni, ezért a 16,7 millió színből egyes árnyalatoktól nyugodtan

megszabadulhatunk. Egymáshoz közeli árnyalatokból egy

árnyalatot készít.

4.

4. Lecke

Képformátumok

GIF (Graphics Interchange Format)

Ez a formátum alapértelmezetten 8 bites, 256 színt ismer

fel, elsősorban az Interneten történő megjelenés lehetősé-

geit szem előtt tartva került kialakításra. A tömörítő eljárá-

sa veszteségmentes, azaz a képben nem jelennek meg hibák

a konverzió során. Ebből persze következik, hogy tömörsé-

gének határai vannak. Ábrákhoz, rajzokhoz viszont kitűnő.

A GIF89 formátummal több képet egymásba fonva animá-

ció hozható létre. Prezentációkhoz, multimédiás alkalma-

zásokhoz, Weboldalakhoz érdemes a képeket ilyen formá-

tumban menteni.

JPEG (Joint Photographic Experts Group)

A JPEG formátum olyan tömörítést használ, amely azono-

sítja és elhagyja a képekből az emberi szem által nem ész-

lelhető információkat. Mivel adatot dob el, ezért az eljárást

veszteségesnek is szokták nevezni. Ez azt jelenti, hogy egy

kép kódolása, majd dekódolása után az eredeti képet nem

teljes mértékben kapjuk vissza. A legtöbb esetben azonban

az így keletkezett különbség szemmel nem érzékelhető. A

JPEG formátum egyik nagy előnye, hogy kódoláskor meg

lehet választani a tömörítés mértékét. Minél nagyobb fokú

a tömörítés, annál kisebb hely szükséges a kép tárolásához,

de annál nagyobb mértékű az adatvesztés. A JPEG cserébe

kis méretet és 24 bites valósághű színvisszaadást biztosít

(16 millió szín). Ideális fényképek és festmények Interneten

történő megjelenítésére.

PSD

Az Adobe Photoshop képszerkesztő program fájlformátu-

ma. Veszteség nélkül tárol minden információt, ezért

nagyon alkalmas forrásállományok tárolására, viszont mére-

te igen nagyra is nőhet.

PNG (Portable Network Graphic)

A Fireworks dokumentum formátuma. A PNG formátum

32 bites valósághű színvisszaadást biztosít, áttetszőség meg-

jelenítésére is képes. Nem minden böngésző képes megjele-

níteni.

BMP

A Windows rendszerben a pixeles képek tárolására a bit-

map (BMP) fájlokat használják. A BMP szerkezet nem

mondható optimálisnak, mivel a képről minden informáci-

ót tárol, tömörítést nem használ, így a BMP állományok

mérete vi-szonylag nagy. Előnye, hogy a kétszínű képektől

kezdve egészen a true-color (24-bites) képekig bármilyen

képet képes tárolni és minden rajzolóprogram ismeri ezt a

formátumot, hiszen a BMP a Windows - és annak későbbi

verziói (Windows 9x, Windows NT) - egyik alap fájltípusá-

nak tekinthető.

TIFF (Tagged Image File Format)

A TIFF az Aldus, MicroSoft és a NeXT cégek által létreho-

zott képformátum. A TIFF formátum a különböző alkal-

mazások közötti képcsere megkönnyítésére született. Ezen

képformátum által használt tömörítés megegyezik a GIF

formátuméval, azzal az eltéréssel, hogy másfajta színkódoló

rendszert használ. Kiadványszerkesztésben és nyomdai elő-

készítésben kedvelt grafikai formátum.

PCX

DOS-os környezetben hozták létre. Kezdetben 8 bites szín-

palettával dolgozott, később már nem volt gond a RGB 24

bites színmélység kezelése sem. A gyakorlatban ritkán alkal-

mazzuk, elsősorban DOS és Windows alatti megjeleníté-

seknél, régebbi programváltozatoknál használjuk.

5. Lecke

Képfeldolgozás Megkülönböztetjük a képeket aszerint is, hogy a kép kép-

pontokból (pixelekből), vagy vektorokból áll. Ennek megfe-

lelően beszélhetünk pixelgrafikus (raszteres), vagy vek-

torgrafikus képfeldolgozásról.

Pixelgrafika

Pixelgrafika lényege, hogy a kép pontokból áll. Előnye, hogy

a képek egyszerű adatszerkezetekkel felépíthetők, hátránya,

hogy minél pontosabb és szebb képet akarunk, annál

nagyobb lesz az állomány mérete, továbbá a kép át-mérete-

zésénél romlik a kép minősége.

Az állományon belül a képpontok egy rácshálónak megfele-

lően pontról pontra tárolódnak. A képfájl tárolja a kép szín-

számára, méretére, felbontására vonatkozó adatokat is. Az

ilyen képek nagyítása és kicsinyítése csak jelentős minőség-

romlás árán valósítható meg, viszont az eredeti méretben

kinyomtatott kép tökéletes lesz. A kép szerkesztése során

képobjektumok szerkesztésére, módosítására, elkülönítésé-

re nincs lehetőség, viszont az apróbb hibák kijavítása és a

retusálás egyszerűbb. Ilyen típusú képek: pl. BMP, GIF,

JPG, TIF, PCX. Ezeket a képeket behívhatjuk és módosít-

hatjuk a PAINT és PAINTBRUSH programokkal és a raj-

zolóprogramok többségével.

Vektorgrafika

Vektorgrafika lényege, hogy a képet alkotó pontok halmaza

között matematikai összefüggések vannak, és ezen össze-

függések jellemzőit tárolják a képben. Ilyen jellemző lehet a

kör középpontjának koordinátái és sugara, egy szakasz két

végpontjának, vagy egy pont koordinátájának megadása. A

vektorgrafika előnye, hogy a képek mérete független a fel-

bontástól, átméretezéskor a kép mérete nem változik, hát-

ránya, hogy a bonyolult, összetett szerkezetű képek felépíté-

se gyakran hosszadalmas, és jelentős gépidőt igényel.

A fájl az adott kép elkészítési módját tartalmazza, oly

módon, hogy a képet leíró vonalak, ívek, kitöltések jellem-

zői kerülnek tárolásra. Az így készült képek feldolgozására

nem minden program képes. A kép tetszőleges méretben

állítható elő, így a kicsinyítés és a nagyítás nem jár a minő-

ség romlásával.

A kép annál élesebb, minél nagyobb. A képfájl mérete nem

a mérettől és a színszámtól függ, hanem a bonyolultságtól.

Ilyen állományok: pl. CDR, GEM kiterjesztésűek. Ilyen

képek készítésére szolgál a CorelDraw program.

A megszámlálhatatlan grafikai program között kiemelkedő

az Adobe Fireworks CS4, amely egy olyan szoftvercsomag,

amit nagyon egyszerű és gazdaságos használni.

Segítségével rendkívül gyorsan készíthetünk Internetre

szánt grafikákat vagy teljes Web-oldalt. A Fireworks CS4

lehetővé teszi, hogy egyszerű, de látványos képek, animáci-

ók és interaktív elemek készüljenek Web-oldalunkra.

A Fireworks CS4 továbbá alkalmas digitális képek retusálá-

sára, a képek minőségének javítására vagy montázsok készí-

tésére is.

A következő leckékben lesz majd rá alkalmunk, hogy köny-

nyedén megtanuljunk a programcsomag kezelését, szövegek

animációját, képek változtatásának és kidolgozásának

művészetét.

Most kezdjünk hozzá a gyakorlati dolgokhoz…

2. Fejezet

1. Lecke

Munkakörnyezet

Első lépésben barátkozzunk össze ezzel az új programmal.

A munkakörnyezet szó alatt nem a munkahelyet vagy a

jövendőbeli kollégáinkat értjük, hanem egyszerűen a prog-

ramot, amit használni fogunk.

Mint ahogy az összes fényképjavító és képeket feldolgozó

programban, ha megnyitjuk, egy új munkakörnyezetben

találjuk magunkat.

Úgy képzeljük el ezeket a programokat, mint igazi és egye-

di munkaasztalokat, amelyeken megtalálhatjuk ugyanúgy a

már ismert eszközöket, mint az új, felfedezésre váró eleme-

ket is. (Pl.: egy mérnök rajzasztala teljesen hasonló egy rek-

lámgrafikuséhoz: ceruzák, derékszögek, és a törléshez való

radírok találhatók mindkét asztalon csak más elrendezés-

ben).

Nem kell tartanunk ettől az új programtól. Indítsuk el a

Start/Programok/Adobe Fireworks CS4 programot és néz-

zük meg a kezelőfelületét. (10. ábra)

10. Ábra

A kezelőfelületen láthatunk már ismerős elemeket is, mint

például a menüsor, az eszköztár, de most nézzük a legfon-

tosabbakat:

1. Menüsáv, általános eszköztár, módosító eszköztár.

2. Dokumentum: az aktuális dokumentum ablaka, ide

készíthetjük a grafikákat és animációkat.

3. Nézet-választó: változtathatjuk a dokumentum nézeteit

– Original: szerkesztési nézet

– Preview: optimalizálás panel segítségével módosítható

előnézeti kép

– 2-Up: kétablakos nézet, ahol az eredeti és a beállított

előnézeti képet is láthatjuk

– 4-Up: négyablakos nézet, az eredeti és további 3 nézet

látható

4. Gyors export: a dokumentum ablak méretező gombjai

alatt található fw ikon segítségével az elkészített mun-

kánkat több kimeneti formátumba exportálhatjuk.

(Dreamweaver, Flash – ezeket a programokat is tanulni

fogjuk)

5. Panelek: Optimize, Layers, Assets, Frames and History,

Answer (ezek a panelek be/ki kapcsolhatok, méretezhetők).

6. Properties panel – mindig az aktuális objektum paramé-

tereit lehet beállítani.

7. Eszközpanel – 6 csoport

– Select: kijelölő eszközök

– Bitmap: a pontgrafikához (raszteres) használatos esz-

közök

– Vector: a vektorgrafikus eszközök

– Web: Webes összetevőkhöz szükséges

– Colors: „színes” eszközök (szín választás eszközei)

– View: a nézet eszközök (nézetválasztó esz-közök)

Miután megnéztük a munkakörnyezetet, kérjünk egy üres

lapot (a Paint-hez képest csak egy kis különbség van, a mi

rajzasztalunk - az a lap, amelyikre elkezdhetjük a rajzolást -

, hiányzik). Hogy ezt megszerezzük, válasszuk a menü sáv-

ból a File / New parancsot. Megjelenik egy ablak (11. ábra),

amely lehetővé teszi a „vászon” (canvas) – amelyre a kép

kerül- tulajdonságainak beállításait.

A „vászon” szélességét (Width), és a magasságát (Height)

pixelben, inchben vagy cm-ben határozhatjuk meg, míg a

felbontást (Resolution) a korábban említett Pixel/Inch vagy

Pixel/Cm mértékegységben adhatjuk meg.

11. Ábra

Kijelölhetjük az új „vásznunk” színét is (Canvas Color).

Az OK-ra kattintva megjelenik egy új ablak, most már hoz-

zákezdhetünk a rajzoláshoz.

Most, hogy a vászon már elkészült, nézzük meg azokat az

eszközöket, amelyeket a Web-grafikák készítéséhez ebben az

új programban fogunk majd használni. (12. ábra) Az eszközökre mutatva (egérrel) elolvashatjuk a nevüket.

Az eszközök 6 csoportba vannak rendezve:

1. Kijelölők - Select (13, 14, 15. ábra)

2. Bitmap módban használandók

- Bitmap (16, 17, 18, 19. ábra)

3. Vektoros módban használandó – Vector (20, 21, 22. ábra)

4. Weboldalhoz szükséges eszközök – Web (23, 24. ábra)

5. Színekhez szükséges eszközök – Colors (25. ábra)

6. Nézethez szükséges eszközök - View

12. Ábra

13. Ábra

14. Ábra

15. Ábra

16. Ábra

17. Ábra

18. Ábra

19. Ábra

20. Ábra

21. Ábra

22. Ábra

23. Ábra

24. Ábra

25. Ábra

Az eszközök után nézzük meg az Adobe Fireworks CS4

környezeti beállításainak lehetőségét az Edit / Preferences

menüpont elindítása után. (26. ábra)

26. ábra

A General (általános) lapon az általános beállításokat

tehetjük meg (27. ábra):

27. ábra

1. Document Options (dokumentum lehetőségek) – mutat-

hatja az indítási képernyőt (Show startup screen), skálaüté-

sek és hatások (scale strokes and effects)

2. Maximum Undos (visszavonások száma) – a szerkesztés

során visszavonható lépések számát állíthatjuk (alapértel-

mezett érték: 20)

3. Colors defaults (alapszínek) – itt az alapértelmezett

vonalszínt (Stroke), a kitöltő színt (Fill) és a kijelöléskor

használt jelölőszínt (Highlight) határozhatjuk meg. (28.

Ábra)

28. ábra

3. Edit (szerkesztés) – a képelemek szerkesztéséhez hasz-

nált eszközökre vonatkozó beállításokat tehetjük meg. (29.

ábra)

29. ábra

4. Guides and Grids (útmutatók és rácsok) – az útmutatók

és a rácsok színét állíthatjuk be.

5. Type (betűtípusok) – betűtípusok beállításait változtat-

hatjuk.

6. Photoshop Import/Open (Photoshop Import és megnyi-

tás) – a Photoshop import fájlainak a beállításait változ-

tathatjuk meg.

7. Launch and Edit (indítás és szerkesztés) – külső program

megnyitását végezhetjük vele.

8. Plug-Ins – Photoshop pluginok közül importálhatunk.

2. Lecke

A ’szöveg’ eszköz Indítsuk el az Adobe Fireworks CS4 -et, és hozzuk létre az

új munkalapunkat a File / New paranccsal.

Ebben az esetben a kép mérete 500x150 pixel legyen, fehér

(White) háttérrel, a felbontás 72 Pixel/Inch (Resolution –

felbontás).

Mielőtt nekilátnánk, válasszuk ki a használni kívánt ked-

venc színünket.

Kattintsunk az eszközök színkitöltő ikonjára (Tools/Colors).

Mikor a palettára helyezzük az egér mutatóját, átváltozik a

csepegtető alakjára, így már elegendő egyet kattintanunk,

hogy felvegyük a megfelelő árnyalatot (30. ábra).

A kiválasztott szín mellett a panel felső részén láthatunk

egy kettős kereszttel bevezetett karaktersorozat (pl.: piros =

#FF0000), ami egy hexadecimális színkód.

30. ábra

Megjegyzés:

A színeknél a program a HTML böngészők által ismert kódot

használja a színek felismerésére. Fontos, hogy minden szín

rendelkezik egy megfelelő kóddal, ez azért hasznos, mert így

például meg tudjuk változtatni egy HTML oldal háttérszínét.

Válasszuk először a piros színt. Ha finomítani szeretnénk

az árnyalaton, akkor újra hívjuk elő az előző színpalettát és

a paletta felső részén levő körre (31. ábra) kattintva előhív-

hatjuk a rendszer színpalettáját. Az eredmény egy újabb

ablak (32. ábra).

31. ábra

Lehetőségünk van kiválasztani a színt az Alapszínekből

(basic colors), vagy egy kattintás a nagy négyzetre lehetővé

teszi a kívánt színárnyalat kiválasztását. Ezen kívül a szín-

árnyalatot a vörös (red), a zöld (green), vagy a kék (blue)

főszínek beállításával is megadhatjuk.

32. ábra

Ha ezzel kész vagyunk, válasszuk ki a képernyő baloldalán

rendelkezésünkre álló eszközök közül a Tools / Vector /

Text tool-t (szöveg eszköz), amit egy rajzolt ’T’ betű jelöl, és

kattintsunk a most készített vászonra.

Gépeljünk be egy tetszőleges szöveget, pl: Fireworks CS4.

A Text tool (szöveg eszköz) segítségével változatos felirato-

kat készíthetünk.

A szöveges képelemek jellemzője, hogy a különleges hatá-

sok beállításai után is módosítható marad a szöveg tartal-

ma.

A Properties (tulajdonságok) panelen megjelenik az aktuá-

lis eszköztár. Itt többféle menü is található (33. ábra), ame-

lyekkel megtudjuk adni a karakterek jellemzőit: ezek a betű-

típus (Font) neve, a betűméret (Size), betűstílus és a szö-

vegmezők igazításai.

Lényegében ismerős terepre értünk, hiszen a szövegszer-

kesztőkben már megtanultuk használni ezt az eszközkészle-

tet.

33. ábra

A betűtípus mező az elérhető karakterek listáját tartalmaz-

za.

Válasszuk pl.: Minion Pro karakter típust (de választhatunk

mást is).

Most szenteljünk figyelmet a méretek tulajdonságaira, ez

lehetővé teszi, hogy megadjuk a beilleszteni kívánt szöveg

nagyságát, válasszuk a 40-s méretet a csúszka segítségével

(vagy gépeljük be a beviteli mezőbe).

Válasszuk a Dőlt, Félkövér, Aláhúzott stílusok közül a fél-

kövéret.

Hagyjuk kiválasztva a Smooth Anti-Alias (azaz a szélek

árnyaltak és nem pontosak) módozatot. (34. ábra)

34. ábra

Választhatunk, hogy a szöveget milyen módon igazítsuk:

középre, jobbra, balra vagy sorkizártra.

Hagyjuk változatlanul ezt a tulajdonságot, mivel ha egy szö-

veg csak egyetlen sorból áll, szükségtelen változtatni a sza-

kasz beállításán.

Beállítható az egyes karakterek közötti távolságok

(Kerning), a sortávolság (Leading), a bekezdések tulajdon-

ságai, valamint a betűk körvonalának színe, élfinomítása is.

Ezeket a funkciókat a Text menüpont alatt találhatjuk meg.

Megjegyzés: Ha törölni akarjuk a műveletet, válasszuk az

Edit / Undo text tool parancsot, vagy a rövidebb utat, a Ctrl

+ Z billentyűkombinációt.

Ismétlődően választva ezt a parancsot többször lépkedhe-

tünk visszafelé, míg vissza nem térünk a kezdeti állapothoz.

A mentés parancsa természetesen szokásos, a File / Save,

de valójában hiányzik még néhány információ a képek ada-

tairól és működésükről. Minden program készít egy bizo-

nyos típusú dokumentumot, amit egy pontosan meghatáro-

zott kiterjesztés jelöl, és ezt a megvalósított dokumentum-

hoz csatolják.

A Microsoft Word .DOC dokumentumokat készít, a

Microsoft Excel .XLS dokumentumokat, vagy az Adobe

Photoshop alkotja a .PSD dokumentumokat, és az Adobe

Fireworks -nek is megvannak a maga jellegzetes dokumen-

tumai, amiket a .PNG kiterjesztés jelöl.

Tegyük fel, hogy a kiterjesztés nem más, mint a dokumen-

tumok ’vezetékneve’, miközben a ’keresztnevét’ természete-

sen mi fogjuk meghatározni. A kiterjesztés tulajdonképpen

egyfajta jelölés, ami lehetővé teszi nekünk, hogy még a

dokumentum megnyitása előtt meg tudjuk, mi lehet a tar-

talma: egy hang, egy szöveges dokumentum, vagy egy kép.

És éppen a kiterjesztésnek köszönhető, hogy ha az egérrel

duplát kattintunk az egyik dokumentumra a fájlkezelőben,

láthatjuk, ahogy automatikusan megnyílik a hozzá tartozó

programmal együtt.

Az első munkánkat most már el tudjuk menteni, File / Save,

adjuk meg a fájl nevét és kattintanunk az OK gombra.(35.

ábra)

35. ábra

Most már nincs más hátra, mint hogy kipróbáljunk új szö-

vegeket és új színeket.

3. Lecke

Árnyékhatás a szövegben Az előző Leckében megnéztük, a Text tool-t (szöveg esz-

közt).

Igaz az, hogy a számtalan írásjel-karakternek (Font-nak)

köszönhetően gyorsan készíthetünk nekünk tetsző szövege-

ket, még ha nem is igazán eredeti hatásúakat.

A grafikai és fényképjavító programok soha nem érték be az

alap karakterekkel, és ezért még tesznek hozzájuk néhány

egyedi karaktert, amelyekkel lehetővé válik, hogy igazán ere-

deti szöveget készítsünk.

Gondoljunk csak a hetilapokra, vagy a havilapokra ame-

lyek, sporttal, gazdasággal, divattal vagy a számítástechni-

kával foglalkoznak.

Tele vannak grafikusok által készített effektusokkal, melyek

feladata hogy igazán határtalanul egyre színesebbekké és

megragadóbbakká tegyék kedvenc újságainkat.

Az, amit most készülünk felfedezni, kicsit sem olyan bonyo-

lult, mint amilyennek tűnik.

Ebben, és a következő Leckékben látni fogjuk majd hogyan

működik.

Most készítsünk elő egy 500x150pixeles „vásznat” a legegy-

szerűbb hatások egyikére, az árnyékhatás szövegbeli alkal-

mazására.

Készítsünk a szöveg eszközzel egy tetszőleges méretű és

karakterű feliratot.

Most mi példaként a félkövér Minion Pro karaktert fogjuk

használni 40 pontos méretben, Smooth Anti-Alias-szal, és

piros színben.

Írjunk be egy tetszőleges szöveget (pl: Barbara), majd kat-

tintsunk a szöveg mezőn kívülre.

Ekkor a Properties panelen megjelenik az effektusok kiala-

kításához segítséget adó Filters menü (36. Ábra)

36. ábra

A Properties panelen válasszuk az Filters-t, ezt követően

pedig az Shadow and Glow / Drop Shadow (Ereszkedő

Árnyék) opciót (37. ábra)

37. ábra

Az ezután megjelenő pici ablakban (38. ábra) megadhatjuk

az összes sajátosságot a kívánt árnyékhatás elérésére.

38. ábra

Itt megtaláljuk a méretet, a színt, az átlátszóságot, és az élet-

lenséget is:

Distance – megadja, hogy milyen messze helyezkedjen el az

árnyék (pixelben)

Color – meghatározza az árnyék színét, a kis monitorra kat-

tintva kinyílik egy színpaletta, ami lehetővé teszi az árnyék-

nak szánt szín kiválasztását.

Opacity – az a tulajdonság, ami megszabja az árnyék átlát-

szó képességét, és így megmutatja a háttér színét is. Minél

kisebb értéket adunk neki annál több látszik a háttér színé-

ből.

Softness – meghatározza az életlenséget, azaz az árnyék

élességi fokát; minél magasabb a szám értéke, az árnyék

annál életlenebb, mint egy távoli fényforrás esetében.

Angle – meghatározza az árnyék elhelyezkedésének szögét.

Knock Out – ezzel az opcióval később bővebben foglalko-

zunk.

Megjegyzés:

Az effektus helyes megválasztásakor figyelembe kell venni

néhány paramétert az árnyékot illetően.

Ha a fény egy közelebbi távolságból esik a tárgyra, az árnyék

olyan pontos mint az a tárgy ami létrehozta. Ezzel ellentét-

ben, ha a fény távolabbi, akkor az árnyék veszíteni fog szí-

néből és az élességéből.

A 38-as ábrán látható kép az éppen tárgyalt árnyékhatás

bemutatása.

Minden apró változtatást közvetlenül figyelemmel kísérhe-

tünk a rajzunkon.

Most, miután elsajátítottátok az effektus kezelését, hagyunk

benneteket szórakozni egy kicsit, hogy kipróbáljatok

néhány módosítást. Próbáljátok végig a felsorolt beállítási

lehetőségeket, amit például a 39. ábra is mutat.

39. ábra

Megjegyzés:

Ajánlott az árnyékot a tárgyhoz képest jobbra és alulra

helyezni.

Ez egy olyan egyezmény, amit a professzionális és rek-

lámgrafikával foglalkozók jegyeztek fel.

Ez abból alakult ki, hogy az emberek legnagyobb része jobb-

kezes, ebből az következik, hogy hasznos ha a fényt fentről

és baloldalról kapjuk úgy, hogy ne akadályozzuk saját

magunkat árnyékolással, ami sokkal bonyolultabbá tenné a

munkánkat.

A reklámgrafika ezen a megegyezésen alapul, mivel hűsége-

sen szeretné ábrázolni azt ahogy látjuk a dolgokat.

Most, hogy beállítottunk mindent, kattintsunk a kis ablakon

kívülre.

Így véglegesítjük beállításainkat. Ha mégsem szeretnénk

megtartani ezt a beállítást, akkor válasszuk az ESC billen-

tyűt a kilépésre.

Ahogy láthatjuk, az eredmény egy nagyon egyszerű eljárás,

egy kétségtelenül megnyerő effektussal a szövegünkben.

Az effektust később is módosítható, ha duplán kattintunk

az effektus nevére a kis panelen. Vagy törölhető, ha nincs rá

szükségünk. Kattintsunk az effektus nevére, majd a fölötte

levő mínusz (-) jellel ellátott gombra.

4. Lecke

Metszethatás Az Adobe Fireworks CS4-ben a metszet hatást is az árnyé-

kolással tudjuk megoldani.

Most, hogy könnyedén elsajátítottátok az árnyék működé-

sét, nézzük meg az árnyék egy második, nagyon egyszerű és

könnyen átlátható típusát.

Mint már mondtuk, egy egyszerű szöveg nem tudja mindig

minden igényünket kielégíteni, és így a speciális effektusok-

hoz kell fordulnunk.

Már láttuk, hogyan kell megvalósítani az árnyékolást. Most

azt fogjuk látni, hogy adjunk a feliratunknak egy metszet

hatást.

Ha az első példán úgy gondoltunk az írott szövegünkre,

mint egy sor egymásra helyezett színes, kivágott lapra (a

szöveg árnyéka az alsó lapon), most úgy akarunk gondolni

a szöveg-re, mint egy stencil álarcra, ami egy alsó, színes lap

felett helyezkedik el.

Miután elkészítettünk egy új szöveget ugyanazokkal a karak-

terekkel, mint az előzőt, ki fogjuk választani az árnyék új

típusát.

(Az előző leckében használt beállítás: vászon: 500x150

pixeles, a karaktertípus: félkövér stílus, Minion Pro típus, 40

pontos méret, Smooth Anti-Alias, és piros szín)

Válasszuk ki a Properties panel Filters/Shadow and

Glow/Inner Shadow opciót. (40. Ábra)

40. ábra

A megjelenő ablak lehetővé teszi a kívánt effektus beállításait.

Ugyanazokat az opciókat fogjuk látni, mint korábban.

Megadhatjuk a metszet jellegzetes tulajdonságait, a mérete-

ket, olyan adatokat amivel háromdimenziós hatást is elér-

hetünk.

A szín mezőben válasszuk ki a fehér színt.

Most adjuk meg méretnek a 7-et, az Opacity értékét 65-nek

és az Softness (élességet) 4-nek. Az árnyék elhelyezkedése

marad. (41. Ábra)

41. ábra

Kombinált effektusok

Azoknak, akik a számítógép és a programok működését

vizsgálják, az eddig látott műveletek, és felsorolt példák még

nem az utolsók.

Az idáig használt, és a következő Leckékben sorra kerülő

eljárások és szűrők mind változtathatók, vagyis egymással

keverhetők, hogy így összetettebb effektusokat érhessünk el.

Egyik példa az, hogy keverjük egymással az árnyékhatáso-

kat.

Most készítsük el logóként saját nevünket, becenevünket,

vagy monogramunkat, amelyet később felhasználhatunk a

weblapunkhoz. Kattintsunk a File menü New parancsára,

majd hozzunk létre egy új vásznat 400x400-as méretben.

A Text eszközzel hozzuk létre a szöveget vastag betűtípussal

(ne felejtsük el, hogy a lapon kattintanunk kell). Miután

beírtuk a szöveget (kattintsunk a szövegen kívüli területre),

megjelenik a Filters panel és indítsuk el az Inner Shadow

(metszet) effektust, ennek dialógusablakában, az árnyék szí-

nének a feketét adjuk meg. (42. ábra)

42. ábra

Beállítjuk az átlátszóságot, az élességet, és végül az elhelye-

zés karakterisztikáit. Kattintsunk a panelen kívülre és néz-

zük meg az eredményt. Az effektus nem tűnik árnyéknak,

inkább egy kiemelésnek (domborulatnak). (43. ábra)

43. ábra

Az árnyékhatás utólagos fokozásához változtathatjuk az

átlátszóság és az árnyékot.

Most készítsünk egy másik effektust erre a szövegre.

A Properties panelen válasszuk az Filters-et, ezt követően

pedig az Shadow and Glow / Drop Shadow (Ereszkedő

Árnyék) opciót (44. ábra)

44. ábra

Az ezután megjelenő pici ablakban (45. ábra) megadhatjuk

az összes sajátosságot a kívánt árnyékhatás elérésére.

45. ábra

Most már a szövegünkhöz két effektus is tartozik. Ha az

effektus neve előtti kis pipára kattintunk akkor kikapcsol-

hatjuk és anélkül tekinthetjük meg a képet. (46. ábra)

46. ábra

Mivel felesleges ekkora vászon a logónknak, megismerke-

dünk egy új eszközzel, mellyel a kívánt méretűre tudjuk

szabni a képünket.

Válasszuk az eszköztár Select csoportjából a Crop tool

nevű eszközt.

Vigyük az egérmutatót a szöveg bal felső sarkához és a bal

egérgombot lenyomva tartva húzzuk egészen a szöveg jobb

alsó sarkáig, majd engedjük fel.

A logónk szaggatott vonalakkal lesz kijelölve, a négy olda-

lán négy kis négyzettel. A négyzeteket megfogva lehet

módosítani a kijelölés méretét. (47. ábra)

47. ábra

Ha beállítottuk a kívánt méretet, kattintsunk duplán a kije-

lölés közepén. (48. ábra)

48. ábra

Mentsük el kicsi képünket logo néven.(49. ábra)

49. ábra

5. Lecke

Egyéb fájlformátumok Ami a kép-dokumentumokat illeti, egy utólagos pontosítást

kell tennünk: nem minden formátum (tehát nem minden

kiterjesztés) olyan típusú hogy csak az őket tartalmazó

programok tudják olvasni, léteznek ugyanis olyan képfor-

mátumok, amelyek egy univerzális kiterjesztéssel rendelkez-

nek, és számos programmal meg lehet nézni őket.

Ilyen a .BMP, a .JPG és a .GIF.

Az elsőt nagyon gyakran használják képernyőháttérként, a

másik kettő pedig széles körben elterjedt képformátum az

Interneten.

Bizonyára sokan tudják, hogy a .JPG egy tömörített fájlfor-

ma, amit arra használnak, hogy felgyorsítsák a dokumen-

tum átvitelét a Web-en.

Fontos beállítanunk a képdokumentum formátumát, ezzel

megmutathatjuk a munkánkat azoknak is, akik nem rendel-

keznek ugyanazzal a grafikai programmal.

A mentés parancsa természetesen szokásos, a File / Save a

rajzobjektumot .PNG kiterjesztéssel (Adobe Fireworks CS4

saját formátuma) menti.

Ezt a formátumot képes értelmezni a Abobe Dreamweaver

és a Adobe Flash is.

Ez a parancs viszont nem alkalmas arra, hogy a Web-en

alkalmazható .JPG vagy .GIF képeket állítsunk elő.

Ehhez az Exportálás műveletet kell használnunk.

Akkor mentsük el a képünket, a fenti típusok egyikeként, ha

már nem akarunk rajta vektoros elemet javítani.

Ha esetleg mégis szükségünk lehet vektoros elem javítására,

akkor csináljunk egy .PNG -s változatot is és azt elővéve,

módosítva és a módosítást exportálva tudjuk felülírni a már

meglévő például .JPG-t.

Exportálás során pontosan be tudjuk állítani a kimeneti fájl-

formátumot. Egyszerű exportálás a File / Export menü-

ponttal végezhetünk, ami tulajdonképpen a mentéshez

hasonló (meg adjuk a fájl nevét és típusát, majd a Save

gombbal megerősítjük a műveletet). (50. ábra)

50. ábra

A másik lehetőséget már az előző fejezet végén érintettük.

Az File / Image Preview utasítás használata esetén az aktu-

ális formátumhoz különböző finomításokat is végezhetünk.

(51. ábra)

51. ábra

52. ábra

Amennyiben nem tudjuk pontosan, hogy milyen formátum-

ba célszerű exportálni, akkor segíthet a Fireworks CS4

exportvarázslója, File / Export Wizard (52. ábra)

Abban az esetben ha csak a megfelelő formátumot akarjuk

meghatároztatni, akkor a Select an export format válasszuk,

majd a Continue gombbal tovább léphetünk.

Később ha már a célállomány mértét is meg tudjuk hatá-

rozni akkor a Target export file size beállításnál ezt megte-

hetjük. (53. ábra)

53. ábra

A következő párbeszéd ablakban azt kell kiválasztanunk,

hogy milyen célra fogjuk használni az exportált grafikát:

1. The Web (internetes felhasználás)

2. An image-editing application (képszerkesztő alkalmazás)

3. A desktop publishing application (kiadványszerkesztő

alkalmazás)

4. DreamWeaver (Web-oldal szerkesztő program)

Amikor kiválasztottuk a megfelelőt a Continue gombbal

léphetünk tovább. (54. ábra)

54. ábra

55. ábra

Programunk a megadott paraméterek alapján előkészíti a

javasolt nézetet és az Exit gombra kattintva megtekinthet-

jük. (55.-56. ábra)

56. ábra

Az Export gombra kattintva elfogadhatjuk a beállításokat,

majd a mentés-egyszerű export művelettel megegyező követ-

kezik, Fájl név – Mentés. (57. ábra)

57. ábra

Vegyük elő az elmentett Logo.PNG képünket és nézzük

meg, hogyan lehet Logo.JPG illetve, Logo.GIF képként

elmenteni.

Alkalmazzuk a File / Image Preview utasítást, a megjelenő

ablakban kiválaszthatjuk a képformátumát, legyen most

JPEG (58. ábra)

58. Ábra

Ezután kattintsunk az Export gombra, a megjelenő ablak-

ban beírjuk a fájl nevét (ez most maradhat Logo, és a fájl

típusának az Images Only-t válasszuk. (59. ábra)

59. ábra

Optimalizálás

Optimalizálás során olyan animációt vagy képet készíthe-

tünk, amely a lehető legkisebb fájlméret mellett a legjobban

hasonlít az eredeti formához.

Az optimalizálási folyamatot az Optimize panel segítségével

végezhetjük el.

Ezt a panelt a Window / Optimize menüpontban kapcsol-

hatjuk be.

A már elmentett Logo.PNG képünk segítségével próbáljuk

ki ezt a műveletet.

A kép megnyitása után váltsunk át az előlnézet-választó

segítségével a 4-Up állásba. (60. Ábra)

60. ábra

A kép alján olvashatjuk a képre vonatkozó fontos informá-

ciókat (fájlforma, méret, letöltés időtartama a Web-ről, szín-

választás módja, felhasznált színek száma).

Az első ablakban levő kép az eredeti a Logo.PNG, a többi

ablakban állítsuk be az Optimize / Settings segítségével a

fájl formátumát.

61. ábra

A második ablakban legyen .JPEG, a következő .GIF, az

utolsó pedig Animated GIF. (61. ábra)

Az Optimize panel segítségével módosítsuk a GIF típusú

képünk paramétereit:

1. Színválasztás: Black &White

2. Színszaggatás (Dither): 50 %

Ezt a beállítást végezzük el a másik két képen is.

Megfigyelhetjük, hogy a kép mérete jelentősen csökkent, a

letöltéshez szükséges idő 1 másodperc alatt van. (62. ábra)

62. ábra

A beállítások fontosságára a következő leckékben visszaté-

rünk, hiszen a képek és animációk során is fontos lesz.

Lehetőségünk van külső forrású állományt importálni, első

lépésként kérjünk egy új „vászont”, majd a File / Import

menüpont válasszuk.

Az Oktató Cd / Feladatok / Feladatok / Grafika mappából

válasszuk a kastély nevű képet – Megnyitás gomb. (63.

ábra)

63. ábra

A megváltozott egérkurzor segítségével a kép bal felső sar-

kát meg tudjuk határozni a „vásznon” (nyomva tartva az

egér balgombját húzzuk az egeret, majd ha elengedjünk

akkor megjelenik a kép) (64. ábra)

64. ábra

A kép tulajdonságait a Properties panelen láthatjuk és vál-

toztathatjuk.

A képhez rendelhetünk különböző árnyékot (Filters), adha-

tunk hozzá szöveget (amit szintén formázhatunk), majd a

Layer1 panelen az egyes rétegeket is láthatjuk, be/ki kap-

csolhatjuk. (65. ábra)

65. ábra

3. Fejezet

1. Lecke

Különleges színhatások,

effektusok készítése

Az előző fejezetben már érintettük az effektusok készítésé-

nek módját (Properties / Filters), most nézzük meg részle-

tesebben a program nyújtotta számos lehetőséget, hiszen

néhány kattintással kiváló grafikai eredményeket érhetünk

el.

A képhez illetve szöveghez rendelt effektusokat bármikor:

1. aktiválhatjuk – az elkészített effektus neve előtt „pipa”

van

2. kikapcsolhatjuk - az elkészített effektus neve előtt „piros

X” van

3. törölhetjük – az effektus nevére kattintunk, majd az

Filters panelon a „-„ jellel kitörölhetjük

Korábban már megnéztük, hogyan tudunk külső forrású

állományt importálni, ezért nyissunk egy új „vászont”, majd

a File / Import menüpont következik. Válasszuk az Oktató

Cd / Feladatok / Feladatok / Grafika mappából a Windsor

nevű képet – Megnyitás gomb. (66. Ábra)

66. Ábra

Importálás után a kép Bitmap (bitkép szerkesztő) módban

látható. (67. Ábra)

67. Ábra

Az Effektusok használatához kattintsunk a képre, most már

a Properties / Filters panel segítségével elkezdhetjük a

különleges hatások kialakítását. (68. Ábra)

68. Ábra

Filters panel

Filters/Adjust Color (Különleges színhatások)

1. Auto Levels (Automatikus Beállítás): Automatikus tónus-

kiegyenlítést végez (69. Ábra)

A művelet eredményét a 70. Ábrán láthatjuk.

69. Ábra

70. Ábra

2. Brightness/Contrast (Fényerő/Kontraszt): Az adott kép

fényerejét és kontrasztértéket változtathatjuk a segítségével.

(71. Ábra)

Nézzünk egy példát is, ha a képen a Brightness: -70, és a

Contrast: 30 akkor egy kora esti hatású képet kapunk. (72.

Ábra)

71. Ábra

72. Ábra

3. Curves (Színkorrekció): A színek intenzitását állíthatjuk

be. (73. Ábra)

A Channel ablakban beállíthatjuk, hogy a műveletet minden

színkomponensre egyszerre (RGB), vagy külön akarjuk elvé-

gezni. Kattintsunk az egyenes valamely részére, ezután a

vonal húzásával módosíthatjuk a kép színeit. (74. – 75. Ábra)

73. Ábra

74. Ábra

75. Ábra

4. Hue/Saturation (Színárnyalat/Telítettség) (76. Ábra):

Változtathatjuk a kép színárnyalatát (Hue), színtelítettségét

(Saturation) és a világosságát (Lightness) a csúszkákon.

(77. Ábra).

Kevés színű vagy rossz színezésű képeket tudunk így korrigálni,

illetve színes képből készíthetünk fekete-fehér hatású képet is.

76. Ábra

77. Ábra

5. Levels (Szintek): A Curvers utasításhoz hasonló funkciót

lát el. A Levels opcióval az adott kép árnyék, középtónus és

csúcsfény tartományait változtathatjuk. (78.-79. Ábra)

78. Ábra

79. Ábra

6. Invert (Negatív kép): A kiválasztott kép inverzét kapjuk.

Ha negatív képet digitalizáltunk, akkor az Invert segítségé-

vel utólag is megfordíthatjuk a színeket. (80. –81. Ábra)

80. Ábra

81. Ábra

7. Color Fill (Színcsere): Különböző színnel kombinálhat-

juk a képet. A megjelenő ablakban megadhatjuk a színezés

módját (Blending Mode), a színt és az átlátszóság értéket

(% érték).(82. –83. Ábra)

82. Ábra

83. Ábra

Ezzel végignéztük a különleges színhatások (Adjust Color)

kialakításában segítségünkre levő menüpontokat.

Az Adobe Fireworks CS4 lehetőséget kínál további effektu-

sok kialakításhoz és szűrők alkalmazásához is.

Ezeket a lehetőségeket vizsgáljuk meg a következő leckék-

ben.

2. Lecke

3D Effektusok

Folytassuk a különleges hatások kialakításának megismeré-

sét.

A Filters / Bevel and Emboss (Élletörések és

Domborulatok) (84. Ábra) menüpontban található hatások

segítségével kiemeléseket és domborításokat készíthetünk

képeink körvonalai mentén.

84. Ábra

1.Bevel (él letörések):

→ Inner Bevel: befelé törés, hatása a képen belül jön létre

(85. –86. Ábra). Természetesen itt is állíthatunk a törés

értékein (próbáljuk is ki!).

85. Ábra

86. Ábra

→ Outer Bevel: kifelé törés, a kép körül alakít ki élletörést

(87. –88. Ábra).

Számos állítási lehetőséget lát-hatunk itt is (pl: a törés színe,

alakja, lágysága, a megvilágítás szöge, gombhatások).

Nemcsak képek alakításánál hasznosak ezek a beállítások,

hanem később amikor gombokat készítünk újra felhasznál-

hatjuk ezeket az ismereteket.

87. Ábra

88. Ábra

2. Emboss (domborulatok): a kialakítható domborulatok

átlátszóak, ezért mintás háttéren is jól mutatnak

→ Inset Emboss: az objektum körül keletkezik egy úgy-

nevezett „mélyedés” (89. –90. Ábra)

89. Ábra

90. Ábra

→ Raised Emboss: az objektum körül keletkezik egy úgy-

nevezett „domborulat”. (91. –92. Ábra)

91. Ábra

92. Ábra

3. Lecke

Árnyékhatás és Izzás

kialakítása képeknél Az árnyékhatások közül a Drop Shadow (ereszkedő árnyék)

és az Inner Shadow (metszet hatás) kialakítását szövegek

esetén már kipróbálhattuk a 2. fejezetben.

Képek, objektumok esetén hasonlóan működik. Különféle

árnyékot készíthetünk a képen kívül (Drop Shadow), és a

képen belül (Inner Shadow).

Nézzük meg a gyakorlatban is!

Nyissuk meg az (eddig is gyakorlásra használt)

Windsor.png képet.

A képre kattintva a Properties (Beállítás) panelen megkap-

juk az Filters panelt is.

Ahogyan már eddig is gyakoroltuk kattintsuk a „+” jelre és a

válasszuk a Shadow and Glow menüt (93. Ábra):

93. Ábra

Drop Shadow: képen kívüli árnyékot eredményez.

Az utasítás kiválasztása után megjelenő ablakban megad-

hatjuk az összes sajátosságot a kívánt árnyékhatás elérésé-

re. Itt megtaláljuk a méret, a szín, az átlátszóság, és az élet-

lenség beállításának lehetőségeit (2. Fejezet / 3. leckénél

már alkalmaztuk ezeket a beállításokat). (94. Ábra)

94. Ábra

A beállításoknál a Knock Out kiválasztása esetén csak az

árnyék látszik, az objektum nem.

Inner Shadow: képen belüli árnyékot eredményez.

Az utasítás kiválasztása után megjelenő ablakban a Drop

Shadow utasítással azonos módon megadhatjuk az összes

sajátosságot a kívánt árnyékhatás elérésére (szöveg esetén

2. Fejezet / 4. leckénél már alkalmaztuk ezeket a beállítá-

sokat). (95. Ábra)

95. Ábra

Glow(kép körüli „izzás”)/Inner Glow (képen belüli „izzás”):

az objektum körül kívül illetve belül- körkörösen meg-

jelenő színhatást eredményez ez a beállítás.

Az utasítás kiválasztása után megjelenő ablakban beállít-

hatjuk: az izzás méretét (Halo offset), színét, átlátszóságát

(Opacity), halványodását (Softness) valamint az izzás

középvonalának eltolását (Offset). (96. – 97. Ábra)

96. Ábra

97. Ábra

Egyéb hatások:

1. Blur: segítségével az objektumokat fokozatosan homá-

lyosíthatjuk.

2. Other (egyéb hatások):

→ Convert to Alpha: szürkeárnyalatos képet készíthe-

tünk.

→ Find Edges: élkiemelés - kontrasztos területek éleinek

kiemelését eredményezi.

3. Sharpen: segítségével az objektumokat fokozatosan éle-

síthetjük.

4. Lecke

A hatások kombinálása, stílusok

Az előző leckékben láthattuk, hogy egy képhez több hatás -

Filters is illeszthető.

Vannak előre elkészített ilyen „kombinációk”, amelyeket az

Styles panelen találhatjuk meg. (98. Ábra)

98. Ábra

Próbáljuk ki például az Old Paper Styles-ból 003-at (99.

Ábra).

99. Ábra

Láthatjuk, hogy a képhez három Filters is tartozik. Érde-

mes megnézni a többi stílust is, hiszen meggyorsítják a mun-

kánkat, így nem kell minden objektumnál a beállításokkal

időt töltenünk.

Természetesen kialakíthatunk egyedi stílusokat is.

Ezek a stílusok eltárolhatók, így bármikor felhasználhatjuk

őket később, amikor már a Web-oldalunk arculatát tervez-

zük.

Ez nagyon fontos, hiszen a kiválasztott stílust következete-

sen végigvihetjük a munkánk során.

Nézzünk egy egyszerű példát, új stílus rögzítésére!

Korábban már elkészítettük logonkat (logo.png). Most ezt

a képelemet nyissuk meg. Meghatároztuk a méretét, színét,

a karakterek stílusát és rendeltünk hozzá ereszkedő árnyé-

kot valamint metszethatást. (100. Ábra)

100. Ábra

Az új stílus alapjául szolgáló képelem ezzel megvan, követ-

kezhet az új stílus felvétele.

Az új stílus rögzítése az Properties panelen található New

Style gombra kattintva történik. (101. Ábra)

101. Ábra

A megjelenő párbeszédablakban megadhatjuk a stílus nevét

(legyen ez most: logo), valamint a stílusban definiálni

kívánt tulajdonságokat: (102. Ábra)

→ Fill type – Kitöltés típusa

→ Fill color – Kitöltés színe

→ Stroke type – Körvonal típusa

→ Stroke color – Körvonal színe

→ Effect – Hatás

Szöveges képelem esetén még a következő tulajdonságokat

is beállíthatjuk:

→ Text font – Betűtípus

→ Text size – Betűméret

→ Text style – Betűstílus

→ Text other – Egyéb szöveges tulajdonságok.

102. Ábra

A stílus módosításához a Styles panelen ki kell választa-

nunk a módosítandó elemet, majd dupla kattintással meg-

nyithatjuk a kiválasztott stíluselemre vonatkozó beállítás

ablakát, melynek segítségével módosíthatunk a stíluson.

A stílus törléséhez a Delete Style gombot kell használnunk,

amely a New Style gomb mellet található. (103. Ábra)

103. Ábra

Most nézzük meg, hogyan rendelhetünk hozzá egy új képe-

lemhez már meglévő stílust.

1. Kérjünk egy üres vászont.

2. A Text Tools segítségével készítsünk egy új szöveges ele-

met (pl: Weboldal)

3. A Styles panelen válasszuk ki a Logo nevű stílust, kat-

tintsunk rá.

4. A Weboldal szöveges elemünk ezzel az egy gomb-nyo-

mással megkapta a logonk stílusát. (104. Ábra)

Ilyen egyszerű a stílusok használata.

104. Ábra

5. Lecke

Kreatív eszközök

Amint láttuk az Adobe Fireworks CS4 számos lehetőséget

kínál képelemeink különböző formázásához, érdekessé téte-

léhez.

Feltétlenül meg kell említenünk az Adobe Fireworks CS4

beépített kreatív funkciót.

Ezen kreatív eszközök segítségével a képeken további látvá-

nyos (sokszor speciális) és figyelemfelkeltő hatásokat érhe-

tünk el.

Használatuk nagyon egy-szerű, hiszen az egyes funkciók

előre elkészített utasítások sorozata, nekünk csak a

Commads / Creative menüpontból kell kiválasztanunk az

alkalmazni kívánt elemet.

Most nézzük meg milyen „különlegességek” állnak rendel-

kezésünkre.

Ahhoz, hogy az egyes lehetőségeket kitudjuk próbálni ter-

mészetesen szükségünk van egy képelemre.

Nyissunk egy új vászont, majd importáljuk az Oktató Cd /

Feladatok / Feladatok / Grafika / Parlament képet. (105.

Ábra)

105. Ábra

A Commads / Creative menüpont elemei és hatásuk: (106.

Ábra)

106. Ábra

1. Add Arrowheads: vektoros útvonalaink elejére és végére

speciális nyílvégződéseket helyezhetünk el, 17 lehetőség

közül választhatunk (107. Ábra)

107. Ábra

2. Add Picture Frame: a vászon köré képkeretet készíthe-

tünk. Megadhatjuk a keret vastagságát, valamint kiválaszt-

hatjuk a képkeret stílusát. (108. Ábra)

108. Ábra

3. Convert to Grayscale: képünket szürkeárnyalatossá ala-

kíthatjuk. (109. –110. Ábra)

109. Ábra

110. Ábra

4. Convert to Sepia Tone: egy olyan hatást érhetünk el, ami

napjainkban nagyon divatos. A szürkeárnyalatos kép barní-

tott színtónust kap, amely így a korabeli képekhez hasonló-

vá válik. (111. –112. Ábra)

111. Ábra

112. Ábra

5. Vektor Mask: nyolc különböző átmenetes halványítás

közül választhatunk. (113. –114. ábra) A Properties panelen

további beállítási lehetőségeket kapunk a halványítással

kapcsolatban.

113. Ábra

114. Ábra

6. Twist and Fade: a képelem elforgatására és elhalványí-

tására ad lehetőséget. Az egyes transzformációs lépéseket

külön képelemként készíti el, amelyből egyszerű animáció is

készíthető. Beállítási lehetőségek:

→ Steps – lépésszám

→ Spacing – távolság

→ Rotation – elforgatás mértéke

→ Opacity – átlátszóság

Az Options pontban további beállításokat találhatunk. (115.

–116. Ábra)

115. Ábra

116. Ábra

Ebben a fejezetben nagyon sok olyan hatással ismerkedtünk

meg, amelyekkel már meglévő képelemeket változtathat-

tunk meg.

Munkánk eredménye nagyon látványos lehet, ha jól hasz-

náljuk az Adobe Fireworks CS4 szolgáltatásait.

Ezért, hogy további jártasságokra is szert tegyünk a követ-

kező leckékben megnézzük, hogyan használhatjuk a szer-

kesztés különböző eszközeit (az eszközpanel elemeit) és

hogyan készíthetünk különböző animációkat.

4. Fejezet

1. Lecke

A szerkesztés és a nézet funkciók

Mielőtt hozzákezdünk az Eszközpanel elemeinek

– Select: kijelölő eszközök

– Bitmap: a pontgrafikához (raszteres) használatos esz-

közök

– Vector: a vektorgrafikus eszközök

– Web: Webes összetevőkhöz szükséges

– Colors: „színes” eszközök (színválasztás eszközei)

– View: a nézet eszközök (nézetválasztó eszközök)

részletes megismeréséhez, nézzünk meg néhány olyan

segédfunkciót, ami már más szoftverkörnyezetből ismerős

számunkra.

Az Edit (Szerkesztés) menüben számos olyan funkciót

találhatunk, amit akár szövegszerkesztés során is haszná-

lunk.

Az itt található menüpontok megismerése előtt, kérjünk egy

új vászont és importáljunk be egy képet. (pl.: Oktató CD /

Feladatok/ Feladatok / Pisai torony) (117. Ábra)

117. Ábra

Most nézzük meg az Edit menü néhány fontosabb elemét!

(118. Ábra)

118. Ábra

1. Undo: mindenki számára ismerős utasítás.

Alkalmazásával visszavonhatjuk a végrehajtott műveletet

(pl.: ha valamit elrontottunk). A visszavonható lépések

száma alapbeállítás szerint 20, ha ezt változtatni szeretnénk

az Edit / Preferences menüpontban megtehetjük.

2. Redo: ez az utasítás akkor jelenik meg, ha van visszavont

lépésünk. Segítségével visszaállíthatjuk a visszavont lépést.

3. Repeat: az utolsó lépés megismétlését hajtja végre (hasz-

nos lehet festési műveletek esetén).

4. Find and Replace: a szövegszerkesztőből jól ismert

Keresés és Csere műveletet hajthatjuk végre. A menüpont

kiválasztása után megjelenik egy panel, ahol kiválaszthat-

juk, hogy milyen elemekre szeretnénk a műveletet végrehaj-

tani. (119. Ábra)

→ Meghatározzuk, hogy hol keressen.

→ Mire vonatkozik a keresés: find text (szöveg), find font

(betűtípus – betűstílus), find color (szín, pl.: kitöltő színek

cseréje is lehetséges), find URL (URL hivatkozások), find

Non-Web216 (az alap 216 webes színtől eltérő színek kere-

sése és a megfelelő szabványra való cseréje).

A Find gomb lenyomására elindul a keresés. A Csere műve-

letét a Replace vagy a Replace All (összes cseréje) gomb

megnyomásával érhetjük el.

5. Vágólap műveletek:

→ Cut (kivágás)

→ Copy (másolás)

→ Paste (beillesztés)

119. Ábra

6. Duplicate: másolatot készíthetünk a képelemről úgy,

hogy az új kép néhány képpont eltolódással jelenik meg.

(120. Ábra)

120. Ábra

7. Clone: másolatot készíthetünk a képelemről, viszont az

új kép pontosan az eredeti kép felett helyezkedik el. (121.

Ábra)

121. Ábra

8. Crop Selected Bitmap: segítségével a kép általunk meg-

határozott részét ki tudjuk „nyírni”. (a képelem bármely

részét „eltávolíthatjuk”). Miután kijelöltük a szükséges részt

az Enter leütésével érvényesíthetjük a műveletet. (122. -123.

Ábra)

122. Ábra

123. Ábra

9. Crop Document: a kép körüli vászont tudjuk „nyírni”.

Eredménye a 124. Ábrán látható.

124. Ábra

Eddig most az Edit menü néhány parancsát néztük át, ame-

lyek nagyon hasznosak lehetnek a képelemek szerkesztése

során.

A másik, számunkra már ismerős menüpont a View

(nézet), hiszen számos szoftver környezetben találkozha-

tunk ezzel a menüvel. (125. Ábra)

125. Ábra

Nézzünk meg most néhány olyan pontot, amelyek a pontos,

aprólékos munkát segítik!

1. Rulers (vonalzók): segíthetik az optikai illesztést.

Kattintsunk a vonalzóra és az egér bal gombját nyomva tart-

va húzzuk a képre a megváltozott egérkurzort. Ezzel a

művelettel segédvonalakat helyezhetünk a munkaterületre,

amely segíthet a kép pontosabb szerkesztésében. (126.

–127. Ábra)

Amennyiben a segédvonalakat törölni akarjuk, „fogjuk”

meg az egérrel és húzzuk vissza a vonalzóra.

126. Ábra

127. Ábra

2. Grid (rácsháló): akkor érdemes bekapcsolni, ha a képe-

lemek szerkesztése során a képelemek egységnyi távolságra

történő elhelyezkedése fontos. (128. Ábra)

128. Ábra

2. Lecke

Kiválasztás funkciók használata

Az Eszköz panel (Tools) elemeinek első nagy csoportja a

Select (kijelölő eszközök)

A panel elmeivel felsorolás szintjén már foglalkoztunk a 2.

Fejezetben.

Most részletesen megnézzük az egyes elemek funkcióit,

alkalmazási lehetőségeiket.

A Select lap négy ikont tartalmaz, viszont egyes ikonok

további funkciókat is tartalmaznak, amire az ikon sarkában

levő kis nyíl utal.

Kiválasztó vagy nyíleszköz elemei és azok funkciói: (129.

Ábra)

129. Ábra

1. Pointer tool (kiválasztó eszköz): az aktuális dokumen-

tumban elhelyezett képelem kiválasztására és a vásznon tör-

ténő mozgatására használhatjuk.

2. Select Behind tool (aláválasztó eszköz): az egymás alatt

elhelyezett képelemeket sorban kiválaszthatjuk, kattintások

sorozatával.

3. Subselection tool (részkiválasztó eszköz): segítségével

vektoros képelemek esetén módosíthatjuk a vonalak, ívek,

és kitöltések érintőit és horgonypontjait. Nagyon könnyen

megváltoztathatjuk segítségével pl. egy ív formáját.

A következő elem négy eszközt tartalmaz: Scale tool, Skew

tool, Distort tool, 9-slice scaling tool (130. Ábra).

130. Ábra

Nézzük meg mind a négy funkcióját és próbáljuk is ki a

Pisai torony képünkön, mivel érdekes hatást érhetünk el.

1. Scale tool (lépték eszköz): az adott képelemet nagyíthat-

juk, kicsinyíthetjük, egy adott középpont körül elforgathat-

juk. (131. Ábra)

131. Ábra

2. Skew tool (nyújtó eszköz): a kiválasztott képen különbö-

ző nyújtásokat végezhetünk, illetve a képet el is forgathatjuk

a középpontja körül. Nyújtás során a képet határoló tégla-

lap paralelogramma alakzatot vesz fel. Nézzük meg milyen

egyszerűen visszaállíthatjuk a Pisai ferdetornyot – vagy

mégis inkább meghagyjuk az eredeti állapotában? (132.

Ábra)

132. Ábra

3. Distort tool (torzító eszköz): a képet határoló pontok

„megfogásával” tetszőleges irányban módosíthatjuk a képe-

lemet, tetszőleges „torzítást” alkothatunk. (133. Ábra)

4. 9-slice scaling tool(lépték eszköz): a Scale tool-hoz hason-

ló, itt 9 szeletre osztja a képet.

133. Ábra

A Select csoportban találhatjuk a Crop tool (nyíró eszköz)

és az Export Area tool (exportálási terület eszköz) elemeket

is. (134. Ábra)

134. Ábra

1. Crop tool (nyíró eszköz): a kiválasztott kép bármely

részét „kinyírhatjuk”, mint egy papír képrészletet. A kép-

részlet kijelölése után az Enter gombbal erősíthetjük meg a

műveletet és így az a képrészlet marad meg amit kijelöltünk.

Ezt a műveletet már használtuk az előző leckében, amikor

az Edit menü elemeivel ismerkedtünk. (135. –136. Ábra)

135. Ábra

136. Ábra

2.Export Area tool (exportálási terület eszköz): hasonlóan

működik mint a nyíró eszköz, viszont a nyírás megerősítése

után az Export ablak jelenik meg. Ezzel lehetőségünk van

képrészletek Exportálására is! (137. Ábra)

137. Ábra

A következő leckében a vektoros eszközök használatával

ismerkedünk meg.

Miután a felkínált eszközökkel mi magunk is elkészítünk

egy-két formát az itt megtanult transzformációs eszközökkel

is módosíthatjuk, alakíthatjuk rajzainkat.

3. Lecke

Vektorgrafikus képkészítés eszközei, rétegek használata

Ismételjük át a Vektorgrafika lényegét: a képet alkotó pon- tok

halmaza között matematikai összefüggések vannak, és ezen

összefüggések jellemzőit tárolják a képben.

Ilyen jellemző lehet a kör középpontjának koordinátái és

sugara, egy szakasz két végpontjának, vagy egy pont koordi-

nátájának megadása.

A vektoros eszközöket az eszközpanel Vector nevű lapja tar-

talmazza.

A panel elmeivel szintén találkoztunk már a 2. Fejezetben.

A vektoros eszközök segítségével különböző rajzelemeket

(vonal, alakzat, ív) hozhatunk létre és szerkeszthetjük azo- kat.

A rajzelemek készítésében a panelen található ikonok segítenek.

Itt is vannak ikonok amelyek további funkciókat is tartal-

maznak (mint pl. a „toll” ikon, az alakzatok rajzolását segí- tő

ikon).

A feladatok eredményes végrehajtásához, használni fogjuk

az előző leckékben tanult ismereteket is.

Ilyen például az alakzatok mozgatása –kivágása (Select

panel), formázása (Properties panel), effektusok kialakítása

(Filters panel).

A formázásnál (Properties panelen) a színbeállítás is meg-

határozható, viszont ha ez nem elég, további finomítást is

megnézhetünk, hogy még tökéletesebb képelemeket tud-

junk létrehozni.

A színbeállítást a Colors panel is segíti, amit a Window /

Color Mixer menüponttal tudunk bekapcsolni. (138. Ábra)

138. Ábra

A Mixer panel néhány eleme az eszközpanel Colors lapja

alatt is megtalálható. Láthatjuk, hogy az egyes színbeállítá-

si funkciók könnyen elérhetők.

A felső ikon segítségével a vonalszínt határozhatjuk meg (a

vonalra utal a ceruza jelkép, a mellette levő kis ablakra kat-

tintva megkapjuk a színpalettát).

A következő színválasztó ikon (itt a színválasztó ablak mel-

let kis „vödört” láthatunk) alkalmazásával a kitöltőszínt

határozhatjuk meg. (139. Ábra)

139. Ábra

Fontos:

1. Minden rajzolt alakzat vektor alakzat, így jellemzői utó-

lag változtathatók!

2. Egy rajzelem egy réteget alkot, amit a Layers panelen lát-

hatunk. A rajzon kijelölt rajzelem a réteg panelen is kijelölt.

A Layers panelen a következőket változtathatjuk:

→ A réteg nevét.

→ A rajzelemek (rétegek) sorrendjét.

→ A réteg láthatóságát.

→ A réteg átlátszóságát (%-ban megadott érték lesz).

→ A rétegek keverési módját (Normal, Multiply, Screen,

Darken, Lighten, Difference, Hue, Saturation, Color,

Luminosity, Invert, Tint, Erase).

Nézzük meg a gyakorlatban is, próbáljuk ki először egy egy-

szerű rajzzal! Legyen egy üres vásznunk, majd rajzoljunk

egy téglalapot (Rectangle tool), majd a Properties panelen

található formázási lehetőségek közül válasszuk ki a szá-

munkra legérdekesebbet. (140. – 141. Ábra)

140. Ábra

141. Ábra

Tekintsük át milyen formázási lehetőségekből választha-

tunk:

1. A „kiöntő” edény mellett található beállítások az alakzat

kitöltésére vonatkoznak:

→ Kitöltés színe, a már megismert színpaletta elemeiből

választhatunk.

→ Kitöltés típusa lehet: none – nincs, solid, stb.

Ø Edge (alakzat széle):Hard, Anti-Alias, Feather (lágy

szél)

→ Lágy szél mérete

→ Texture (minta)

→ Minta átlátszósága

2. A ceruza jelkép mellett az alakzat szegélyére vonatkozó

beállítások valósíthatók meg:

→ A szegély színe.

→ A szegély vastagsága.

→ A szegély típusa (pl. 3D).

→ Edge (lágy szél)

→ Lágy szél mérete

→ Texture (minta)

→ Minta átlátszósága

Figyeljük meg a Layers panelt, a téglalap megrajzolásával

létrehoztuk az első réteget!

Most készítsünk egy másik alakzatot, legyen ez egy ellipszis

(Ellipse tool). Itt is állíthatjuk az alakzat (ellipszis) jellem-

zőit. (142. –143. Ábra)

142. Ábra

143. Ábra

Elkészítettük a második réteget!

A Layers panelen kattintsuk duplán az alakzat nevére és

írjuk át ezt a nevet téglalap, illetve ellipszis névre. Látható

milyen egyszerű a réteg nevének megváltoztatása.(144.

Ábra)

144. Ábra

A következő művelet, a rétegek sorrendjének megváltozta-

tása.

Kattintsuk a réteg nevére és az egér gombot nyomva tartva

mozgathatjuk a réteget a listában. Próbáljuk ki! (145. Ábra)

145. Ábra

A rétegeket be/ki kapcsolhatjuk, a réteg előtt látható „szem”

be/ki kapcsolásával. (146. Ábra)

146. Ábra

A mostani példában csak két rétegünk van, viszont az igé-

nyes grafikai munkákhoz sokkal több réteggel is szükséges

dolgoznunk.

Ezért nagyon fontos megismerni a rétegek keverési módját

is. A lecke elején már felsorolás szintjén érintettük, most meg-

nézzük részletesen és a feladtunkban próbáljuk is ki ezeket

a hatásokat! Néhány rétegkeverési mód: (147. Ábra)

147. Ábra

Normal: ez az alapértelmezett keverési mód. Az adott réteg-

keverés nélkül kerül többi fölé.

Multiply: az adott réteg és az alatta levő réteg képpontjainak

színértéke összeadódik.

Screen: a réteg inverze és az alatta levő kép színértéke kerül

keverésre.

Darken: a réteg és az alatta levő kép színértékei közül a söté-

tebb képpont kerül kiválasztásra.

Lighten: a réteg és az alatta levő kép színértékei közül a vilá-

gosabb képpont kerül kiválasztásra.

Difference: az adott réteg és az alatta levő tartalom közötti

színértékkülönbség valósul meg.

Hue: a végső eredményt az adott réteg színárnyalata és az

alatta levő képpontok színtelítettsége adja.

Saturation: a végső eredményt az adott réteg színtelítettsége

és az alatta levő képpontok színárnyalata adja.

Color: a szürke árnyalatos és a színes részek erősebbé vál-

nak.

Ahogyan az állományainkat mappákba szokás rendeznünk,

ugyanígy a rétegek is mappákba rendezhetők. Új rétegmap-

pát felvenni a Layers panelen található New / Duplicate

Layer gomb segítségével tehetjük meg. (148. Ábra)

148. Ábra

A rétegek kezelésével nemcsak a vektoros rajzok létrehozá-

sánál találkozunk, hanem a Bitmap (raszteres) képek létre-

hozásánál is, mert ez a típusú kép is rajzelem.

Minden rétegművelet, amit ebben a leckében gyakorolunk a

pixelgrafikus képkészítésre is igaz!

Nézzük tovább a rajzolási lehetőségeket.

Kipróbáltuk a téglalap és az ellipszis készítését, most néz-

zük meg a sokszög eszköz (Polygon tool) használatát.

Ezt az eszközt szabályos sokszögek és szabályos csillag alak-

zatok készítéséhez használhatjuk.

Amikor az eszköz panelen kiválasztjuk a sokszög eszközt, a

Properties panel az eddigi beállítások mellet kiegészül

három beállítási lehetőséggel. (149. Ábra)

149. Ábra

Meghatározhatjuk a sokszög típusát (Shape) –ez lehet

Polygon (sokszög) vagy Star (csillag), az oldalak illetve a

csúcsok számát (Sides), csillagok esetén pedig a csillag csú-

csainak a szögét (Angle).

Készítsünk legalább három különböző sokszöget a Polygon

tool segítségével, majd próbáljuk ki a beállítási lehetősége-

ket. (150. Ábra)

150. Ábra

Következzen a vektoros rajzeszközökből a vonal eszköz

(Line tool).

A vonal eszköz a vektoros rajzelemek alapja.

Minden egyes vonal külön réteget jelent.

A vonal eszköz kiválasztása után rajzolhatjuk a vonalakat.

Ha vonal rajzolása közben a Shift gombot nyomva tartjuk

akkor függőleges, vízszintes vagy 45 fokos egyenest tudunk

rajzolni. (151. Ábra)

151. Ábra

Ha a meglévő vonalat újra ki szeretnénk jelölni akkor vagy

a vonalra kattintunk, vagy a Layers panelen kiválasztjuk a

megfelelő réteget.

Az elkészített rajzelem tulajdonságai így utólag is változtat-

hatók lesznek.

152. Ábra

A Toll eszköz (Pen tool) segítségével tetszőleges görbék és

ívek készíthetők. (152. Ábra)

A görbéket pontról pontra rajzolhatjuk meg.

A Toll eszköz mellett találunk még két eszközt. Az egyik a

vektoros útvonal eszköz (Vector Path tool), a másik az útvo-

nal-újrarajzoló eszköz (Redraw Path tool). (153. Ábra)

153. Ábra

A Pen tool alkalmazásakor minden pontban a görbületvek-

torok segítségével megadhatjuk a vonalszakasz görbületét.

(154. Ábra)

154. Ábra

A Vector Path tool eszközzel úgy dolgozhatunk mint egy

ecsettel (akár folytathatjuk az előző görbék vonalát, ezzel

viszont természetes egy új réteget kapunk). (155. Ábra)

155. Ábra

Most egy olyan eszköz következik amivel korábban már fog-

lalkoztunk.

Ez a szöveg eszköz (Text tool).

Ismétlésképpen készítsük el újra a logonkat.

A stílusok közé felvettük a saját stílusunkat, így tehát a for-

mázással már nem kell „bajlódnunk”. (156. Ábra)

156. Ábra

Következzen néhány érdekes szövegalakítás, amit lehető

tesz az Adobe Fireworks CS4.

A szöveget bármilyen elkészített vektoros útvonalra „irá-

nyíthatjuk”.

Ez az útvonal lehet tetszőleges görbe vagy Toll eszközzel

megrajzolt útvonal.

A szöveg már készen van, most készítsünk egy útvonalat is.

Ha ezzel készen vagyunk a Layers panelen jelöljük ki mind-

két képelemet (nyomjuk le a Shift billentyűt, majd az egér-

rel válasszuk ki a kijelölendő rétegeket). (157. Ábra)

157. Ábra

A görbére illesztést a Text / Attach to Path utasítással való-

síthatjuk meg. (158. Ábra)

158. Ábra

Az illesztés feloldását a Text / Detach to Path utasítás végzi

Az illesztés után számos művelettel igazíthatjuk a szöveg

elhelyezkedését:

1.Útvonalra illesztés módja (Text / Orientation)

→ Rotate Around Path – forgás a görbe körül

→ Vertical – függőleges (159. ábra)

159. Ábra

→ Skew Vertical – függőleges nyújtás

→ Skew Horizontal – vízszintes nyújtás

2. Szöveg igazítások módja (Text / Align…)

→ Left – bal

→ Center Horizontally – közép

→ Right – jobb

→ Justified – sorkizárt

→ Top – fent

→ Centered Vertically – középen

→ Bottom – lent

→ Justifyed Vertically – sorkizárt

Az illesztés után a szöveg tartalma még módosítható a Text

/ Editor menüpont segítségével.

A következő vektoros rajzelem az alakító eszköz (Freeform

tool). (160. Ábra)

160. Ábra

Ezzel az eszközzel vektoros vonalakon végezhetünk utóla-

gos görbítéseket, alakításokat. Rajzoljunk egy vonalat, majd

a Freeform tool segítségével végezzünk rajta görbítést. (161.

Ábra)

161. Ábra

Kapcsoljuk ki ezt a réteget, majd rajzoljunk három új egye-

nest és legyenek különböző színűek!

Próbáljuk ki a Reshape Area tool –t (területalakító esz-

közt): az egér gomb nyomva tartásakor a kurzor dupla piros

kör alakot mutat, ezt neki kell tolni a görbítendő résznek.

A görbítések után nézzünk egy újabb eszközt: Kés eszköz

(Knife tool).

Mielőtt kipróbálnánk érdemes a vásznon levő rétegeket

kikapcsolni vagy törölni.

Hozzuk létre egy tetszőleges sokszöget vagy ellipszist, majd

válasszuk a Kés eszközt. Használatával a kijelölt alakzatot

elvághatjuk és a keletkezett alakzatok külön képelemként

lesznek szerkeszthetők. (162. Ábra)

162. Ábra

Az eddig megismert eszközökkel számos képelemet létre

tudtunk hozni.

Célunk viszont igényes grafikák készítése, ezért ne eléged-

jünk meg egyszerű alakzatok és vonalak rajzolásával!

A következő leckében a transzformációkkal foglalkozunk.

4. Lecke

Alap transzformációk, objektumok csoportosítása és összevonása

Miután elsajátítottuk a vektor eszköztár elemeinek kezelé-

sét, nézzük meg milyen transzformációkat végezhetünk az

elkészített objektumokkal.

Transzformáció: az adott képelem helyzetének változtatása,

elforgatása vagy valamilyen szempont szerinti torzítása.

A nyújtás és torzítás eszközeit a kiválasztó funkciók (Select

panel) használatánál már megvizsgáltuk.

Az ott kipróbált hatások alkalmazhatók a vektoros képele-

mekre is.

Nézzük meg részletesebben is a transzformációkat segítő

eszközöket.

Legyen legalább két, vektoros objektumunk a vásznon.

Nyissuk le a Modify / Transform menüt, majd próbáljuk ki

a menüpontokat! (163. Ábra)

163. Ábra

A Transform menüben számos lehetőséget találunk, néhá-

nyat próbáljunk is ki!

1. Skew Transform: arányos nyújtás, zsugorítás végezhető

vele.

2. Distort Transform: „torzító” nyújtást vagy zsugorítást

érhetünk el.

3. Forgatási lehetőségek: Rotate 180, Rotate 90 CW (óra

járásával megegyező), Rotate 90 CCW (óra járásával

ellentétes).

4. Tükrözés: Flip Horizontal – vízszintes tükrözés, Flip

Vertical – függőleges tükrözés.

Az egyes transzformációk beállításait a Modify / Transform

Numeric Transform által előhívott párbeszédablakban

tehetjük meg.

A Scale opciónál százalékos értékben állíthatjuk be a víz-

szintes és függőleges nagyítást / kicsinyítést.

A Resize ablakban a nagyítást vagy kicsinyítést képpontok-

ban kifejezve állíthatjuk.

Forgatási transzformáció esetén a forgatási a szöget a

Rotate párbeszédablakban határozhatjuk meg.

A transzformációkhoz tartoznak a különböző illesztések.

Az illesztés azt jelenti, hogy a különböző képelemeket iga-

zíthatjuk a vászonhoz, vagy a kijelölt képelemeket igazíthat-

juk egymáshoz is.

Az illesztési lehetőségeket a Modify / Align menüpontban

találjuk. (164. Ábra)

164. Ábra

Objektumok csoportosítása és összevonása

Számos műveletet megtanultunk és gyakoroltunk, így egyre

többször elő fog fordulni, hogy sok képelemmel dolgozunk.

(165. Ábra)

165. Ábra

Munkánk megkönnyítése érdekében érdemes kihasználni a

képelemek csoportosításának lehetőségét.

Jelöljük ki az egy csoportba kerülő képelemeket (kijelölés:

Shift és a Layers panelen a rétegre kattintunk). Ezután a

Modify / Croup menüpont segítségével elvégezhetjük a cso-

portosítást. (166. ábra)

A csoportnak tetszőleges nevet adhatunk.

A csoport elemei lehetnek képelemek és csoportok is. A

csoportban lévő objektumok egy képelemként viselkednek,

ami azt jelenti hogy például együtt formázhatjuk, mozgatjuk

őket.

166. Ábra

A kiválasztott csoport felbontását a Modify / Ungroup uta-

sítással tehetjük meg.

Ezután a csoport elemei újra önálló képelemek lesznek!

(167. Ábra)

167. Ábra

A csoportosítás mellet a képelemekkel különböző összevo-

násokat is végezhetünk: Modify / Combine Paths / Join. Az

összevont képelemek is szétbonthatók: Modify / Combine

Paths / Split.

Vektoros képelemeinken logikai összevonásokat is végezhe-

tünk, ezek a műveletek a különböző kombinációk.

Ez azt jelenti, hogy két vagy több alakzatot vonunk össze

egy alakzattá.

A csoportosítással és az összevonással szemben a logikai

összevonás után kialakult képelem nem bontható szét az

összetevőire!

A kombinációs lehetőségeket a Modify / Combine Path

menüpontban találhatjuk. (168. Ábra)

168. Ábra

Természetesen a logikai összevonás esetén is először ki kell

jelölnünk az összevonásra kerülő képelemeket és ezután

próbáljuk ki a kombinációs lehetőségeket!

5. Lecke

Pixelgrafikus képkészítés és módosítás eszközei

(Bitmap mód) Az Eszközpanel elemeinek másik nagy csoportja a Bitmap

(raszteres eszközök).

A panel elemeivel már szintén találkoztunk

Ebben a leckében részletesen megnézzük az

egyes elemek funkcióit, alkalmazási lehető-

ségeiket. A Bitmap panel tíz ikont tartalmaz,

de itt is vannak olyan ikonok amelyek továb-

bi funkciókat is tartalmaznak. (169. Ábra)

Mielőtt elkezdenénk a munkát az egyes eszkö-

zökkel, nézzük meg milyen sajátosságai van-

nak a Bitmap módban történő rajzolásnak.

A raszteres eszközökkel pixel alapú képele-

meket hozhatunk létre és módosíthatunk.

A létrejött görbéket nem lehet utólag módo-

sítani.

169. Ábra

Ha Bitmap módban használjuk valamelyik

rajzoló eszközt akkor nem vektor objektum jön létre.

Ez azt jelenti, hogy nem lesz új réteg, a rajz a vásznon levő

alakzatot átfesti, az új rajz alatt levő „információk” elvesz-

nek!

Érdemes minden rajz előtt új réteget létrehozni, a Layers

panel New Bitmap Image ikon segítségével. (170. Ábra)

170. Ábra

Az új rétegen tetszőleges rajzot készíthetünk, festést alkal-

mazhatunk, mivel így az eredeti képet nem módosítjuk.

Fontos viszont, hogy ezzel az eljárással fotomontázsokat

tudunk készíteni!

Most nézzük meg az egyes eszközök rövid jellemzését, ame-

lyekből néhányat ki is próbálunk:

1. Kijelölés (maszk) eszközök:

→ Marquee tool (téglalap alakú maszk), Oval Marquee

tool (ellipszis alakú maszk) (171. Ábra)

→ Lasso tool (szabálytalan alakú maszk), Polygo Lasso

tool (sokszög alakú maszk) (172. Ábra)

→ Magic Wand tool (közel azonos színű egybefüggő terü-

let kijelölésére szolgál, maszkvarázslónak is nevezik)

171. Ábra

172. Ábra

A kijelölés eszközök használata során a képelem tetszőleges

részét, tetszőleges formában jelölhetjük ki.

A Lasso tool segítségével például tetszőleges alakú maszkot

tudunk rajzolni, a Magic Wand tool eszközzel elég csak

rákattintani egy adott területre és a közel azonos színű részt

kijelöli.

A kijelölt képrészletet külön formázhatjuk, kivághatjuk,

másolhatjuk.

A kijelölés vagy más néven maszk eszközökkel a kép bizo-

nyos részét kitakarjuk.

A maszkolt réteg egy újabb képelemmel egészül ki, amely

meghatározza a látható és nem látható részeket. Ez utóbbi

képelem a maszk.

Most már próbáljuk ki a maszkokat és néhány beállítását!

Korábban már megtanultuk, hogy az Eszköz panelről kivá-

lasztott és használni kívánt eszközt, a rá vonatkozó beállítá-

sokat a Properties panelen tehetjük meg.

Nézzük például a Marquee tool eszköz beállítási lehetősé-

geit (téglalap vagy négyzet alakú maszk):

1. Style (stílus): (173. Ábra)

→ Normál: húzással meghatározhatunk egy tetszőleges

méretű téglalap maszkot.

→ Fixed Ratio: a mezőkben megadott arányú négyszög

maszkot készíthetünk.

→ Fixed Size: a megadott pixel méretű maszkot tudunk

készíteni.

2. Edge (élfinomítás): Hard, Anti Alias, Feather

173. Ábra

Hasonló beállításokat láthatunk a többi kijelölő eszköznél

is.

A maszkvarázsló (Magic Wand tool) kiválasztása után a

beállításnál érdemes megnézni a Tolerance értéket, mert

minél nagyobb ez az érték annál több pontot vesz hasonló-

nak.

Néhány művelet:

1. maszkolt terület törlése: Delete gomb

2. maszkolt terület másolása: Edit / Copy (vágólapra

kerül), majd Edit / Paste a kijelölt rétegere beilleszt-

hetjük

Készítsünk egy egyszerű fotomontázst!

1. Nyissuk meg az Oktató Cd / Feladatok /Feladatok /

Grafika / Boy nevű állományt.

2. Ezután nyissuk meg az Oktató Cd / Feladatok

/Feladatok / Grafika / Pets nevű állományt.

3. Készítsünk egy maszkot a kutyára (Lasso tool segítségé-

vel).

4. Másoljuk ki a vágólapra (Edit / Copy).

5. Váltsunk át a Boy képre (Window ablak segítségével).

6. Hozzunk létre egy új Bitmap réteget (New Bitmap

Image).

7. Erre az új rétegre illesszük be a kutya képrészletét (Edit

/ Paste).

8. Lépjünk ki Bitmap módból (Exit Bitmap Mode), most

már a kutya képrészletet tetszőlegesre helyre tudjuk

mozgatni. (174. Ábra)

174. Ábra

A kijelölő eszközök után ismerjük meg a rajzoló eszközö-

ket: a Brush tool – Ecset eszköz, a leggyakoribb szabadkézi

rajzoló eszközünk, a Pencil tool – Ceruza eszköz az ecset-

hez hasonlóan használhatjuk.

Előfordul, hogy a raszteres rajzokon is szükséges a radír

használata, ez itt az Eraser tool Radír eszköz.

A következő eszközcsoport segítségével képkorrekciót és

hibajavításokat végezhetünk. (175. Ábra)

175. Ábra

A Blur tool -t a raszteres képek tetszőleges részeinek homá-

lyosítására használhatjuk.

Ennek az eszköznek az ellentettje a Sharpen tool, amely

segítségével a képelemek részleteit élesíteni lehet.

További képkorrekciót segít a Dodge tool, tetszőleges

részek világosíthatók, kiemelhetők. Ennek az eszköznek is

van párja, a Burn tool, amellyel a képelemek részleteinek

sötétítésére van lehetőségünk.

Ennek a csoportnak a legérdekesebben eleme a Smudge

tool, maszatoló eszköz, használatának eredményére már a

neve is utal.

Ne féljünk kipróbálni ezeket az eszközöket sem!

Érdekes eredményt érhetünk el a Rubber Stamp tool (pe-

csét eszköz) használata során.

Egy minta alapján színes pecsétként működik. Képelemünk

bármely részéről mintát vehetünk vele, majd tetszőleges

helyre ”pecsételhetünk”.

A festékes vödör eszközt (Paint Bucket tool) is már hasz-

náltuk, összefüggő területeket tudunk vele színezni.

A Properties panelen a szín mellett kiválaszthatjuk a kitöl-

tő színt, a mintázatot, a kitöltés érzékenységét.

Most már tényleg elmondhatjuk, hogy az Adobe Fireworks

CS4 program használatával igényes grafikai munkákat

készíthetünk és számtalan sok lehetőséget kínál a képek

szerkesztésére.

5. Fejezet

1. Lecke

Képkockák animálása

Animáción mozgóképet értünk, ami nem más mint állóké-

pek sorozatának egymás után történő lejátszása.

Az animáció készítés elsődleges helye a Window/States

(képkockák) panel. (176. Ábra)

176. Ábra

Az animáció alapeleme a képkocka. Amikor lejátszunk egy

animációt, minden képkocka egy bizonyos ideig látható,

majd a következő képkockával folytatódik.

Animációt készíthetünk frame-by-frame (képkockáról-kép-

kockára) módon, ami azt jelenti hogy az animáció egyes

lépéseit egyenként kell megrajzolnunk.

A képkockákat a States (képkockák) panel tartalmazza.

Készítsünk egy egyszerű frame-by-frame animációt, ami

négy képkockából fog állni!

A rajzolás előtt kapcsoljuk be a vonalzót (View / Rulers),

mert ez segít a rajzolás során a képkockák helyének megha-

tározásában.

1. Rajzoljunk egy tetszőleges színű téglalapot. (177. Ábra)

2. Vegyünk fel egy új képkockát, a States panel New /

Duplicate State gombra kattintva. (178. Ábra)

3. Most rajzoljuk meg a második téglalapot, ne túl messze

az elsőtől. Most már két képkockánk van.

4. Most újra vegyünk fel egy új képkockát, majd rajzoljunk

ismét egy téglalapot.

5. Vegyük fel a negyedik képkockát, és újra rajzoljunk egy

téglalapot.

6. Nézzük meg, hogyan lesz a négy képkockából animáció.

Az ablak alján található lejátszás vezérlő gombok segít-

ségével (Play / Stop) indíthatjuk el az animációt. (179.

Ábra)

177. Ábra

178. Ábra

179. Ábra

Amikor új képkockát vettünk fel, az mindig az aktuális kép-

kocka után kerül beszúrásra.

A képkockák sorrendjét azonban meg is változtathatjuk.

A kijelölt képkockát a jobb egérgomb nyomva tartásával

húzhatjuk a megfelelő helyre. (Korábban a rétegek sorrend-

jét is ugyanígy tudtuk megváltoztatni.)

A képkockákat törölhetjük is.

Jelöljük ki a törlendő képkockát, majd a States panelen a

Delete State ikon segítségével törölhetjük.

A képkockáknak nevet is adhatunk (alapesetben State1,

State2 …).

Kattintsunk duplán a State1 névre, majd a megjelenő ablak-

ba beírhatjuk az új nevet. (Így adhattunk nevet rétegeknek

is.) (180. Ábra)

180. Ábra

A képkocka neve mellett látható időintervallum értéke is

változtatható.

Ezzel határozhatjuk meg, hogy az adott képkocka mennyi

ideig látható.

Kattintsunk duplán a számértékre, majd a megjelenő ablak-

ban meghatározhatjuk az időintervallum értékét (század-

másodpercben).(181. Ábra)

181. Ábra

Összetettebb frame-by-frame animáció esetén, nagy segítség

lehet ha az egymást követő képkockákat egyszerre is láthatjuk.

Ezt a funkciót a States panel Onion Skining (hagymahéj)

ikon menüjében állíthatjuk. (182. Ábra)

182. Ábra

A Distribute to States menüpont kiválasztásával tehetjük

láthatóvá az összes animációs fázist. (183. Ábra)

183. Ábra

Az Onion Skin ikon mellett találhatjuk a Gif Animation

Looping ikont, melynek segítségével a GIF formátumba

exportált animációk ismétlődésének számát tudjuk megha-

tározni.

A Forever (örökké) opció kiválasztásával folyamatosan

ismétlődő animációt kapunk.

Természetesen a frame-by-frame módszerrel elég fárasztó

lenne egy komoly animáció elkészítése.

Az Adobe Fireworks CS4 és az Adobe Flash CS4 (amit

később fogunk tanulni) is tartalmaz egy professzionálisabb

animáció készítő mód-szert.

Ez a másik animációs technikai az átmenetes animáció.

Ebben az esetben ki kell választanunk az animálni kívánt

első képkockát, majd a Modify / Animation / Animate

Selection menüpont Animate párbeszédablakban beállít-

hatjuk az animáció paramétereit.

Készítsünk egy átmenetes animációt is!

1. Először is töltsük be a már korábban elkészített logonkat.

2. Legyen kijelölve ez a képkocka (Layers panelen a rétegre

kattintsunk) (184. ábra)

3. Nyissuk meg a Modify / Animation / Animate Selection

menüpont Animate párbeszédablakot. Itt állíthatjuk be

az animáció paramétereit. (185. Ábra)

→ States (képkockák): a képkockák száma határozható

meg. Ha például egy képkockánk van és itt beállítjuk az

ötöt, akkor a Fireworks létrehozza a hiányzó új kép-

kockákat.

→ Move (mozgás): az animáció során az itt megadott

mértékben mozdul el a grafikánk. A mozgás távolságát

képpontokban adhatjuk meg.

→ Direction (irány): a mozgás irányát adhatjuk meg

fokokban.

→ Scale to (arányosan méretezve): alapérték 100, ennél

nagyobb érték esetén az animáció során nagyítja a

képelemet. (Kisebb érték esetén kicsinyíti a képelemet)

→ Opacity (átlátszóság): az átlátszóság kezdő és végérté-

két adhatjuk meg. Alap beállítás szerint 100 to 100. Az

animációban szeretnénk előtűnést akkor az értékeket

állítsuk 0 to 100 –ra. A kép eltűnéséhez fordított érté-

ket kell megadnunk: 100 to 0.

→ Rotate (forgás): a kép forgásának mértékét és forgási

irányát állíthatjuk be. A CW az óra járásával megegye-

ző forgás, a CCW az órajárásával ellentétes forgás.

4. Végezzük el a beállításokat, majd az OK gombbal erősít-

sük meg. (186. Ábra)

5. Az elkészített animációt próbáljuk ki. A Play / Stop

gombbal indíthatjuk az animációt.

184. Ábra

185. Ábra

186. Ábra

Az animálási értékeket módosíthatjuk is, a Modify /

Animation / Settings menüponttal előhívott párbeszédab-

lakban.

Ha ki van jelölve az animált képkocka, akkor a módosítást

a már sokszor használt Properties panelen is megtehetjük.

Az automatikus animációt törölhetjük is.

Jelöljük ki az animált képkockát, majd válasszuk a Modify /

Animation / Remove Animation menüpontot.

Célunk olyan animációk létrehozása, amelyeket érdemes a

Web-oldalunkra is feltenni.

Ha ezzel a munkánkkal elégedettek vagyunk akkor expor-

táljuk ezt az állományt.

Használhatjuk a File / Export Wizard (Exportvarázsló)

menüpontot.

1. Az első ablakban válasszuk a Select an export format

pontot, majd a Continue gombbal lépjük tovább.

2. A következő ablakban választhatjuk ki, hogy milyen tipu-

súra szeretnénk exportálni az animációt. Válasszuk az

Animated Gif típust. Itt is Continue gombbal lépjük

tovább. (187. Ábra)

3. A megjelenő Image Preview ablakban következik az

Exportálás utolsó lépése. (188. Ábra) Az Export gomb-

ra kattintva elfogadjuk a beállításokat. Következik a

mentéshez hasonló művelet ahol meg kell adnunk az

Exportálás helyét, a Fájl nevét és a Mentés gombbal

lezárjuk.

187. Ábra

188. Ábra

2. Lecke

Nyomógombok készítése Mindazt amit eddig tanultunk, nemcsak képek szerkeszté-

séhez hanem Web-oldalunk készítéséhez is fel tudjuk hasz-

nálni.

A Web-oldalaknak van viszont még egy fontos eleme a

különleges képek és animációk mellett.

Amikor Web-oldalakat nézegetünk, gyakran találkozhatunk

olyan elemekkel is, amelyek meggyorsíthatják az adott Web-

oldalon való mozgást vagy leegyszerűsítenek műveleteket.

1. Kezdőlapra léphetünk egy gomb megnyomásával.

2. E-mail írás ablaka érhető el a megfelelő nyomógomb

hatására.

3. Különböző linkekre ugorhatunk használatukkal.

Ez csak néhány példa, természetesen nagyon sok egyéb

lehetőség van még.

Ez az elem a Button – nyomógomb.

A nyomógomb tulajdonképpen egy szimbólum.

A Fireworks-ben három fajta szimbólummal találkozha-

tunk.

1. Animáció készítéskor a háttérben automatikusan létre-

jön egy speciális képelem, ez is egy szimbólum.

2. Lehetnek szimbólumok állóképek (olyan grafikák), ame-

lyeket többször is felhasználunk a dokumentum összeál-

lításánál.

3. A nyomógomb olyan szimbólum, amely internetes fel-

használásra szánt képekhez alkalmazunk.

Szimbólumok készítésekor a Window/Document Library

és a Common Library (könyvtár) panel tartalmazza a leg-

fontosabb információkat és a szimbólumok készítéséhez

szükséges műveletek ikonjait. (189. Ábra)

189. Ábra

Hozzunk létre egy új Button szimbólumot!

1. A Document Library panelen találhatjuk a New symbol

ikont, ezt nyomjuk meg. (190. ábra)

190. ábra

2. A megjelenő párbeszédablakban választhatunk a

Graphic (grafikai), Animation (animáció), Button (nyo-

mógomb típusok között. Mi válasszuk a Button típust és

kattintsunk az OK gombra. (191. ábra)

191. Ábra

3. Egy szerkesztő ablakot kapunk. Az ablakban található

„füleken” a gomb különböző állapotait állíthatjuk be (ezt

akkor használjuk, ha mi rajzoljuk meg a nyomógombot):

(192. Ábra)

→ Up:az alapértelmezett érték, ilyen a nyomógomb

„pihenő helyzetben”

→ Over: ilyen legyen a nyomógomb, ha a számítógép-

használó a gomb fölé viszi az egeret

→ Down: ilyen legyen a nyomógomb, amikor a felhasz-

náló rákattint.

→ Over While Down: többállapotú kapcsológomb esetén

a lenyomott gomb fölé érve legyen ilyen a nyomógomb.

→ Active Area: a nyomógomb érzékenységi területe hatá-

rozható meg.

Az Import Button segítségével az Up (alap) állapot szer-

kesztésekor gyári szimbólumok közül választhatunk. (192.

Ábra)

192. Ábra

4. Válasszunk ki egy tetszőleges nyomógombot, majd az

Import gombbal erősítsük meg a műveletet.

5. A kiválasztott gomb feliratát tetszőleges módosíthatjuk,

ha a gombon levő feliratra kattintunk.

6. Készítsünk legalább három nyomógombot, ezzel a mód-

szerrel. Nevezzük is át a gombokat, legyen: Kezdőlap, E-

mail, Link. (193. Ábra)

193. Ábra

7. A nyomógombhoz tartozó hivatkozást a Properties

panelen tudjuk beállítani. Válasszuk ki a listából a Link

feliratú nyomógombunkat. A Layers / Web layer panelen

jelöljük ki a Slice réteget. Ezután a Properties panelen

meg tudjuk adni a hivatkozásokat.

→ Link (hivatkozás): tetszőleges internetes hivatkozást

írhatunk be.

→ Alt (alternatív): a megadott szöveg lesz a nyomógomb

címkéje.

→ Target (cél): megadható az oldal megjelenésének

helye, a _blank opció egy új, a _self pedig az aktív bön-

gésző ablakra mutat. (194. -195. Ábra)

194. Ábra

195. Ábra

8. Amikor minden beállítással készen vagyunk, Exportáljuk

ezt az állományt HTML fájlba, legyen a neve: Gombok.

(196. Ábra)

196. Ábra

9. Amikor majd a Web lapunkat készítjük, felhasználhatjuk

ezt az állományt.

Az animáció és nyomógomb készítésével az Adobe csomag

Flash program környezetében foglalkozunk részletesen.

Összességében azt mondhatjuk, hogy az Adobe Fireworks

CS4 kiváló képszerkesztő program. Gyorsan, hatékonyan

módosíthatunk egy kép vagy grafikai elemen bármit, anél-

kül, hogy panelek sokaságát kellene megnyitni vagy átbön-

gészni.

Olyan funkciókat, effektusokat tartalmaz ez a program,

amelyek segítségével hatékony képretusálást valósíthatunk

meg gyakorlatilag bármilyen képformátumon.

Az utolsó fejezetben érintettük az animációk, valamint a

különböző gombobjektumok készítését és a hozzájuk ren-

delt URL-k támogatását, bár nem ez az elsődleges feladata

a programnak.

Az Adobe Fireworks CS4 remek eszköz arra, hogy rövid

gyakorlás után csodálatos grafikai alkotásokat hozzunk

létre tetszőleges képelemekkel, és ebben már csak a fantázi-

ánk szabhat határt!

Ezzel könyvünk végére értünk.

Mindenkinek eredményes munkát kívánunk!