Online Webdesigner Tanfolyam www.webdesigntanfolyam.

com

Fireworks 2.
Webdesign ksztse Fireworks programmal
Nyisd meg a 960gs Fireworks template-k kzl a 24 col nevt, ami 24 egyforma szeletkre bontja fel a 960 px szles terletet - plusz a svok kztti hely.

Egy kthasbos oldalt fogunk kszteni - ebbl mris tudhatod, hogy mindkt hasbb 12-12

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

cskot foglal majd magban. De eltt jn egy teljes szlessgben megjelen Carousel lapoz, illetve egy fejlc, s egy lblc. Kezdjnk akkor neki! A 24 Col Grid lezrva cscsl a Layers ablakban - minden elemet kln rtegre, illetve az sszetartoz rtegeket csoportba rendezzk. Gyorsan ksztsnk egy drtvzat a munknk eltt. A Rectangle Toolal egy fels mensort, egy helyet a lapoznak, a kt hasbot, s a lblc helyt rajzoltam meg.

Ez mr j kiindulsi alap a munkhoz, mert mr nem res az alapod, kevsb frusztrl, mg

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

semmi sincs benne, de mris mindennek helye van. A Layer 1 mappt t is nevezem wireframe-re, s az egszet megduplzom - az lesz a design. Kidolgozottabb drtvz esetn ez azrt j, mert ltod mi volt a kiindulsi alap, akkor is, ha mr a designban dolgozol. A wireframe rteget lelakatolom, s a design mappban dolgozom tovbb. Ha nem tallod a Layer ablakot, a Window fln keresd.

Nzzk, ht sorban:
Fels men A megrajzolt dobozok sznezse a Properties als panelen a legegyszerbb - a Festkesvdr a bels szn, a ceruza a krvonal sznt, mrett s tpust hatrozza meg. n most fehrre lltom a kitltst. Hogy egy lognak is legyen hely, a magassg olyan 90 px krl megfelel, tegyl oda valamit ami jelzi, hogy oda fog kerlni az oldal logja. Fent 4 menpontunk lesz - KEZDLAP, SZOLGLTATSOK, RAK, KAPCSOLAT rd fel ket a fels men jobb oldalra. Az Align panel segtsgvel tudod ket egymshoz

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

kpest - ehhez a Shift gomb lenyomsa kzben jelld ki mindet - majd hasznld az Align paletta Space jobb oldali ikonjt, gy a menpontok egyenl tvolsgra lesznek egymstl. A tbb Align ikonnal pedig tovbb tudod ket igaztani.

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

Egy tipp: a krvonal lekerektett elemeknl nem tl szpen rajzoldik ki, azrt az alakzatok krvonalt mskpp is meglehet adni - a Filters/Photoshop Live Effect boxban ugyangy, mint a Photoshopban. Ez egy lgyabb krvonalat eredmnyez, ami nem csak szebb, de egy esetleges .psd kimenet esetn is megmarad, mg a Fireworks sajt krvonalt a Photoshop nem ltja - ne krdezd mirt.

Carousel lapoz Van egy 960x350 szles helynk, amit kiemelt tartalom megjelentsre, lapozsra tudunk hasznlni - ltvnyos, s hatkony. A lapozba ilyen nagy kpek kellenek, valamint a lapozshoz valamilyen eszkz megtervezsre is szksg van. A lapozban elhelyezett tartalomra cmsort s igny esetn pr soros lerst is elszoktak helyezni. Ezt az elemet kln is megszerkeszheted - nyiss egy j file-t 960x350 px mretben, s keress ide egy megfelel kpet.

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

A lapozkban lv fotknak, grafikknak minden esetben kivl minsgnek, a szemnek kellemes, vagy ppen figyelemfelkelt kpnek kell lennie. Ez mutathat a legfrissebb, vagy kiemelt cikkekre, promotlni kvnt hrekre, termkekre - a f funkcija a gyors reakci kivltsa, azaz a kattints. A lapozkban ltalban 3-5 elem vltakozik - vagy automatikusan, vagy felhasznli beavatkozsra - lapozs, vagy mindkettre. Ksztsnk egy lapozsi lehetsget a kpnkre. Egy ltalnosan alkalmazott megolds a pttyzs - azaz annyi pttyt helyezel el a kpen, ahny kiemelt tartalmad van, s a pttyk kiemelsvel jelzed a tartalom vltozst is, azaz hogy ppen hol tart a lapozs. A kr eszkzzel kszts a kpen 5 egyforma pttyt, azaz egyet, s Ctrl+C, Ctrl+V vel tbbszrzd ket, s ahogy a menket igaztsd egymshoz ket. Az aktv pttyt egy bels dupla pttyel, s sttebbel jelzem - de hasznlhatsz ms jellst, csak egyrtelm legyen!

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

A lapozs tartalmazhat mg szmokat (1-5) vagy egyb jellseket is. A felhasznl ltali lapozs ltalban nyilakkal trtnik. A nyilakat elhelyezheted a pttyk mellett is, de a kp szln is, n most oda teszem. Ehhez a kt oldaln egy-egy boxot helyezek el a Rectangle Tool, azaz a ngyzet rajzol eszkzzel. Ebbe a vektoros rajzeszkzzel a Pen tool-al egy nyilformt rajzolok - majd tkrzm, s tviszem a msik oldalra. Tkrzs: jobb klikk / Transform / Flip horizontal

Mg valami felirat hinyzik rla - a feliratok elhelyezsnl arra gyelj, hogy az alakok arcba ne nagyon vgjon bele, ne takarja ki ket. Ha lers van van a kpen, akkor rdemes egy akcigombot is kitenni, ami a szveg tovbbolvassra hvja fel a figyelmet.

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

Most ezt az egszet jelld ki - knny lesz, csak hzd krl, hogy megjelenjen minden elemen a kis kk kijell keret. Ha nem megy gy, akkor egyesvel is megteheted, ha kzben nyomod a Shiftet. Amikor mindent kijelltl jobb klikk - Group-ra kattintva csoportot hozhatsz ltre, amit knnyebb mozgatni, mint sok apr fjlt. Mozgatni az eredeti designodba kell, a lapoz helyre - Ctrl+C, Ctrl+V

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

2 tartalom box Az hogy milyen tartalmat helyeznk el ezekben a boxokban, az a projekt fggvnye. Most az egyik szveges ajnl lesz csak, a msik kpes. Mindkt boxnak adok egy vkony szrke 1px-es keretet, hogy kiemelkedjenek a nagy fehrsgbl. Ha zavarnak a segdvonalak - tmenetileg brmikor ki s bekapcsolhatak View / Guides / Show Guides A krvonalat a mr emltett Filters/ Photoshop Live Effects panelen adtam meg - Stroke A position rtk Inside, vagyis az 1 px v a dobozon bell van, s nem ad hozz egy plusz pixelt.

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

Ezt a mveletet mindkettnl vgrehajtom, gy van kt elklnlt dobozom. A dobozokba tartalom kerl, amiknek van egy cmsora, hogy mi is ez a tartalom. A cmsort, s a tartalmi rszt egy ugyanolyan 1 px szrke vonallal vlasztom el, mint amilyen a keret. #cccccc; A cmsort s a szveget Lorem ipsumbl oldottam most meg - a weboldalakon hasznlt kpek esetn trekedj arra, hogy a kicsinytett kp mretarnyos legyen az ltalban hasznlt kpmretekkel, mert gyakran szoftveresen kicsinytik, ezrt egyfle mret egysgesebb arculatot mutat, mint a tl vltozatos, s szerkeszti szempontbl is egyszerbb. Itt is nveli a kattintsi arnyt, ha van Bvebben, Tovbb, stb. link, vagy gomb, de mr nem olyan hangslyos, mint a lapozban. Ez mretben, s sznben is lehet ms, csak a tovbbiakban is legyl kvetkezetes, teht az oldalon mshol is ilyet hasznlj erre a funkcira.

Lblc A lblc funkcija nem csak az, hogy ott van lenn, hanem egy lezr, bezr szerepe is van, ebben az esetben a sttrszasznnel kontrasztot ad a kpnek, s kiemeli a tartalmat, nem

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

csak gy lg a levegben. A lblcben gyakran a szervizmenk kapnak helyet - Kapcsolat, Impresszum stb. A vgre egy sznre hoztam a fels mensort is a hasznlt sznekkel, s egy dummy logt is bettem - kapcsold le a Layer palettn a 24 Col Grid eltt a szemet, s gynyrkdj a webdesign tervedben! A File / Preview in Browser azt is megmutatja, hogy mutat majd a bngszben:

Fireworks webdesign segdletek

http://visionwidget.com/tuts/webtuts/525-adobe-fireworks-web-design-tutorials.html

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!

Online Webdesigner Tanfolyam www.webdesigntanfolyam.com

http://www.instantshift.com/2011/03/10/creating-a-basic-wireframe-using-adobe-fireworks/ http://designm.ag/resources/adobe-fireworks-tutorials/ http://stylishwebdesigner.com/50-best-adobe-fireworks-tutorials-for-designers/ http://www.smashingapps.com/2011/09/14/40-extremely-useful-adobe-fireworks-tutorials-fordesigners.html

Copyright 2011 Tth Zsuzsanna Minden jog fenntartva!