Sunteți pe pagina 1din 16

Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Laboratorul 1 : Tipuri de imagini digitale. Programe de editare grafică.


Noţiuni de bază despre spaţiul de lucru .Crearea,
deschiderea și importul imaginilor. Salvarea și exportarea
fișierelor în alte formate.

1. Ce însemana design grafic în contextul web-design ?


Procesul de design grafic este unul de creatie, este arta aranjarii textelor si a imaginilor
pentru a comunica un anumit mesaj sau pentru a facilita intelegerea unor informatii. Este
folosit in diferite elemente precum fotografii, grafica digitala, animatii, design de produse,
ambalaje, semne informative, si, evident, si in web design.
Design-ul web se refera strict la structura unei pagini (latime, inaltime, margine, etc),
pe cand designul grafic (sau grafic design)la continutul care este adaugat in aceasta
structura. Putem spune ca tot ceea ce se vede pe un site este grafica aranjata pe o structura
invizibila (cea a web design-ului).
Design-ul grafic al unei pagini web are direct scop crearea unui mediu placut si de a
face acea pagina mai atractiva, usor de navigat prin evidentiarea marginilor intr-o maniera
inedita. Aspectul estetic al unui site este direct proportional cu calitatea graficii care o
contine, adica o grafica slaba, culori sterse sau prea contrastante creeaza un site pe care
vizitatorii il resping la prima vedere pentru ca nu le insufla profesionalism si siguranta.
In viziunea noastra dintr-o pagina web nu ar trebui sa lipseasca anumite elemente grafice
si anume: logo-ul firmei respective, sloganul (daca exista), culoare de fundal potrivita cu
tematica site-ului, fotografii descriptive, fotografii informative, borduri, sageti(pentru
orientare) si alte elemente grafice minore care formeaza contextul si ii confera un sens si o
valoare.
Tipuri de imagini digitale.
Imaginea digitală constă dintr-o reprezentare bidimensională a unei imagini bazată pe
o matrice numerică, care este de obicei binară, cu unii și zerouri.
Rezoluțiile unei imagini digitale pot fi dinamic sau static și pe baza acestui principiu,
acestea sunt împărțite în două:

Imagini digitale raster sau bitmap-uri

Fiecare pixel care alcătuiește imaginea are o culoare specifică și cu cât rezoluția este mai
mare sau mai mulți pixeli, cu atât va fi mai bună calitatea imaginii.
Unul dintre cele mai utilizate programe de editare a imaginilor este
binecunoscutul Photoshop, ale căror rezultate sunt foarte bune, cu toate acestea, imaginile
raster atunci când sunt mărite își pierd claritatea, deoarece editarea programelor înlocuiește
pixelii pentru unii ireali.
Acest tip de imagini digitale este de obicei utilizat în site-uri web grafice, în fotografii
și alte ilustrații digitale, deoarece calitatea și detaliile pe care le oferă sunt importante.

1
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Imagini vectoriale

Contrar la imagini raster digitale, nu sunt compuse din pixeli, ci mai degrabă placă grafica
vectorială care depind de unele puncte de control, datorită conținutului lor de formule
matematice sunt capabili să formeze curbe între un punct și altul și atunci când este aplicat
un program de editare, acesta calculează pur și simplu formula și adaptează imaginea la
cerințele utilizatorului.

Programe de editare grafică.


Folosim multe tehnologii si softuri pentru a duce la bun sfarsit un "design" complet al unui
site, dintre ele enumeram cateva: Adobe Flash - soft ce permite realizarea de animatii,
Adobe Photoshop, Adobe Illustrator, pentru prelucrare indeosebi rastru a imaginilor si
Corel Draw pentru vectorizari si elemente grafice pregatite pentru tipar.
Cel mai utilizat program pentru crearea graficii rastru este Adobe Photoshop, program
realizat şi publicat de Adobe System.

Noţiuni de bază despre spaţiul de lucru .


Instalarea programului.
La instalarea programului trebuie luată în considerare capacitatea calculatorului, deoarece
utilizarea acestui program presupune un consum mare de resurse. În cazul în care capacitatea
calculatorului nu e suficient de mare, la utilizarea programului se poate bloca calculatorul.
Adobe Photoshop este programul folosit de multi profesionisti in tot ce tine de arta
digitala, de la pagini web, la manipulare foto si pictura digitala, fiind cel mai bun de
pe piata in acest domeniu.
Adobe Photoshop este dezvoltat initial de catre Thomas Knoll care initial la
numit Display care putea afisa imagini pe un monitor alb-negru. Imediat dupa asta Thomas
s-a aliat cu fratele sau John si au dezvoltat functiile pentru editarea imaginii. Dupa scurt timp
Adobe a fost atras de acest program si le-a propus fratiilor Knoll sa licentieze programul, ca
dupa scurt timp la data de 19 februarie 1990 adobe punea in vanzare prima versiune de
Adobe Photoshop.

2
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Softul Adobe Photoshop a fost creat de Adobe System pentru editarea imaginilor digitale,
fiind utilizat în prezent atât de către profesionişti cât şi de către utilizatori care folosesc
ocazional acest program. Programul permite folosirea unor instrumente cu ajutorul cărora se
poate ajusta focalizarea, culorile, luminozitatea, contrastul, retuşarea imaginilor degradate şi
realizarea de efecte speciale. În momentul de față există mai multe versiuni Photoshop.
Meniul de lucru este în mare parte același, existând totuși mici diferențe între versiuni.

Schimbarea iconitelor în evolutia versiunilor.

3
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Schimbarile pe care le-a avut „ecranul” de incarcare al Photoshop-ului.

4
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Schimbarile de care a avut parte paleta de instrumente.

5
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Spațiul de lucru a editorului grafic.


Spatiul de lucru include meniuri, instrumente si palete pentru vizualizarea, editarea
elementelor din imagini:
• Bara de meniu se afla în partea de sus a ecranului care conține toate funcțiile principalele
din Photoshop, cum ar fi File, Edit, Image, Layer, Select, Filter, s.a
• Panoul Instrumente contine instrumente pentru crearea si editarea imaginilor, ilustraţiilor,
elementelor din pagini etc.
• Panoul de control (Bara de opţiuni) contine optiuni pentru folosirea unei unelte.
• Fereastra Document (Zona de prezentare) afisează fisierul curent.
• Panourile (paleta de straturi) pot fi grupate, suprapuse sau andocate. Andocarea este o
colecţie de panouri sau grupuri de panouri unificate.

Interfata(Interface Layout)
6
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Bara de optiuni
Bara de
meniuri Color

Nume
imagine

Imaginea

Bara de History
instrumente

Bară de meniu
In partea de sus a ecranului se afla bara de meniu care conține toate funcțiile principalele
din Photoshop, cum ar fi File, Edit, Image, Layer, Select, Filter, s.a
Meniul FILE:
Open (Deschide)
Cu aceasta comandă, la fel ca în multe alte programe pe care le cunoașteți și utilizați, puteți
deschide în vederea editării fișiere, imagini de pe calculatorul dumneavoastră.
Close (Închide)
Cu ajutorul acestei comenzi opuse funcției Open putem să închidem documentele. Același
lucru se poate realiza și de la „X”-ul din dreapta sus, așa cum procedăm cu orice fereastră din
Windows. Dacă nu am salvat ultimile modificări vom fi întrebați dacă dorim să facem acest
lucru.
Salvarea și exportarea fișierelor în alte formate.

Save (Salvează)
Vă ajută să vă salvați compozițiile în computerul vostru. Este recomandat să faceți acest
lucru cât mai des, pentru a nu risca să pierdeți ce ați muncit din cauza unei pene de curent sau
datorită faptului că vi s-a blocat computerul. Pentru mai multă rapiditate puteți folosi
combinația de taste Ctrl + S. Prima dată când dați această comandă va trebui să specificați
numele, extensia și locul în care doriți să salvați fișierul, la fel ca în cazul comenzii Save As
de care vom vorbi imediat. După aceea, programul nu vă va mai întreba nimic, salvând pur și
simplu fişierul în locația existentă. Principalele tipuri de fișiere folosite sunt:
7
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

- .psd - formatul de fișier propriu Photoshop-ului. Este utilizat pentru editare ulterioară și
imprimare.
- .bmp (bitmap) – format de imagine specific Windows-ului, recunoscut de aproape toate
programele cu funcții grafice care rulează sub acest sistem de operare. Acest tip de imagine
este puțin utilizat în lucrul profesionist.
- .jpg, .gif, .png: sunt formate de imagine specifice web-ului, schimbului de documente,
monitorului și inserării în alte programe. Formatul jpg poate fi folosit și pentru imprimare.
- .tif și EPS: sunt utilizate pentru materiale tipărite.
Save As (Salvare ca)
Spre deosebire de Save, când folosim comanda Save As putem specifica (modifica) de
fiecare dată numele fișierului, folderul și extensia.
Save For Web (Salvare pentru web)
Această comandă salveaza imagini în scopul folosirii lor pe Internet, în principal, în
formatele jpg, gif și png. Mai este folosită, de asemenea, la convertirea Layout-ului în site-uri
(format HTML), dar despre acest lucru vom vorbi în capitolul următor – Creare de layout-uri
Web. Unul dintre cele mai importante aspecte referitoare la aceste formate de fișiere îl
reprezintă compromisul între viteza de încărcare și calitatea imaginii. Formatul .jpg nu
permite background transparent, spre deosebire de celelalte două formate.
Import (Importă) Este folosit pentru aducerea în Photoshop a documentelor PDF, scanarea
unor materiale și importul de imagini de la camere digitale.

Bara de Optiuni contine optiuni pentru folosirea unei unelte.


Imaginea Imaginea va apărea în propria sa fereastră odată ce deschideți un fișier.
Nume Imagine Numele oricărei imagini pe care le va fi deschis în partea de sus a ferestrei
de imagine așa cum se arată mai sus.
Culoare
Paleta de culori afișează culori de fundal din prim-plan și valorile RGB pentru acestea
culori. Aveți posibilitatea să utilizați cursoarele pentru a schimba culorile de fundal și de
prim-plan în diferite moduri de culoare. Putem alege, de asemenea, o culoare din spectrul de
culori afișate în rampa de culoare din partea de jos a paletei.

În paleta Swatches puteți alege un prim-plan sau de fundal de culoare și puteti adăuga
personal culoare la bibliotecă.
8
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Paleta de stiluri vă permite să vizualizați, selectați și aplicați stiluri de layer presetate. În


mod implicit, un stil prestabilit inlocuieste stilul stratului curent. Aveți posibilitatea să
utilizați stilurile din paleta sau adăugați propriul dvs. utilizând Creare Nou pictograma de stil.

History
In Paleta Istoric se stochează și se afișează fiecare acțiune efectuata permițându-vă de a sări
la orice etapă recentă Alterările trebuie să fie create în timpul sesiunii de lucru curente. După
salvare sau închiderea documentului, paleta Istoric șterge întregul conținut. De fiecare dată
când aplicați o modificare a unei imagini, noua stare a acestei imagini se adaugă la paleta.
Este important de știut că, odată ce faceți clic pe oricare din cele anterioare etape, toate
schimbările care au fost făcute vor fi pierdute ..

Adjustments. Paleta Straturile de ajustare vă oferă posibilitatea de a aplica un efect la un


grup de straturi în Photoshop, și apoi puteți modifica în acest sens mai târziu, în același timp
păstrând straturile originale.

Layers
Straturile vă permit să organizați munca în niveluri distincte, care pot fi editate și privite ca
unități individuale. Fiecare Document Photoshop CS6 conține cel puțin un strat. Crearea de
straturi multiple vă permite să controlați cu ușurință modul de afișare, și editare. Veti utiliza
paleta Straturi , de multe ori în timpul creării unui document, de aceea este esențial să se
înțeleagă ce face și cum se foloseste

9
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Bara de instrumente.Contine instrumente folositoare pentru crearea si editarea


imaginilor.
Când porniţi Photoshop, este afişat panoul Instrumente în partea stângă a ecranului.
Unele instrumente din panoul Instrumente au opţiuni care sunt afişate în barele de
opţiuni contextuale. Acestea includ instrumentele care vă permit să utilizaţi text, să
selectaţi, să pictaţi, să desenaţi, să eşantionaţi, să editaţi, să mutaţi, să adnotaţi şi să
vizualizaţi imagini. Alte instrumente vă permit să schimbaţi culorile pentru planul
frontal/fundal, să accesaţi Adobe Online şi să lucraţi în diverse moduri. Puteţi extinde
unele instrumente pentru a afişa instrumentele ascunse incluse. Un triunghi mic în
partea din dreaptajos a pictogramei instrumentului indică prezenţa instrumentelor
ascunse.

Puteţi să vizualizaţi informaţii despre oricare instrument, poziţionând cursorul


deasupra acestuia. Denumirea unui instrument este afişată sub formă de sugestie
pentru instrument sub cursor.

10
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Prezentarea generala a paletei de instrumente


Move

Folosit pentru a selecta și muta obiecte pe pagină. Faceți clic pe butonul Instrumente,
apoi faceți clic pe orice obiect de pe pagina pe care doriți să îl mutați.

Marquee
Aceste instrumente oferă posibilitatea de a selecta o porțiune din imagine folosind
instrumente cu formă preselectată: cerc, dreptunghi, etc.
Lasso tool

Selectarea unei părți din imagine prin stabilirea cu ajutorul cursorului zona care va fi
prelucrată,prin conturarea zonei cu ajutorul acestuia.
Polygonal lasso tool și Magnetic lasso tool permit selectarea unei zone pornind de la
stabilirea zonei care va fi selectată prin click de stânga, iar sfârșitul zonei prin dublu click de
stânga.Diferența dintre cele trei instrumente este modul în care se face selecția zonei dorite.

Magic Wand(Bagheta magica)

Quick selection tool și Magic Wand tool oferă posibilitatea de a selecta zona dorită
prin stabilirea mai exactă a formei dorite. Suprafața zonei selectată poate fi controlată prin
extinderea zonei de selecție sau restrângerea zonei care se poate face din meniul de sus. În
cazul în care se dorește deselectarea zonei dorite, acest lucru se face din meniul care apare
prin click dreapta (mouse), unde există opțiunea deselect sau prin comanda Ctrl+D.

Crop

Permite decuparea unei anumite zone realizând astfel un alt layer care conține doar
porțiunea selectată. La aplicarea acestei opțiuni este important luarea în calcul a calității
fotografiei. În cazul în care fotografia nu are o rezoluție bună, aplicarea opțiunii crop, va
duce la un rezultat de o calitate slabă.

Eye Dropper

Ia mostre de culori de la culorile de pe pagină și le afișează în cutii de culoare.


Selectați instrumentul, faceți clic pe culoarea din imagine pe care doriți să eșantion. Cutia
culoare va afișa această culoare.

Healing Brush(Perie de vindecare)

11
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Permit corectarea anumitor porțiuni prin utilizarea unui instrument care poate fi setat
în funcție de suprafața care se dorește a fi modificată. Stabilirea diametrului, a zonei care
urmează să fie modificată, se stabilește din meniul de sus al programului .După ce a fost
selectată dimensiunea prin click de stânga se corectează zona dorită.

Brush

Instrumentul oferă posibilitatea de a selecta fosirea creionului sau a pensulei pentru a


crea diferite elemente grafice. Din meniul de control se poate selecta dimensiunea și gradul
de opacitate. Prin click de stânga se deschide meniul din care se pot configura mai multe
tipuri de brush. Opţiunea Reset Brush oferă posibilitatea de a reveni la meniul iniţial, după
ce a fost selectat un alt tip de brush.
În cazul în care dorim, putem importa alte opțiuni de brush care pot fi preluate gratuit de pe
internet, prin opțiunea Load brushes din meniul de sus. După selectarea tipului de brush
dorit,se selectează dimensiunea și culoarea dorită. Este foarte important modul de setarea a
opțiunilor: opacity și flow, în funcție de efectul pe care dorim să îl opținem.
În cazul în care dorim să aplicăm mai multe setări tipului de brush folosid putem activa
meniul cu ajutorul tastei F5, meniu care ne permite schimbarea intensității, unghiului,
dimensiuni,distanță, etc.

Clone Stamp

Este instrumentul prin care se poate clona (copia) anumite elemente. Pentru a
realiza clonarea se selectează în prima fază instrumentul de lucru, după care se stabilește
suprafața de lucru.Pentru selectarea zonei care se dorește a fi clonată se apasă pe Alt și
click stânga, după care se clonează prin click de stânga în zona dorită.

Eraser

Permite ștergerea integrală sau parțială a diferitelor elemente. La fel ca și la Healing


brush, suprafața pe care se acționează, cât și modul în care este folosit se activează din
meniul de sus sau din meniul care se deschide prin click de dreapta.

Paint Bucket

Permite înlocuirea unei porțiuni din imagine cu o anumită culoare, după ce a fost
selectată culoarea respectivă. În cazul în care se aplică pe o pagină întreagă, e suficient un
singur click pe pagina respectivă pentru a înlocui culoarea.

Blur
12
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Opțiunea Blur este foarte importantă deoarece permite punerea în evidență a unor
elemente prin aplicarea unui efect de diminuare a vizibilității a întregii imagini sau doar a
unei porțiuni.Din meniul din stânga avem doar o singură opțiune de blur care ne permite
aplicarea unui singur tip de efect. În meniul Filter/Blur putem aplica mai multe tipuri de
blur: Gausian Blur, Lens Blur, Motion Blur, Radial Blur, etc. Fiecare opțiune de blur
permite setarea zonei pe care aplicăm opțiunea de blur cât și a intensității efectului folosit
(stabilirea unei valori pentru opțiunea de radius). Este important luarea în considerare a
calității imaginii folosite în momentul aplicării valorilor având în vedere că efectul nu poate
fi aplicat cu o intesitate mai mare dacă calitatea imaginii nu permite acest lucru.

Path Selection

Selecteaza calea și segmentele de cale

Type

Tipuri de text pe o pagină. De fiecare dată când faceți clic Type Tool pe o nouă
porțiune din pagina, va fi creat un nou strat. Selectați instrumentul de tip, faceți clic pe
pagina și să înceapă să tastați. Aveți posibilitatea să specificați fontul și dimensiunea în bara
de opțiuni. De asemenea, puteți redimensiona și transforma caseta de text prin glisând
pătrate pe laterale și la colțuri. Utilizați Move Tool pentru a muta textul pe pagină.

Pen

Atrage căi netede cu muchii.Selectați instrumentul, faceți clic pe pagina și glisați


pentru a desena o cale. Faceți clic și trageți ancora punctele pentru a modifica calea.

Line Shape

Trage o linie dreaptă. Alte forme, sunt ascunse în acest instrument : Rounded
Dreptunghi Tool, Ellipse Tool, instrument poligonal, instrumentul de linie, și Custom Shape
Tool. Selectați instrumentul, faceți clic și trageți pe pagină pentru a trage o linie.

Hand

Vă permite să se deplaseze în jurul valorii în interiorul imaginii.


Selectați instrumentul, faceți clic pe loc pe pagină, țineți apăsat butonul mouse-ului în jos,
trageți pentru a deplasa în zonă.

Magnify

13
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Mărește sau reduce afișarea orice zonă în fereastra de imagine.Selectați


instrumentul, selectați Zoom In sau Zoom Out în bara de opțiuni, faceți clic pe zona de
imaginea pe care doriți să o măriți sau să reducă.

Color Boxes

Culoarea planului frontal apare în caseta de selecție de culoare superioară și


reprezintă o culoare care este în prezent activă. Culoarea de fundal apare în caseta de jos și
reprezintă o culoare inactivă.

Crearea, deschiderea și importul imaginilor.


Începem prin deschiderea Adobe Photoshop CS6.
Pe un PC, faceți clic pe Start> Programs> Adobe> Photoshop CS6 sau faceți clic pe comanda
rapidă de pe desktop.

- Crearea paginilor noi;


Pentru a crea un nou document mergeți la meniul File – New sau apăsînd tastele CTRL+N.
Se va deschide căsuța de dialog de mai jos:

De aici puteți alege numele fișierului, dimensiunea imaginii, unitatea de măsură, rezoluția
(calitatea), codul de culoare, și tipul de background (culoare de fundal). Efectuați setările

14
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

dorite și apoi apăsați OK.

Name: numele proiectului.


Preset: Setări create pentru diverse proiecte care dorim sa le creem (presetate)
Putem face o imagine pentru web

Putem alege International Paper pentru diferite postere.

15
Disciplina:Elemente de graphică în web design Grupa:W-2021,W2022

Sau putem alege photo pentru diferite fotografii

Putem pune propriile setari:

RGB Color Această denumire vine de la inițialele culorilor Red (roșu), Green (verde) și Blue
(albastru). Orice culoare este obținută prin combinarea acestora trei. Fiecare dintre aceste
culori are o valoare numerică cuprinsă între 0 și 255. De exemplu codul pentru culoarea
neagră este R:0 G:0 B:0, iar codul pentru alb este R:255 G:255 B:255. Acest cod de culoare
se folosește pentru grafica destinată monitorului și web-ului.
CMYK Color Numele acestui cod provine de la inițialele: Cyan (o nuanță de albastru),
Magenta (o nuanță de roșu), Yellow (galben) și K (de la Black, negru). Toate culorile sunt
obținute din amestecul acestor patru culori. Fiecare dintre cele patru culori are o valoare
numerică cuprinsă între 0 şi 100. Spre exemplu, codul pentru culoarea neagră este C:0 M:0
Y:0 K:100, în timp ce codul pentru alb este C:0 M:0 Y:0 K:0. Codul de culoare CMYK este
folosit pentru tipărituri.

16

S-ar putea să vă placă și