Sunteți pe pagina 1din 68

Modul 4:Curs de grafic Adobe

Photoshop i CorelDRAW

e-LIFE
CENTRU VIRTUAL DE
E-LEARNING PENTRU
PERSOANE CU DIZABILITI
FIZICE

2011-1-RO1-LEO05-15322

Acest proiect este finanat cu sprijinul


Comisiei Europene. Aceasta publicaie
reflect doar punctul de vedere al
autorilor i Comisia nu poate fi fcut
responsabil n niciun fel n legtur cu
informaiile cuprinse n aceasta.
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

CUPRINS

1. DESCRIEREA MODULULUI ............................................................ 3


2. INTRODUCERE ............................................................................. 5
3. DESIGN GRAFIC ........................................................................... 6
3.1. Meniuri Adobe Photoshop ......................................................................... 6
3.1.1. File .......................................................................................................... 6
3.1.2. Edit ....................................................................................................... 12
3.1.3. Image .................................................................................................... 14
3.1.4. Layer ..................................................................................................... 17
3.1.5. Select .................................................................................................... 22
3.1.6. Filter ...................................................................................................... 24
3.1.7. View ...................................................................................................... 32
3.1.8. Window .................................................................................................. 33
3.1.9. Help....................................................................................................... 33
3.2. Panoul de instrumente Adobe Photoshop .................................................. 35
3.2.1. Crop ...................................................................................................... 35
3.2.2. Rectangular Marque Tool .......................................................................... 36
3.2.3. Eliptical Marque Tool ................................................................................ 37
3.2.4. Lasso Tool .............................................................................................. 38
3.2.5. Slice Tool ............................................................................................... 40
3.2.6. Brush Tool i Pencil Tool ........................................................................... 41
3.2.7. Clone Stamp Tool .................................................................................... 41
3.2.8. Gradient Tool i Paint Bucket Tool.............................................................. 42
3.2.9. Blur Tool ................................................................................................ 44
3.2.10. Type Tool ............................................................................................... 45
3.2.11. Eyedropper Tool ...................................................................................... 48
3.2.13. Hand Tool ............................................................................................... 48
3.2.14. Zoom Tool .............................................................................................. 49
3.2.15. Foreground Color i Background Color ........................................................ 49
3.3. Lista shortcut-urilor de tastatur Adobe Photoshop CS6 ............................. 50
3.4. Cte ceva despre CorelDRAW .................................................................. 53
3.5. Lista shortcut-urilor de tastatur CorelDRAW X6 ........................................ 53
4. CREAREA DE LAYOUT-URI WEB .................................................. 59
4.1. Crearea de layout-uri web cu Adobe Photoshop .......................................... 59
4.2. Crearea de layout-uri web cu CorelDRAW ................................................. 64

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
2/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

1. DESCRIEREA MODULULUI

TITLUL MODULULUI Design Grafic Adobe Photoshop i CorelDRAW

COD VAT4

CUVINTE CHEIE Design grafic, layot-uri pentru web, munc virtual,


grafic rastru.

GRUP INT Grupul int al acestui modul sunt persoane cu


dizabiliti fizice care sunt n cutare de oportuniti
pentru a intra sau a se menine pe piaa muncii
virtuale.

NIVEL intermediar

OPORTUNITI DE Contractori independeni foarte pricepui care pot


CARIER crea layout-uri pentru pagini web, grafic pentru
reclame, etc.

Acest modul ofer n mod practic participanilor


SCOPUL MODULULUI cunotine comprehensive despre cum s ncepi s
creezi cu succes grafic publicitar i layout-uri
pentru site-uri web. Ei vor nva cele necesare
pentru crearea unei cariere de succes prin punerea
la dispoziie a cunotinelor i resurselor necesare
de design grafic.

Dup parcurgerea cu succes a acestui modul


REZULTATELE participanii vor nva cum s devina designeri
grafici.
NVRII

CUNOTINE Utilizarea TIC la un nivel de baz.


ANTERIOARE
NECESARE

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
3/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

CURSURI nu
ANTERIOARE
NECESARE

NUMR ESTIMATIV 44 de ore


DE ORE NECESARE

COMPETENE Dezvoltarea i implementarea proceselor i


procedurilor eficiente de munc.

CHESTIONAR Chestionarele vor constitui teste cu mai multe


variante de rspuns. Fiecare test va consta din nite
ntrebri cu mai multe variante de rspuns care vor
sonda cunotinele candidailor i gradul de nsuire
a noiunilor predate.

CATEGORII Costuri (optimizarea costurilor)


Timp (management eficient al timpului)
s-Calitate (servicii de calitate)
m-Calitate (managementul calitii)

MATERIALE nu
SUPLIMENTARE

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
4/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

2. INTRODUCERE

Exist dou mari tipuri de grafic: grafic vectorial i grafic rastru.


Imaginile vectoriale sunt fcute din mii de linii i curbe (sau ci) foarte mici; imaginile rastru
sunt fcute din pixeli.

Grafica vectorial este folosit n principal pentru realizarea de desene, logo-uri, desene
tehnice, layout-uri pentru site-uri web, etc.
Unul din marile avantaje ale imaginilor vectoriale este c se poate mri imaginea orict de
mult am dori fr a se pierde calitatea (rezoluia).
Unul dintre cele mai folosite programe pentru realizarea acestui tip de grafic este CorelDRAW,
program realizat i publicat de ctre Corel Corporation.

Grafica rastru este folosit pentru design grafic, web design, retuare fotografii, etc.
Imaginile rastru sunt cunoscute i ca imagini bitmap, datorit pixelilor. Spre deosebire de
grafica vectorial, atunci cnd se mrete o imagine rastru, rezoluia se micoreaz i se pot
vedea pixelii.
Cel mai utilizat program pentru crearea graficii rastru este Adobe Photoshop, program realizat
i publicat de Adobe System.

Acest curs nu se dorete a fi unul exhaustiv, n care s fie explicate absolute toate opiunile
Photoshop-ului sau CorelDRAW-ului, ci unul care s v nvee cele mai importante noiuni pe
care un profesionist n design grafic i web design le folosete n munca sa.
La sfritul acestui modul vei fi n stare s realizai lucrri cu care nici unui specialist nu i-ar fi
ruine s se mndreasc, i pe care orice firm i-ar dori s le cumpere i s le utilizeze.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
5/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3. DESIGN GRAFIC

3.1. Meniuri Adobe Photoshop

3.1.1. File

New (Nou)

Pentru a crea un nou document mergei la meniul File New. Vi se va deschide csua de
dialog de mai jos:

De aici putei alege numele fiierului, dimensiunea imaginii, unitatea de msur, rezoluia
(calitatea), codul de culoare, i tipul de background (culoare de fundal). Efectuai setrile
dorite i apoi apsai OK.

Open (Deschide)

Cu aceasta comand, la fel ca n multe alte programe pe care le cunoatei i utilizai, putei
deschide n vederea editrii fiiere, imagini de pe calculatorul dumneavoastr.

Close (nchide)

Cu ajutorul acestei comenzi opuse funciei Open putem s nchidem documentele. Acelai lucru
se poate realiza i de la X-ul din dreapta sus, aa cum procedm cu orice fereastr din
Windows. Dac nu am salvat ultimile modificri vom fi ntrebai dac dorim s facem acest
lucru.
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
6/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Save (Salveaz)

V ajut s v salvai compoziiile n computerul vostru. Este recomandat s facei acest lucru
ct mai des, pentru a nu risca s pierdei ce ai muncit din cauza unei pene de curent sau
datorit faptului c vi s-a blocat computerul.
Pentru mai mult rapiditate putei folosi combinaia de taste Ctrl + S. Prima dat cnd dai
aceast comand va trebui s specificai numele, extensia i locul n care dorii s salvai
fiierul, la fel ca n cazul comenzii Save As de care vom vorbi imediat. Dup aceea, programul
nu v va mai ntreba nimic, salvnd pur i simplu fiierul n locaia existent.
Principalele tipuri de fiiere folosite sunt:
- .psd - formatul de fiier propriu Photoshop-ului. Este utilizat pentru editare ulterioar i
imprimare.
- .bmp (bitmap) format de imagine specific Windows-ului, recunoscut de aproape toate
programele cu funcii grafice care ruleaz sub acest sistem de operare. Acest tip de
imagine este puin utilizat n lucrul profesionist.
- .jpg, .gif, .png: sunt formate de imagine specifice web-ului, schimbului de documente,
monitorului i inserrii n alte programe. Formatul jpg poate fi folosit i pentru
imprimare.
- .tif i EPS: sunt utilizate pentru materiale tiprite.

Save As (Salvare ca)

Spre deosebire de Save, cnd folosim comanda Save As putem specifica (modifica) de fiecare
dat numele fiierului, 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 urmtor Creare de layout-uri Web.
Unul dintre cele mai importante aspecte referitoare la aceste formate de fiiere l reprezint
compromisul ntre viteza de ncrcare 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.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
7/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Automate (Automatizare)

Una dintre cele mai utilizate opiuni din acest sub-meniu este opiunea Web Photo Gallery.
Acesta este un instrument excelent pentru a crea rapid Albume Foto pentru site-uri, atractive
i uor de navigat.

S analizm acum cele mai importante TAB-uri ale acestei ferestre.

Styles (Stiluri)

De aici alegem Layout-ul pentru galerie.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
8/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Folders (Dosare)

Browse (Cutare)

Alegerea Folderului care conine imaginile din care va fi compus galeria.

Destination (Destinaia)

Specificarea Folder-ului n care vom crea galeria.

Options (Opiuni)

De aici selectm dimensiunile imaginilor.

Informaii despre Galerie

Specificarea denumirii site-ului, numelui fotografului, informaiilor de contact (e-mail, telefon


...), datei, tipului de font folosit i a mrimii acestuia.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
9/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Print (Imprimare)

La fel ca i n alte programe pe care le cunoatei i utilizai, cu ajutorul acestei comenzi


trimitei ctre imprimant lucrarea voastr.

Name (Nume)

Selectarea imprimantei.

Properties (Proprieti)

Machet pagin

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
10/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Alegerea numrului de exemplare, orientarea hrtiei Portret sau Landscape, etc.

Hrtie

Dimensiunea hrtiei (A4, A5 ...), scalarea automat a imaginii n raport cu dimensiunile hrtiei,
selectarea tvii (Tray 1, Tray 2), specificarea tipului de hrtie (normal, carton, ...).

Calitate tiprire

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
11/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Rezoluia nseamn calitatea imaginii. Cu ct rezoluia este mai mare cu att i calitatea
imaginii va fi mai mare.

Tiprirea alb/negru sau n tonuri de gri se folosete pentru a economisi tonnerul imprimantei.

3.1.2. Edit

Undo / Redo (Anulare/Revenire)

La fel ca n marea majoritate a programelor, comanda Undo anuleaz ultima operaie, iar Redo
este inversul su i ne permite s revenim asupra acelei operaii. Spre deosebire de celelalte
programe, n Adobe Photoshop aceste comenzi se pot aplica doar pentru o singur operaie.
Pentru a reveni cu mai multe operaii n urm sau a merge nainte, trebuie s folosim Panoul
History i s dm clic pe operaia la care dorim s revenim. Panourile apar n partea dreapt a
spaiului de lucru din Photoshop i pot fi activate sau dezactivate din meniul Window. Vom mai
vorbi despre acestea n cursul de fa.

Cut (Taie)

Copiaz n memorie i terge poriunea selectat din Layer-ul curent.

Copy (Copiaz)

Copiaz n memorie poriunea selectat din Layer-ul curent, dar fr a o terge, aa cum
procedeaz comanda Cut.

Paste (Lipete)

Copiaz (lipete) pe Layer acea poriune selectat din Layer-ul curent care a fost copiat n
memorie cu comenzile Cut sau Copy.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
12/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Clear (tergere)

terge poriunea selectat din Layer-ul curent. Alternativ se poate folosi i tasta Delete.

Fill (Umple)

Umple porinea selectat din Layerul curent cu culoarea principal, culoarea de fundal, sau cu
un Pattern (Textur).

Stroke (Margine)

Creaz o margine poriunii selectate din Layer-ul curent. Cei mai importani parametri ai
marginii pe care i putem seta sunt: grosimea, culoarea i locaia (n interior, n centru sau n
afar).

Free Transform

Cu ajutorul acestei comenzi putem scala i/sau roti poriunea selectat din Layer-ul curent.
Dup ce am dat aceast comand, observm c ne apar opt puncte de marcaj (control), patru
n colurile dreptunghiului, iar patru n mijloacele laturilor.
Tragnd de coluri cu butonul stng al mouse-ului apsat, putem modifica att limea ct i
lungimea.
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
13/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dac vrem s scalm imaginea proporional, fr a o deforma, trebuie s inem apsat tasta
Shift.
Trgnd cu Mouse-ul de mijloacele laturilor modificm doar o dimensiune.
Dac vrem s rotim selecia, poziionm cursorul n exteriorul unui punct i aproape de el. Ne
apare o mic curb cu sgei la ambele capete. Apoi tragem cu mouse-ul de ea spre stnga
sau spre dreapta.

Transform

Scale Am vorbit mai sus.

Rotate Am explicat la Free Transform.

Skew Deformeaz selecia de pe Layer-ul curent sub form de paralelogram orizontal sau
vertical.

Distort putem deforma imaginea tragnd cu Mouse-ul de oricare din cele opt puncte.

Perspective schimb unghiul din care este privit imaginea, prin tragerea cu Mouse-ul de
oricare dintre cele opt puncte.

Rotate 180 rotete imaginea cu 180 de grade.

Rotate 90 CW rotete imaginea cu 90 de grade n sensul acelor de ceasornic.

Rotate 90 CCW rotete imaginea cu 90 de grade n sens antiorar (trigonometric).

Flip Horizontal imaginea privit n oglind pe orizontal.

Flip Vertical imaginea privit n oglind pe vertical.

3.1.3. Image

Mode
Se refer la codurile de culoare (modul n care vrem s formm culorile) folosite pentru o
imagine. Codul de culoare se alege n primul rnd, n funcie de mediul n care dorim s folosim
imaginea: monitor, Internet sau tipar.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
14/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Grayscale
Transform imaginea n tonuri de gri.
Cnd dm orice subcomand din sub-meniul Mode, vom fi ntrebai dac dorim s pstrm
Layerele (Dont Flatten) sau nu (Flatten). Layerele (straturile) reprezint unul dintre cele mai
importante concepte din programul Adobe Photosop, ele permindu-ne s manipulm separat
diferite elemente ale imaginii. Vom vorbi depre ele la meniul urmtor. Vom alege tot timpul
opiunea: Dont Flatten.

RGB Color

Aceast denumire vine de la iniialele culorilor Red (rou), Green (verde) i Blue (albastru).
Orice culoare este obinut 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 folosete
pentru grafica destinat monitorului i web-ului.

CMYK Color

Numele acestui cod provine de la iniialele: Cyan (o nuan de albastru), Magenta (o nuan de
rou), Yellow (galben) i K (de la Black, negru). Toate culorile sunt obinute 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 tiprituri.

Adjustments (Ajustri)

Curves
De aici putem controla nuanele de culoare ale imaginii trgnd cu Mouse-ul de punctul
predefinit din mijlocul diagonalei. Dac dorim s crem puncte de control suplimentare nu
avem dect s dm dublu clic n locul n care vrem s apar acestea. Putem, de asemenea, s
lucrm separat pe canalele de culoare, Red Green Blue n cazul RGB-ului, selectndu-le din
partea de sus a Casetei de Dialog. Dup ce suntem mulumii de rezultat, apsm pe OK sau
pe Cancel dac dorim s anulm modificrile.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
15/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Brightness/Contrast

Modificarea Luminozitii (Brightness) i a Contrastului (Contrast) se face trgnd cu Mouse-ul


de cursoarele care se gsesc iniial la mijlocul Scalei. Trgnd spre stnga le diminum, iar
spre dreapta le mrim. Pstrm bifat csua Preview pentru a previzualiza modificrile.

Auto Contrast

Optimizarea Contrastului se realizeaz automat.

Duplicate

Creaz o copie a imaginii ntr-o fereastra nou.

Image Size

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
16/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dac considerm c nu am ales bine dimensiunile, unitile de msur i rezoluia imaginii,


atunci cnd am creat fiierul, le putem schimba cu ajutorul acestei comenzi.

Canavas Size

De regul, aceast comand se folosete atunci cnd dorim s mrim dimensiunile spaiului n
care se gsete imaginea, lsnd neschimbate dimensiunile acesteia, pentru a aduga nite
elemente noi. Aceast mrire se poate realiza pe una dintre cele 9 direcii (inclusiv centrul)
indicate n caseta din partea de jos (Anchor).

Rotate Canavas

Realizeaz o parte dintre operaiile despre care am vorbit la Edit Transform.

3.1.4. Layer

Aa cum am vorbit i mai sus, Layerele (Straturile) sunt nite elemente de baz ale
programului de grafic Adobe Photoshop, pentru c prin intermediul lor putem controla separat
elementele imaginii, prin plasarea lor pe straturi diferite.
Pentru ilustrarea operaiilor legate de layere s crem dou astfel de straturi: Castelul Pele i
o ap. S mergem n acest scop pe motorul de cutare Google Imagini, unde introducem n
csua de cutare Castelul Pele, alegem i deschidem o imagine i apoi dm clic dreapta cu
Mouse-ul Copy. Dup aceea deschidem Photoshopul i tastm Ctrl + N (File New) i Ctrl +
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
17/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

V (Paste) pentru a lipi imaginea. n Panoul Layers, pe care l punem activa sau dezactiva din
Meniul Window, dm dublu clic pe Layer 1, scriem Castelul Pele i apsm tasta Enter.
Revenim in Google, cutm un ocean, deschidem imaginea i dm clic dreapta Copy pentru a
o copia, apoi revenim n Photoshop i tastm Ctrl + V n imaginea cu castelul pentru a copia
(lipi) oceanul. Dm din nou dublu clic pe Layer 1, tiprim ocean i apsm tasta Enter.
Observm c se vede doar ultima imagine, cea cu oceanul, deoarece Layer-ul pe care este
plasat se afl deasupra Layer-ului cu Castelul. Dac dorim s se vad cel din urm, tragem cu
Mouse-ul Layerul lui deaspra celuilalt, n Panoul Layers.

New (Nou)

Layer

Creaz un Layer nou care este denumit automat Layer 1. Aa cum am artat i mai sus i se
poate schimba numele dnd dublu click cu Mouse-ul pe el.
Acelai efect se poate obine i apsnd pe penultima pictogram din partea de jos a Panoului
Layers.

Background from Layer

Aceast comand transform Layer-ul implicit, numit Background, n Layer 0. Are avantajul c
fundalul imaginii poate fi transparent. Pentru a face asta alegei comanda Select All, sau Ctrl +
A i apoi apsm tasta Delete.
Acelai lucru se poate realiza i trgnd cu Mouse-ul Background-ul sau Layer-ul 0 n coul de
gunoi al Panoului Layers. O ilustrare a valorii practice a acestui lucru o reprezint imaginile de
mai jos, cu Background i fr (cu fundal transparent).

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
18/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Layer Set

Aceast comand creaz n Panoul Layers un Folder n care Layerele pot fi grupate n funcie
de tematic, pentru a putea fi manipulate mai uor. Acest lucru este util n cazul imaginilor
complexe, unde lucrm cu un numr mare de Layere (straturi). n mod implicit, Folderul
pentru Layere este denumit Set 1, dar acest nume se poate schimba att la creare ct i dup
aceea, prin dublu clic.
Pentru exemplificare, s tragem cu Mouse-ul Layer-ul Ocean n Set 1. Panoul Layers va arta
n acest moment ca n imaginea de mai jos:

Pentru a reveni, nu avem dect s facem operaia invers, trgnd Layer-ul napoi n fereastra
principal a Panoului. Folderul (Set-ul) se poate nchide i deschide ca orice Manager de Fiiere
din Windows, prin clic pe sgeata din dreptul su. Dac nu mai avem nevoie de el, cum este n
cazul de fa, putem trage Folderul n coul de gunoi al Panoului.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
19/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Duplicate Layer

Creeaz o copie a Layer-ului curent.

Delete

terge Layer-ul selectat.

Layer Style

Permite crearea de efecte pentru Layere. Acest sub-meniu este mai uor de folosit dac dm
dublu clic n Panoul Layers pe pictograma sau poriunea goal i albastr a Layer-ului dorit. Ni
se va afia urmtoarea fereastr:

Cele mai folosite efecte sunt: Drop Shadow, Inner Shadow, Outer Glow, Inner Glow, Bevel and
Emboss, Satin i Stroke. V propunem s v jucai cu fiecare dintre aceste efecte i s
observai rezultatele.

Aa cum am discutat mai sus, dac un Layer se afl sub un alt Layer, cel dinti nu se vede, n
mod normal. Pentru ca acesta s nceap s devin vizibil trebuie s schimbm opacitatea
Layer-ului de deasupra. Putem face acest lucru din partea dreapta-sus a Panoului Layers. Iat
cum va arta imaginea pentru o opacitate de 50% a Layer-ului Castelul Pele:
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
20/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dac vrem s manipulm mpreun mai multe Layere, dm clic pe unul dintre ele n Panoul
Layer, i apoi dm clic n a doua caset din stnga a Layer-ului cu care dorim s l legm. n
acea caset va aprea un lan care indic acest lucru.

Dac vrem s rupem aceast legtur dm din nou clic pe caseta cu lanul.

Prima caset din stnga Layerelor, cea cu ochiul, indic faptul dac Layerul este vizibil sau nu.
Acest lucru se poate activa i/sau dezactiva prin clic cu Mouse-ul.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
21/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Merge Linked

Face un singur Layer din Layerele legate.

Merge Visible

Face un singur Layer din Layerele vizibile.

Flatten Image

Face din toate Layerele unul singur.

3.1.5. Select

All

Sau Ctrl + A. Selecteaz coninutul Layer-ului curent.

Deselect

Anuleaz selecia.

Reselect

Restabilete selecia.

Inverse

Inverseaz zona selectat.

Feather

ndulcete marginea seleciei, astfel nct aceasta s nu apar pixelat (zimat) n cazul
unui decupaj. Cu ct introducem n caseta de dialog pentru Feather o valoare mai mare, cu
att marginea va fi mai estompat. n cele mai multe cazuri, valorile utilizate sunt 1 sau 2.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
22/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Modify

Border

i creeaz seleciei o margine de o grosime pe care o alegem noi. Prin umplerea cu culoare,
vom obine ceva asemntor imaginii de mai jos:

Expand

Extinde zona selectat cu numrul de pixeli introdus de noi.

Contract

Micoreaz zona selectat cu numrul de pixeli pe care l introducem.

Transform Selection

Modific lungimea i limea zonei selectate, fr a afecta n nici un fel imaginea. Dup ce dm
aceasta comand, pe ecran ne apar opt puncte de control, patru n coluri i patru n mijloacele
laturilor. Trgnd cu butonul stng al Mouse-ului apsat din coluri, putem modifica att
lungimea ct i limea. Dac dorim s nu deformm selecia, trebuie s inem apsat tasta
Shift. Trgnd cu Mouse-ul din mijlocul laturilor, modificm doar lungimea sau doar limea.
Dac poziionm cursorul Mouse-ului n dreptul unui punct de control i n exteriorul su,
observm c Pointer-ul se transform ntr-o mic curb cu sgei la ambele capete. Acum
putem roti selecia trgnd cu Mouse-ul n direcia dorit.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
23/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.1.6. Filter

Acest meniu ne permite s adugm compoziiilor noastre efecte care de care mai
spectaculoase. V recomandm s ncercai toate aceste filtre pe imaginea cu castelul, sau pe
o imagine care v place foarte mult. Noi o s prezentm n cele ce urmeaz doar cele mai
importante astfel de efecte.

Artistic

Poster Edges

Imaginea arat ca o litografie.

Blur

Filtrele din aceast categorie produc o nceoare a imaginii. Cel mai des utilizat este Gaussian
Blur.

Gaussian Blur

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
24/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Distort

Diffuse Glow

D imaginii o strlucire difuz.

Noise

Add Noise

Adaug zgomot imaginii. Aceasta devine pixelat.

Despeckle

Este comanda invers comenzii Add Noise. Ea scoate zgomotul din imagine.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
25/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dust & Scraches

Este folosit n special pentru retuarea fotografiilor vechi, prfuite i zgriate.

nainte

Dup

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
26/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Median

Este oarecum similar comenzii Despeckle, dar are un control mai fin.

nainte

Dup

Render

Difference Clouds

Pri ale imaginii sunt inversate ntr-un fel de nor.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
27/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Lens Flare

Simuleaz refracii cauzate de strluciri de lumini ntr-o lentil.

Lighting Effects

Efecte de iluminare cu diferite efecte de lumin.

Sharpen

Sharpen More

Scoate n eviden imaginea.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
28/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Stilyze

Diffuse

Face ca imaginea s fie neclar.

Emboss

Face imaginea s semene cu o schi sau cu o litografie.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
29/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Glowing Edges

Confer imaginii un aspect psihedelic.

Solarize

Egalizeaz i inverseaz culorile unei imagini.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
30/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Tiles

Adaug imaginii un caroiaj artistic.

Trace Contour

Transform imaginea ntr-o schi.

Texture

Texturizer

Aplic o textur selectat sau creat ntr-o imagine.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
31/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.1.7. View

Zoom In (Ctrl+) / Zoom Out (Ctrl-)

Mrete / micoreaz scara la care este vzut imaginea, fr a i modifica ns acesteia


dimensiunea real.

Rulers

Prin bifarea sau debifarea acestei csue se activeaz sau se dezactiveaz vizibilitatea riglelor
(gradaiilor) de pe marginea ferestrei care conine imaginea. Cu ajutorul acestor rigle putem
adauga linii imaginabile de ghidaj care permit alinierea diferitor elemente ale imaginii, dup
cum se poate vedea n imaginea de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
32/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.1.8. Window

De aici putei bifa sau debifa o serie de panouri de control i de instrumente, care reprezint
nite elemente deosebit de importante i de utile ale programului Adobe Photoshop.
Pe cele mai importante dintre ele le gsii bifate n imaginea de mai sus. Am vorbit deja despre
o parte dintre ele, despre restul vom vorbi n seciunile care urmeaz.

3.1.9. Help

Ca n orice program, cu ajutorul meniului Photoshop putem afla rspunsuri la ntrebrile


noastre.
Din acest sub-meniu vom folosi Photoshop Help (F1).
n partea de sus a ferestrei de Browser care se deschide bifm ultimul tab din stnga, Search.
Apoi scriem un cuvnt cheie sau mai multe n csua de dedesubt i apsm Search.
n partea dreapta va aprea rspunsul la ntrebarea noastr.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
33/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
34/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2. Panoul de instrumente Adobe Photoshop

Pentru a nva, ntr-un mod plcut, instrumentele pe care le pune la dispoziie programul
Adobe Photoshop, v propunem s importm o imagine de pe internet i s ncepem s ne
jucm cu ea. Spre exemplu, cutm pe Google imagini dup cuvntul familie. Putem alege
imaginea de mai jos, dm clic dreapta pe ea i o salvm n computer. Apoi dm File Open n
Photoshop.

3.2.1. Crop

Dac dorim s separm aceasta fotografie n dou vom folosi instrumentul Crop din panoul de
instrumente:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
35/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dm clic pe Crop i apoi poziionm mouse-ul n partea de sus a fotografiei. inem apsat
butonul stng i tragem n diagonal pn n partea de mijloc-jos a imaginii i apoi eliberm
butonul stng al mouse-ului. Dm dublu clic undeva n interiorul seleciei i obinem imaginea
dorit:

3.2.2. Rectangular marquee tool

Este utilizat pentru realizarea seleciilor dreptunghiulare. Haidei s realizm o astfel de


selecie n partea de jos a fotografiei, tind umbrele. Selectm Rectangular Tool din panoul de
instrumente. Tragei-l n partea de jos a imaginii, innd apsat butonul stng al mouse-ului i
tragei de la stnga la dreapta pn acoperii zona umbrelor. Apoi lsai mouse-ul i apsai
tasta Delete. Am obinut urmtoarea imagine:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
36/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.3. Elliptical marquee tool

Pentru a selecta acest instrument inem mouse-ul apsat pe tool-ul seleciilor i ne apare o
csu din care putem selecta tipul dorit.

Selectm din stnga sus n dreapta jos. Dac dorim ca selecia s fie un cerc inem apsat
tasta Shift. Mergem la meniul Select i selectm din list opiunea Inverse. Apsm tasta
Delete, apoi mergem din nou la Select i alegem Deselect. Imaginea va arta astfel:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
37/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Dac dorim ca imaginea sa aib un contur, nainte de a apsa Deselect, dm din nou Select
Inverse i apoi mergem la meniul Edit i selectm Stroke.

Cele mai importante setri sunt grosimea conturului, culoarea i locaia, dup cum am discutat
n Seciunea anterioar. Facem setrile dorite i apoi apsm butonul OK, dm Select
Deselect, i obinem un rezultat asemntor cu imaginea de mai jos:

3.2.4. Lasso Tool

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
38/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Exist trei tipuri de Lasso Tool: Lasso Tool (freehand), Polygonal Lasso Tool i Magnetic Lasso
Tool. Cel mai precis i cel mai folosit pentru selecii fine este instrumentul Polygonal Lasso.
Haidei s l folosim pentru a decupa mmica din imaginea noastr de familie. Pentru a vedea
mai bine apsm combinaia de taste Ctrl +. Dm clicuri ct mai apropriate, tot timpul n
interiorul mmicii i niciodat n exteriorul ei. Plecm dintr-un punct, de exemplu din centrul
capului, i ne ntoarcem tot acolo. Atunci se cheam c am nchis selecia. Dm Select
Inverse i apoi apsm tasta Delete. Decupm n jurul mmicii i obinem un rezultat
asemntor cu cel de mai jos:

Atunci cnd culoarea de fundal este una uniform, sau aproape uniform, ca n cazul de mai
sus, Magic Wand Tool este un excelent instrument de selecie.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
39/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Un parametru important al acestui instrument este Tolerana (Tolerance). La o Toleran zero


se selecteaz numai o singur nuan de culoare. Cu ct Tolerana este mai mare, cu att sunt
selectate mai multe nuane. Un alt parametru important este Anti-aliased. Dac acesta este
selectat avem de a face cu o ndulcire a seleciei care previne zimuirea marginilor.
Selecia poate fi mutat cu Mouse-ul atunci cnd este selectat un instrument de selecie n
Panoul cu Instrumente (Toolbox).
Pentru a muta obiectul selectat folosim Move Tool.

3.2.5. Slice Tool

Despre acest instrument o s vorbim n Capitolul Crearea de layout-uri web.


Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
40/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.6. Brush Tool and Pencil Tool

Pensula i creionul sunt folosite pentru a desena cu mna liber. Cel mai important parametru
este grosimea liniei - Brush.

3.2.7. Clone Stamp Tool

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
41/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Este folosit n principal la returi fine. ine-i apsat tasta Alt i apoi dai clic pe poriunea
din fotografie pe care vrem s o clonm. Apoi se d clic pe poriunea din imagine unde dorim
s lipim clonarea. Cel mai important parametru este dimensiunea clonrii Brush.

3.2.8. Gradient Tool and Paint Bucket Tool

Aceste instrumente sunt folosite pentru a umple cu culoare o selecie.

Gradientul reprezint tranziia treptat de la o culoare la alta. Putem folosi mai multe culori.
S efectum o selecie dreptunghiular folosind Rectangular Marquee Tool. Dm clic pe
Gradient Tool. n bara de sus cu proprietile acestui instrument dm clic pe bara de culoare.
Obinem urmtoarea csu de dialog:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
42/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Din partea de sus putem alege un model prestabilit, sau putem particulariza gradientul din
partea de jos, dnd clic pe cursoarele de dedesubt, pentru a seta culoarea, sau ntr-un punct al
barei de culoare, pentru a aduga o culoare suplimentar. Apoi tragem cu Mouse-ul dintr-o
parte n alta a imaginii, pe direcia dorit. Vom obine un rezultat asemntor cu cel din figura
de mai jos:

Paint Bucket Tool umple suprafaa selectat cu o culoare uniform. Aceast culoare se
selecteaz din Panoul de Culori despre care am vorbit la nceputul acestui Capitol. Pentru un
control mai fin al nuanei se d clic pe Foreground Colour din Panoul de Instrumente.

Dup ce am ales culoarea dorit dm din nou clic pe Paint Bucket Tool i apoi pe suprafaa
selectat. Vom obine un rezultat asemntor cu cel din imaginea de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
43/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.9. Blur Tool

Se folosete pentru a nceoa o poriune dintr-o imagine, de exemplu un chip care nu dorim
s fie recunoscut.

Cel mai important parametru este dimensiunea instrumentului Brush. S cutm pe Internet
poza unei vedete favorite, dm clic dreapta pe aceasta i apsm Copy. Revenim n Photoshop,
File-New sau Ctrl+N, setm parametrii dorii i apsm OK. Apoi dm Edit Paste sau Ctrl+V
pentru a lipi poza. Cu instrumentul Blur Tool selectat, blurm zona dorit. Vom obine un
rezultat asemntor cu cel din imaginea de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
44/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.10. Type Tool

Cu ajutorul acestui instrument putem aduga i formata texte asociate imaginilor.

S intrm pe site-ul Coca Cola, cutnd Coca Cola pe Google. Odata intrai pe acest site
apsm butonul PrtScn din partea dreapta-sus a tastaturii, avnd grij ca sgeata mouse-ului
s se gseasc n afara suprafeei utile a site-ului. Prin aceast operaiune am realizat o
captur a ntregului ecran, un fel de Copy. Ne ntoarcem acum n programul Adobe Photoshop
i apsm Ctrl+N pentru a crea un nou document, apoi dm Ctrl+V . Vom obine imaginea de
mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
45/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Vom masca barele computerului selectnd cu Rectangular Marquue Tool pe toat limea
imaginii sus i jos, pe rnd. ncepem cu partea de sus. Dup ce am efectuat selecia, alegem
culoarea dorit din Panoul de Culori sau din Panoul de Instrumente, i apoi dm Edit Fill, din
Bara de Meniuri. Repetm aceast operaie n partea de jos a imaginii. n acest fel ne-am creat
loc pentru titlu i text explicativ (descriere). Decupm imaginea astfel nct s o facem puin
mai ngust. Vom obine un rezultat precum cel de mai jos:

Exist patru tipuri principale de text n Photoshop:

- Text orizontal;
- Text vertical;
- Text pe o linie (pentru titluri, de exemplu);
- Text pe mai multe linii (csu de text), pentru textul de paragraf.

V prezentm mai jos bara pentru formatarea textului. Aceasta este foarte asemntoare cu
cea din binecunoscutul i ultra-utilizatul program Microsoft Word.

Putem alege direcia, tipul fontului, dimensiunea, stilul (normal, bold, italic), modul anti-
aliasing (anti margini zimate), modul de aliniere, culoarea, text curbat, opiuni de paragraf.
Deoarece n partea de sus a imaginii avem mai mult loc dect n partea de jos, o vom folosi pe
cea dinti pentru textul de paragraf (caset de text), iar pe cea mai jos pentru textul de titlu.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
46/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Pe margini vom utiliza textul vertical.


Dm clic n partea de jos i scriem, cu formatrile dorite Coca Cola.
n partea de sus tragem cu mouse-ul de undeva din stnga-sus i pn n dreapta jos a benzii
roii, cu instrumentul Type Tool selectat i cu butonul stng al mouse-ului apsat. La final
eliberm butonul. Facem setrile de text dorite i scriem. Formatarea textului se poate face i
ulterior prin selectare cu mouse-ul, ca n Word. Dimensiunile casetei se pot modifica trgnd
cu mouse-ul de marcajele de la mijloacele laturilor casetei. Aceasta se poate muta cu ajutorul
instrumentului Move Tool. Vom scrie textul: Aceasta este o captur realizat de pe site-ul
Coca Cola, n scop didactic. Vom obine un rezultat asemntor cu cel de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
47/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.11. Eyedropper Tool

Acest instrument este folosit pentru a clona culoarea dintr-o poriune a imaginii i a o folosi
apoi n alt poriune.

3.2.12. Hand Tool

Acest instrument este folosit pentru a a vizualiza poriunile imaginii care nu ncap n fereastr.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
48/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.2.13. Zoom Tool

Lupa este folosit pentru a mri sau micora scara la care este vizualizat o imagine. Mrirea
este implicit. Pentru micorare trebuie inut apsat tasta Alt.

3.2.14. Foreground Color and Background Color

Foreground Color este culoarea principal, cea folosit de instrumente precum pensul, creion,
sau gleata de vopsea.
Background Color este culoarea de fundal i este folosit de exemplu de gum i Delete.
n mod implicit aceste culori sunt negru i alb. Acestea pot fi inversate dndu-se clic pe
sgeata dintre ele.
Culorile pot fi schimbate prin clic pe ele.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
49/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.3. Lista shortcut-urilor de tastatur Adobe Photoshop CS6

Shortcut-urile de mai jos v pot face munca mult mai uoar, efectund aceleai operaii
existente i n meniuri, dar mult mai rapid. Pentru lista complet a acestor scurtturi, v
rugm s accesai pagina de Help (Ajutor) a site-ului Adobe (http://help.adobe.com)1.

Scurtturi pentru Selecting Tool

V Instrumentul Move
Shift + M Instrumentul Rectangular Marquee, Instrumentul Elliptical Marquee
Shift + L Instrumentul Lasso, Instrumentul Polygonal Lasso, Instrumentul Magnetic Lasso
Shift + W Instrumentul Magic Wand, Instrumentul Quick Selection
Shift + C Instrumentul Crop
Shift + I Instrumentul Eyedropper, Instrumentul Color Sampler, Instrumentul Measure,
Instrumentul Count
Shift + J Instrumentul Spot Healing Brush, Healing Brushtool, Instrumentul Patch,
Instrumentul Red Eye
Shift + B Instrumentul Brush, Instrumentul Pencil, Instrumentul Color Replacement
Shift + S Instrumentul Clone Stamp, Instrumentul Pattern Stamp
Shift + Y Instrumentul History Brush, Instrumentul Art History Brush
Shift + E Instrumentul Eraser, Instrumentul Background Eraser, Instrument Magic Eraser
Shift + G Instrumentul Gradient, Instrumentul Paint Bucket
Shift + O Instrumentul Dodge, Instrumentul Burn, Instrumentul Sponge
Shift + P Instrumentul Pen, Instrument Freeform Pen
Shift + T Instrumentul tip orizontal, Instrumentul tip vertical, Instrumentul tip masc
orizontal, Instrumentul tip masc vertical
Shift + A Instrumentul Path Selection, Instrumentul Direct Selection
Shift + U Instrumentul Rectangle, Instrumentul Rounded Rectangle, Instrumentul Ellipse,
Instrumentul Polygon, Instrumentul Line, Instrumentul Custom Shape
Shift + N Instrumentul 3D Object Camera - Roll, Pan, Walk i Zoom
Shift + K Instrumentul 3D Object Rotate - Roll, Pan, Slide i Scale
R Instrumentul Rotate view
H Instrumentul Hand
Z Instrumentul Zoom

1
http://help.adobe.com/en_US/photoshop/cs/using/WSD578BD7D-07BC-46f6-AAC2-
6E491E8AD818a.html#WS24E993BC-E1F3-4ac6-8225-7685C3B17669a
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
50/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Scurtturi pentru View Image

Ctrl + Tab Cicluri prin documentele deschise


Shift-Ctrl-W nchide un fiier n Photoshop i deschide Bridge
Q Comut ntre modul Standard i modul Quick Mask
Shift + F Comut nainte / napoi ntre Standard Screen Mode, Maximized
Screen Mode, Full Screen Mode i Full Screen Mode din bara de meniu
Double-click Hand tool Potrivete imaginea n fereastr
Ctrl + 1 Mrete 100%
Ctrl + space Comut la Zoom In tool
Alt + space Comut la Zoom Out tool
Space + drag Mut marcajul Zoom n timp ce trage cu instrumentul Zoom
Page Up / Page Down Deruleaz n sus sau n jos un ecran
Shift + Page Up / Page Down Deruleaz n sus sau n jos 10 uniti
Home sau End Mut vizualizarea n colul din stnga sus sau colul din dreapta jos
\ (backslash) Comut stratul masc on/off ca rubylith (masca layer trebuie
selectat)

Scurtturi pentru Filter Gallery

Alt-click a filter Aplic un nou filtru n partea selectat de sus


Alt-click a disclosure triangle Deschide/nchide toate triunghiurile dezvluite
Ctrl Schimb butonul Cancel n Implicit n Adobe Photoshop
Alt Schimb butonul Cancel n Reset
Ctrl + Z Undo/Redo
Ctrl + Shift + Z Pas nainte
Ctrl + Alt + Z Pas napoi

Scurtturi pentru Curves

Ctrl + M Deschide csua de dialog Curbe n Adobe Photoshop


Ctrl + Tab Selecteaz punctul urmtor de pe curb
Shift + Ctrl + Tab Selecteaz punctul anterior de pe curb
Ctrl-click on the points Selecteaz mai multe puncte pe aceast curb
Ctrl + D Deselectarea unui punct
Select a point and press Delete terge un punct de pe curb
Arrow keys Mut punctul selectat cu 1 punct
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
51/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Shift + Arrow keys Mut punctul selectat cu 10 uniti


Alt-drag black/white point sliders Afieaz lumini i umbre care vor fi tiate
Ctrl-click the image Seteaz un punct n curba combinat
Shift + Ctrl-click the image Stabilete un punct la curbele canalului
Alt-click the field Comut dimensiunea grilei

Scurtturi pentru Blending Modes

Shift + + (plus) or - (minus) Trecei prin modurile de amestecare


Shift + Alt + N Normal
Shift + Alt + I Dizolv
Shift + Alt + Q n spate (numai instrumentul Brush)
Shift + Alt + R Clar (numai instrumentul Brush)
Shift + Alt + K ntunecat
Shift + Alt + M Multiplic
Shift + Alt + B Color Burn
Shift + Alt + A Linear Burn
Shift + Alt + G Luminat
Shift + Alt + S Ecran
Shift + Alt + D Color Dodge
Shift + Alt + W Linear Dodge
Shift + Alt + O Acoperire
Shift + Alt + F Soft Light
Shift + Alt + H Lumin puternic
Shift + Alt + V Lumin intens
Shift + Alt + J Lumin linear
Shift + Alt + Z Pin Light
Shift + Alt + L Hard Mix
Shift + Alt + E Diferen
Shift + Alt + X Excludere
Shift + Alt + U Nuan
Shift + Alt + T Saturare
Shift + Alt + C Culoare
Shift + Alt + Y Luminozitate
Sponge tool + Shft + Alt + D Desaturate
Sponge tool + Shft + Alt + S Saturate

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
52/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

3.4. Cte ceva despre CorelDRAW

Aa cum am spus la nceputul acestui modul, CorelDRAW este o aplicaie complet de grafic
vectorial care v ajut s creai un design profesional (simplu sau complex).

O fereastr CorelDRAW arat ca n poza de mai jos:

Putei remarca c multe componente de interfa sunt mprumutate de la Windows. Pentru a fi


mai concret, o fereastr CorelDRAW include urmtoarele:
- O bara de titlu care afieaz numele i versiunea aplicaiei, numele fiierului care este
deschis i alte butoane de control (minimize, restore down i close):

- Bara de meniu care permite accesul la diferite funcii i alte butoane de control
(minimize, restore down i close); bara de meniu este similar cu cea din meniul
Windows:

- Bara de proprieti:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
53/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

- Instrumente:

Pick Tool V permite selecia i transformarea obiectelor

Shape Tool (F10) V permite ajustarea formei obiectului, bazat pe noduri

Crop Tool Scoatei zona n afara seleciei

Zoom Tool (Z) Zoom pe zona de lucru

Freehand Tool (F5) Deseneaz curbe i segmente de linie dreapt

Smart Fill Tool Umple zona rapid

Rectangle Tool (F6) - V permite desenarea de dreptunghiuri i ptrate

Ellipse Tool (F7) V permite desenarea de elipse, cercuri i arcuri

Polygon Tool (Y) V permite desenarea de poligoane i stele

Basic Shapes Deseneaz forme de baz

Text Tool (F8) V permite scriere (paragraf sau texte artistice)

Table Tool V permite desenarea de tabele

Interactive Blend Tool Amestecai dou obiecte

Eyedropper Tool - V permite s selectai o culoare deja utilizat n desen

Outline Tool - V permite s modificai atributul la grosime (Thickness), culoare


(Colour), stil (Style), varfuri de sgei (Arrowheads) i Line caps de orice fel de linie,
etc.
Fill Umple obiecte cu diverse opiuni de umplere precum: uniform (Uniform fill),
dinamic (Fountain fill), textur (Texture fill), umplere prost-script (Postscript fill) i
fr umplere (No fill).

Interactive Fill Tool (G) Aplic o umplere dinamic (Fountain fill)

- Paleta CMYK, v permite s modificai foarte uor culorile de fundal sau culoarea liniei
de contur

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
54/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

n capitolul urmtor vom nva cum s crem un layout n CorelDRAW.

3.5. Lista shortcut-urilor de tastatur Corel Draw X6

Shortcut-urile (scurtturile) de mai jos v pot face munca mult mai uoar, efectund aceleai
operaii existente i n meniuri, dar mult mai rapid. Pentru o list complet a acestor comenzi
rapide, v rugm s vizitai site-ul Corel (www.corel.com)2

COMANDA SHORTCUT CE FACE

Artistic Media I Deseneaz curbe i aplic Preset, Brush, Spray, efecte


caligrafice sau efecte senzitive la presiune

Back One Ctrl+PgDn Plaseaz obiectele selectate napoi cu o poziie

Bold Ctrl+B Textul selectat devine aldin

Break Apart Ctrl+K Convertete un obiect selectat n obiecte curbilinii

Bullet Ctrl+M Adaug / elimin marcatori din text (comutare)

Center Ctrl+E Schimb alinierea textului i l aliniaz la centru

Center to Page P Aliniaz central obiectele selectate

Color Shift+F12 Deschide cutia de dialog Outline Color

Combine Ctrl+L Combin obiectele selectate

http://product.corel.com/help/CorelDRAW/540240626/Main/EN/Doc/wwhelp/wwhimpl/js/html/wwhelp.htm?context=
CorelDRAW_Help&topic=IDDH_DEFAULT_HELP_PAGE&single=
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
55/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Convert To Curves Ctrl+Q Convertete obiectul selectat ntr-o curb, convertindu-


se la curbe poate oferi o editare mai flexibil

Convert To Paragraph Text Ctrl+F8 Convertete textul artistic n texte cu alineat sau vice
versa

Convert Outline To Object Ctrl+Shift+Q Convertete o schi ntr-un obiect

Copy Ctrl+C Copiaz selecia i o plaseaz pe Clipboard

Cut Ctrl+X Taie selecia i o plaseaz pe Clipboard

Delete Delete terge obiectul selectat

Duplicate Ctrl+D Dubleaz obiectele selectate cu o sum specificat

Edit Text... Ctrl+Shift+T Deschide csua de dialog Edit Text

Ellipse F7 Deseneaz elipse i cercuri; dublu-clic pe instrument i


deschide Toolbox din caseta de dialog Opiuni

Eraser X terge pri dintr-un grafic sau mparte un obiect n


dou pri nchise

Exit Alt+F4 Iese din CorelDRAW i solicit salvarea documentului

Export... Ctrl+E Export texte sau obiecte ntr-un alt format

Fill G Umple obiectele; fcnd clic i glisnd pe obiect se


aplic o umplere dinamic (Fountain fill)

Find Text... Alt+F3 Gsete textul specificat n desen

Font List Ctrl+Shift+F Afieaz o list cu toate fonturile disponibile / active

Force Full Ctrl+H Schimb alinierea textului pentru a fora alinierea


complet la ultima linie

Format Text... Ctrl+T Formateaz proprietile textului

Forward One Ctrl+PgUp Plaseaz obiectul selectat nainte cu o poziie

Fountain F11 Aplic obiectelor o umplere dinamic

Freehand F5 Deseneaz linii i curbe cu mna liber

Full Ctrl+J Schimb alinierea textului la alinierea complet

Full-Screen Preview F9 Afieaz pe ecran o previzualizare complet a


desenului

Graph Paper D Deseneaz un grup de dreptunghiuri, dublu-clic


deschide tab-ul Instrumente din caseta de dialog
Opiuni

Group Ctrl+G Grupeaz obiectele selectate

HTML Font Size List Ctrl+Shift+H Afieaz o list cu toate dimensiunile de font HTML

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
56/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

disponibile / active

Horizontal Text Ctrl+, Schimb direcia textului pe orizontal

Import... Ctrl+I Import texte sau obiecte

Interactive Fill G Umplerea unui obiect, clic i tragi pe obiect

Left Ctrl+L Schimb alinierea textului ctre stnga

Mesh Fill M Conversia unui obiect n Mesh Fill

Next Page PgDn Sare la pagina urmtoare

New Ctrl+N Deschide un nou desen

Open... Ctrl+O Deschide un desen deja existent

Options... Ctrl+J Deschide caseta de dialog pentru setarea opiunilor


CorelDRAW

Paste Ctrl+V Lipete coninutul Clipboard n desen

Pen F12 Deschide caseta de dialog Outline Pen

Polygon Y Deseneaz poligoane simetrice; dublu clic deschide


tab-ul Toolbox al csuei de dialog Opiuni

Previous Page PgUp Merge la pagina anterioar

Print... Ctrl+P Imprim desenul activ

Properties Alt+Return Afieaz proprietile obiectului sau instrumentului n


funcie de selectarea curent sau instrument

Rectangle F6 Deseneaz dreptunghiuri, dublu-clic pe instrument


creeaz o pagin cadru

Redo Ctrl+Shift+Z Inveseaz ultima operaie anulat (Undo)

Refresh Window Ctrl+W Redeseneaz fereastra de desen

Repeat Ctrl+R Repet ultima operaie

Right Ctrl+R Schimb alinierea textului la dreapta

Save... Ctrl+S Salveaz desenul activ

Select all Ctrl+A Selecteaz toate obiectele de pe pagin

Shape F10 Editeaz nodurile unui obiect; dublu-clic pe instrument

Spell Check... Ctrl+F12 Deschide verificatorul ortografic; verific ortografia


textului selectat

Spiral A Deseneaz spirale; dublu-clic deschide tab-ul Toolbox


al csuei de dialog Opiuni

Text F8 Adaug text; apsai pe pagin pentru a aduga text


artistic; clic i adugai text paragraf
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
57/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Undo Delete Ctrl+Z Inverseaz ultima operaie

Ungroup Ctrl+U Sparge obiectele selectate sau grupurile de obiecte

Uniform Fill... Shift+F11 Aplic umplerea uniform a culorii pe obiecte

Underline Ctrl+U Sublinieaz textul selectat

Use bullets Ctrl+M Arat/ascunde marcatorii

Vertical Text Ctrl+. Schimb orientarea textului pe vertical (comutare)

Visual Basic Editor... Alt+F11 Execut editorul de aplicaii Visual Basic

What's This? Shift+F1 Invoc ajutorul Ce este aceasta? (Help)

Zoom Z Zoom

Zoom Out F3 Micoreaz desenul

Zoom To Fit F4 Face zoom pe toate obiectele din desen

Zoom To Page Shift+F4 Afieaz ntreaga pagin imprimabil

Zoom To Selection Shift+F2 Face zoom doar pe obiectele selectate

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
58/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

4. CREAREA DE LAYOUT-URI PENTRU SITEURI WEB

4.1. Crearea de layout-uri pentru site-uri web cu Adobe


Photoshop

Adobe Photoshop este principalul soft pentru crearea de layout-uri web profesioniste, pe lng
Platformele Open Source cum sunt WordPress, Joomla, OSCommerce etc.
n general, un site web se compune din 6 elemente de baz: Header, Sub-header, Left, Right,
Pages i Footer. S le lum pe rnd i s vedem ce conin de obicei acestea.

Header

Sub-Header (Meniu orizontal)

Right

(Nouti
Left

Pages Contact
(Meniu
Vertical)
Hart

etc.)

Footer (Contor de Trafic, Copyright, Bottom Meniu etc.)

Header

Conine numele i sigla companiei care deine site-ul, fotografii, etc.

Subheader

Conine meniul orizontal etc.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
59/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Left

Conine meniul vertical etc.

Pages

Conine cuprinsul specific fiecrei pagini, restul elementelor rmnnd fixe.

Right

Poate conine: Nouti; Contact; Hart etc.

Footer

Poate conine: Contor de Trafic; Copyright; Bottom Menu; etc.

S aplicm aceast schem unui caz concret. S presupunem c trebuie s realizm site-ul
unei firme care organizeaz petreceri pentru copii. Aplicnd ce am nvat n Capitolul Design
Grafic, site-ul ar putea arta astfel:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
60/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

S folosim acum instrumentul Slice Tool pentru a mpri Layout-ul n dreptunghiuri, conform
cu schia prezentat la nceputul acestui Capitol.

Vom obine o imagine precum cea de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
61/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Mergem la File Save for Web. Se va deschide urmtoarea fereastr:

Numim fiierul index.html i dm Save.


Cnd tastm adresa unui site web n Browser acesta caut fiierele index.html, defaul.html i
nc cteva extensii ale acestora dou. Dac nu le gsete se afieaz un mesaj de eroare.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
62/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Va fi creat automat Folderul images. Va arta ca n figura de mai jos:

S mergem acum n Folderul n care am salvat site-ul i s dm dublu clic pe fiierul


index.html pentru a-l deschide. Vom obine un rezultat asemntor cu cel din figura de mai
jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
63/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

4.2. Crearea de layout-uri pentru site-uri web cu CorelDRAW

Vom crea acelai layout ca i cel creat cu Photoshop-ul, dar de data aceasta folosind programul
CorelDRAW. Cu cel din urm program machetarea este mult mai uoar, dar imaginile
individuale folosite trebuiesc decupate i prelucrate tot n Adobe. Acestea vor fi cele de mai
jos:

Deschidem programul CorelDRAW i crem un nou document utiliznd File New sau
combinaia de taste Ctrl + N. Din meniul Layout alegem Page Setup. Facem setrile din
imaginea de mai jos i apoi apsm pe OK.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
64/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Mai nti, vom crea fundalul. Pentru aceasta selectm Rectangle Tool din caseta din partea
stng a programului i nconjurm cu el cadru fictiv. Selectm apoi Fill Fountain Fill, alegem
culoarea pe care vrem s o folosim, selectm un unghi de -90 de grade, pentru ca gradientul
s fie vertical i dm OK. Pentru un control mai fin putem folosi Interactive Fill Tool.
Selectm primul instrument din stnga, Pick Tool, i dm clic cu el pe dreptunghi pentru a l
selecta, dac nu este deja. Dm apoi clic dreapta pe prima csu a paletei de culori din partea
dreapt, cea cu X, pentru ca dreptunghiul s nu aib chenar. Dac caseta nu exist, o activm
de la meniul Window Color Palettes. Avem grij s alegem paleta RGB, deoarece lucrm
pentru web.
Vom obine un rezultat precum cel din imaginea de mai jos:

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
65/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Acum vom crea spaiul util al layout-ului. Pentru asta selectm din nou Rectangle Tool.
Introducem n caseta de proprieti din partea de sus valorile de 1000 de pixeli pentru lungime
i lime. Avem grij ca lactul s fie deschis pentru a evita ca lungimea i limea s nu fie
modificate proporional n mod automat. Dac lactul este nchis dm clic pe el pentru a l
deschide.

Cu dreptunghiul selectat, apsm tasta P pentru ca acesta s se gaseasc n centrul paginii.


Tragem dou marcaje verticale pe laturile acestuia, apoi le tergem.

S crem acum un dreptunghi de 1000/400 px pentru header. Tragem un marcaj n partea de


jos a lui de pe rigla de sus, apoi tergem dreptunghiul.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
66/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

Prin intermediul comenzii Import din meniul File, sau prin combinaia de taste Ctrl + I aducem
n Header imaginile cu csua, castelul, butoanele i copii. Le mutm cu ajutorul Pick Tool i,
dac este nevoie le mrim sau micorm trgnd n diagonal cu Mouse-ul de unul din coluri
n stnga sau n dreapta, sus sau jos.
Alegem Text Tool din Toolbox, scriem CASA, l selectm cu Pick Tool, dm clic pe un verde
nchis din paleta de culori, mai dm clic odat pentru a-l putea roti ntr-o extremitate i l
plasm pe latura din stnga a acoperiului. Procedm la fel i pentru MARTISOR i
PETRECEREA ESTI TU, pentru ultimul alegnd o nuan de grena.

S crem acum casetele de text i cea pentru fotografii. Cu Rectangle Tool crem o caset
dreptunghiular. Selectm Pick Tool i dm clic dreapta pe portocaliu n Color Box pentru a
crea un contur portocaliu i clic stnga pe X pentru a nu exista culoare de fundal n dreptunghi.
Dm clic stnga n exteriorul casetei pentru a o deselecta. Tot cu Rectangle Tool crem n
interiorul primului dreptunghi o caset pentru titlu, cu fond portocaliu i fr chenar. Cu Text
Tool, scriem cu alb n mijlocul acesteia CONTACT. Tot cu Text Tool crem o caset de text
trgnd cu butonul stng al mouse-ului apsat din stnga sus i pn n dreapta jos n spaiul
liber al primei casete. Apoi scriem cu verde datele de contact. Vom obine un rezultat
asemntor cu cel din imaginea de mai jos.

CONTACT

Str. Martisor nr. 55 sector 4


0721.196.893 0744.870.675
Zona Brancoveanu Langa
"Oraselul Copiilor"

Similar crem celelalte casete din Layout-ul din Seciunea 4.1. Pentru caseta cu fotografii
folosim File Import sau Ctrl + I, aa cum am procedat cnd am adus imaginile pentru header
Un Proiect Leonardo da Vinci
e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
67/68
Proiectul LdV e-LIFE Modul 4 Curs de design grafic

n Corel. Pentru a muta toate elementele casetelor le ncercuim cu Mouse-ul utiliznd


instrumentul Pick Tool i dm comanda Arrange Group sau Ctrl + G. Pentru a degrupa
folosim Arrange Ungroup sau Ctrl + U. n final Layout-ul va arta ca n imaginea de mai jos.

Salvm imaginea ntr-un format recunoscut de Photoshop (psd, tif, jpg etc.), o deschidem cu
acest program i apoi o transformm n format HTML folosind Slice Tool, aa cum am nvat n
sub-capitolul precedent.

Mai multe despre crearea site-urilor web vom vorbi ntr-un alt curs creat n cadrul proiectul e-
LIFE.

Un Proiect Leonardo da Vinci


e-LIFE Centru Virtual de e-Learning pentru Persoane cu Dizabiliti Fizice
2011-1-RO1-LEO05-15322
68/68

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