8/16/2019 5 Prelucrare Grafica 3

1/1

CAP V - Prelucrare Grafica (3)

de data aceasta rezultatul la care trebuie sa ajungem este urmatorul:

sa pornim la drum: vom "taia" o bucata din imaginea cu zgarie-norii, care mai este inca deschisa in photoshop (nu cea pe caretocmai am finalizat-o, ci cea initiala cu zagarie-norii, pe care am prelucrat-o). fa click pe ea pentru a o selecta, apoi utilizeazainstrumentul de selectie pentru a selecta un dreptunghi in lungime (W ) de 85 si inaltime ( H ) de 255 (toata inaltimea imaginii). poti selecta zona prezentata in imaginea de mai sus, sau alta (dar de aceeasi dimensiune). dupa aceas ta selectie mergi la

 Image/Crop pentru a o "decupa". acum mergi la  Image/Canvas Size, apasa pe coltul din stanga-sus al patratului anchor , siintrodu valorile 750 la width si 255 (nemodificat) la height. imaginea s-a "latit", iar culoarea fondului a ramas nemodificata lagri. selecteaza Layer/Flatten Image pentru a uni layer-ele acestei imagini.

acum mergi la macheta primei pagini pe care am finalizat-o in capitolul precedent si selecteaz-o (click pe ea). diferitele imaginideschise in photoshop pot fi selectate si din meniul windows - partea de jos. in fereastra layers apasa cu butonul din stanga almouse-ului pe numele ATS . iar apoi tine apasat pe ctrl  si apasa din nou in acelasi loc - pe ATS , pentru a selecta continutulacestui layer. apoi ctrl si c pentru a il copia. apoi selecteaza imaginea la care lucram in acest capitol (cea "latita"), si apasa ctrl siv pentru paste. foloseste unealta de pozitionare pentru a pozitiona noul layer ca in modelul de mai sus. prin copiere nu s-autransferat si efectele layer-ului (drop shdow). intrucat aceasta este o pagina de continut, nu avem nevoie de efecte pentru a nu oincarca inutil.

acum copiaza din macheta primei pagini si layer-ul TIA, urmand aceiasi pasi ca mai sus. repozitioneaza simbolurile in coltul dindreapta jos in imaginea la care lucram acum. reamintesc ca poti apasa tasta tab pentru ascunde bara de instrumente si alteferestre cu informatii, pentru a face loc pe ecran. cand ai nevoie din nou de ele, apasa tab din nou.

vom scrie titlurile celor trei pagini de continut. deci, unealta de text, click in imagine si scriem cu font  Impact , size 22 si culoare

 ffffff  textul Eat with Us. Pozitioneaza-l corespunzator si apasa OK . Urmand aceiasi pasi scriem sub el Play with Us, si dedesubt

 Relax with Us (nu uita sa schimbi culoarea in ffffff  la fiecare din acestea). am terminat si cu cea de-a doua macheta.

daca nu ti-au iesit machetele, sau nu ai avut chef sa treci prin toata nebunia de mai sus, atunci am vesti bune: poti descarca celedoua machete in format psd  si le poti deschide in photoshop. apasa aici pentru prima macheta, si aici pentru cea de-a doua (sedeschid in photoshop; daca nu sunt afisate la marime 100%, atunci apasa ctrl si + si redimensioneaza fereastra "tragand" de uncolt). avantajele fisierelor photoshop (psd) sunt ca pastreaza structura layer-elor, spre deosebire de fisierele jpg sau gif. daca ailucrat singur la grafica, asa ca un elev silitor, atunci nu apasa pe link-urile de mai sus.

acum avem cele doua machete in photoshop. le putem admira sau le putem modifica daca nu ne plac: putem adauga alte titluri,schimba fonturi, prelucra imaginea, etc. pentru exemplul asta le lasam asa, si mergem mai departe: acum trebuie sa "decupam"elementele pe care le vom folosi pe site-ul web. pe un site web nu incarcam machetele integral, asa cum apar in photoshop, ciincarcam doar portiunile care ne intereseasza.

incepem cu prima macheta - click pe ea pentru a o selecta. mergem la  Layers/Flatten Image pentru a uni toate layer-ele. apasa pe imaginea de mai jos pentru a vedea ce ai de "decupat". portiunile care ne intereseaza sunt incadrate in chenare verzi,

inauntrul carora se afla numele fisierelor pe care le vom crea. studiaza putin aceasta imagine:

asa ca acum mergi in photoshop, alege unealta de selectie si pune-te pe treaba. incadreaza cat mai precis prima zona care neintereseaza - poza cu zgarie-norii; apoi apasa ctrl si c pentru copy, ctrl si n pentru o imagine noua - va avea in mod implicitdimensiunea zonei selectate, deci apasa OK , ctrl si v pentru paste. mergi la File/Save for Web in meniu; la settings alege JPEG la tipul fisierului, 80 la quality si 0 la blur. bifeaza optimized  si apasa OK . salveaza fisierul cu numele poza in folderul in carelucrezi cu acest ghid. dupa ce ai salvat-o, inchide imaginea nou-deschisa cu zgarie-norii. revino la prima macheta si decupeazarestul elementelor, urmand aceiasi pasi ca si pentru poza.jpg. ai mare grija ca cele patru butoane sa aiba aceeasi inaltime - acestlucru este important pentru a le putea alinia corespunzator in pagina html. daca te ajuta, incearca sa maresti putin dimensiunea pe ecran a machetei, apasand ctrl si +.

 procedam in mod similar cu a doua macheta - click pe ea in photoshop pentru a o selecta. apasa pe imaginea de mai jos pentru avedea ce ai de decupat:

si acum, la fel ca la prima macheta:  Layer/Flatter Image, alege unealta de selectare si apoi incepe sa selectezi zonele prezentatein chenarul verde (deci, ne-am inteles, te uiti la poza cu chenare verzi deschisa in internet explorer, dar de selectat si decupat teocupi in photoshop), copiezi, deschizi o imagine noua, paste, apoi save for web cu numele din chenar, inchizi fereastra nou-deschisa, iar apoi repeti pentru toate zonele ce trebuie selectate. atentie ca butoanele sa fie de aceeasi inaltime.

in final am obtinut fisierele poza.jpg, but.jpg, but1.jpg, but2.jpg, but3.jpg si titlu1.jpg pentru prima macheta, si poza2.jpg, but4.jpg, but5.jpg, but6.jpg, but7.jpg, titlu2.jpg, titlu3.jpg si titlu4.jpg. misiunea noastra in photoshop s-a incheiat. in capitolulurmator incepem sa scriem codul html al site-ului.

Page 1 of 1verde.ro - cu noi internetul este simplu

30.04.2004http://www.verde.ro/ghid2/6.html

http://www.verde.ro/ghid2/6.htmlhttp://www.verde.ro/ghid2/6.html