1

V. Proiectarea machetei: Structura Pe baza schielor i culorilor alese vom proiecta macheta pentru prima pagin din

site-ul FoodCenter, folosind Adobe Photoshop; vom realiza structura paginii i vom crea zona de antet i subsol. n acest sens vom folosi opiunile de layout disponibile n Photoshop, care ne permit alinierea design-ului la o gril anterior definit.

Generaliti privind layer-ele

Layer-ele permit crearea i administrarea compoziiei prin descompunerea graficii

n piese, fiecare layer comportndu-se ca un document distinct. Putem realiza operaii de selecie, copiere, tiere, aplicare i tergere i aplica efecte layer-elor individuale. Layer-ele sunt transparente, astfel nct le putem utiliza pentru a construi compoziia noastr din piese.

Cnd exportm o imagine din Illustrator sau Photoshop n JPEG, GIF, PNG, sau alt tip, Photoshop combin sau aplatizeaz layer-ele. Dac pierdem sau tergem documentul original, trebuie s refacem macheta, deoarece nu vom putea recupera layer-ele individuale.

Crearea structurii de baz

Vom ncepe prin mprirea schiei principale din pagina de start n patru regiuni

dreptunghiulare: un bloc pentru antet, altul pentru subsol i nc dou pentru coninutul pe coloane (vezi figura).

Vom folosi dreptunghiuri cnd vom trasa structura site-ului Web. Dimensiunea ecranului Cnd construim o pagin web, nu cunoatem dimensiunea ecranului pe care l

vom folosi n site-ul web. Cea mai bun abordare din acest moment este s lum n considerare dimensiunea medie a unui ecran. n acest moment majoritatea utilizatorilor de pe Web utilizeaz o rezoluie de 1024 x 768, i un procent semnificativ utilizeaz rezoluii superioare (conform site-ului

2

http://www.w3schools.com/browsers/browsers_display.asp n ianuarie 2010, 20% dintre utilizatori aveau monitoare cu rezoluia de 1024 x 768 i 76% aveau configurate monitoarele la o rezoluie superioar acesteia). Aceste statistici ne pot induce n eroare; chiar dac un utilizator are un ecran lat de monitor setat la o rezoluie nalt, este posibil ca utilizatorul s nu foloseasc browser-ul maximizat, acesta putnd s stea alturi de alte aplicaii. Utilizatorii pot folosi i telefoane mobile, PDA-uri, iPod-uri, iPad-uri i chiar Nintendo Wii pentru a naviga pe Internet. Site-ul nostru trebuie s fie lizibil pe aproape orice dimensiune de afiare.

Creai un nou document n Photoshop numit foodcenter_mockup, cu dimensiunile 900px lime i 756px nlime, la o rezoluie de 72 dpi. Setai modul de culoare la RGB, i fundalul la alb. Am ales aceste dimensiuni pentru c ne focalizm pe dimensiunea ecranului de 1024 x 768 i este nevoie s facem pagina mai ngust, deoarece trebuie s lum n considerare i barele de derulare ale browser-ului i un mic spaiu suplimentar pe margini. n concluzie, vom construi un layout cu limea fix. Odat creat noul document, salvai-l ca foodcenter_mockup.psd n directorul originals din directorul n care este stocat proiectul nostru.

Layout-uri cu lime fix n layout-urile cu lime fix dimensiunea paginii rmne aceeai, indiferent de

dimensiunea ferestrei browserului. Aceste layout-uri sunt uor de proiectat i implementat, comparativ cu cele flexibile sau fluide. Layout-urile fluide necesit mai mult testare i mai mult cod pentru ca coninutul s fie lizibil n toate cazurile. Dac nu suntem ateni cu un astfel de layout fluid, rndurile de text pot deveni extrem de lungi, ntinzndu-se pe ntreaga pagina sau sunt prea nguste (n ambele cazuri site-ul va fi greu de citit). Un layout cu limea fix este uor de implementat i nu necesit mult timp.

n funcie de tipul site-ului putem distinge diferite tipuri de layout-uri. Site-urile care conin multe informaii pot necesita un layout fluid. O aplicaie bazat pe web care afieaz multe date nu va funciona corect pe un layout cu limite fixe. Trebuie evaluat situaia i proiectat un layout adecvat nevoilor noastre, evitnd urmarea unor tendine sau reutilizarea aceluiai template pentru fiecare site pe care l construim.

Zona vizibil (fold) Dimensiunile paginii pe care le vom folosi vor determina ca anumite pagini s fie

afiate sub zona vizibil, ceea ce nseamn c anumii utilizatori cu monitoare mici vor trebui s se deplaseze n jos pentru a vedea pagina. Termenul fold provine din publicistic i se refer la zona dintr-un ziar pe care o vedem pe un stand cu ziare nainte de a desfura ziarul. Teoretic, se dorete a se afia ct mai mult informaie important din site n aceast zon vizibil.

Configurarea grilei Vom ncepe cu schimbarea unitii de msur pentru riglele topx folosind Edit >

Preferences> Units and Rulers. Apoi, setm valoarea pentru liniile din gril la 18px folosind subdiviziunea din meniul Edit > Preferences > Guides, Slices, and Count. Acesta afieaz o gril care va servi ca ghid n tot ceea ce vom face ulterior. Observai c distana ntre liniile grilei este 18px, care este aceeai dimensiune pe care am stabilit-o pentru nalimea liniei fonturilor. Din setrile grilei vom seta culoarea liniilor din gril la

3

o culoare respingtoare, cum ar fi un verde strlucitor sau o alt culoare complet diferit de culoarea pe care o vom folosi n compoziia noastr. Acest lucru va face grila s ias n eviden mai mult, o dat ce ncepem s adugm mai multe elemente. ntr-un spaiu de lucru Photoshop implicit grila i riglele nu sunt active. Vom afia riglele folosind combinaia de taste Ctrl + R, i grila folosind CTRL + '.

Definirea regiunilor folosind ghiduri Cnd am proiectat logo-ul am nvat cum s folosim ghiduri pentru a alinia textul

logo-ului cu cele patru casete. Vom mpri aceast compoziie n diversele sale seciuni folosind ghidurile, astfel nct s putem trasa i alinia cu uurin elementele. Vom utiliza instrumentul Rectangle Shape pentru a trasa diversele seciuni ale paginii i vom ncepe cu antetul i subsolul. Vom face antetul i subsolul de aceeai culoare, dar ar trebui s nu ezitai s experimentai.

Mai nti vom defini nlimea pentru antet i subsol. Antetul ar trebui s fie suficient de nalt pentru a arta n mod clar logo-ul. Subsolul nu are nevoie s fie att de nalt, pentru c va arta o declaraie privind dreptul de autor i termenii i condiiile de utilizare a site-ului. Cnd definim dimensiunile pe vertical pentru aceste regiuni trebuie s ne gndim din nou la grila de baz. Am stabilit o unitate de 18px pentru gril, deci nlimea pentru antet i subsol ar trebui s se mpart n mod egal la 18. S ncercm valori de 108px pentru antet i 54px pentru subsol.

Pentru a plasa ghidul pentru antet, plasai indicatorul mouse-ului oriunde de-a lungul riglei orizontale n partea de sus a compoziiei dumneavoastr. Facei clic i tragei n jos ctre marcajul 108px al riglei. Eliberai butonul mouse-ului pentru a plasa ghidul. Plasai un alt ghid la 702px pentru subsol.

Bara lateral ar trebui s fie suficient de lat pentru a include formularul de cutare a reetelor i norul de tag-uri. ncercai s facei bara lateral cu limea de 306px (o putem ajusta mai trziu). Plasai indicatorul mouse-ului oriunde de-a lungul riglei verticale pe partea stng a compoziiei. Facei clic i tragei spre dreapta pn ajungei la semnul 306px pe rigl, apoi eliberai butonul mouse-ului pentru a plasa ghidul.

Avem acum toate cele patru regiuni definite de ghiduri, dup cum arat figura. Le putem completa cu forme dreptunghiulare. Observai c marginile tuturor celor patru seciuni cad pe liniile grilei.

4

Trasarea casetelor Acum vom urmri ghidurile i vom trasa dreptunghiuri n fiecare regiune.

Selectai instrumentul Rectangle apsnd U. Asigurai-v c opiunea Shape Layers este selectat. n panoul Options, facei clic pe ptratul de culori i introducei ffe500 pentru culoare. Facei clic pe OK. Desenai un dreptunghi n partea de sus a ecranului astfel nct s ating ghidul plasat la marcajul 108px. Pentru a face acest lucru, plasai indicatorul mouse-ului la marginea din stnga sus a pnzei de desen. Apoi, facei clic i inei apsat butonul mouse-ului n timp ce glisai spre dreapta i n jos pn ajungei la marginea din dreapta a ecranului.

Acum creai subsolul. Apsai Shift + Ctrl + N pentru a crea un nou layer; este ntotdeauna o idee bun s creai fiecare element din compoziia dvs. n stratul propriu, deoarece l putei muta mai uor mai trziu. Atunci cnd creai stratul, Photoshop v cere s-l denumii, pentru a-l putea regsi mai trziu. Trasai alt dreptunghi n partea de jos a ecranului. ncepei de la ghidul plasat la marcajul 702px.

Apoi, trasai bara lateral. Creai un nou strat pentru bara lateral i denumii-l. Modificai culoarea la FFD67F i trasai caseta n partea stng a ecranului. Dreptunghiul barei laterale trebuie s se potriveasc ntre ghidurile trasate. ncepei la 0 orizontal, 108 vertical, i mergei pn la 300 orizontal, 702 vertical.

n final umplei spaiul alb rmas cu alt layer tip form geometric, apoi schimbai culoarea la FFF7DF.

5

Plasarea Logo-ului

Avem un logo creat n Illustrator i putem importa acum acea imagine direct n

macheta noastr ca un obiect vector. Cnd importm logo-ul trebuie s-l redimensionm pentru a se potrivi n locul dorit. Putem folosi ghiduri pentru a plasa logo-ul.

Asigurai-v c riglele i grila sunt afiate n continuare, i creai dou ghiduri orizontale. Primul ghid va traversa rigla stnga la 18px i ar trebui s se suprapun cu prima linie orizontal a grilei. Ghidul al doilea ar trebui plasat la 90px, chiar pe acea linie orizontal a grilei. Vom avea astfel 18px deasupra i dedesubtul logo-ului. Creai un ghid vertical fcnd clic i glisnd de la rigla stnga i oprindu-v la 18px pe rigla orizontal. Vom avea astfel o caset n care s plasm logo-ul.

Selectai File > Place, localizai fiierul logo, i facei clic pe OK. Glisai logo-ul la colul din stnga-sus al ecranului, astfel nct colul su din stnga sus s vin la intersecia dintre cele dou ghiduri. Redimensionai imaginea: inei apsat tasta Shift glisai n diagonal n sus i n stnga pn cnd colul din dreapta jos atinge ghidul definit la 90px. Apsai Enter pentru a plasa fiierul.

Cnd plasai un document Illustrator ntr-un document Photoshop, obiectul este plasat ca un smart object. La editarea acestui obiect inteligent se deschide Illustrator, iar modificrile fcute n acesta sunt automat reflectate n documentul Photoshop atunci cnd le salvm.

Organizarea compoziiei cu grupuri de layere

Avnd numeroase layere n proiect la acest moment, este dificil s gsim tot ceea

ce avem nevoie. Pentru a simplifica gestionarea lucrurilor putem folosi o caracteristic Photoshop numit layer groups. Un grup de layere este un folder din paleta Layers pe care-l putem utiliza pentru a organiza layer-ele.

6

Creai un grup de layere nou numit Layout, fcnd clic pe butonul Layer Group din paleta Layers. Redenumii grupul fcnd click-dreapta i alegnd Rename. n cadrul paletei Layers, glisai layer-ele pentru antet, bar lateral, coninut principal i subsol n acest grup.

Putei plia grupurile de layere pentru a v putea focaliza pe layer-ele cu care dorii s lucrai. Putei de asemenea activa, dezactiva sau chiar duplica ntregul grup. Putei folosi aceast caracteristic pentru a izola anumite lucruri cu uurin.

Adugarea unei reflexii la logo

Multe site-uri utilizeaz aceast tehnic, denumit n mod obinuit wet-oor

effect, n care textul pare a fi aezat pe o suprafa care reflect textul sau logo-ul. Putem aplica acest efect rapid cu ajutorul grupurilor de layere i mtilor:

1. Creai un nou grup de layere numit Logo. Glisai layerul logo-ului Foodcenter n acest grup de layere. Reflectarea logo-ului Foodcenter va fi un layer separat.

2. n paleta Layers, facei clic dreapta pe layerul care conine logo-ul Foodcenter, i alegei opiunea Duplicate Layer. Denumii layerul Foodcenter Logo Reection.

3. Asigurai-v c layerul de reflecie este selectat n paleta Layers. Selectai instrumentul Marquee, facei clic dreapta pe imagine, i alegei opiunea Free Transform. Facei clic i tragei de mnerul din mijloc din partea de sus a imaginii n jos, depind baza. Acest lucru inverseaz zona selectat i creeaz reflexia. Folosii ghidurile pentru a face reflexia la fel de mare ca layerul iniial. Putei s inei apsat tasta Shift pentru a face o transformare direct. Putei utiliza opiunea de transformare Flip Vertical dac nu dorii s facei acest lucru manual i apoi s mutai versiunea oglindit direct sub original.

Apsai tasta Enter pentru a accepta modificrile n transformare. Putei apsa tasta Esc pentru a anula transformarea i s ncepei din nou dac este nevoie.

4. Putem face reflexia s dispar treptat n cteva moduri diferite. Cel mai simplu este s selectai layerul pe care l-ai transformat i alegei butonul Add Layer Mask din partea de jos a paletei Layers. Mtile v permit s ascundei pri ale unei imagini sau compoziii. Coninutul oricrui layer acoperit de o masc va fi ascuns.

5. Dac vom folosi un gradient n loc de o singur culoare putem face rapid o masc. Selectai instrumentul Gradient din paleta de instrumente. Instrumentul Gradient s-ar putea s fie vizibil; acesta se gsete n aceeai locaie n palet ca i instrumentul Paint Bucket. Dac instrumentul Paint Bucket este vizibil, facei clic i inei apsat deasupra instrumentului Paint Bucket pentru a face meniul acestuia s dispar i a expune instrumentul Gradient. Selectai un gradient care merge de la alb la negru; ar trebui s vedei o presetare pentru aceasta cnd selectai gradientul.

6. Avnd instrumentul Gradient configurat i layerul cu masca selectat, inei apsat tasta Shift n timp ce trasai o linie dreapt n jos, ncepnd de la 72px pe rigla stnga i terminnd la 108px.

Partea neagr a gradientului va aciona ca masc, oferindu-v efectul de atenuare dorit.

7

Subsolul Subsolul trebuie s conin text privind drepturile de autor i legturi ctre

termenii de utilizare i politica de confidenialitate. Selectai instrumentul Text i alegei un font Arial 10px negru pentru a plasa

aceste informaii n subsol. Dac dorii s creai aspectul unui hyperlink, folosii layere de text separate pentru termenii de utilizare i politica de confidenialitate, astfel nct s le putei da culori separate. Ar trebui s folosii culoarea pe care ai ales-o pentru hyperlink-uri cnd ai construit schema de culori.

Acum trebuie s umplem structura cu coninut.

VI. Proiectarea machetei: Coninutul n seciunea anterioar am realizat dou obiective importante: mprirea

documentului n cele patru regiuni i configurarea antetului i subsolului. Acum vom completa cu coninut zona principal i zona barei laterale. Vom macheta o caset de cutare i un nor de tag-uri pentru bara lateral. n zona cu coninutul principal vom macheta imaginea unui banner, vom crea un anun de reclam i vom plasa elementele create.

Crearea casetei de cutare

Am plasat zona de cutare n partea de sus a barei laterale, cu un titlu mare i o

caset de cutare direct sub el (vezi figura). Vom crea un nou grup de layere numit Search Area pentru a conine toate obiectele pe care le vom crea n aceast seciune.

Vom utiliza ghiduri pentru a ne ajuta s poziionm elementele. Creai un nou ghid orizontal care traverseaz 126px pe rigla stng. Acesta ne va ajuta s poziionm titlul. Putei aduga un ghid prin specificarea poziiei i orientrii sale. Selectai View > New Guide i introducei informaiile corespunztoare. Deoarece fontul va fi de 24px, trebuie s setm spaierea vertical (line-height) la 36px.

Apsai T pentru a selecta instrumentul Font i alegei Monotype Corsiva 24pt pentru font (sau alt font serif care v place dac nu avei acest font). Setai culoarea fontului la 4B541C, culoarea verde nchis pe care am selectat-o pentru titluri n schema de culori. Facei clic pe pnza de desen chiar sub ghidul definit i introducei acest text: Search Recipes. Folosii instrumentul Move pentru a repoziiona textul, astfel nct s se ncadreze n ghiduri.

Pentru a trasa caseta de cutare plasai mai nti cteva ghiduri pentru a defini zona pentru caset. Ghidul orizontal existent care traverseaz 162px va marca partea de sus a casetei de cutare. Plasai dou ghiduri verticale care traverseaz rigla de sus la 270px i respectiv 288px. Astfel vom defini spaiul pentru caseta de cutare i butonul de

8

cutare. Fiecare dintre aceste ghiduri ajunge pe o linie vertical a grilei. Creai un layer nou, i denumii-l search box. Selectai instrumentul Rectangle Shape, setai culoarea de umplere ffffff, i apoi trasai un dreptunghi ntre ghidurile definite pentru caseta de cutare. Facei clic dreapta pe varianta mic a imaginii layer-ului casetei de cutare i alegei Blending Options. Selectai Stroke din meniul din stnga, i asigurai-v c opiunea Stroke este selectat. Asigurai-v c dimensiunea este setat la 1, poziia este Inside i culoarea de umplere este setat la 000000.

Norul de tag-uri Browse Recipes Aplicaia noastr utilizeaz tag-uri pentru a clasifica reete. Utilizatorii pot

eticheta reete pentru a le face mai uor de gsit ntr-o colecie de mari dimensiuni. Numeroase site-uri utilizeaz caracteristica numit nor de etichete (tag cloud) pentru a afia tag-urile cele mai populare din sistem. Norul de tag-uri folosete diferite dimensiuni de font pentru a afia care tag-uri au cele mai multe elemente asociate. De exemplu, dac avem de trei ori mai multe reete asociate cu tag-ul desserts dect orice alt categorie, acesta ar putea fi de cteva ori mai mare n norul de tag-uri dect orice alte tag-uri. Vom construi ceva similar cu figura de mai jos. Norii de tag-uri au de obicei cinci-ase dimensiuni diferite de font, dar putem implementa macheta noastr cu doar trei dimensiuni: un font mare, un font mediu i unul mic.

9

ncepei cu antetul, utiliznd acelai font i aceeai culoare utilizate pentru antetul casetei de cutare. Potrivii antetul ntre ghidurile orizontale plasate la 216px si 252px. Creai un layer nou, selectai instrumentul Type (apsai T), i asigurai-v c culoarea este setat la 4B541C, care este aceeai culoare verzuie folosit pentru antetul casetei de cutare. Introducei textul Browse Recipes, apoi utilizai instrumentul Move pentru a trage blocul de text ntre ghiduri. n final asigurai-v c acest text este la acelai nivel cu titlul cutrii.

Acum putei plasa etichetele pe pagin utiliznd instrumentul Text. De exemplu, alegei o dimensiune de font de 18pt, alegei Arial pentru tipul fontului, i selectai Bold ca stil. Setai culoarea la 54431C i plasai desserts pe pnza de desen dintre ghidurile plasate. n continuare plasai alte cuvinte n aceast zon folosind un bloc de text separat pentru fiecare cuvnt. Cnd plasai aceste cuvinte, asigurai-v c alegei dimensiuni de font diferite (12pt, 8pt) i folosii mai multe linii pentru a simula un nor tag-uri care funioneaz (culoare 4d3900). Putei crea i un al doilea nor de tag-uri, care s afieze cele mai populare ingrediente.

Proiectarea unui masthead

Fotografiile pot ajuta un site web s prind via. Putei face o mulime de lucruri

folosind culori, fonturi, i gradiente, dar nimic nu se compar cu o fotografie de nalt calitate. Fotografiile furnizate de clieni sunt adesea nepotrivite, prea ntunecate sau au o lumin proast. Putei folosi Photoshop pentru a remedia unele dintre aceste probleme, dar o abordare potrivit este s ncepei cu o imagine bun. Unde gsim fotografii bune pentru un site web? Dac bugetul nu v permite un fotograf, vizitai iStockphoto sau Flickr. De exemplu, am gsit o imagine cu paste la iStockphoto (http://www.istockphoto.com/stock-photo-3762141-italian-meatballs.php). Imaginea este clar, are lumin, i pentru c este prea mare pentru pagina noastr vom tia doar o zon dreptunghiular din ea.

Nu trebuie s pltim pentru a utiliza o imagine n machetele noastre. Toate

imaginile de la iStockphoto sunt marcate vizibil dac nu sunt cumprate. Dac decidem s utilizm imaginea mai trziu, o putem achiziiona i nlocui n macheta Photoshop deoarece se afl ntr-un layer propriu. Navigai la URL-ul imaginii i selectai Copy Image pentru a plasa imaginea n clipboard. Cnd plasm aceast imagine n Photoshop, o vom redimensiona pentru a o face mai nalt i mai larg. Acest lucru este acceptat pentru machete, dar nu i pentru o aplicaie real. Dac avem un fotograf propriu vom folosi o versiune de nalt calitate, care este mult mai mare; nu vom plti pentru aceast imagine pn cnd prile interesate nu aprob selecia. Obinei permisiunea autorului

10

pentru orice fotografie pe care dorii s o utilizai, exceptnd cazul n care este scris explicit c imaginea nu se afl sub incidena drepturilor de autor.

S plasm banner-ul n pagin astfel nct s arate ca n figura de mai sus. Creai un grup nou de layere numit Main Content. n cadrul acestui grup, creai un

nou layer (Ctrl + Shift + N), numit Pasta Photo. Lipii imaginea i folosii instrumentul Move pentru a plasa colul din stnga-sus al imaginii la 306px vertical i 108px orizontal (chiar n locul unde ncepe regiunea de mijloc). Ghidurile pentru banner i bara lateral se ating n acest punct. Avnd instrumentul Marquee selectat (M), facei clic dreapta pe imaginea nou lipit i alegei opiunea Free Transform. n timp ce inei apsat Shift, glisai colul din dreapta jos al imaginii pe diagonal n jos i n stnga pn cnd marginea din dreapta a imaginii atinge marginea compoziiei dvs. Apsai Enter pentru a aplica transformarea.

Utilizai instrumentul Marquee pentru a selecta regiunea dreptunghiular n care va fi plasat imaginea n cele din urm. ncepei din colul stnga-sus unde se intersecteaz ghidurile. Folosind instrumentul Move (V), utilizai tastele sgei pentru a muta selecia n jos pn cnd vei fi undeva la mijlocul imaginii cu paste. Asigurai-v c regiunea imaginii pe care dorii s o pstrai este n zona de selecie, i alegei Select > Inverse ( Ctrl + Shift + I ). Apsai tasta Delete pentru a elimina totul exceptnd zona pe care ai dorit s o pstrai. n final trecei la instrumentul Move din nou (V) i folosii tastele sgeat pentru a muta imaginea ntre ghidurile pentru banner.

Coninutul principal Momentam nu tim ce vom scrie pe pagin i din acest motiv vom folosi pagina

din machetele folosite n mod obinuit n publicistic (Lorem Ipsum). Lorem Ipsum este doar un text machet care a reprezentat standardul industriei publicistice pentru mai mult de 500 de ani. n acest sens vom vizita http://lipsum.org i vom genera un paragraf de text.

Pentru a aduga un text pe pagin vom folosi instrumentul Text, vom schimba culoarea textului la 4B541C i vom seta fontul la Monotype Corsiva 36px. Vom plasa textul Get cookin ' pe pagin. Mutai titlul nou creat la 324px fa de rigla de sus i 262px fa de rigla din stnga. Aceasta este aceeai linie a grilei care este situat n partea de sus al celui de-al doilea rnd de tag-uri din primul nor de tag-uri.

Textul din body Creai un nou layer numit body text i selectai instrumentul Text. Utilizai

ghidurile la 306px i 468px pe rigla stng pentru a defini limitele de sus i de jos ale blocului text pe care l vom folosi. Plasai un ghid vertical la 324px, respectiv 612px pentru a defini limea blocului de text. Utiliznd instrumentul Text, trasai un dreptunghi pentru a umple caseta creat de ghiduri. Apoi, plasai textul machet Lorem Ipsum n zona pentru text, selectai textul pe care tocmai l-ai aplicat, i schimbai leading-ul (spaiul vertical dintre linii) la 18px, dimensiunea fontului la 12pt, culoarea fontului la 000000 (negru), i tipul de font la Arial. Textul este acum aliniat cu liniile grilei.

11

Simularea browser-ului Am construit o machet pentru pagin dar nu tim nc cum va arta n browserul

web; am proiectat macheta la dimensiuni fixe dar web-ul este fluid. Trebuie s vedem cum va arta site-ul pe un monitor care are o lime mai mare. Selectai Image > Resize Canvas, apoi modificai limea de la 900px la 1200px. Cu setrile implicite, Photoshop va aduga pixeli suplimentari n mod egal la stnga i la dreapta imaginii noastre. Cnd am nceput acest design, am decis s utilizm un design cu lime fix care implica o implementare mult mai simpl. Macheta astfel obinut dispune de mult spaiu alb n stnga i n dreapta paginii. O tehnic pe care o putem folosi pentru a da impresia unei pagini pline este s centrm logo-ul i restul site-ului n fereastra browserului, aa cum am planificat iniial, i apoi s extindem culoarea de fundal a antetului pentru a acoperi ntreaga lime a ferestrei. Aceasta ne va ajuta s oferim aparena unui site afiat pe un ecran ntreg, dar nu va fi nevoie s petrecem mult timp realiznd programe avansate solicitate de un design fluid.

Alegei instrumentul Move (V) i facei clic dreapta pe antet. Apoi, alegei layerul pentru antet din meniul pop-up. Aceasta este o modalitate foarte eficient de a selecta un layer, fr a cuta prin toate layerele din paleta Layers. Alegei instrumentul Marquee, facei clic dreapta pe antet i alege Free Transform pentru a activa mnerele pentru redimensionarea layer-ului. Tragei mnerele de redimensionare din stnga i din dreapta ctre marginile pnzei de desen, apoi apsai Enter pentru a realiza transformarea.

Prin extinderea canvas-ului ne putem face o idee despre modul n care pagina va fi afiat n mijlocul ecranului. Iniial am folosit instrumentele Photoshop specifice formelor geometrice pentru a defini regiunile site-ului, i este uor s le remodelm, fr a diminua calitatea acestora.

Layout-uri hibride n ultimii ani, deoarece monitoarele wide-screen au devenit populare, designerii

au cutat modaliti de a realiza design-uri care in cont de aceste noi dimensiuni. Layout-ul hibrid (layout-ul care este n general cu lime fix dar are regiuni care se extind pe ntreaga lime a ecranului) este o soluie folosit frecvent. De multe ori antetul se va

12

extinde pentru a umple ntreaga lime a ecranului, dar coninutul principal va rmne centrat, la fel ca n designul nostru. Alteori subsolul se extinde crend un efect care implic umplerea ecranului n timp ce coninutul este fix, fiind astfel organizat i lizibil.

VII. Finisarea machetei

Pentru site-ul Foodcenter mai sunt necesare o pictogram de cutare care va

aciona ca un buton pentru formularul de cutare i un buton de nregistrare care va apare n zona principal a site-ului. Aceste elemente grafice pot fi create pe acelai canvas care conine macheta actual, dar pentru a pstra fiierele organizate, vom crea noi fiiere pentru fiecare dintre aceste elemente.

Crearea unei pictograme de cutare Putem crea o pictogram de cutare utiliznd Photoshop sau Illustrator. Dac sunt

necesare pictograme de dimensiuni diferite care trebuie s fie scalabile vom folosi Illustrator (cnd am creat logo-ul n final am scalat imaginea vectorial fr a distorsiona compoziia). n acest caz este nevoie de o singur pictogram pentru butonul de cutare, care trebuie s aib o dimensiune fix, ceea ce nseamna c o putem realiza rapid folosind Photoshop.

Creai unui nou document Photoshop numit Search Icon cu dimensiunea de 18 pixeli pentru nlime i lime. Setai fundalul la transparent i rezoluia la 72 dpi.

Crearea fundalului pictogramei Meninei apsat CTRL + SPAIU i facei clic cu mouse-ul pentru mrire. La

fiecare clic se face trecerea ctre un alt nivel de mrire; realizai acest lucru pn la 1200%. n acest moment putem observa un ablon tip tabl de ah pe canvas, care ne indic faptul c lucrm pe un fundal transparent.

Redenumii Layer 1 la Background, apoi selectai instrumentul Rounded Rectangle din paleta de instrumente. Modificai raza la 2px. Asigurai-v c modul de lucru pentru acest instrument este setat la Fill Pixels i opiunea Anti-Alias este selectat. Culoarea dreptrunghiului nu este important deoarece o vom schimba n pasul urmtor.

Opiunea Snap to pixels Opiunea Snap to Grid ne asigur c fiecare margine a unui col rotunjit va arta

exact la fel. Pentru ca aceste margini s nu aib un aspect neclar, facei clic pe sgeata din dreapta butoanelor de selectare a formelor geometrice i selectai Snap to pixels. Cnd creai machete sau butoane utilizai ntotdeauna aceast opiune.

Plasai cursorul n colul din stnga-sus al pnzei de desen. Facei clic i glisai n diagonal n jos i la dreapta, umplnd canvas-ul cu dreptunghiul rotunjit. Aliniai cursorul cu partea din dreapta-jos a canvas-ului i eliberai butonul mouse-ului pentru a crea forma.

Facei clic dreapta pe imaginea n miniatur a layer-ului i alegei Blending Options. Selectai opiunea Gradient Overlay i facei dublu-clic pe Gradient style pentru a edita gradientul. Alegei aceeai culoare verde utilizat pentru titluri ca i culoare pentru

13

partea dreapt a gradientului. Setai partea stng a gradientului la 000000 (negru). Cnd aplicai gradientul, ar trebui s avei o tranziie de la verde la negru.

Crearea lupei Vom trasa lupa cu ajutorul instrumentului de selecie Marquee. Creai un nou

layer numit Magnifying Glass. Selectai instrumentul Elliptical Marquee din paleta de instrumente. inei apsat tasta Shift (constrngere la forma perfect) i creai un cerc care se potrivete n interiorul zonei pictogramei (asemntor figurii de mai jos). Selectai Edit > Stroke i apoi setai limea la 2px, culoarea alb.

Selectai instrumentul de desenat linii i setai grosimea la 2px. Trasai o linie

diagonal n partea din stnga jos a lupei pentru a crea mnerul (vezi figura).

Pentru a crea un efect "sticlos" am putea folosi instrumentul Marquee pentru a

selecta zona din cerc, dar este prea mult de lucru. Selectai instrumentul Magic Wand din paleta de instrumente i facei clic oriunde n interiorul cercului. Zona din interiorul cercului este acum selectat.

Creai un nou layer denumit Glass. Setai culoarea de foreground la FFFFFF (alb) i selectai instrumentul Gradient Fill. n bara de instrumente Options, facei dublu clic pe gradient i selectai Foreground to Transparent dintre presetrile gradientului. Cu noile setri aplicate, utilizai instrumentul pentru a trage o linie dreapt de la partea de sus a

14

lupei la partea de jos. Putei ine apsat tasta SHIFT n timp ce glisai pentru a fora ndreptarea liniei.

Pictograma terminat ar trebui s semene cu cea din figura de mai jos. Salvai fiierul Photoshop ca search_button.psd n folderul Originals.

ntoarcei-v la documentul machet i alegei File> Place. Selectai fiierul

search_button.psd pe care tocmai l-ai creat i plasai-l chiar lng formularul de cutare. Salvai documentul cnd lucrurile sunt aranjate (vezi figura).

Crearea butoanelor pentru Sign-up i Login Pentru a crea dou butoane n partea dreapt a paginii, vom utiliza o parte din

tehnicile folosite la crearea pictogramei de cutare. Creai un nou document cu fundal transparent numit button. Setai limea la 216px i nlimea la 72px; selectai instrumentul Rounded Rectangle din paleta de instrumente i setai raza de col de 10px, pentru a avea colurile rotunjite la buton.

Creai un nou layer din paleta Layers sau prin Shift + Ctrl + N i numii-l button background. Vom trasa butonul n layerul nou. Trasai butonul utiliznd dreptunghiul rotunjit, fcnd clic i trgnd de la colul din stnga-sus a canvas-ului la colul din dreapta jos. Dac ai setat foreground-ul la alt culoare dect alb putei vedea mai clar ceea ce desenai. Nu conteaz ce culoare ai ales pentru c va fi schimbat n pasul urmtor.

Facei clic dreapta pe stratul care conine butonul i alegei Blending Options, ceea ce va deschide caseta de dialog Layer Style. Selectai instrumentul Gradient Overlay pentru a afia opiunile pentru gradient. Facei dublu clic pe imaginea gradientului din editor pentru a afia Gradient Editor. Am etichetat "gleata" de culoare 1 i punctul de tranziie 2 (vezi figura).

15

Trebuie s proiectm un gradient pentru ca butonul s fie definit. Cheia pentru a

obtine un gradient potrivit este s controlm ct de brute sunt modificrile de culoare din gradient. Gradient Editor afieaz o banda lung de culori care reprezinta gradientul curent. Vom specifica culorile care alctuiesc gradientul prin selectarea uneia dintre gleile de culoare de sub bara de gradient. Cnd este afiat pentru prima dat bara de gradient, gradientul implicit conine doar dou culori, dar putem aduga culori fcnd clic pe spaiul dintre gleile de culoare. Gradientul butonului nostru va conine doar dou culori, dar avem nevoie de trei glei de culoare pentru a face tranziia. Setai gleile de culoare din stnga i din dreapta la FFEABF, apoi facei clic ntre glei n spaiul de sub bar pentru a aduga o a treia gleat de culoare. Setai culoarea acesteia la FFAE00. Aceste culori sunt variaii ale culorii portocalii utilizate n bara lateral.

Observai punctele rotunde care exist de-a lungul benzii gradientului n editor. Prin mutarea acestor puncte mai aproape de o culoare putei mri sau micora amestecul. Pentru acest buton vom crea o tranziie brusc ntre culori prin glisarea punctului din dreapta ctre stnga, ct mai aproape posibil de culoarea din mijloc. Astfel se creeaz o linie orizontal prin buton, oferindu-i un pic de dimensiune. Observai setrile specifice n figura de mai sus. Facei clic pe OK n Gradient Editor odat ce ai proiectat gradientul. Experimentai cu Gradient Editor; putei vedea alte exemple ale efectelor sale n figura de mai jos, n care sunt folosite gradientele pentru a se crea iluzia de adncime.

16

Putei face ca butonul s ias mai mult n eviden prin adugarea unui stroke, care este un contur n jurul butonului. Selectai Stroke din lista de efecte ale layerului i alegei o lime de 1px. Utilizai o culoare nchis precum negru pentru a face butonul ias n eviden mai mult, sau o culoare mai deschis pentru a face stroke-ul mai puin vizibil. Putei micora opacitatea la aproximativ 45% pentru a atenua stroke-ul. Asigurai-v c adugai stroke-ul n interiorul butonului, pentru a nu se aduga la limea i nlimea butonului.

Salvai butonul ca button.psd n folderul Originals al proiectului dumneavoastr.

Vom avea nevoie de el mai trziu pentru a crea butonul de login.

Adugarea textului Alegei instrumentul Text, i adugai acest text la buton: Sign Up. Experimentai

cu culorile folosind ceea ce tii acum despre teoria culorilor. Este recomandat o culoare nchis pentru textul din acest buton. Textul trebuie s contrasteze puternic cu fundalul butonului. Putei schimba efectele layer-ului pentru text, pentru a fi uor nclinat. Salvai fiierul ca signup_button.psd. => Monotype Corsiva, 36px, Sharp Adugarea butonului Sign Up

Revenii la fiierul machet i plasai butonul Sign Up pe pagin folosind aceeai tehnic utilizat pentru a plasa logo-ul. Poziionai-l n locul lsat pentru butonul Sign Up. Salvai macheta din nou. Crearea butonului Log In

Redeschidei signup_button.psd i schimbai textul cu Log In. Selectai instrumentul Move i asigurai-v c textul este centrat. Dup ce adugai i poziionai layerul text, salvai fiierul ca login_button.psd i poziionai-l n machet sub butonul Sign Up. Putei vedea ambele butoane poziionate n figura de mai jos.

Prile interesate au hotrt plasarea celor mai recent adaugate reete pe pagina de

start i s-au decis de asemenea asupra textului paragrafului principal:

17

Foodcenter is the best way to collect and share recipes with the rest of the world. You can build your own recipe book from thousands of great recipes from renowned chefs or users just like you. You can also share your own secret recipes with a few of your friends or make them available to the rest of the world!

Create an account today and get cookin! nlocuirea textului machet Putem nlocui textul destul de uor. Plasai textul n regiunea principal de text,

nlocuind textul machet. Vei observa c este un pic mai scurt dect blocul de text avut acolo anterior, deci e nevoie de o mic ajustare. Selectai textul pe care tocmai l-ai lipit i mrii dimensiunea fontului la 14px. Rmne mai mult liber dect am avut nainte, dar este nevoie de el pentru a aduga reetele cerute de prile interesate.

Adugarea seciunii Latest Recipes Nu trebuie neaprat s umplem ntreaga zon din partea de jos a paginii, dar

putem aduga cu siguran un titlu i cteva blocuri de text pentru reete. Creai un nou titlu de 36px numit Latest Recipes utiliznd fontul Monotype Corsiva pe care l-ai utilizat i pentru alte titluri. Plasai acest titlu sub textul introductiv, dar asigurai-v c lsai un spaiu ntre noul antet i coninutul existent.

Sub titlul pe care tocmai l-ai adugat, creai cteva reete false. Utilizai Arial 14px de aceast dat. 18 pixeli sau un singur bloc pe gril ar trebui s fie suficient pentru a arta bine. Punei fiecare titlu de reet pe o linie proprie, i asigurai-v c lsai un spaiu de un rnd ntre fiecare, utiliznd liniile grilei ca ghid.

Sub reet punei o descriere simpl a reetei folosind un font Arial 12px. Indentai textul la 18px. Putei vedea rezultatul n figura de mai jos.

Suntem n punctul n care putem ncepe construirea site-ului (partea de

programare). Am vzut cum s lucrm cu grupuri de layere, cum s lucrm cu textul i cum s aplicm anumite efecte i mti.

18