Crearea unui sit atractiv, uor de meninut, folosind Macromedia Dreamweaver, Fireworks i FlashMacromedia Studio 8 este principalul pachet de dezvoltare al aplicaiilor web. De la proiectarea elementelor grafice la dezvoltarea aplicaiilor web de e-commerce care folosesc baze de date, Studio 8 ofer instrumente puternice pentru proiectanii de elemente grafice, pentru cei orientai pe cod dar i pentru programatorii multimedia. Pentru crearea acestui sit, vom proiecta elementele grafice i layout-ul n Macromedia Fireworks 8 nainte de a construi ntregul sit web n Dreamweaver 8. n final, vom apela la Flash pentru a construi anumite elemente video i animaii pentru sit. Primul proiect la care vom lucra este situl web pentru o firm fictiv numit Fruits Valley. Vom proiecta machetele paginilor, mpreun cu CSS-ul aferent din care vom genera celelalte pagini ale sitului. Vom folosi Flash pentru a dezvolta un film interactiv i un scurt clip video. Primul lucru pe care l vom crea este logo-ul Fruits Valley (va fi n stnga) i elementul grafic de reclam (din dreapta). Partea I - Fireworks 1.1 Pregtirea graficii Elementele grafice sunt de obicei primele lucruri care se creaz cnd ncepem s lucrm la un sit web, deoarece influeneaz aspectul global al sitului proiectat i vom avea n vedere urmtoarele aspecte: - schema de culoare; - elementele de interfa (cum ar fi barele de navigare) i - layout-ul. Fireworks permite dup crearea elementelor grafice optimizarea acestora pentru web prin reducerea dimensiunii fiierelor i meninerea calitii vizuale de ansamblu. De asemenea Fireworks este un instrument excelent pentru proiectarea layout-ului paginii n ansamblu i poate fi folosit ca baz pentru ntregul design al sitului web. Tehnicile pe care le vom folosi pentru nceput sunt: - trasarea formelor (shapes) i aplicarea marginilor (strokes), umplerilor (fills) i texturilor (textures); - aplicarea i formatarea textului; - editarea elementelor grafice de tip bitmap, respectiv a unei fotografii digitale; - utilizarea unei mti i utilitarului Dodge pentru a retua o fotografie digital; - aplicarea filtrelor Fireworks pentru a crea efecte de umbrire (drop shadows); Trasarea formelor pentru un logo Vom trasa anumite forme care vor fi folosite ca fundal pentru logo-ul Fruits Valley. Grafica digital se mparte n dou categorii: bitmap (sau raster) i vectorial. Grafica bitmap este compus din matrici de miliarde de culori ale punctelor individuale. Fiecare punct reprezint o singur culoare (de la 1/72 la 1/600 dintr-un inch) i nu pot fi percepute individual. Grafica vectorial presupune folosirea unor formule matematice care descriu linii, curbe i forme. Crearea unui element grafic bitmap (numit i crearea unei picturi), implic colorarea pixelilor. Crearea unei imagini vectoriale (numit i desenare), const n reprezentarea grafic a punctelor pentru crearea obiectelor (numit i paths) i specificarea modului n care marginile (sau strokes) unui obiect vor apare dar i cum va apare umplerea. Pentru realizarea unor forme simple, cum ar fi dreptunghiuri, stelue i linii curbe, grafica vectorial este de obicei superioar celei bitmap, deoarece grafica vectorial necesit mai puine 1

date pentru reprezentarea elementului grafic (i va duce la un fiier mai mic ca dimensiune) i sunt mult mai uor de modificat i redimensionat. Textul, logo-urile i desenele tehnice sunt de obicei imagini vectoriale. Pentru imagini complexe, n special fotografii digitale, cantitatea de detalii este att de mare nct vectorii nu pot reprezenta efectiv imaginea, bitmap fiind superioar. Fireworks dispune de dou programe n unul: lucreaz cu imagini vectoriale i bitmap. Cnd crem imagini n Fireworks, majoritatea vor fi vectoriale: trasm forme, linii i introducem text. De exemplu, un buton din bara de navigare este de obicei un dreptunghi, oval sau alt form geometric, utilitarele vectoriale fiind perfecte. De asemenea putem importa, modifica sau retua fotografiile preluate cu camera digital i/sau scanate n Fireworks, acestea fiind invariabile n format bitmap. Utilitarele de acest tip le gsim n Fireworks n panoul Tools la seciunile Bitmap i Vector (vezi Figura 1). Pentru a crea imagini (sau elemente grafice ntr-o compoziie), vom utiliza instrumentele de desen vectoriale. Pentru a edita imaginile existente, n special fotografii, vom utiliza instrumentele de editare de tip bitmap. n momentul n care dorim s optimizm imaginile pentru web, le vom exporta ntr-un format grafic suportat (de obicei GIF sau JPEG, care sunt formate bitmap). Sa revenim la crearea formelor din fundalul logo-ului care presupune folosirea de imagini vectoriale. n primul rnd vom crea aceast form de o anumit dimensiune, i vom stabili poziia acesteia. Ulterior le vom mbunti prin aplicarea de margini, umpleri i texturi.

Figura 1: Instrumente de desen Fireworks

Paii necesari pentru crearea logo-ului sunt: 1. deschidem Fireworks i alegem Create New Fireworks File; 2. n fereastra de dialog New Document vom specifica 120 pixeli pentru lime i 120 pixeli pentru nlime. Vom pstra rezoluia implicit de 72 pixeli/inch (este standard pentru grafica pe ecranul calculatorului) i Canvas Color alb (vezi Figura 2);

Figura 2: Crearea unui nou fiier

2

3. dup clic pe OK, va apare canvas-ul care marcheaz marginile imaginii. Canvasul marcheaz graniele imaginii. Orice punem n canvas va apare n imagine cnd o vom exporta. Putem stoca imaginea n zona gri (numit workspace spaiu de lucru-), dar orice vom plasa n spaiul de lucru nu va fi vizibil atunci cnd imaginea va fi exportat. De notat c imaginea cu logo-ul este destul de mic. innd cont c un inch are 72 pixeli i imaginea are doar 120x120 pixeli, dimensiunea final a imaginii nu ar trebui s ne surprind.

spaiu de lucru

canvas

Figura 3: Canvas

4. alegem File > Save i salvm fiierul pe disk cu numele logo.png 5. Selectm instrumentul Elipse prin apsarea i meninerea butonului mouse-ului pe utilitarul Rectangle din bara cu instrumente Tools, pn cnd va apare un meniu pop-up cu opiuni adiionale. Vom executa clic pe utilitarul Ellipse n acest meniu. Putem comuta ntre instrumentele shape folosind i o scurttur apsnd tasta U. Instrumentul Ellipse poate fi utilizat pentru a trasa elipse i cercuri perfecte. 6. Meninem apsat tasta Shift dup care meninem butonul din stnga al mouse-ului apsat i tragem n diagonal pe canvas un mic cerc.

Figura 4. Elips

Meninerea apsat a tastei Shift pe msur trasrii unei anumite forme determin o constrngere a acesteia. Elipsele sunt modificate la cercuri perfecte, n timp ce dreptunghiurile sunt modificate la ptrate perfecte. Aceast tehnic numit constrngere prin Shift, extinde i alte instrumente n aceeai manier. De exemplu, cnd meninem apsat tasta Shift mpreun cu instrumentul Line liniile sunt modificate la un unghi de 45 de grade relativ la canvas. n funcie de setrile pe are le dorim, formele (shapes) pot avea o umplere (fill) i/sau o margine (stroke). Setarea implicit este o umplere cu gri fr margine. Att timp ct putem vedea cercul pe care l trasm, umplerea i marginea nu este important pentru moment, o putem schimba ulterior. n primul rnd vom stabili dimensiunea i locul de plasare a cercului. Putem redimensiona obiectele n Fireworks n dou moduri. Putem redimensiona un obiect n mod vizual folosind utilitarul Scale din bara cu instrumente Tools sau, dac tim exact ct de mare va fi acel obiect l putem redimensiona cu o precizie numeric utiliznd Property Inspector. 3

7. Vom selecta cercul i vom schimba limea (W) i nlimea (H) la 37 din colul din stnga jos al lui Property Inspector. Repoziinm i elementul grafic n colul din stanga sus al canvas-ului prin specificarea distanei fa de colul din stnga (X) la 1 i a distanei fa de sus (Y) la 1. Vom realiza aceast redimensionare i repoziionare n mod numeric. ntr-o situaie normal de proiectare, vom descoperi dimensiunea adecvat i poziionarea n mod vizual prin ncercri i erori.

Figura 5: Ajustarea cercului

Imaginea final va conine cinci cercuri i n continuare vom crea restul cercurilor. 8. Dup ce am selectat cercul, alegem Edit>Copy i apoi Edit>Paste de patru ori. Dup terminarea acestui pas, ecranul nu arat cu mult diferit deoarece Fireworks a aplicat fiecare copie deasupra originalului. 9. Utilizm utilitarul Pointer din colul din stnga sus al barei cu instrumente Tools pentru a trage unul dintre cercuri la dreapta. Vom utiliza utilitarul Scale i observm c apar n mod automat anumite posibiliti de transformare.

4

Figura 6: Instrumentul Scale

Tragem de unul din colurile care ne permit transformarea pn cnd cercul ajunge la dimensiunea care se poate observa n figura urmtoare:

Figura 7: Dimensiunea cercului

Dezactivm instrumentul transform printr-un clic pe instrumentul Pointer i tragem cercul n poziia din figura anterioar. Prin tragerea efectuat cu instrumentul Transform realizm scalarea obiectului selectat. Dac tragem de un col, obinem scalarea n dou direcii (stnga-dreapta i sus-jos). Dac tragem din mijloc obinem scalarea ntr-o singur direcie (stnga-dreapta i sus-jos). Atunci cnd tragem de un col, Fireworks menine automat aspectul obiectului. Cu alte cuvinte dac scalm cu 20% pe orizontal vom scala i cu 20% pe vertical. 10. Repetm pasul 9 pn cnd cele cinci cercuri sunt redimensionate i poziionate ca n figura urmtoare, dup care salvm fiierul: 5

Figura 8: Redimensionarea i repoziionarea celor 5 cercuri

O modalitate uoar i precis de repoziionare a obiectelor implic utilizarea tastelor sgei. Aplicarea culorilor i texturilor Am creat cinci obiecte pentru logo care sunt gri nchis i nu prezint mult interes, mai ales pentru un site cu pretenii. Anterior am menionat c atunci cnd lucrm cu elemente grafice vectoriale, etapele necesare sunt crearea, structurarea, scalarea i poziionarea obiectelor i n final trebuie s le facem s arate bine. 1. Selectm toate cercurile prin alegerea Select>Select All. Vom aplica aceleai efecte vizuale la toate cercurile simultan. Putem selecta obiecte multiple i folosind utilitarul Pointer mpreun cu tasta Shift.

Figura 9: Selectare obiecte

2. Schimbm culoarea de umplere printr-un clic n caseta Fill Color din Property Inspector. n caseta Color, selectm o nuan de verde cu valoarea hexazecimal #669900. 6

Implicit, caseta Color afieaz 216 culori din aa numita palet de culori Web Safe. Putem obine prin mixarea culorilor dintr-o palet mai mult de 16.7 milioane de culori. Pentru a accesa aceast palet, vom executa clic pe butonul Sys Color Picker sau vom utiliza panoul de culori Mixer. Pe msur ce ne deplasm peste paleta de culori cu cursorul (care se transform ntr-un eyedropper), valoarea culorii n hexazecimal este afiat n partea de sus a ferestrei pop-up. Numrul culorii n hexazecimal este doar o modalitate simpl de a codifica succint culorile. Monitoarele calculatoarelor afieaz culorile prin mixarea uneia din 256 nuane de rou, uneia din 256 nuane de verde i uneia din 256 nuane de albastru. (256x256x256 reprezint mai mult de 16.7 milioane menionate anterior). Sistemul este simplu: primele dou cifre reprezint nuana de rou ... n loc de a utiliza sistemul n baza 10, care necesit de la 1 la 3 cifre pentru fiecare valoare (0 este o cifr, 255 sunt trei cifre), sistemul hexazecimal utilizeaz un sistem n baza 16. Astfel, n loc ca fiecare cifr s fie cuprins n intervalul de la 0 la 9, ea va fi n intervalul de la 0 la F, unde A reprezint 10, B reprezint 11, pna la F, care reprezint 15. Deoarece 16x16 este egal cu 256, dou cifre din sistem sunt capabile s reprezinte 256 variaii diferite de culori. Astfel, valoarea #669900 semnific ca valoarea roie 66 reprezint 102 (ntr-o scal de la 0 la 255), valoarea verde (99) reprezint 153 i valoarea albastru (00) reprezint 0. Culoarea rezultat este un verde adnc.

Caseta Fill

Caseta StrokeFigura 10: Umplerea

Marginea trebuie stabilit implicit transparent (se poate vedea n caseta Stroke Color din Property Inspector). Pentru a verifica acest lucru clic pe butonul cu o linie roie din zona ferestrei pop-up Color. 3. Utilizm Property Inspector pentru a schimba elementul Edge de la Anti-Alias (implicit) la Feather. n cmpul care specific cantitatea de umplere care este implicit 10 schimbm la 3. Marginile sunt acum n mod subtil mai plastice dect cele anterioare.

7

Figura 11: Modificarea marginilor

De ce s utilizm anti-aliasing? S presupunem c avem un cerc verde pe un fundal alb. Cele dou regiuni sunt definite printr-o margine. O margine tare nu prezint o tranziie ntre cele dou regiuni; un pixel verde marcheaz sfritul cercului, i, n apropierea lui un pixel alb definete nceputul unei regiuni din afara cercului. Din nefericire, marginile tari nu dau bine pe un calculator i tind s apar ndesate. O soluie este utilizarea marginilor anti-alias (implicite n Fireworks), care creaz o subtil tranziie ntre regiunile din interiorul i exteriorul formei. n acest exemplu, Fireworks combin marginile verzi i albe pentru crea o mic zon de tranziie prin pixeli verzi pali. Feathering creaz o tranziie mult mai mare; putem specifica ct de mare va fi tranziia utiliznd cmpul Feather Amount. Urmtoarea figur arat diferena ntre trei tipuri de margini, de la stnga la dreapta: Hard, Anti-Alias i Feathered.

4. utilizm Property Inspector pentru a schimba cantitatea de textur de la 0 la 50. Texturile sunt o facilitate excelent a graficii vectoriale Fireworks. De obicei, grafica vectorial este caracterizat prin regiuni de culori netede i solide. Aceast caracteristic este bun pentru logo-uri curate (cum ar fi inelele olimpice sau logo-ul de la Pepsi), dar grafica vectorial poate fi i mai puin natural. Texturile Fireworks ofer designerilor puterea de a crea imagini grafice care au o apariie mult mai natural. n exemplul nostru am utilizat textura Grain, dar pot fi experimentate i alte tipuri de texturi (recomandate sunt Grass, Chiffon, Oilslick, Parchment, Swirls, and Metal).

8

Figura 12: Modificarea texturii

5. n partea dreapt a lui Property Inspector, diminum opacitatea de la 100 (implicit complet opac) la 50. Salvm fiierul. Opacitatea ne permite specificarea transparenei unui obiect. La valoarea implicit de 100, fiecare obiect din spatele obiectului selectat este n totalitate obscur. La o opacitate de 0, obiectul este n ntregime transparent. Valoare dintre face obiectul translucid. Vom diminua opacitatea la 50% pentru moment, pentru ca cercurile s par mai subtile i pentru a se potrivi cu fundalul.

Figura 13: Modificarea opacitii

9

Adugarea textului Pe acest fundal deja creat putem aduga un anumit text. Textul n Fireworks este un fel de hibrid ntre modul de lucru al textului n procesoarele de texte i modul n care Fireworks interpreteaz liniile vectoriale i formele. 1. selectm instrumentul Text reprezentat prin iconia A din seciunea Vector din bara cu intrumente Tools. Odat ce acest instrument este selectat, Property Inspector dezvluie opiunile de formatare text, inclusiv tipul fontului, dimensiunea, nclinat sau cursiv, alinierea ... Putem accesa instrumentul Text utiliznd scurttura:T.

2. utilizm Property Inspector pentru a schimba fontul la Arial Narrow, dimensiunea 26 i culoarea textului la un gri de mijloc (n hexazecimal #999999). Vom formata textul dup ce l crem. Tipul text, ca orice form vectorial, poate avea o margine i o umplere. Implicit, n Fireworks, ca i n majoritatea aplicaiilor, culoarea textului este specificat ca umplere i textul far margine (sau mai precis cu margine transparent). Textul va fi Fruits Valley, dar deoarece vom formata F si V ntr-un mod mai special, le vom separa. Cnd comutm temporar pe instrumentul Pointer, putem scrie alley n caseta text proprie. Putem formata global fiecare cuvnt i poziiona pe fiecare individual.

Figura 14: Adugarea textului

3. utilizm instrumentul Pointer pentru a selecta caseta cu F. n Property Inspector, schimbm fontul la Georgia, specificm dimensiunea la 50, Bold, culoarea #FF9900 (portocaliu deschis). n caseta cu V fontul Georgia, culoarea #669900 dar nu Bold. Acum design-ul are dou culori principale utilizate n sit. 4. utilizm instrumentul Pointer pentru a repoziiona blocurile de text, pentru a apare ca n figura urmtoare i salvm. 10

Figura 15: Repoziionarea textului

Aplicarea efectelor Vom utiliza filtrele speciale Fireworks pentru a aduga umbr literelor F i V n logo. Filtrele pot fi aplicate att obiectelor vectoriale ct i bitmap. Putem aduga efecte imediate prin filtre cum ar fi: shadows, glows, bevels (pentru efecte ale butoanelor), embossing ... 1. Utilizam instrumentul Pointer pentru a selecta F. Clic pe Filters i alegem butonul Preset (+) din Property Inspector. Va apare un meniu pop-up cu diferite categorii de filtre.

2. Din acest meniu alegem Shadow and Glow> Drop Shadow. Din meniul pop-up care va apare schimbm distana de la 7 la 5 i culoarea cu cea a literei J (#FF9900). Clic oriunde pe canvas pentru a aplica schimbrile

F are acum o umbr portocalie care sporete interesul. 3. Similar vom proceda i cu litera V. (Drop Shadow, Distance 5, Color - #669900).

11

Figura 16: Logo-ul Fruits Valley

EXPERIMENTAI DIFERITE FILTRE I SETRI. CONSTRUII UN LOGO PENTRU SITUL AFERENT PROIECTULUI FINAL Lucrul cu fotografii digitale - http://k53.pbase.com/g6/40/385840/2/74073584.GGDp3R36.jpg (126x200 - prin redimensionare) A doua imagine pe care o vom aduga este o fotografie. Deoarece reclama va mixa text i o fotografie, vom proiecta ambele elemente cu grij pentru a ne asigura c va fi o imagine de calitate. 1. deschidem apple.jpg. Imaginile atractive sunt de obicei create utiliznd elemente surs de calitate cum ar fi aceast fotografie.

Eventual, reclama va dispune de un text peste fotografie. Dar, dac vrem s adugm text n acest moment, textul va fi greu de citit ceea ce nu este de dorit. n continuare vom fora mrul n 12

fundalul imaginii; acesta va fi vizibil dar nu att de frapant. Prima tehnic pe care o vom folosi va implica utilizarea unei mti. O masc apare atunci cnd o imagine sau form este utilizat pentru a dezvlui o alta. Vom apela la un dreptunghi cu marginile terse (feathered edges) pentru a evidenia centrul mrului i pentru a realiza o umbr n jurul marginilor. 2. selectm utilitarul Rectangle. Vom utiliza caseta Fill Color din seciunea Colors a barei cu instrumente Tools pentru a seta culoarea de umplere la alb (n hexazecimal #FFFFFF). Vom utiliza caseta Stroke Color pentru a seta Stroke la none.

Figura 17: Evidenierea centrului imaginii

Cnd executm clic n caseta Fill sau Stroke Color n seciunea Colors din bara cu instrumente Tools, va apare o palet care conine anumite mostre de culori. Mostra de alb va apare n partea stng, n timp ce mostra fr culoare (cu o bar roie peste ea) va apare n apropierea colului din dreapta sus a casetei de dialog. Chiar dac vom utiliza culoarea dreptunghiului ca masc pentru mrul din imagine, culoarea acesteia este foarte important. Mtile utilizeaz pn la 256 nuane de gri pentru a afia/ascunde obiectul mascat. O masc neagr ascunde n totalitate obiectul mascat; o masc alb scoate n eviden obiectul mascat n ntregime; o masc gri dezvluie parial obiectul de dedesubt. Prin specificarea faptului c dreptunghiul va fi alb, ne asigurm c orice va fi sub dreptunghi (odat ce a fost proiectat ca o masc) va fi n ntregime vizibil. 3. Vom trasa un dreptunghi peste mr, aa cum se poate observa i n figur. 4. Odat selectat dreptunghiul, din meniul derulant Edge din seciunea Fill al lui Property Inspector, schimbm setarea la Feather i cantitatea la 25. Dreptunghiul are acum margini scmoate (fuzzy), care va determina un efect progresiv, destul de plcut, cnd va fi convertit la o masc.

13

Figura 18: Modificarea marginilor dreptunghiului

5. Clic pe instrumentul Pointer. Meninem apsat tasta Shift i clic pe imaginea cu mrul. n acest moment, att dreptunghiul ct i fotografia vor fi selectate. Putem verifica acest lucru prin conturul albastru care nconjoar fotografia i cele patru coluri albastre ale dreptunghiului.

Figura 19: Selectarea obiectelor

6. Alegem Modify>Mask>Group a Mask. Dreptunghiul scoate n eviden acum fotografia chiar dac o acoper n mare parte.

14

Figura 20: Crearea mtii

Fireworks ne permite s crem mti vectoriale sau bitmap. Aceasta este o masc vectorial, deoarece obiectul care realizez mascarea este un dreptunghi vectorial. Se pot crea efecte de mascare impresionante prin utilizarea unei imagini bitmap pentru a masca o alta. Deoarece Fireworks dispune de 256 umbre pentru mascare, un bitmap utilizat ca masc poate crea efecte de compoziie interesante. Fundalul are acum un fundal de tip tabl de ah, care indic un fundal transparent. Noi vom folosi un fundal alb. 7. Alegem Select>Deselect. n Property inspector, utilizm caseta Canvas Color pentru a schimba culoarea canvas-ului de la transparent (cu o bar roie peste ea) la alb. Fundalul tabl de ah va dispare i va deveni alb.

Figura 21: Schimbare culoare canvas

8. Clic pentru a selecta masca i utilizm Property Inspector pentru a diminua opacitatea la 75%. 9. Apsm i meninem apsat butonul mouse-ului peste instrumentul Blur din bara cu instrumente Tools (seciunea Bitmap), pn cnd va apare un submeniu. Din acest submeniu, selectm instrumentul Dodge. Din Property Inspector, schimbm dimensiunea (Size) la 26.

Figura 22: Aplicarea Dodge pentru estompare

Instrumentul Dodge este un utilitar bitmap care ne permite pictarea pixelilor la un nivel foarte fin. Vom utiliza Dodge pentru a estompa mrul nc puin, fr a degrada calitatea 15

fotografiei. Dimensiunea implicit, 13, este destul de mic i din acest motiv mrim dimesiunea periei la 26, pentru a aplica efectul rapid i uniform. 10. Apsm i tragem peste imagine, pn cnd aceasta se lumineaz i devine mai estompat. Dei nu este att de colorat ca originalul, fotografia este nc atractiv. Adugarea textului n acest moment, fotografia noastr este pregtit pentru a deveni imagine de fundal i putem aduga i formata textul. 1. selectm utilitarul Text. Utilizm Property Inspector pentru a seta fontul la Arial Narrow, dimensiunea 14 i culoarea textului la negru (n hexa #000000); 2. clic n fereastra Document i specificm: Excelent Fruits and Vegetables: the TASTE you will never forget. Pe msur ce scriem, textul se deplaseaz spre marginea dreapt a canvas-ului i nu poate fi vzut;

Figura 23: Adugare text

3. Clic i tragem din colul din dreapta jos a casetei text n jos i la stnga, pn cnd caseta text este similar cu cea din figura urmtoare. Caseta text din Fireworks se extinde automat cnd ncepem s scriem.

Figura 24: Ajustare caset text

4. Odat selectat caseta text specificm alinere la dreapta i schimbm (distana) Leading la 24 px. Leading se refer la cantitatea de spaiu ntre liniile text. n majoritatea cazurilor, distana ntre paragrafele text este cu 20% mai mare dect dimensiunea fontului. Prin urmare, un font cu dimensiunea 10 are o distan de 12 puncte. Numrul specificat de noi (32 pixeli) este puin mai

16

mare de 20%. Acest lucru atrage atenia asupra textului i l face mult mai uor de citit, ceea ce este de dorit pentru o reclam.

Figura 25: Modificarea Leading

5. Utilizm utilitarul Text i selectm cuvntul Excelent (vom folosi textul deja scris pentru a introduce un nou obiect text peste acesta i l vom terge pe cel anterior). Utilizm Property Inspector pentru a schimba culoarea la verde nchis (#669900). Cretem dimensiunea fontului la 16. Evidenierea cuvintelor cheie este o alt tehnic de design important pentru reclame. 6. Selectm cuvntul TASTE i utilizm Property Inspector pentru a crete dimensiunea fontului la 16 i schimbm culoarea la rou nchis (#993333). Acum, cele mai importante cuvinte din reclam s-au detaat. 7. Redimenionm caseta text i apsm Enter dup anumite rnduri dac este necesar, pentru a face textul s apar ca n figura urmtoare.

Figura 26: Finalizarea reclamei

8. Alegem File>Save As i salvm fiierul cu numele apple.png. Dup aceasta va apare o caset de dialog care ne solcit salvarea fiierului JPEG (care va face fiierul iniial neditabil) sau Save Fireworks PNG care va rmne n ntregime editabil. Ulterior, mpreun cu logo.png, vom optimiza i exporta acest fiier pentru web. 1.2 Proiectare interfeei paginii 17

Majoritatea paginilor web sunt compuse din elemente multiple, cum ar fi logo-uri, sisteme de navigare text, imagini, multimedia i formulare. Proiectanii deseori apeleaz la Dreamweaver pentru a proiecta layout-ul paginilor, dar acesta prezint anumite limitri ale codului HTML standard care pot stnjeni deciziile de proiectare i experimentare. Fireworks este o alternativ fireasc pentru proiectarea layout-ului. Deoarece fiecare element grafic din sit face parte dintr-un canvas independent de alte obiecte, coninutul este uor i precis de aranjat i rearanjat. Crearea rapid a unor teme pentru un anumit client este uor de realizat datorit interfeei de optimizare robuste i diverselor faciliti de export HTML. Proiectarea ntregului layout n Fireworks implic un anumit workflow: - asamblarea diverselor elemente ntr-un document Fireworks; - desprinderea (slice) paginii n piese individuale: bannere, elemente de navigare, zona principal cu coninut; - optimizarea fiecrei piese pentru a obine o impresie de nalt calitate i o dimensiune mic a fiierelor; - exportul paginii i toate prile ei componente pentru reasamblare n Dreamweaver. Pentru nceput, vom dezvolta ntregul design al paginii n Fireworks, mpreun cu logo-ul, sistemul de navigare, banner-ul, coninutul principal, reclama i zona de subsol. Vom proiecta de asemenea o schem cu slice-uri pentru pregtirea procesului de optimizare i export. Crearea butoanelor n acest etap vom crea butoane utiliznd editorul de butoane din Fireworks. Pe web, apariia butoanelor de navigare se schimb deseori n funcie de aciunile utilizatorilor. Un clic pe buton, deplasarea mouse-ului pe un buton i mutarea mouse-ului n afara butonului poate schimba modul de apariie a butoanelor. De exemplu, la deplasarea peste un buton acesta se poate aprinde; pentru a obine acest efect, proiectanii vor crea imagini separate pentru a reprezenta fiecare mod diferit de apariie a butonului (button state n Fireworks). Butoanele Fireworks au urmtoarele stri: Up - implicit; apariia versiunii butonului care apare de obicei cnd o pagin se ncarc; Over - apare cnd mouse-ului se deplaseaz peste zona activ a butonului; Down - apariia butonului dup ce utilizatorul execut clic; util pentru a indica pe care pagin se afl n acel moment utilizatorul (sau seciunea vizitat); Over While Down - apariia strii Down a butonului cnd cursorul este mutat peste acesta. Strile cele mai comune ale unui buton sunt Up i Over i pot fi observate n figura urmtoare: Pe lng crearea butoanelor pentru fiecare stare, este necesar i un script pentru a indica browser-ului s afieze butonul corect, n funcie de activitatea utilizatorului. Acest script este realizat de obieci n JavaScript, un limbaj de scripting utilizat pentru controlul browser-ului. Scriptul trebuie s in cont de fiecare buton grafic (care reprezint starea) i s rspund adecvat la un anumit eveniment. Fireworks face singur acest lucru; singurul lucru pe care trebuie s-l facem este s crem butoane funcionale construind un buton simbol, folosind editorul din Fireworks Button Symbol. Odat creat, Fireworks stocheaz butonul simbol n Library. Astfel, putem crea cte instane (copii ale butonului simbol original) avem nevoie. Butonul simbol pe care l vom crea pentru sistemul de navigare conine dou stri: Up si Over. 1. File>New (CTRL+N); 2. n fereastra de dialog specificm 200 pentru lime i 200 pentru nlime, rezoluie 72 pixeli/inch i culoarea canvas-ului alb. Butonul pe care l vom crea este mai mic dect canvas-ul dar l vom redimensiona ulterior; este indicat s avem mai mult spatiu de lucru; 3. File>Save>button.png 4. Edit>Insert>New Symbol (CTRL+F8) pentru a crea un simbol 18

5. n caseta de dialog Symbol Properties numim noul simbol nutrition i selectm tipul Button. Cnd dm clic pe OK, Fireworks deschide automat editorul de butoane simbol. Editorul permite crearea diferitelor stri ale butonului i adaug acest nou simbol la librrie (butonul poate fi vzut din Window>Library).

6. selectm instrumentul Ellipse i meninem tasta Shift apsat pentru a desena un cerc perfect peste canvas. 7. utilizm dimensionarea numeric din Property Inspector: W(24), H(24), X(-12) i Y(-12); Fill (#FFFFFF), Stroke Color (#CCCCCC). Setrile numerice ne asigur de dou lucruri: ne asigur c cercul este de exact 24 pixeli n diametru i c cercul este centrat pe canvas. Coordonatele X i Y reprezint distana n pixeli de la colul din stnga sus a imaginii fa de centrul canvas-ului. Pentru a ne asigura c imaginea grafic este centrat n canvas, jumtate din pixeli trebuie s fie deasupra centrului (12) i jumtate n stnga centrului (12). 9. din Property inspector, selectm Stroke Option din categoria Stroke. n caseta de dialog Stroke option, alegem Pencil ca tip de margine, 1-Pixel Soft la numele marginii i 1 la dimensiune. 10. trasm un nou cerc mai mare dar fr al atinge pe cel dinainte. Opiunile Stroke vor fi aceleai.

11. deschidem panoul Align: Window>Align care permite alinierea obiectelor cu precize pe canvas. 12. selectm ambele cercuri alegnd Select/Select All; clic pe Horizontal Center i apoi pe Align Vertical Center pentru a alinia cele dou cercuri. Cercul mic va dispare dup alinere; 13. seletm cercul mare folosind instrumentul Pointer i alegem Modify > Arrange > Send to Back. 19

14. setm coordonatele cercului al doilea: W(30), H(30), X(-15) i Y(-15);

15. utilizm instrumentul Text i adugm NUTRITION sub cele dou cercuri; font - Arial Narrow, Size - 12, Font Color - #666666 i aliniem la centru eticheta butonului. n final, setm X(35), Y (21)

Din fericire, crearea strilor rmase este uoar, deoarece putem reulitiza ce am realizat. Crearea strii Button Over Pn n acest moment am creat starea anterioar a butonului (starea Up). Vom dezvolta starea Over a butonului n cele ce urmeaz. Starea Over apare cnd mouse-ul este deplasat peste buton. Starea Over va avea acelai aspect ca starea Up, diferena constnd n dimensiunea cercurilor i imaginea bitmap adiional pe care o vom importa pentru a umple cercul din interior. 1. deschidem imaginea red_onion.jpg (o putem descrca folosind o cutare pe google images ). http://images.google.com/imgres?imgurl=http://www.mercuryappliances.co.uk/images/red_onion.jpg&imgrefurl=http://www.mercuryappliances.co.uk/recipes.php%3Frecipe_id%3D4&h=399&w=420&sz=18&hl=en&start=12&um=1 &tbnid=YtiVoE0d4OxbiM:&tbnh=119&tbnw=125&prev=/images%3Fq%3Dred%2Bonion%26svn um%3D10%26um%3D1%26hl%3Den%26client%3Dopera%26rls%3Den%26sa%3DN 2. selectm instrumentul Ellipse din bara cu instrumente Tools. Utilizm Property Inspector pentru a seta Stroke i Fill la none. Meninem apsat tasta Shift i trasm un mic cerc n partea de sus. Dup ce convertim cercul la o masc, culoarea marginilor i cea de umplere nu vor fi vizibile.

20

3. Odat cercul selectat, utilizm Property Inspector pentru a schimba coordonatele W, H, X i Y la 36, 36, 1 i 1. Anterior, am creat starea Up a butonului nutrition prin trasarea celor dou cercuri i alinierea acestora utiliznd panoul Align. Ceapa roie trebuie s se potriveasc n cercul interior i din acest motiv vom redimensiona cercul. 4. Comutm pe instrumentul Pointer. Meninem apsat tasta Shift, selectm att cercul ct i fotografia. Alegem Modify > Mask > Group as Mask. n panoul Layers, clic pe imaginea miniaturizat a mtii din layer-ul masc. n Property inspector, setm tipul de masc la Path Outline (nu Grayscale).

Cercul scoate acum n eviden ceapa roie chiar dac acoper fotografia. Path Outline spune Fireworks-ului s neglijeze marginea i umplerea cercului i s se ndrepte doar spre conturul formei nsi. Drept rezultat, obiectul care mascheaz masca taie obiectul mascat. Setarea alternativ (Grayscale) poate fi utilizat cnd mbinm dou obiecte ntr-o masc i nu folosind una din ele pentru a o tia pe cealalt. 5. Din meniul principal selectm Select > Deselect. n Property Inspector clic pe butonul Fit Canvas. Aceasta face ca masca circular s se potriveasc perfect pe canvas fr nici un spaiu adiional. Salvm red_onion.png i nchidem fiierul.

21

6. Ne ntoarcem la button.png i dublu clic pe starea Up a butonului pe care l-am creat anterior pentru a deschide editorul de butoane simbol. Clic pe tab-ul Over pentru a accesa mediul de dezvoltare a strii butonului Over. n editorul pentru butoane simbol, fereastra document afieaz canvas-ul butonului, care este gol. 7. Clic pe butonul Copy Up Graphic. Deoarece majoritatea strilor butonului sunt variaii ale butonului Up, butonul Copy Up Graphic este o modalitate convenabil s copiem automat starea Up a butonului i s-l plasm n canvas-ul strii Over n aceeai poziie. 8. Selectm cercul din exterior i utilizm Property Inspector pentru a schimba coordonatele W, H, X i Y la 41, 42, 21 i 21. Selectm cercul interior i utilizm Propery Inspector pentru a schimba W, H, X i Y la 36, 36, -18 i -18. Starea Over trebuie s fie puin diferit de starea Up i din acest motiv am efectuat o mrire pentru a face loc mtii cu ceapa roie pe care am creat-o anterior. 9. File>Import pentru a importa red_onion.png. Dup ce acest fiier va fi pe canvas (indicat de cursorul n form de L), plasm masca cu ceapa roie n interiorul cercului din mijloc. Putem folosi tastele sgei sau setrile X i Y din Property Inspector pentru o poziionare precis a mtii.

n acest moment, masca cu ceapa roie este plasat n cadrul centrului interior, ceapa roie fiind evideniat n cercul interior cnd mouse-ul se deplaseaz peste buton. 10. selectm instrumentul Text din bara cu instrumente i schimbm culoarea butonului NUTRITION la albastru-verde (#009966). Clic pe butonul Done pentru a nchide editorul de butoane simbol. 11. n button.png, clic pe tab-ul Preview din partea de sus a ferestrei document i deplasm cursorul peste buton pentru a previzualiza strile Up i Over. Salvm button.png i nchidem.

O alt variant este s testm documentele Fireworks folosind F12. Fireworks va genera o pagin web temporar complet cu toate elementele grafice necesare i JavaScript, permind testarea n browser-ul implicit. Tem: Realizai i celelalte butoane - ABOUT US, PRODUCTS, RECIPES, NUTRITION, FUNDAMENTAL, EVENTS

22