Curs de realizare pagini Web folosind limbajul HTML

Capitolul X – Grafica Web

Dupa ce in capitolele precendente am invatat notiunile HTML de baza, vom scrie cateva cuvinte si despre grafica web. Exista mai multe posibilitati in aceasta directie, cea mai simpla fiind utilizarea unor elemente grafice (poze, desene) din colectii de grafica specializate, colectii ce se pot gasi fie pe internet, fie impreuna cu programe precum Corel Draw, Photo Draw, etc. Desigur, exista si o posibilitate mai simpla de atat – copierea unor elemente grafice din alte pagini web. Acest lucru nu este recomandat insa, in primul rand datorita faptului ca elementele grafice respective vor fi rupte din context. In plus, pentru majoritatea exista drepturi de autor, astfel incat nu pot fi utilizate fara permisiune, in mod normal.

Cel mai bun lucru de facut in aceasta directie este utilizarea unor elemente grafice ca sursa de pornire si prelucrarea acestora intr-un program specializat de tipul Adobe Photoshop. Acesta este un program excelent pentru grafica web ce permite diverse prelucrari ale pozelor si desenelor precum si crearea de la zero a unor elemente de grafica pentru pagina ta. Vom prezenta o serie de operatiuni de baza ce se pot aplica unei poze incarcate in Photoshop. Mai intai, mergi in Image/Mode si selecteaza RGB Color, daca acest mod nu este deja selectat. Sa incepem: modifcarea dimensiunilor unei poze prin marire/micsorare – Image/Image Size, modificarea dimensiunilor prin taiere/completare – Image/Canvas Size, rotire imagine – Image/Rotate Canvas. Photoshop prezinta si o serie de unelte pentru completari/retusari ale imaginii (pencil, eraser, blur, paint bucket, etc). De asemenea, vei dori sa utilizezi si diversele filtre disponibile in meniul Filter – unele dintre ele sunt foarte reusite (nu uita sa setezi modul RGB pentru imagine inainte de folosirea filtrelor).

O operatiune destul de simpla in Photoshop este crearea de texte pentru butoane, titluri, etc. Deschide un fisier nou (File/New) si selecteaza unealta Text din toolbar (cea cu un “T”). Fa click oriunde in imaginea ta – se va deschide o fereastra noua unde vei putea scrie textul dorit si stabili parametrii acestuia (font, dimensiune, culoare, etc). Pentru efecte aplicate textelor deschide fereastra Layers (Window/Show Layers, daca aceasta nu exista deja pe ecran), fa click cu butonul din dreapta pe Layer-ul (nivelul) care contine textul scris de tine, selecteaza Effects si testeaza diversele efecte disponibile. La sfarsit, selecteaza din Toolbar unealta din stanga sus (in forma de patrat cu linii punctate), incadreaza textul scris de tine cu ajutorul acesteia si mergi la Image/Crop pentru a dimensiunea in mod exact fisierul.

Dupa ce ai terminat cu prelucrarile, salveaza fisierul tau in formatul gif (File/Export/Gif 89A Export) sau jpg (File/Save a Copy). Fisierele gif au o calitate mai buna, dar dimensiuni mai mari; fisierele jpg sunt mai mici ca dimensiune, dar de o calitate mai slaba (nu mereu, insa). De regula, pe internet se folosesc fisiere jpg, dar noi recomandam fisiere gif pentru elementele de dimensiuni reduse, pentru o calitate mai buna.
Desigur, Photoshop prezinta mult mai multe facilitati si optiuni. Ca sa nu mai vorbim de alte programe de prelucrare grafica – sunt destule.

Un alt aspect ce trebuie precizat in legatura cu grafica web este transparenta. Un element grafic (precum textul “verde.ro” de mai sus) are un fond de anumita culoare (in cazul de mai sus alb). In situatia in care avem pe pagina internet un fundal de o alta culoare sau un fundal reprezentand o poza, atunci textul nostru nu mai arata asa bine. In acest caz vom folosi un fond transparent.
In Photoshop, poti crea o imagine cu fond transparent selectand Transparent in campul Contents din fereastra New File (File/New).

Poate ai vazut pe alte pagini internet mici animatii si te-ai intrebat cum sunt realizate. Acestea sunt de fapt fisiere gif animate create cu aplicatii specializate. De regula, vei avea pregatite toate imaginile din care vrei sa creezi animatia si le vei introduce intr-o asemenea aplicatie. In fisierul HTML nu vei scrie nimic special pentru gif-uri animate; acestea vor fi decodificate de catre browser din tag-ul <IMG SRC=nume.gif>.

Leave a Reply