webdesign tanfolyam - mintalecke 2. webdesign készítés fireworksel

12
Online Webdesigner Tanfolyam www.webdesigntanfolyam.com Fireworks 2. Webdesign készítése Fireworks programmal Nyisd meg a 960 gs Fireworks template-k közül a 24 col nevűt, ami 24 egyforma szeletkére bontja fel a 960 px széles területet - plusz a sávok közötti hely. Egy kéthasábos oldalt fogunk készíteni - ebből máris tudhatod, hogy mindkét hasább 12-12 Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Upload: zsuzsannatoth

Post on 10-Aug-2015

5.269 views

Category:

Documents


3 download

DESCRIPTION

A lecke 1. része elérhető az Online Webdesign Tanfolyam Start és Kompakt tananyagában.http://webdesigntanfolyam.com

TRANSCRIPT

Page 1: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

Fireworks 2.

Webdesign készítése Fireworks programmal Nyisd meg a 960gs Fireworks template-k közül a 24 col nevűt, ami 24 egyforma szeletkére bontja fel a 960 px széles területet - plusz a sávok közötti hely.

Egy kéthasábos oldalt fogunk készíteni - ebből máris tudhatod, hogy mindkét hasább 12-12

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 2: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

csíkot foglal majd magában. De előtt jön egy teljes szélességében megjelenő Carousel lapozó, illetve egy fejléc, és egy lábléc. Kezdjünk akkor neki!A 24 Col Grid lezárva csücsül a Layers ablakban - minden elemet külön rétegre, illetve az összetartozó rétegeket csoportba rendezzük. Gyorsan készítsünk egy drótvázat a munkánk előtt.A Rectangle Toolal egy felső menüsort, egy helyet a lapozónak, a két hasábot, és a lábléc helyét rajzoltam meg.

Ez már jó kiindulási alap a munkához, mert már nem üres az alapod, kevésbé frusztráló, még

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 3: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

semmi sincs benne, de máris mindennek helye van.A Layer 1 mappát át is nevezem wireframe-re, és az egészet megduplázom - az lesz a design. Kidolgozottabb drótváz esetén ez azért jó, mert látod mi volt a kiindulási alap, akkor is, ha már a designban dolgozol.A wireframe réteget lelakatolom, és a design mappában dolgozom tovább.Ha nem találod a Layer ablakot, a Window fülön keresd.

Nézzük, hát sorban: Felső menü A megrajzolt dobozok színezése a Properties alsó panelen a legegyszerűbb - a Festékesvödör a belső szín, a ceruza a körvonal színét, méretét és típusát határozza meg.Én most fehérre állítom a kitöltést. Hogy egy logónak is legyen hely, a magasság olyan 90 px körül megfelelő, tegyél oda valamit - ami jelzi, hogy oda fog kerülni az oldal logója. Fent 4 menüpontunk lesz - KEZDŐLAP, SZOLGÁLTATÁSOK, ÁRAK, KAPCSOLAT Írd fel őket a felső menü jobb oldalára. Az Align panel segítségével tudod őket egymáshoz

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 4: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

képest - ehhez a Shift gomb lenyomása közben jelöld ki mindet - majd használd az Align paletta Space jobb oldali ikonját, így a menüpontok egyenlő távolságra lesznek egymástól.A több Align ikonnal pedig tovább tudod őket igazítani.

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 5: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

Egy tipp: a körvonal lekerekített elemeknél nem túl szépen rajzolódik ki, azért az alakzatok körvonalát másképp is meglehet adni - a Filters/Photoshop Live Effect boxban ugyanúgy, mint a Photoshopban.Ez egy lágyabb körvonalat eredményez, ami nem csak szebb, de egy esetleges .psd kimenet esetén is megmarad, míg a Fireworks saját körvonalát a Photoshop nem látja - ne kérdezd miért.

Carousel lapozó Van egy 960x350 széles helyünk, amit kiemelt tartalom megjelenítésére, lapozására tudunk használni - látványos, és hatékony.A lapozóba ilyen nagy képek kellenek, valamint a lapozáshoz valamilyen eszköz megtervezésére is szükség van.A lapozóban elhelyezett tartalomra címsort és igény esetén pár soros leírást is elszoktak helyezni. Ezt az elemet külön is megszerkeszheted - nyiss egy új file-t 960x350 px méretben, és keress ide egy megfelelő képet.

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 6: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

A lapozókban lévő fotóknak, grafikáknak minden esetben kiváló minőségűnek, a szemnek kellemes, vagy éppen figyelemfelkeltő képnek kell lennie.Ez mutathat a legfrissebb, vagy kiemelt cikkekre, promotálni kívánt hírekre, termékekre - a fő funkciója a gyors reakció kiváltása, azaz a kattintás. A lapozókban általában 3-5 elem váltakozik - vagy automatikusan, vagy felhasználói beavatkozásra - lapozás, vagy mindkettőre. Készítsünk egy lapozási lehetőséget a képünkre. Egy általánosan alkalmazott megoldás a pöttyözés - azaz annyi pöttyöt helyezel el a képen, ahány kiemelt tartalmad van, és a pöttyök kiemelésével jelzed a tartalom változását is, azaz hogy éppen hol tart a lapozás. A kör eszközzel készíts a képen 5 egyforma pöttyöt, azaz egyet, és Ctrl+C, Ctrl+V vel többszörözd őket, és ahogy a menüket igazítsd egymáshoz őket.Az aktív pöttyöt egy belső dupla pöttyel, és sötétebbel jelzem - de használhatsz más jelölést, csak egyértelmű legyen!

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 7: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

A lapozás tartalmazhat még számokat (1-5) vagy egyéb jelöléseket is. A felhasználó általi lapozás általában nyilakkal történik. A nyilakat elhelyezheted a pöttyök mellett is, de a kép szélén is, én most oda teszem.Ehhez a két oldalán egy-egy boxot helyezek el a Rectangle Tool, azaz a négyzet rajzoló eszközzel.Ebbe a vektoros rajzeszközzel a Pen tool-al egy nyilformát rajzolok - majd tükrözöm, és átviszem a másik oldalra. Tükrözés: jobb klikk / Transform / Flip horizontal

Még valami felirat hiányzik róla - a feliratok elhelyezésénél arra ügyelj, hogy az alakok arcába ne nagyon vágjon bele, ne takarja ki őket.Ha leírás van van a képen, akkor érdemes egy akciógombot is kitenni, ami a szöveg továbbolvasására hívja fel a figyelmet.

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 8: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

Most ezt az egészet jelöld ki - könnyű lesz, csak húzd körül, hogy megjelenjen minden elemen a kis kék kijelölő keret.Ha nem megy így, akkor egyesével is megteheted, ha közben nyomod a Shiftet. Amikor mindent kijelöltél jobb klikk - Group-ra kattintva csoportot hozhatsz létre, amit könnyebb mozgatni, mint sok apró fájlt. Mozgatni az eredeti designodba kell, a lapozó helyére - Ctrl+C, Ctrl+V

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 9: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

2 tartalom box Az hogy milyen tartalmat helyezünk el ezekben a boxokban, az a projekt függvénye. Most az egyik szöveges ajánló lesz csak, a másik képes.Mindkét boxnak adok egy vékony szürke 1px-es keretet, hogy kiemelkedjenek a nagy fehérségből.Ha zavarnak a segédvonalak - átmenetileg bármikor ki és bekapcsolhatóak View / Guides / Show Guides A körvonalat a már említett Filters/ Photoshop Live Effects panelen adtam meg - StrokeA position érték Inside, vagyis az 1 px ív a dobozon belül van, és nem ad hozzá egy plusz pixelt.

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 10: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

Ezt a műveletet mindkettőnél végrehajtom, így van két elkülönült dobozom. A dobozokba tartalom kerül, amiknek van egy címsora, hogy mi is ez a tartalom. A címsort, és a tartalmi részt egy ugyanolyan 1 px szürke vonallal választom el, mint amilyen a keret. #cccccc; A címsort és a szöveget Lorem ipsumból oldottam most meg - a weboldalakon használt képek esetén törekedj arra, hogy a kicsinyített kép méretarányos legyen az általában használt képméretekkel, mert gyakran szoftveresen kicsinyítik, ezért egyféle méret egységesebb arculatot mutat, mint a túl változatos, és szerkesztői szempontból is egyszerűbb. Itt is növeli a kattintási arányt, ha van Bővebben, Tovább, stb. link, vagy gomb, de már nem olyan hangsúlyos, mint a lapozóban.Ez méretében, és színében is lehet más, csak a továbbiakban is legyél következetes, tehát az oldalon máshol is ilyet használj erre a funkcióra. Lábléc A lábléc funkciója nem csak az, hogy ott van lenn, hanem egy lezáró, bezáró szerepe is van, ebben az esetben a sötétrószaszínnel kontrasztot ad a képnek, és kiemeli a tartalmat, nem

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 11: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.webdesigntanfolyam.com

csak úgy lóg a levegőben.A láblécben gyakran a szervizmenük kapnak helyet - Kapcsolat, Impresszum stb.A végére egy színre hoztam a felső menüsort is a használt színekkel, és egy dummy logót is bettem - kapcsold le a Layer palettán a 24 Col Grid előtt a szemet, és gyönyörködj a webdesign tervedben! A File / Preview in Browser azt is megmutatja, hogy mutat majd a böngészőben:

Fireworks webdesign segédletek http://visionwidget.com/tuts/webtuts/525-adobe-fireworks-web-design-tutorials.html

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!

Page 12: Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

Online Webdesigner Tanfolyamwww.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-for-designers.html

Copyright 2011 © Tóth Zsuzsanna Minden jog fenntartva!