Copyright 2006: Institutul Multimedia Romano - Elvetian
1
INSTITUTUL MULTIMEDIA ROMANO-ELVETIAN
SUPORT DE CURS
ADOBE PHOTOSHOP 7
REALIZATOR CURS: IRINA MOTOC
DEVA -2006- Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 2 ADOBE PHOTOSHOP 7
CUPRINS
1. SETAREA PREFERINTELOR 2. NOTIUNI DE BAZA IN PHOTOSHOP INTERFATA NOTIUNI DESPRE LAYERE (STRATURI) STILURI ALE STRATURILOR MODURI DE AMESTECARE A STRATURILOR DIFERENTA DINTRE GRAFICA VECTORIALA SI CEA BITMAP 3. INSTRUMENTELE PHOTOSHOP 4. CULORI PENTRU WEB MODURI DE CULOARE ALEGEREA SI SPECIFICAREA CULORILOR ADANCIMEA DE CULOARE A MONITORULUI CULORILE WEB SAFE 5. RETUSAREA FOTOGRAFIILOR 6. APLICAREA FILTRELOR 7. MASTI SI CANALE CREAREA UNEI MASTI IMEDIATE (QUICK MASK) EDITAREA UNEI MASTI IMEDIATE SALVAREA UNEI SELECTII CA MASCA EDITAREA UNEI MASTI EXTRAGEREA UNEI IMAGINI 8. FOLOSIREA TEXTULUI TIPURI DE TEXT PE WEB TIPURI DE FONTURI ALEGEREA FONTULUI SI A STILURILOR TEXTULUI 9. EFECTE SPECIALE APLICATE STRATURILOR (BLENDING OPTIONS) 10. CREAREA LEGATURILOR INTR-O IMAGINE DIVIZAREA IN FELII A UNEI IMAGINI Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 3 LUCRUL CU HARTI DE IMAGINE (IN IMAGEREADY) 11. ANIMAREA IMAGINILOR GIF IN PROGRAMUL ADOBE IMAGEREADY LUCRUL CU STRATURI IN ANIMATII 12. CREAREA EFECTELOR DE TIP ROLLOVER CREAREA UNEI STARI ROLLOVER TIPURI DE STARI ROLLOVER
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 4
1. SETAREA PREFERINTELOR
Primul lucru care trebuie facut atunci cand porniti programul Photoshop este setarea preferintelor potrivite, in functie de computer, de stilul de lucru si de tipul proiectelor la care veti lucra. Pentru a modifica preferintele, accesati meniul Edit > Preferences. De aici aveti acces la anumite optiuni pentru a seta preferintele in mod separate, sau puteti alege optiunea General pentru a avea acces la toate odata.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 5 Din meniul derulant de sus (din fereastra General), puteti alege diferite optiuni, pe care le vom examina pe rand in cele ce urmeaza.
Preferinte generale (General): - Color Picker stabileste modul in care se va comporta instrumentul de ales culoarea (ca optiuni, avem Adobe optiunea implicit, sau Windows) - Interpolation modul in care Photoshop redimensioneaza imaginile; avem de ales intre Bicubic (optiunea implicita), Bilinear si Nearest Neighbor - Redo Key putem alege tasta pentru comanda Redo (implicita este combinatia Ctrl+Z, la fel ca si pentru comanda Undo) - History States putem alege cate stari de istorie ale actiunilor vor fi salvate (in mod implicit sunt 20, cu cat numarul acestora va fi mai mare, cu atat Photoshop va avea nevoie de mai multa memorie) - Print Keys stabileste combinatia de taste pentru comanda Print (implicit: Ctrl+P). Este bine ca aceste optiuni sa ramana neschimbate.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 6
Urmatoarea fereastra de preferinte (care poate fi selectata fie din meniul derulant de sus, fie apasand pe Next) este File Handling. Aici putem seta preferinte in legatura cu modul in care sunt salvate fisierele: - Image Preview stabileste daca Photoshop memoreaza o versiune intermediara a imaginii (inainte ca noi sa o salvam) - File Extension putem alege daca extensia sa fie scrisa doar cu litere mici sau si cu litere mari (preferinta implicita este lowercase cu litere mici deoarece exista unele servere care nu recunosc extensiile scrise cu litere mari) - File Compatibility stabileste compatibilitatea intre diferite tipuri de fisiere si programul Photoshop Este bine ca aceste optiuni sa ramana neschimbate.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 7
Preferintele din fereastra urmatoare, Display & Cursor, ne ofera posibilitatea de a defini modul in care arata cursoarele anumitor instrumente: - Painting Cursors putem alege cum arata cursorul atunci cand folosim un program de pictat (Paint Brush sau Pencil) optiunile sunt: Precise, Standard si Brush Size - Other Cursors putem alege cum va arata cursorul altor instrumente avem de ales intre Standard si Precise
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 8
Preferintele Transparency & Gamut ne permit san e alegem tipul si dimensiunile careului care indica transparenta, precum si preferintele Gamut (culorile care nu pot fi reproduse correct la imprimanta): - Transparency Settings putem alege: - Grid Size (None, Small, Medium, Large), Grid Colors si Use Video Alpha (optiune suportata doar de anumite placi video) - Gamut Color (putem allege culoarea cu care vor fi inlocuite pe ecran culorile care nu pot fi reproduse corect la imprimanta)
Din fereastra Units & Rulers vom stabili dimensiunea in care se fac masuratorile (atunci cand lucram pentru Web, marimea de masura utilizata vor fi pixelii).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 9
Cu ajutorul preferintelor Guides, Grid & Slices putem stabili optiunile legate de masuratori si instrumentele specifice de impartire a imaginii: - Guides putem alege culoarea si stilul acestor linii ajutatoare (linii drepte sau linii intrerupte) - Grid putem selecta modul in care se poate face impartirea ajutatoare a ecranului (ca in cazul hartiei milimetrice): culoare, stil (linii, linii intrerupte, puncte), precum si divizii si subdivizii - Slices modul in care vor aparea feliile de imagine culoare, numerotatie Putem vizualiza atat Grid-ul cat si liniile ajutatoare si feliile din meniul View > Show > Grid, respectiv View > Show > Guides si View > Show > Slices. Pentru a le face sa dispara, le vom de-bifa din acelasi meniu, sau vom utilize View > Clear Guides.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 10
Urmatoarea fereastra de preferinte este Plug-Ins & Scratch Disks. - Plug-in-urile sunt niste mici programe realizate, de obicei, de alte firme decat Adobe, cu care se pot realiza anumite efecte speciale in Photoshop. Ne putem alege directorul in care se gasesc aceste plug-in- uri (in mod implicit, ele se gasesc intr-un director numit Plug-ins aflat in directorul unde se afla Photoshop). - Atunci cand memoria alocata programului Photoshop este depasita de catre acesta, el utilizeaza o memorie suplimentara (pe care o ia din spatiul liber de pe hard disk). Scratch disks reprezinta tocmai discul de pe care Photoshop isi va lua aceasta memorie (putem alege pana la 4 discuri/partitii in acest scop).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 11
Preferintele Memory & Image Cache se refera la modul in care Photoshop utilizeaza resursele de memorie, si la cat de repede isi va face refresh o imagine atunci cand facem scroll, de exemplu. Este bine ca aceste optiuni sa ramana neschimbate.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 12 2. NOTIUNI DE BAZA IN PHOTOSHOP
I NTERFATA
Interfata este constituita din sase elemente: - 1. bara de instrumente - 2. bara cu optiunile/proprietatile instrumentului selectat - 3. bara de meniuri - 4. documentul (documentele) propriu-zis(e) deschis(e) - 5. paletele - 6. bara de status
Bara de instrumente contine instrumentele propriu-zise (22 de instrumente care se vad, precum si alte instrumente ascunse in spatele acestora). Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 13 Dedesubtul instrumentelor se mai afla cateva butoane: cele folosite pentru selectia de culoare, cele folosite pentru modul Quick Mask, butoanele pentru schimbat modul de vizualizare (normal, full screen cu bara de meniu, full screen), precum si butonul de salt la aplicatia ImageReady.
Bara cu optiunile/proprietatile instrumentului selectat isi va schimba continutul in functie de ce instrument este activ.
Bara de meniuri este asemanatoare cu barele altor aplicatii.
Paletele sunt folosite pentru controlul anumitor atribute ale documentului. Paletele sunt impartite in 4 grupuri: - Navigator, Info - Color, Swatches, Styles - History, Actions, Tool Presets - Layers, Channels, Paths Ordinea sau aranjarea paletelor poate fi modificata, ele putand fi trase cu mouse-ul dintr-un grup in altul, in functie de preferinte. Optiunile paletelor pot fi accesate apasand pe butonul rotund avand o sageata in interior, care se gaseste in coltul din dreapta sus al fiecarei palete. Navigator reprezinta partea de navigare vizibila pe suprafata fisierului. Daca vom mari o anumita suprafata, vom putea muta aceasta selectie cu mouse-ul fara a redefini selectia. Info in momentul in care mouse-ul se afla pe suprafata imaginii, aceasta fereastra afiseaza mai multe informatii cu privire la atributele pixelului pe care ne aflam. Astfel, putem sti care este compozitia acestuia in culori aditive (RGB) sau substractive (CMYK). De asemenea, se afiseaza coordonatele cursorului la un moment dat. Color de aici putem alege culoarea curenta (Foreground) sau culoarea de fundal (Background). Cu ajutorul cursoarelor de pe fiecare componenta RGB, putem allege unul din cele 256 de tonuri intermediare pentru fiecare canal de culoare. Swatches din aceasta fereastra putem allege culori predefinite. Pe langa culorile de baza, principale si secundare, dispunem si de o gama de nuante pentru fiecare dintre ele, inclusive alb/negru (tonuri de gri). Styles de aici putem alege diferite stiluri (efecte speciale predefinite) care vor fi aplicate textului, butoanelor, fotografiilor, sau oricarui alt strat. History afiseaza numarul de nivele/operatiuni undo (deja efectuate) disponibile. Este foarte util sa putem reveni la anumite comenzi executate anterior, in cazul in care rezultatul final nu ne multumeste. Pentru aceasta, se face un clic pe nivelul dorit, iar comenzile aflate dupa acest nivel vor fi anulate. Actions fereastra folosita de catre utilizatorii experimentati pentru a predefine anumite actiuni. Tool Presets fereastra folosita de catre utilizatorii experimentati pentru a predefine instrumente de lucru. Layers fereastra pe care o vom folosi cel mai mult (dupa cea de instrumente); este locul unde se afla compozitia structurala a fisierului pe Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 14 care il prelucram. Aici se gasesc sub forma de straturi succesive (layere) diferitele elemente incluse, filter, efecte speciale, corectii, masti, etc. Channels fereastra care indica structura canalelor de culoare ale imaginii (fisierului) cu care lucram la un moment dat. Daca vom lucra cu un fisier in format RGB, vom avea trei canale (rosu, verde si albastru), plus canalul RGB care le contine pe cele trei. De asemenea, din aceasta paleta putem crea, vizualiza si modifica unele canale speciale generate de masti. Paths este paleta de unde vom gestiona selectiile vectoriale. In aceasta paleta se va crea un canal pe care se va fixa fiecare selectie provenita din lucrul cu forme vectoriale, text, canale alfa, etc.
Bara de status este folosita pentru a vedea modul de vizualizare (Zoom) al documentului, pentru a afla marimea documentului, pentru a afla informatii despre instrumentul curent, precum si alte informatii.
NOTI UNI DESPRE LAYERE ( STRATURI )
Unul dintre motivele pentru care Photoshop este cel mai performant si folosit program pentru editarea imaginilor (motiv preluat mai tarziu si de alti producatori) este posibilitatea de a lucra pe straturi suprapuse (layere).
In paleta Layers (de obicei in partea din dreapta jos a ecranului) avem informatii despre straturi. Acestea sunt asemanatoare unor foi transparente puse una deasupra celorlalte, fiecare avand o portiune desenata si o portiune transparenta. Atunci cand straturile sunt suprapuse, noi vedem o singura imagine, dar de fapt fiecare strat contine o parte a acestei imagini. Lucrul cu straturi este foarte folositor deoarece fiecare strat poate fi editat, repozitionat sau sters fara ca acest lucru sa afecteze celelalte straturi.
Cand selectam un strat, el devine editabil (in stanga lui apare icoana unei pensule). Pentru a face un strat vizibil sau invizibil, apasam pe icoana reprezentand un ochi. Prezenta in stanga unui strat sau mai multor straturi a unei icoane reprezentand o agrafa ne indica faptul ca straturile respective sunt legate intre ele (modificarile facute unui strat se aplica si celorlalte straturi legate). Putem face ca anumite zone ale unui strat sa devina incuiate (needitabile). Pentru aceasta, vom folosi optiunea lock (icoana reprezentand un lacat) care are urmatoarele optiuni: - Lock transparent pixels face needitabila doar partea transparenta a unui strat (partea care nu are nimic pictat pe ea) - Lock image pixels face needitabila doar partea pictata a unui strat, restul imaginii (partea transparenta) putand fi editata - Lock position nu putem misca stratul respective - Lock all stratul devine needitabil
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 15 Fiecare strat dispune si de optiunile Opacity si Fill, care determina transparenta acelui strat fata de straturile de sub el (daca Opacity sau Fill au valoarea 0, stratul este invizibil).
Ordinea straturilor poate fi schimbata cu usurinta, acest lucru realizandu-se prin simpla tragere cu mouse-ul a unui strat mai sus sau mai jos.
Straturile pot (si este recomandat) sa fie numite cu nume semnificative, pentru a nu se produce confuzii atunci cand lucram cu foarte multe straturi.
STI LURI ALE STRATURI LOR
Asupra straturilor se pot aplica anumite stiluri (efecte speciale). Atunci cand un strat are un anumit stil, toate elementele sale vor fi influentate de acel stil. Stilurile le putem alege din meniul Window > Styles, sau din paleta Styles (care se afla langa paletele Color si Swatches). O alta modalitate de a alege stilul de aplicat unui strat este dublu-clic pe stratul respectiv, iar fereastra cu stiluri se va deschide.
Exista mai multe tipuri de stiluri (Drop Shadow, Inner Shadow, Outer Glow, Inner Glow, Bevel & Emboss, etc.), fiecare dintre ele avand foarte multe optiuni. Vom invata mai multe despre aceste efecte speciale aplicate straturilor (numite si blending options) intr-o lectie viitoare.
BLENDI NG MODES ( MODURI DE AMESTECARE A STRATURI LOR)
Putem alege diverse moduri in care se combina diferitele elemente ale imaginii. Aceste moduri de amestecare pot fi aplicate straturilor, sau picturii cu pensula. Atunci cand pictam, modurile de amestecare influenteaza modul in care pensula lasa urme. Aplicate straturilor, modurile de amestecare influenteaza modul in care stratul curent afecteaza straturile aflate dedesubtul sau. Modurile de amestecare sunt: - Normal (modul normal) - Dissolve (dizolva culoarea pe suprafata imaginii) - Behind doar pentru pictat (picteaza in spatele imagini) - Multiply (se comporta ca un marker, generand un efect difuz si intunecand pixelii de dedesubt) - Screen (opusul lui Multiply, in loc sa intunece pixelii de dedesubt, ii lumineaza) - Overlay (produce fie un efect Multiply, fie unul Screen, in functie de culoarea pixelilor de dedesubt) Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 16 - Soft Light (acelasi efect ca si Overlay, dar cu o intensitate mai mica) - Hard Light (creste saturatia) - Color Dodge (lumineaza - deschide culorile) - Color Burn (intuneca inchide culorile) - Darken (intuneca doar culorile mai inchise decat culoarea selectata) - Lighten (deschide doar culorile mai inchise decat culoarea selectata) - Difference (imparte diferenta dintre culoarea cu care se picteaza si culoarea peste care pictam) - Exclusion (acelasi effect ca si Difference, dar mai putin pronuntat) - Hue (schimba nuanta) - Saturation (schimba intensitatea culorii) - Color Mode (pentru convertirea unei imagini alb-negru intr-o imagine color) - Luminosity (schimba intunecimea sau luminozitatea culorii)
DI FERENTA DI NTRE GRAFI CA VECTORI ALA SI CEA BI TMAP
Diferenta dintre grafica vectoriala si cea bitmap este sesizabila foarte usor atunci cand marim imaginea (Zoom). O imagine de tip bitmap, cu cat este marita mai mult, cu atat mai mult isi va pierde din calitate, pana cand vom ajunge sa vedem pixelii care o compun ca niste patrate mari de diferite culori. O imagine vectoriala, pe de alta parte, poate fi marita oricat de mult fara sa isi piarda din calitate, liniile sale ramanand la fel de fine ca si la dimensiunea originala. Aceasta se datoreaza faptului ca, spre deosebire de imaginile bitmap care sunt formate din sute, mii sau chiar milioane de pixeli, imaginile vectoriale sunt formate din simple linii. Fisierul care contine imaginea vectoriala va trebui sa tina minte doar lungimea, curbura si traiectoria acestor linii (reprezentate prin anumite cifre), pe cand un fisier continand o imagine bitmap va trebui sa memorize informatiile despre fiecare pixel in parte. Din acest motiv, marimea unui fisier continand o imagine vectoriala este cu semnificativ mai mica decat marimea unui fisier continand o imagine bitmap. Programe de grafica vectoriala: Adobe Illustrator, Macromedia Flash, Corel Draw, etc. Programe de grafica bitmap: Adobe Photoshop, Corel Painter, etc. De retinut faptul ca Photoshop are si cateva instrumente care permit lucrul cu obiecte vectoriale.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 17 3. INSTRUMENTELE PHOTOSHOP
Iata instrumentele programului Photoshop, prezentate in ordinea in care apar ele in bara de instrumente:
Rectangular Marquee tool (shortcut: M) realizeaza o selectie rectangulara pe suprafata documentului in lucru. Daca dorim sa realizam o selectie perfect patrata, vom tine apasata tasta Shift si vom trage cu mouse- ul selectia. Elliptical Marquee tool (shortcut: M) realizeaza o selectie elipsoidala pe suprafata documentului in lucru. Daca dorim sa realizam o selectie perfect rotunda, vom tine apasata tasta Shift si vom trage cu mouse-ul selectia. Single Row Marquee tool (shortcut: M) realizeaza o selectie de un pixel (o linie orizontala) de-a lungul intregii imagini Single Column Marquee tool (shortcut: M) realizeaza o selectie de un pixel (o linie verticala) de-a lungul intregii imagini
Move tool (shortcut: V) cu acest instrument selectam si mutam elementele continute in fisierul pe care-l prelucram.
Lasso tool (shortcut: L) cu acest instrument selectam cu mana libera pe suprafata fisierului graphic. Facem un click cu mouse-ul, selectam ceea ce dorim tinand butonul apasat, iar cand vom lasa butonul selectia se va inchide automat. Polygonal Lasso tool (shortcut: L) cu acest instrument selectam cu mana libera, dar sub forma de linii drepte pe suprafata fisierului graphic. La fiecare click al mouse-ului, se va genera o linie de selectie. Pentru a inchide aceasta selectie revenim in punctul de plecare sau facem dublu-click. Magnetic Lasso tool (shortcut: L) si cu acest instrument selectam cu mana libera, dar in acest caz selectia se va lipi de conturul pe care il urmam. La fiecare click al mouse-ului, se va genera o linie de selectie. Pentru a inchide aceasta selectie, revenim in punctul de plecare sau facem un dublu- click.
Magic Wand tool (shortcut: W) cu aceasta unealta se realizeaza selectii automate pe anumite suprafete cu un grad mai mare sau mai mic de toleranta in ceea ce priveste culoarea pixelilor. Aceasta toleranta poate incepe de la 0 (selectia se va face exact, numai pe o anumita valoare). Marind aceasta valoare, toleranta de selectie va creste si vor fi selectionati tot mai multi pixeli.
Crop tool (shortcut: C) pentru a taia fisierele grafice cu care lucram vom folosi aceasta unealta. Printr-o selectie de previzualizare, vom allege Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 18 suprafata care dorim sa ramana in fisierul original, apoi se va da un dublu- click (sau Enter).
Slice tool (shortcut: K) cu aceasta unealta vom imparti fisierul graphic in suprafete distincte (felii), in vederea salvarii lor separate, pentru ca mai tarziu sa le integram in structura unui site. Cu ajutorul acestui instrument vom genera linii de ghidare pe care ne vom lipi apoi cu selectiile necesare decuparii elementelor grafice de care avem nevoie. Slice Select tool (shortcut: K) - cu acest instrument selectam si mutam feliile taiate cu Slice tool.
Healing Brush tool (shortcut: J) cu ajutorul acestui instrument putem face corectii, completari, lipituri in imaginile prelucrate. Aceasta unealta cloneaza segmente dintr-un anumit loc determinat si face o medie de cromatica, luminozitate si saturatie cu noul amplasament, dupa care lipeste selectia in locul respective. Patch tool (shortcut: J) - aceasta unealta peticeste o zona dintr-o imagine cu o alta zona, pastrand cromatica, luminozitatea si saturatia, dar imitand textura zonei selectate.
Brush / Pencil tool (shortcut: B) / pensula, respectiv creionul, cu care vom trasa, desena, picta pe suprafata fisierului graphic. Dimensiunea si forma acestor unelte se vor selectiona fie din bara de optiuni a instrumentului, fie din bara de meniuri a programului. Exista numeroase proprietati ale ale acestor unelte (dimensiune, forma, dinamism, smooth/sharp) pe care le vom analiza mai tarziu. Singura diferenta dintre pensula si creion este ca pensula are margini difuze, pe cand creionul nu.
Clone Stamp tool (shortcut: S) cloneaza un anumit numar de pixeli (in functie de marimea si forma pensulei brush) dintr-o anumita zona intr-o alta, in functie de locul unde se plaseaza mouse-ul. Spre deosebire de Healing Brush, proprietatile pixelilor nu sunt modificate. Pattern Stamp tool (shortcut: S) - aplica o textura unei anumite zone.
Eraser tool (shortcut: E) cu acest instrument se sterg pixeli. Practic, inlaturam elemente de pe un layer (strat) activ. Background Eraser (shortcut: E) cu acest instrument stergem fundalul unei imagini (necesita putin exercitiu). Magic Eraser (shortcut: E) cu ajutorul acestei unelte, putem sterge o zona intreaga (care are aceeasi culoare) printr-un singur clic.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 19 Gradient tool (shortcut: W) executa tranzitii de culoare de la culoarea selectata la culoarea de fundal, sau tranzitii presetate (in spectru, intre 2, 3, 4 sau mai multe culori, de la o culoare spre transparenta, etc.). Paint Bucket tool (shortcut: W) executa doar umpleri de culoare a unor spatii sau selectii aflate la un moment dat pe layer-ul activ.
Blur / Sharpen / Smudge tool (shortcut: R) / / in functie de marimea pensulei selectionate pentru a utiliza aceste unelte, suprafata pe care se vor aplica va deveni mai voalata, neclara (in cazul instrumentului Blur), mai contrastanta si mai clara (in cazul instrumentului Sharpen) sau va genera un amestec, topind contururile (in cazul instrumentului Smudge).
Dodge / Burn / Sponge tool (shortcut: O) / / in functie de marimea pensulei selectionate pentru a utiliza aceste unelte, suprafata afectata va deveni mai deschisa si va pierde din contrast (in cazul instrumentului Dodge), va deveni mai inchisa si mai contrastanta (in cazul instrumentului Burn), sau isi va pierde din saturatie (in cazul instrumentului Sponge).
Path Selection tool / Direct Selection tool (shortcut: A) / cu aceste instrumente avem posibilitatea sa modificam selectiile vectoriale. Unealta Path Selection va selecta si va muta intreaga selectie, in timp ce unealta Direct Selection va intervene asupra nodurilor din care este compusa selectia.
Type (Text) tool (shortcut: T) / / / este instrumentul cu care se manevreaza textul. Impreuna cu derivatele acestui instrument (horizontal, vertical, horizontal mask si vertical mask) se genereaza text, ale carui atribute pot fi mai tarziu modificate.
Pen / Freeform Pen / Add Anchor / Delete Anchor / Convert Point (shortcut: P) / / / / unelte pentru realizarea selectiilor de tip vectorial. Pen creeaza noduri sau ancore, Freeform Pen creeaza selectii libere. Add Anchor adauga noduri intr-o selectie deja existenta, Delete Anchors le sterge, iar Convert Point transforma liniile drepte dintre doua noduri in curbe Bezier.
Shape tool (shortcut: U) executa selectii vectoriale de diferite forme (rectangulare, elipsoidale, rectangulare rotunjite, precum si alte forme ce pot fi personalizate). Rectangle realizeaza un dreptunghi (sau un patrat daca tinem apasata tasta Shift atunci cand il desenam). Rounded Rectangle realizeaza un dreptunghi (sau un patrat) cu colturile rotunjite. Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 20 Ellipse realizeaza o elipsa (sau un cerc daca tinem apasata tasta shift atunci cand desenam). Polygon realizeaza un polygon. Line realizeaza o linie dreapta. Custom Shape realizeaza forme personalizate.
Notes (shortcut: I) acest instrument ne ofera posibilitatea de a lasa notite pe anumite zone ale imaginii. Audio Annotation (shortcut: I) cu ajutorul acestui instrument putem lasa note audio (daca avem un microfon).
Eyedropper / Color Sampler / Measure (shortcut: I) / / ne ajuta sa gestionam culorile. Cu Eyedropper putem alege o mostra de culoare de pe suprafata fisierului, Color Sampler ne permite sa generam puncte de referinta a culorii (maxim 4 puncte), iar Measure ne permite sa masuram atributele grafice dintre doua puncte.
Hand tool (shortcut: H) muta suprafata vizibila a fisierului atunci cand acesta este mai mare decat suprafata ecranului (sau a fost magnificata) si au aparut cursoarele scroll.
Zoom tool (shortcut: Z) mareste o anumita suprafata a fisierului (zoom in) sau micsoreaza suprafata vizibila (zoom out).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 21 4. CULORI PENTRU WEB
MODURI DE CULOARE
Modurile de culoare reprezinta moduri diferite de a descrie o anumita culoare. Photoshop ne ofera posibilitatea de a lucra cu mai multe moduri de culoare, printre care RGB, CMYK, LAB, HSB, GREYSCALE, INDEXED. Ca web designeri, nu avem nevoie sa intelegem decat doua dintre aceste moduri: RGB si INDEXED (celelalte sunt folosite indeosebi pentru tiparit). Ca web designeri, lucram aproape exclusive in modul RGB, deoarece imaginile pe care le producem sunt destinate vizionarii pe monitor, iar monitoarele folosesc modul RGB.
In modul RGB, o culoare este descrisa prin cantitatile de rosu, verde si albastru pe care le contine. Fiecare dintre aceste cantitati (de rosu, verde si albastru) poate lua o valoare cuprinsa intre 0 si 255. Daca toate cele trei valori sunt 0, nu avem nici o culoare, deci obtinem negru. Daca toate cele trei valori sunt 255 obtinem alb. Combinand diferite proportii ale culorilor rosu, verde si albastru, putem obtine practic orice culoare din spectru.
Cel de-al doilea mod de culoare folosit de web designeri, modul INDEXED, este asemanator cu RGB, doar ca paleta sa de culori este mult mai limitat. Folosim acest mod deoarece unele monitoare nu pot reproduce decat o paleta limitata de culori. Pentru a verifica sau a schimba modul in care sunt afisate culorile unei imagini, folosim meniul Image > Mode, dupa care, daca e nevoie, ne alegem modul dorit. Pentru a transforma RGB in INDEXED, trebuie mai intai sa unificam straturile, iar apoi trebuie sa alegem o paleta de culori la care va fi limitata imaginea noastra.
Un alt mod de culoare pe care l-am putea intalni (mai ales daca prelucram imagini pentru tiparit) este CMYK. In acest mod, in loc de rosu, verde si albastru, imaginea este compusa din cyan (albastru azuriu), magenta (rosu violet) , galben si negru. Daca trebuie sa prelucram o imagine CMYK pentru web, tot ce avem de facut este sa o convertim in modul RGB.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 22 ALEGEREA SI SPECI FI CAREA CULORI LOR
Poate cel mai simplu mod de a alege o culoare in Photoshop este folosind Eyedropper tool (instrumentul pipeta) il selectam, facem clic pe o zona din imagine, si culoarea pe care am facut clic va deveni culoarea curenta. De asemenea, putem folosi caseta de selectie a culorii. Cu ajutorul acesteia, putem selecta o anumita culoare fie tragand cu mouse-ul pe suprafata cu culori pana cand gasim o culoare satisfacatoare, fie introducand de la tastatura valorile pentru rosu (R), verde (G) sau albastru (B), fie introducand de la tastatura valoarea hexadecimala a culorii. Valoarea hexadecimala a unei culori este formata din trei perechi de cifre sau litere, fiecare dintre aceste perechi descriind valorile de rosu, verde sau albastru ale culorii respective.
ADANCI MEA DE CULOARE A MONI TORULUI
Majoritatea site-urilor web pot fi accesate si vizualizate de oricine care acces la internet, de oriunde in lume. Insa diferitele monitoare, sisteme de operare si browsere prezinta niste diferente foarte mari in modul in care afiseaza culorile. Adancimea de culoare se refera la numarul de culori pe care un monitor il poate afisa. Intr-un calculator, informatia este reprezentata cu ajutorul bitilor (bitul este cea mai mica unitate informationala pe care o poate recunoaste un calculator, si poate lua valoarea fie de 0, fie de 1). Aplicata la monitoare, o adancime de culoare de un bit ar insemna ca un pixel de pe ecran ar putea sa ia doar doua valori (0 sau 1). Monitoarele foarte vechi puteau afisa doar doua culori (negru si verde, sau negru si portocaliu). Pe masura ce tehnologia a avansat, si monitoarele si placile video s-au imbunatatit, putand opera cu date mult mai complexe, deci putand afisa mult mai multe culori. Numarul de culori pe care il poate afisa un monitor creste exponential odata cu numarul bitilor folositi. Astfel, un monitor cu adancimea de culoare de un bit poate afisa doar 2 culori, 2 biti 4 culori, 3 biti 8 culori, 4 biti 16 culori, si asa mai departe. Majoritatea monitoarelor din ziua de azi au o adancime de culoare de 24 sau de 32 de biti. Cu toate acestea, exista inca multe monitoare mai vechi care pot afisa doar 256 de culori (8 biti). Din aceasta cauza, producatorii browserelor au ajuns la o intelegere de a adopta o paleta de 216 culori (care pot fi vazute si de monitoare mai vechi), numita Web Safe Color Palette.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 23 CULORI LE WEB SAFE
Paleta de culori Web Safe contine doar 216 culori. Desi monitoarele pe 8 biti pot afisa 256 de culori, restul de 40 de culori sunt rezervate de obicei pentru diferite aplicatii (care folosesc anumite nuante de gri si alte culori pentru icoane, meniuri, etc.). Pentru a incarca in Photoshop paleta de culori Web Safe, deschidem paleta Swatches, apasam butonul mic rotund si alegem Web Safe. Valoarea hexadecimala a culorilor din aceasta paleta este compusa din trei perechi din urmatoarele cifre sau litere: 00, 33, 66, 99, CC sau FF. Culorile din aceasta paleta au fost determinate printr-o metoda matematica, de aceea par putin nenaturale pentru ochiul uman (de exemplu, exista prea mult verde si albastru, si prea putin rosu si nuante apropiate de culoarea pielii). Datorita acestor limitari, multi web designeri aleg sa ignore paleta de culori Web Safe si sa lucreze cu paleta completa de culori RGB. Cel mai important aspect este publicul tinta al site-ului. Daca stim sigur ca vizitatorii au monitoare noi, putem folosi fara nici o problema intregul spectru de culori. Daca stim insa ca vizitatorii site-ului nostrum folosesc monitoare mai vechi sau laptop-uri, este mai bine sa utilizam paleta Web Safe. Putem schimba culorile unui intreg document in culori Web Safe alegand din meniul Image > Mode > Indexed Color, si alegand paleta Web Safe.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 24 5. RETUSAREA FOTOGRAFIILOR
Photoshop ne ofera posibilitatea de a ne retusa si optimiza fotografiile, in scopul publicarii lor pe web. In continuare, vom invata cateva dintre cele mai folosite modalitati de a corecta o fotografie in ceea ce priveste culorile.
Primul pas in corectarea fotografiilor este san e uitam la ceea ce exista deja in fotografie, ca informatii privind culorile. Putem face acest lucru cu ajutorul Histogramei (paleta Histogram sau din meniul Window > Histogram), vizualizand informatii in legatura cu luminozitatea, precum si canalele rosu, verde si albastru ale unei imagini.
Fiecare pixel dintr-o imagine RGB este compus dintr-o valoare a culorii rosu, o valoare a culorii verde si o valoare a culorii albastru. Fiecare dintre aceste valori se poate situa intre 0 si 255. Daca toate cele trei valori sunt 0, obtinem negrul. Daca toate cele trei valori sunt 255, obtinem albul. Sa ne imaginam ca adunam toate cele trei valori (valoarea culorii rosu, a culorii verde si a culorii albastru) pentru un anumit pixel din imagine. Suma obtinuta nu ne poate indica ce culoare avea acel pixel, dar ne poate spune cat de departe era de negru sau de alb. Aceasta valoare o masuram cu ajutorul unui grafic (Histograma) cu valori ale luminozitatii cuprinse intre 0 si 255. Pentru fiecare pixel din imagine, avem o valoare a luminozitatii de la 0 la 255, deci fiecare pixel se afla undeva pe acest grafic. Daca sunt mai mult pixeli cu aceeasi valoare, ei sunt reprezentati unul deasupra celuilalt atunci cand interpretam Histograma ne uitam care valori sunt cele mai inalte si ne dam seama ca cei mai multi pixeli au acele valori ale luminozitatii. Ideal, o imagine ar trebui sa aiba pixelii uniform imprastiati pe suprafata Histogramei, acest lucru ar insemna ca imaginea are detalii suficiente si ca ii putem corecta culorile. Daca insa pixelii sunt ingramaditi spre unele valori mult mai mult decat spre altele, se poate ca imaginea sa aiba o calitate prea slaba ca sa mai poata fi corectata.
Pentru web designeri, principalele metode de corectare a culorilor unei imagini sunt: Levels, Curves si Color Balance (pot fi accesate din meniul Image > Adjustments).
Atunci cand corectam o imagine din meniul Image > Adjustments, facem modificari permanente stratului pe care il corectam. Daca dorim ca modificarile facute sa nu fie permanente (sa poata fi anulate in caz ca nu ne multumesc), este bine sa folosim Adjustment layers (straturi de ajustare). Aceste straturi sunt pur si simplu niste straturi noi care contin anumite modificari de culoare si afecteaza toate straturile de dedesubtul lor. (Aceste straturi pot fi facute vizibile sau invizibile, si pot fi sterse ca si orice alt strat normal). Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 25 Pentru a crea un nou strat de ajustare, alegem din meniu Layer > New Adjustment Layer, dupa care alegem tipul acestuia (Levels, Curves, Color Balance, etc).
Iata o scurta descriere a instrumentelor din meniul Image:
Image > Mode stabileste tipul de imagine cu care se va lucra. Implicit, imaginea se va deschide in formatul salvat anterior. Noi avem totusi posibilitatea de a converti aceasta imagine in toate modurile existente (grayscale, indexed, RGB, CMYK, LAB, etc). Pentru fiecare comanda din aceasta sectiune se va deschide o fereastra de optiuni, de unde putem alege diversi parametric de conversie. Tot in aceasta sectiune putem face o conversie a numarului de pixeli alocati pe un canal de culoare (de la 8 bit/pixel la 16 bit/pixel). De asemenea, mai avem posibilitatea de a modifica profilul de culoare predefinit sau de a crea unul nou.
Image > Adjustments reprezinta sectiunea in care se pot face corectii directe asupra stratului curent sau asupra unei portiuni din acesta (aflata intr-o selectie). Aceasta zona cuprinde mai multe elemente:
Levels (shortcut Ctrl+L) actioneaza direct asupra canalelor de culoare, inchizand sau deschizand luminozitatea, fara a afecta contrastul. Se poate lucra pe toate canalele simultan sau pe fiecare canal in parte. Cu ajutorul unui controller putem modifica tonurile care sunt impartite in trei, in functie de gradul de luminozitate (culori deschise highlights, culori medii midtones, culori inchise shadows). Avem posibilitatea sa alegem o setare predefinita (Load) sau sa aplicam optiunea Auto, pentru a genera un balans de culori automat (care, din pacate, nu este intotdeauna cea mai buna solutie).
Auto Levels (shortcut Shift+Ctrl+L) genereaza un balans de nivele automat, fara a deschide o fereastra de optiuni. Acesta actioneaza Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 26 dupa un algoritm prestabilit, care ia in calcul cele mai deschise si cele mai inchise tonuri, dupa care face o medie si optimizeaza tonurile intermediare.
Auto Contrast (shortcut Alt+Shift+Ctrl+L) genereaza un contrast automat, fara a deschide o fereastra de optiuni. Acesta actioneaza dupa un algoritm prestabilit, care ia in calcul cele mai contrastante si cele mai putin contrastante tonuri, dupa care face o medie si optimizeaza tonurile intermediare.
Auto Color (shortcut Shift+Ctrl+B) genereaza un balans de culori automat, fara a deschide o fereastra de optiuni. Acesta actioneaza dupa un algoritm prestabilit, care ia in calcul culorile si saturatia acestora, dupa care optimizeaza fisierul in functie de acestea.
Curves (shortcut Ctrl+M) este o optiune foarte complexa, cu ajutorul careia putem actiona direct asupra canalelor de culoare si a contrastului. Avem la dispozitie o sinusoida care, prin deformare, actioneaza asupra fisierului. Se poate lucra pe toate canalele simultan sau pe fiecare canal in parte. Pe marginile curbei sunt afisate gamele de tonuri asupra carora intervenim, si care se vor modifica in timp real, putand in orice moment inverse tonalitatile (cele inchise cu cele deschise). Avem posibilitatea sa alegem o setare predefinita (Load) sau sa aplicam optiunea Auto, pentru a genera un balans de culori/contrast automat.
Brightness/Contrast dupa cum spune si numele acestei optiuni, ea actioneaza asupra luminozitatii si contrastului. Cele doua cursoare cu acelasi nume vor influenta canalul selectionat si vor intervene asupra acestuia, luminandu-l sau contrastandu-l.
Hue/Saturation (shortcut Ctrl+U) reprezinta o alternative pentru a modifica pozitia culorilor din spectru, raportat la un esantion. Astfel, daca vom misca cursorul Hue, cu optiunea Master selectionata, toate canalele vor face o tranzitie spectrala spre stanga sau spre dreapta. Culorile aflate la un moment dat intr-o anumita pozitie se vor deplasa, schimbandu-si frecventa de irizare, implicit culoarea initiala. Rosul poate sa devina galben, verde, albastru, violet, etc. Ne putem controla in orice moment deplasarea fata de spectrul original, datorita afisarii unui spectru martor (sample) care va ramane neschimbat. Tot din aceasta fereastra se poate modifica saturatia culorilor. Cursorul cu acelasi nume va modifica (pe toate canalele, cu optiunea Master, sau pe un canal ales de noi) intensitatea culorilor. Atunci cand saturatia este nula, imaginea color va deveni o imagine in tonuri de gri. Optiunea Hue/Saturation ne mai ofera si posibilitatea de a intervene in luminozitatea fisierului. Spre deosebire de celelalte optiuni care actioneaza asupra luminii, cursorul Lightness din Hue/Saturation va modifica luminozitatea in functie de optiunile (modificarile) Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 27 effectuate anterior in aceeasi fereastra, respective in functie de Hue (tranzitia spectrala) si Saturation. Avem posibilitatea ca, odata stabilite valorile acestor controlere, sa le salvam (Save) pentru ca, mai apoi, daca vom considera necesar, sa le reutilizam (Load).
Desaturate (shortcut Shift+Ctrl+U) intervine direct asupra fisierului, fara o fereastra de optiuni, si desatureaza (scoate culorile) din stratul selectat. Astfel, vom avea o imagine in tonuri de gri, similara unui fisier de tip grayscale, care va fi totusi pe trei canale RGB.
Replace Color este o optiune cu care avem posibilitatea de a inlocui o anumita culoare. Astfel, in fereastra deschisa alegem cu instrumentul Eyedropper (Pipeta) o culoare de pe suprafata fisierului, care se va regasi intr-o sectiune mostra (sample). Apoi, vom regal toleranta de selectie a culorilor raportate la mostra din cursorul fuzziness. Intervenim apoi cu cele trei cursoare (similare optiunii Hue/Saturation) asupra culorii selectionate si o vom transforma. Efectul este in timp real, astfel putem controla rezultatul asupra imaginii in mod direct.
Selective Color dupa cum ii spune si numele, intervine asupra culorilor in mod selective, modificandu-le. Putem alege gama de culori asupra careia vom interveni din sectiunea colors, dupa care vom misca cursoarele pentru a obtine efectul dorit.
Channel Mixer va modifica structura de canale de culoare a fisierului, amestecandu-le. Putem interveni in structura fiecarui canal, modificand consistenta acestuia in favoarea sau defavoarea altui canal.
Gradient Map aplica pe suprafata canalului active un gradient implicit sau predefinit (custom) sub o forma overlay, luand ca baza culoarile din foreground (culoarea activa) si background (culoarea de fundal).
Invert realizeaza negativul imaginii. Astfel, daca vom scana un film negativ si vom aduce aceste fisiere in Photoshop, alegand aceasta optiune imaginile vor fi transformate, rezultand pozitivul.
Equalize actioneaza direct, fara controlere, egalizand tonurile suprasaturate.
Threshold transforma imaginea intr-una similara unui fisier Lineart (alb/negru) fara tonuri intermediare de gri. In functie de nivel (Threshold Level), imaginea va contine mai mult sau mai putin negru.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 28 Posterize reduce numarul de culori de pe suprafata layout-ului. In sectiunea Levels este indicat numarul de culori vizibile la un moment dat. Putem modifica acest nivel pentru a obtine rezultatul dorit.
Variations ne permite sa alegem variatiuni coloristice afisate simultan. La fiecare clic pe una din optiunile oferite, imaginea se va schimba si va fi raportata la imaginea originala. Astfel, putem allege more red si imaginea va fi mai rosie, more blue si imaginea va fi mai albastra, etc. De asemenea, putem alege ca imaginea sa fie mai inchisa sau mai deschisa (darker lighter).
Image > Duplicate face o copie a fisierului deja existent.
Image > Apply Image realizeaza o suprapunere (in overlay versiunea implicita) a propriei imagini. Este o alternativa utila pentru a satura culorile pale.
Image > Calculations realizeaza o suprapunere (in overlay versiunea implicita) in tonuri de gri. Este o alternativa utila pentru a desatura culorile prea puternice.
Image > Image Size redimensioneaza fisierul. Din fereastra de optiuni putem allege dimensiunile in diverse unitati (pixeli, inci, cm, etc), apoi stabilim daca imaginea va fi redimensionata proportional latime/inaltime sau numai pe o axa. Tot din aceasta fereastra de optiuni putem schimba rezolutia fisierului si modul de interpolare (bicubic, bilinear, nearest neighbor).
Image > Canvas Size va taia imagine ape o dimensiune prestabilita. Diferenta dintre Image Size si Canvas Size este aceea ca in primul caz se redimensioneaza intregul fisier, in timp ce Canvas Size redimensioneaza doar o parte din acesta.
Image > Rotate Canvas cu aceasta optiune putem roti imaginea. Avem optiuni automate de rotire in sensul acelor de ceasornic sau invers la 90-180 grade, dar putem roti imaginea si cu un unghi stability de noi (Arbitrary). Tot aici avem posibilitatea de a transforma imaginea in oglinda (Flip) pe verticala sau pe orizontala.
Image > Crop este o optiune activa doar daca avem o selectie de tipul marquee. Aceasta comanda va taia fisierul de-a lungul selectiei respective. Este o alternative a uneltei Crop tool, atunci cand avem un fisier pe mai multe straturi si dorim sa taiem imaginea pe forma unui anumit strat.
Image > Histogram are un rol pur informative, dandu-ne informatii despre luminozitate, contrast si saturatie sub forma unei diagrame (histograme). Atunci cand vom trece mouse-ul de-a lungul acesteia, suntem informati si procentual despre structura coloristica a tuturor canalelor sau a fiecarui canal de culoare in parte. Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 29 6. APLICAREA FILTRELOR
Photoshop ne ofera posibilitatea de a aplica anumite transformari (mai mult sau mai putin utile) asupra unor imagini. Cu ajutorul unor mici programe denumite plug-in-uri (care se afla instalate in folderul cu acelasi nume din Photoshop) imaginile pot fi transformate automat, castigand astfel timp. De retinut faptul ca orice filtru aplicat in mod automat de Photoshop poate fi reconstituit manual (este adevarat, cu ceva timp si effort in plus) cu ajutorul uneltelor si efectelor disponibile. Aceste filtre se impart in mai multe categorii: filtre de deformare, filtre artistice, filtre de claritate, luminozitate, etc. Filtrele pot fi accesate din meniul Filter.
In continuare, vom exemplifica fiecare categorie de filtre.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 30 I MAGI NEA ORI GI NALA:
ARTI STI C:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 31
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 32
BLUR:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 33 BRUSH STROKES:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 34 DI STORT:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 35
NOI SE:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 36 PI XELATE:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 37 RENDER:
SKETCH:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 38
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 39
STYLI ZE:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 40
TEXTURE:
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 41
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 42 7. MASTI SI CANALE
Mastile izoleaza si protejeaza parti ale unei imagini. Atunci cand cream o masca bazata pe o selectie, suprafata care nu este selectata este mascata (protejata la editare). In Photoshop, putem crea masti temporare (numite quick masks masti immediate), sau putem crea masti permanente pe care sa le stocam sub forma de canale speciale in tonuri de gri (numite alpha channels canale alfa). De retinut faptul ca, spre deosebire de straturi, canalele nu sunt tiparite.
CREAREA UNEI MASTI I MEDI ATE ( QUI CK MASK)
Pentru a converti frontiera unei selectii intr-o masca temporara, vom folosi modul Quick Mask. Cu exceptia situatiei in care salvam o masca imediata in forma permanenta a unei masti canal alfa, masca temporara va fi inlaturata odata ce este convertita intr-o selectie.
Dupa ce am selectat portiunea din imagine pe care vrem s-o transformam intr-o masca temporara, selectam butonul Edit in Quick Mask mode (shortcut: Q) care se afla in caseta cu instrumente, dedesubtul casetei de selectie a culorii. In modul Quick Mask, un strat rosu suprapus apare pentru a masca si a proteja suprafata din afara selectiei. Putem aplica modificari numai suprafetei neprotejate, care este vizibila si selectata.
EDI TAREA UNEI MASTI I MEDI ATE
Pentru a face modificari asupra mastii imediate, de obicei folosim instrumentul Brush (Pensula), dar putem folosi aproape orice instrument sau filtru pentru a modifica masca. In modul Quick Mask, toata editarea este facuta in fereastra imaginii. In modul Quick Mask, Photoshop este configurat automat in modul Grayscale (Tonuri de gri). Culoarea de prim-plan stabilita este negru si culoarea de fundal prestabilita este alb. Cand folosim un instrument de picture sau editare in modul Quick Mask, trebuie sa tinem minte aceste principii: - Pictarea cu alb sterge masca (stratul rosu suprapus) si mareste suprafata selectata. - Pictarea cu negru adauga portiuni mastii (stratul rosu suprapus) si micsoreaza suprafata selectata.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 43 SALVAREA UNEI SELECTI I CA MASCA
Mastile imediate sunt temporare. Ele dispar imediat ce am deselectat elementele. Totusi, o selectie poate fi salvata ca masca intr-un canal alfa, astfel incat munca depusa, care a consumat timp, nu va fi pierduta. Astfel, vom putea utiliza din nou selectia in sesiunea de lucru curenta sau intr-o sesiune viitoare. Putem chiar sa utilizam canalele alfa in alte fisiere de imagine Photoshop.
Cand salvam o selectie ca masca, un nou canal alfa este creat in paleta Channels (o imagine poate contine pana la 56 de canale, incluzand toate culorile si canalele alfa).
Pentru a salva o selectie ca o masca, executam clic pe eticheta Channels sau alegem din meniu Windows > Channels. In aceasta paleta sunt enumerate canalele prestabilite pentru informatia de culoare un canal de previzualizare color pentru imaginea RGB si canale separate pentru rosu, verde si albastru. Cu selectia activa (in modul Standard), executam clic pe butonul Save Selection as Channel din partea de jos a paletei Channels. Va aparea un nou canal, Alpha 1. Canalele alfa pot fi adaugate si sterse si, la fel ca si mastile immediate, pot fi editate folosind instrumentele de pictat si editat.
Pentru a evita confuzia dintre canale si straturi, este bines a ne gandim la canale ca si cum ele contin informatia de culoare si de selectie a unei imagini; iar la straturi ca si cum ele contin pictura si efectele.
EDI TAREA UNEI MASTI
Pentru a edita masca dintr-un canal, putem sa folosim majoritatea instrumentelor de pictat si editat, exact cum am facut cand editam in modul Quick Mask. Mai intai de toate, trebuie sa ne asiguram ca este selectat canalul continand masca, si ca toate canalele RGB sunt ascunse (pentru aceasta utilizam pictograma ochi). Sa ne reamintim sfaturile pentru editarea unui canal cu un instrument de pictare sau editare: - Pictarea cu alb sterge masca si mareste suprafata selectata. - Pictarea cu negru extinde masca si micsoreaza suprafata selectata. - Pictarea cu valori de gri extinde sau restrange masca prin variatia opacitatii acesteia, proportional cu nivelul de gri folosit la pictat: cu cat este mai inchisa nuanta de gri, cu atat mai mare este opacitatea mastii si este mai mic numarul de pixeli inclusi in selectie.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 44 EXTRAGEREA UNEI I MAGI NI
Un alt instrument de mascare si selectie, Extract, poate realize unele selectii dificile. Aceasta comanda furnizeaza o modalitate rafinata de a izola un obiect din prim-plan de fundal. Chiar si obiectele cu margini franjurate, intortocheate sau nedefinite pot fi decupate din fundalurile lor, cu minimum de munca manuala. Comanda Extract se acceseaza din meniul Filter. Trebuie sa lucram intr-un strat pentru a utilize comanda Extract. Daca imaginea originala nu are straturi (are doar un fundal), puteti duplica imaginea intr-un nou strat.
Aplicarea unei extractii face suprafata din fundal sa devina transparenta, lasand doar obiectul extras. Din caseta de dialog Extract vom evidentia marginile obiectului, vom delimita interiorul obiectului si vom previzualiza extractia. Putem sa perfectionam si sa previzualizam extractia de cate ori dorim.
Atunci cand apare caseta de dialog Extract, este selectat instrumentul de evidentiere a marginilor (edge highlighter tool). Folosind acest instrument, evidentiem cu o pensula de marime medie conturul obiectului pe care vrem sa-l extragem. Nu este nici o problema daca evidentierea depaseste marginile, trebuie doar sa ne asiguram ca evidentierea formeaza un contur inchis in jurul intregii suprafete a extremitatii. Apoi, vom selecta instrumentul de umplere din caseta de dialog Extract si vom executa clic in interiorul extremitatii evidentiate pentru a umple interiorul (culoarea prestabilita de umplere este albastru stralucitor, pe cand culoarea de evidentiere este verde). Pentru a vedea extractia, executam clic pe butonul Preview, iar daca suntem multumiti de rezultat, apasam OK (in caz contrar, putem rafina extractia selectand optiunea Original din meniul Show si bifand casetele Show Highlight si Show Fill).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 45 8. FOLOSIREA TEXTULUI
TI PURI DE TEXT PE WEB
Pe o pagina web, textul poate fi de doua feluri: text simplu (HTML) si text in forma grafica (o imagine continand text) Textul simplu este introdus direct in codul HTML al paginii, si tot de acolo se poate alege tipul fontului, marimea, culoarea, precum si alte caracteristici. Desi exista mii sau chiar zeci de mii de fonturi diferite, de obicei pentru paginile web se folosesc doar cateva tipuri de fonturi, care pot fi recunoscute de toate browserele (fonturi instalate pe majoritatea calculatoarelor). Daca, atunci cand cream o pagina HTML, folosim un font special sau exotic, acesta nu va putea fi vizualizat decat de cei care il au instalat pe calculator; pentru restul vizitatorilor site-ului, textul va fi afisat cu cel mai apropiat font. Pentru a afisa pe pagina web un text cu un font special, pe care sa-l poata vedea toti vizitatorii, trebuie sa convertim textul intr-o imagine (text in forma grafica). Deoarece marimea fisierelor grafice este mult mai mare decat marimea fisierelor HTML, de obicei se ajunge la un compromis: textul principal al unei pagini este scris cu un font cunoscut (care este instalat pe toate calculatoarele), iar fonturile mai deosebite (textul in forma grafica) sunt folosite doar pentru sigle, logo-uri sau titluri.
TI PURI DE FONTURI
Un font, din punctul de vedere al unui calculator, reprezinta un fisier instalat pe acel calculator, care contine date despre felul in care este afisat textul. Aceste fisiere pot fi de doua tipuri: TrueType si PostScript. Pentru a instala un font de tip TrueType, accesam Control Panel > Fonts, iar in fereastra care se deschide, alegem din meniul File > Install New Font, si alegem fontul pe care vrem sa-l instalam. Pentru a instala fonturi de tip PostScript, avem nevoie de o aplicatie separata, cum ar fi Adobe Type Manager. Ne putem procura diferite fonturi de pe internet, insa trebuie sa avem grija ca fonturile pe care dorim sa le folosim pentru site-ul nostru sa nu aiba copyright (daca folosim fonturi inregistrate fara permisiunea autorului, putem avea probleme legale). Pentru a face mai usoara categorizarea fonturilor, acestea au fost incluse in cateva mari familii. Iata cateva din cele mai cunoscute familii de fonturi: - serif literele au mici liniute la capatul liniilor (exemplu: Times New Roman) - sans serif literele au linii drepte, care se termina fara alte liniute (exemplu: Verdana, Arial) Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 46 - monospace fiecare litera are aceeasi latime si este spatiata fata de celelalte la aceeasi distanta - script litere de mana - decorative litere decorative
ALEGEREA FONTULUI SI A STI LURI LOR TEXTULUI
Photoshop ne ofera posibilitatea de a schimba cu usurinta tipul fontului, precum si alte caracteristici ale textului. Pentru a accesa optiunile instrumentului Type (Text), il selectam (si ne apare bara de optiuni) sau alegem din meniu Window > Show Character (in acest fel ni se deschide o paleta cu optiuni ale paragrafului). Putem alege daca textul pe care il vom introduce va fi creat sub forma vectoriala pe un nou strat, sau ca o noua selectie pe stratul current. Putem alege daca textul este scris pe orizontala sau pe verticala. Putem alege dimensiunea, postura (normal, bold, italic, bold si italic), centrarea paragrafului (la stanga, centru sau dreapta), indentarea. Cu optiunea Wrap Text putem alege diferite orientari si curburi ale textului selectat. De asemenea, putem aplica diferite efecte textului. Pentru aceasta, selectam paleta Styles, si accesam optiunile sale apasand pe butonul mic rotund cu o sageata in mijloc. De aici putem allege Text Effects sau Text Effects 2, selectam textul (sau stratul pe care este textul) caruia dorim sa-i aplicam un anumit efect, dupa care dam clic pe efectul respectiv.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 47 9. EFECTE SPECIALE APLICATE STRATURILOR (BLENDING OPTIONS)
Spre deosebire de filtrele din meniul Filter, mai exista un set de filtre (sau efecte speciale) denumite generic Blending options, care actioneaza direct asupra unui strat, proprietatile acestuia ramanand deschise atata vreme cat fisierul este salvat pe straturi (multi-layer), putand fi inlaturate in orice moment, fie prin tragerea lor peste iconul cos de gunoi, fie accesand din nou optiunea blending si deselectand filtrul in cauza.
Pentru a aplica acest gen de efecte speciale unui strat, vom selecta stratul, dupa care vom da clic-dreapta pe acesta si vom selecta din meniul derulant Blending options.
In fereastra nou deschisa vom alege unul din filtre, actionand asupra lui. Pentru fiecare dintre acestea exista mai multe controlere prin care se pot modifica intensitatea, culoarea, dimensiunea, etc.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 48
- Drop Shadow genereaza o umbra sub stratul selectionat, care va urma o directie stabilita de catre noi. De asemenea, se poate regla intensitatea, dimensiunea si transparenta acesteia din controlerele disponibile in aceasta sectiune.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 49 - Inner Shadow genereaza o umbra in interiorul stratului selectionat, care va urma o directie stabilita de catre noi. De asemenea, se poate regal intensitatea, dimensiunea si transparenta acesteia din controlerele disponibile in aceasta sectiune.
- Outer Glow genereaza o aura (o reflexie difuza in exteriorul stratului selectionat). Culoarea acesteia poate fi schimbata. Se poate schimba de asemenea intensitatea, modul in care va arata, marimea si forma.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 50
- Inner Glow genereaza o aura (o reflexie difuza in interiorul stratului selectionat). Culoarea acesteia poate fi schimbata. Se poate schimba de asemenea intensitatea, modul in care va arata, marimea si forma.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 51 - Bevel and Emboss este un filtru mai complex care va genera o reliefare a stratului selectionat. Acest relief poate fi in exterior (Up) sau in interior (Down). Cu ajutorul controlerelor, putem mari sau micsora inaltimea sau adancimea reliefului, putem stabili cat de dure sa fie marginile si unghiul din care trebuie sa cad alumina, putem decide sub ce forma sa fie aceasta reliefare.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 52 - Contour optiuni referitoare la conturul reliefului creat.
- Texture optiuni referitoare la textura reliefului creat.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 53 - Satin aplica un efect matasos asupra stratului selectat. Putem controla culoarea acestuia, intensitatea si modul in care va arata, marimea si forma.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 54 - Color Overlay aplica o suprasaturatie a stratului selectionat peste stratul imediat inferior. Poate fi controlata transparenta si culoarea care va fi aplicata, precum si modul in care se va face overlay din Blend Mode.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 55 - Gradient Overlay este relativ similar cu Color Overlay, cu deosebirea ca suprasaturatia se va face gradient, de la negru spre transparent.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 56 - Pattern Overlay aplica o suprasaturatie a stratului selectionat peste stratul imediat inferior, luand ca mostra un fisier de tip Pattern (textura). Poate fi controlata transparenta, precum si modul in care se va face overlay din Blend Mode.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 57 - Stroke genereaza un contur in jurul canalului selectionat. Putem controla culoarea lui, dimensiunea, transparenta si felul in care sa fie aplicat (in interior, in exterior sau in centrul stratului).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 58 10. CREAREA LEGATURILOR INTR-O IMAGINE
Exista doua tehnici pe care le putem utilize pentru a crea subdiviziuni de legatura ale unei imagini, pe care utilizatorii executa clic pentru a deschide diferite site-uri intr-un browser web.
Prima metoda este sa cream felii (slices). Feliile de imagine sunt zone dintr- o imagine pe care le delimitati la baza straturilor, liniilor de ghidare sau selectiilor precise din imagine, sau prin utilizarea instrumentului pentru felii (Slice tool). Atunci cand definim felii intr-o imagine, Photoshop creeaza un tabel HTML sau o foaie de stiluri in cascada (cascading style sheet) pentru a contine si a alinia feliile. Daca dorim, putem genera si previzualiza un fisier HTML care contine imaginea divizata impreuna cu tabelul sau foaia de stiluri in cascada.
O harta de imagine (image map) este, de asemenea, o suprafata a imaginii care serveste drept suport pentru o legatura hypertext. Butoanele pentru realizarea hartilor de imagine apar numai in programul ImageReady; asa ca, daca fisierul este deschis in Photoshop, trebuie sa comutam la programul ImageReady (apasand butonul care se afla in josul barei de instrumente) pentru a realiza aceasta sarcina. Spre deosebire de felii, care sunt intotdeauna dreptunghiulare, hartile de imagine pot avea orice forma.
DI VI ZAREA I N FELI I A UNEI I MAGI NI
In Photoshop, putem delimita felii prin tragerea instrumentului Slice tool sau prin convertirea in felii a straturilor sau a selectiilor. Ne vom ajuta de prezenta liniilor ajutatoare. Pentru aceasta, trebuie san e asiguram ca urmatoarele comenzi sunt selectate (bifate): View > Show > Guides View > Show > Slices View > Snap View > Snap To > Guides View > Snap To > Slices Liniile de ghidare albastre au fost create pentru a ne ajuta sa desenam cu precizie feliile. Pe masura ce cream felii apropiate de liniile de ghidare, marginile feliei vor fi atrase de liniile de ghidare, astfel incat feliile sa fie uniforme si eficiente.
Orice noua felie dintr-o imagine (o felie definita de catre noi) determina, de asemenea, crearea altor felii (felii automate) care acopera toata suprafata imaginii din exteriorul feliei pe care am creat-o. Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 59 In dreptunghiul mic din coltul din stanga-sus al imaginii, vom vedea numarul feliei. Culoarea gri ne va spune ca este o felie automata, iar culoarea albastra va indica o felie creata de noi.
Dupa ce am taiat feliile de care avem nevoie, le putem selecta pe rand cu instrumentul Slice Select tool. Cu ajutorul acestuia (dand clic-dreapta pe o felie si alegand optiunea Edit Slice Options) putem denumi felia sau ii putem atasa adresa (URL) catre care va face link.
Daca dorim sa cream felii de aceeasi dimensiune, egal distantate si aliniate, putem crea o singura felie care inconjoara cu precizie intreaga suprafata. Apoi, vom utiliza caracteristica Divide Slice (Divizarea feliei) din bara de optiuni a instrumentului de selectie a feliei (Slice Select tool), pentru a diviza felia originala in cate randuri verticale si orizontale de felii avem nevoie.
LUCRUL CU HARTI DE I MAGI NE ( I N I MAGEREADY) Programul Adobe ImageReady (care este instalat odata cu Photoshop si constituie o unealta ajutatoare a acestuia) ne ofera posibilitatea de a realiza harti de imagine (image maps). Acestea sunt folositoare in cazurile cand vrem ca unele portiuni din imagini care corespund legaturilor spre diferite pagini web sa isi pastreze formele (cu ajutorul feliilor nu putem face decat legaturi de forma dreptunghiulara).
Pentru a crea o harta de imagine, vom deschide imaginea respectiva in Photoshop, si apoi vom comuta la programul ImageReady (apasand butonul care se afla in josul barei de instrumente). Pentru a reveni din nou in Photoshop, tot ce avem de facut este sa apasam pe butonul asemanator din ImageReady.
Pentru a delimita zona de imagine care va fi folosita pentru a face o anumita legatura, avem de ales intre instrumentele Rectangle Image Map Tool (care delimiteaza zone rectangulare asemanatoare feliilor), Circle Image Map Tools (care delimiteaza zone circulare) sau Polygon Image Map Tool (cu ajutorul caruia putem delimita zone cu forme complexe). Aceste instrumente au ca shortcut tasta P.
Dupa ce am delimitat zona (sau zonele) hartii de imagine care vrem sa corespunda unor link-uri, vom alege instrumentul Image Map Select Tool si, pentru fiecare zona, vom introduce datele in paleta Image Map (pe care o putem accesa din meniul Window > Image Map). Aici putem introduce numele pe care dorim sa il dam respectivei zone a hartii de imagine, URL-ul (adresa link-ului), sau Alt Tag (descrierea care apare in browser atunci cand indicatorul mouse-ului se afla deasupra zonei respective).
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 60 Pentru a vizualiza in browser harta de imagine, selectam din meniu File > Preview in > si ne alegem browserul (Internet Explorer, Mozilla Firefox, Opera, etc.) Pentru a salva harta de imagine, folosim optiunea File > Save.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 61 11. ANIMAREA IMAGINILOR GIF IN PROGRAMUL ADOBE IMAGEREADY
In programul Adobe ImageReady, putem crea animatii pornind de la o singura imagine, utilizand fisiere GIF animate. Un fisier GIF animat este o secventa de imagini, sau cadre (frames). Fiecare cadru difera putin fata de cadrul precedent, creand iluzia de miscare atunci cand cadrele sunt vizualizate in succesiune rapida exact la fel ca filmele. Putem crea animatii deschizand paleta Animation (din Window > Animation), iar apoi:
- prin utilizarea butonului Duplicate Current Frame (Duplicarea cadrului current) din paleta Animation, pentru a crea cadre de animatie, si apoi prin utilizarea paletei Layers, pentru a defini starea imaginii asociata cu fiecare cadru
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 62 - prin utilizarea caracteristicii Tween, pentru a crea rapid noi cadre care curbeaza textul sau variaza opacitatea, pozitia sau efectele unui strat, pentru a crea iluzia existentei intr-un cadru a unui element care se misca sau care apare si dispare
- prin deschiderea, in scopul realizarii unei animatii, a unui fisier Adobe Photoshop cu mai multe straturi, fiecare strat devenind un cadru.
Cand realizam o secventa de animatie, cel mai bine este sa selectam eticheta Original in fereastra imaginii, deoarece acest mod de afisare scuteste programul ImageReady de necesitatea reoptimizarii imaginii pe masura ce editam continutul cadrului. Fisierele de animatie sunt livrate fie ca fisiere GIF, fie ca filme in format QuickTime. Nu putem crea o animatie JPEG sau PNG.
LUCRUL CU STRATURI I N ANI MATI I
Lucrul cu straturi este o parte esentiala a realizarii animatiilor in programul ImageReady. Plasarea fiecarui element al unei animatii pe propriul sau strat ne da posibilitatea sa modificam pozitia si aspectul elementului peste o serie de cadre.
Modificari specifice cadrului Unele modificari pe care le facem asupra straturilor afecteaza numai cadrul active al animatiei. In mod prestabilit, modificarile pe care le facem asupra straturilor utilizand optiunile si comenzile paletei Layers incluzand opacitatea unui strat, modul de amestecare, vizibilitatea, pozitia si stilul sunt specifice cadrului. Totusi, Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 63 putem aplica modificari ale straturilor tuturor cadrelor dintr-o animatie utilizand butoanele unitate din paleta Layers.
Modificari globale Unele modificari afecteaza fiecare cadru in care sunt incluse straturile. Modificarile pe care le facem asupra valorilor de pixeli ale stratului, utilizand instrumentele de pictat si de editat, comenzile pentru ajustarea culorii si tonului, filtrele, textul si alte comenzi pentru editarea imaginii, sunt modificari globale.
Fiecare cadru nou isi face aparitia ca un duplicate al cadrului precedent editam cadrul prin ajustarea straturilor sale. Putem aplica modificari de strat unui singur cadru, unui grup de cadre, sau intregii animatii.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 64 12. CREAREA EFECTELOR DE TIP ROLLOVER IN PROGRAMUL IMAGEREADY
Efectele rollover sunt efecte web familiare care modifica aspectul obisnuit (starea Normal) al paginii web fara a transfera vizitatorul intr-o alta pagina web. Exemplul principal este functionarea omonima: atunci cand un utilizator rostogoleste mouse-ul (to roll = a rostogoli) astfel incat indicatorul sa treaca pe deasupra unei zone delimitate a unei pagini web, acea zona a paginii isi modifica aspectul intr-un anumit fel. De obicei, acest lucru este facut ca o indicatie vizuala, subliniind ca zona este un hotspot (punct fierbinte) pe care vizitatorul poate executa clic pentru a face sa se intample ceva, cum ar fi deschiderea altei pagini web.
Exista si alte tipuri de efecte rollover. Unele efecte rollover sunt legate de alte tipuri de actiuni ale utilizatorului, cum ar fi executarea unui clic sau tinerea butonului mouse-ului apasat. Unele efecte rollover declansate de o actiune a vizitatorului intr-o zona a paginii web pot provoca modificarea altei parti a paginii.
Efectele sau starile rollover reprezinta diferite conditii din paleta Layers. Aceste conditii pot implica vizibilitatea straturilor, pozitia straturilor, stilurile straturilor si alte optiuni de formatare.
O stare rollover este denumita dupa evenimentul, cum ar fi un clic cu mouse- ul sau rostogolirea indicatorului peste o zona a imaginii, care declanseaza o modificare in imagine sau intr-o parte a acesteia.
Efectele rollover la distanta (remote rollovers) leaga o stare rollover dintr-o felie de modificarile din alta felie. De exemplu, utilizatorul ar putea sa execute clic pe un buton (felia de activare) care ar face vizibil, in alta zona a paginii web, un desen sau un bloc de text care inainte era ascuns (felia comandata la distanta).
Numai feliile definite de utilizator (de noi) pot avea stari rollover. Totusi, putem sa alegem Slice > Promote pentru a converti o felie automata intr-o felie definita de utilizator, si a atribui apoi stari rollover acelei felii.
CREAREA UNEI STARI ROLLOVER
Pentru a crea o stare rollover, vom executa urmatorii pasi:
- vom deschide imaginea in programul ImageReady Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 65 - vom selecta felia careia dorim sa-i aplicam un efect rollover (sau, daca nu sunt taiate feliile, vom taia una careia ii vom aplica un efect rollover) - duplicam stratul pe care se afla imaginea pentru care dorim sa cream o stare rollover, iar apoi facem modificarile dorite asupra noului strat duplicat (de exemplu: pentru imagini putem schimba saturatia sau culorile, etc.) dupa care facem acest strat nevizibil (debifam ochiul) ATENTIE: pentru efectele textului nu este nevoie sa cream un nou strat - selectam din nou stratul initial (cu starea normala) din paleta Web Content (daca nu este deschisa, alegem din meniu Window > Web Content), selectam optiunea Create Rollover State (butonul din stanga cosului de gunoi) aceasta va creea automat o stare de tip Over
- daca dorim sa schimbam tipul starii, facem dublu-clic pe acea stare si ii schimbam timpul, sau facem clic-dreapta, alegem optiunea Set State si apoi alegem tipul starii
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 66
- avand selectata noua stare Over (sau de alt tip), facem vizibil stratul pe care am facut modificarile, in acest fel noua stare afiseaza pictograma imaginii modificate - pentru a vizualiza efectul in browser, alegem din meniu File > Preview in > si alegem browserul, sau butonul reprezentand icoana Internet Explorer din paleta cu instrumente
- pentru a salva fisierul, alegem File > Save.
TI PURI DE STARI ROLLOVER Programul ImageReady atribuie in mod automat una dintre urmatoarele stari noilor elemente rollover pe care le cream.
Over Activeaza imaginea atunci cand vizitatorul trece cu indicatorul mouse-ului peste felia sau zona respective a hartii de imagine, fara ca butonul mouse-ului sa fie apasat.
Down Activeaza imaginea atunci cand vizitatorul apasa butonul mouse-ului pe felia sau zona hartii de imagine. Starea apare atata timp cat cel ce vizualizeaza pagina tine apasat butonul mouse-ului pe zona respective.
Click Activeaza imaginea atunci cand vizitatorul executa clic cu mouse-ul pe felia sau zona hartii de imagine. Starea apare pana cand vizitatorul muta mouse-ul in afara zonei rollover.
Photoshop Realizator curs: Irina Motoc Copyright 2006: Institutul Multimedia Romano - Elvetian 67 Custom Activeaza imaginea cu numele specificat atunci cand utilizatorul executa actiunea definita in codul JavaScript corespunzatorl (Pentru ca aceasta optiune sa functioneze, trebuie sa cream cod JavaScript si sa il adaugam fisierului HTML al paginii web.)
None Conserva starea curenta a imaginii in vederea utilizarii ulterioare, dar nu afiseaza o imagine atunci cand fisierul este salvat ca o pagina web.
Selected Activeaza starea rollover atunci cand utilizatorul executa clic cu mouse-ul pe felia sau zona hartii de imagine. Starea apare pana cand utilizatorul activeaza alta stare rollover selectata, iar alte efecte rollover pot sa apara in timp ce starea selectata este activa.
Out Activeaza imaginea atunci cand vizitatorul rostogoleste mouse-ul afara de pe felia sau zona hartii de imagine. (De obicei, starea Normal serveste acestui scop).
Up Activeaza imaginea atunci cand vizitatorul elibereaza butonul mouse- ului peste felia sau zona hartii de imagine.