Site Web - Fireworks

Macromedia Studio 8 este principalul pachet de dezvoltare al aplicaţiilor web. De la proiectarea elementelor grafice la dezvoltarea aplicaţiilor web de e-commerce care folosesc baze de date, Studio 8 oferă instrumente puternice pentru proiectanţii de elemente grafice, pentru cei orientaţi 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 animaţii 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 stânga) şi elementul grafic de reclamă (din dreapta).

Partea I - Fireworks

1.1 Pregătirea graficii

Elementele grafice sunt de obicei primele lucruri care se crează când începem să lucrăm la un sit web, deoarece influenţează aspectul global al sitului proiectat şi vom avea în vedere următoarele 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 fişierelor şi menţinerea calităţii 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 măşti şi utilitarului Dodge pentru a retuşa 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, steluţe şi linii curbe, grafica vectorială este de obicei superioară celei bitmap, deoarece grafica vectorială necesită mai puţine

date pentru reprezentarea elementului grafic (şi va duce la un fişier mai mic ca dimensiune) şi sunt mult mai uşor 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 atât de mare încât vectorii nu pot reprezenta efectiv imaginea, bitmap fiind superioară.

Fireworks dispune de două programe în unul: lucrează cu imagini vectoriale şi bitmap. Când creăm imagini în Fireworks, majoritatea vor fi vectoriale: trasăm 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 retuşa fotografiile preluate cu camera digitală şi/sau scanate în Fireworks, acestea fiind invariabile în format bitmap. Utilitarele de acest tip le găsim în Fireworks în panoul Tools la secţiunile Bitmap şi Vector (vezi Figura 1).

Pentru a crea imagini (sau elemente grafice într-o compoziţie), 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ă optimizăm imaginile pentru web, le vom exporta într-un format grafic ortat (de obicei GIF sau JPEG, care sunt formate bitmap).

sup

Sa revenim la crearea formelor din fundalul logo-ului care presupune folosirea de imagini vectoriale. În primul rând vom crea această formă de o anumită dimensiune, şi vom stabili poziţia acesteia. Ulterior le vom îmbunătăţi prin aplicarea de margini, umpleri şi texturi.