Acceseaza SiteServicii video & design grafic

Graphic Store Website Layout PSD Tutorial

In acest tutorial va voi arata cum sa creati un layout simplu si frumos in adobe photoshop CS6. Vom realiza un layout pentru un magazin virtual de resurse grafice, nu foarte complicat dar vom lucra destul de mult la el. Pentru acest tutorial veti avea nevoie de cunostintele de baza ale photoshop-ului si putina atentie.

La sfarsitul tutorialului voi pune materialul finalizat spre descarcare gratuit.Graphic Store Website Layout PSD Tutorial

1. Primul lucru pe care trebuie sa-l faceti este sa creati un document nou cu dimensiunile 1020×1200 pixeli:Graphic Store Website Layout PSD Tutorial

2. Dupa ce avem documentul folositi Paint Bucket Tool (G) pentru a umple layer-ul de fundal cu o nuanta de gri #D7D7D7.
3. Vom incepe cu bara de logare, folosind Marquee Tool (M), faceti o selectie in partea de sus de 49 pixeli inaltime apoi umplem selectia cu un gradient Linear/ Angle:90/ jos:#161616/ sus:#282828:Graphic Store Website Layout PSD Tutorial

3. Folosind Rounded Rectangle Tool (U) [radius 3px] vom creea doua casete pentru username respectiv password + text(Arial/11px/Sharp), aproximativ ca cele de mai jos, apoi mergem la, LAYER -> LAYER STYLE -> INNER SHADOW:Graphic Store Website Layout PSD Tutorial

4. Acum vom creea butoanele “Sign In” si “Register” folosind Rounded Rectangle Tool (U) [radius 3px], dupa care vom aplica un gradient #06537d si #2096d4 apoi adaugam textul ca si in pasul 3:Graphic Store Website Layout PSD Tutorial

5. Acum vom creea partea cu logo-ul si categoriile site-ului repetand pasul 1 dar de data aceasta selectia va avea 105 pixeli inalltime si va fi pozititonata sub bara de logare, dupa care aplicam un gradient #18202b si #2a3b4d:Graphic Store Website Layout PSD Tutorial

6. Adaugam textul (Arial,13px) si logo-ul daca este deja creeat:Graphic Store Website Layout PSD Tutorial

7. La 25 pixeli distanta vom amplasa o imagine 960×305 in care vom ilustra diferite resurse grafice, iar peste aceasta adaugam un layer caruia ii dam culoarea #000000 apoi ii setam opacitatea la 86%. Apoi tot ce ramane de facut este sa adaugati text:Graphic Store Website Layout PSD Tutorial

8. Acum vom amplasa o caseta cu elementele grafice nou aparute pe site folosind Rectangle Marquee Tool (M) 961×525 pixeli, culoare #F4F4F4, stroke (1px, #bebebe) in care adaugam text si pictograme:Graphic Store Website Layout PSD Tutorial

9. Acum vom creea footerul folosind Rectangle Marquee Tool (M), inaltimea 151pixeli apoi vom adauga un gradient ca cel de la pasul 3:Graphic Store Website Layout PSD Tutorial

10. Pentru rubrici vom folosi culoarea # FFFFFF, iar pentru descriere si link-uri vom folosi culoarea # CADEF2:Graphic Store Website Layout PSD Tutorial

   Asta e tot, am creeat un layout destul de simplu si placut. Este un layout dedicat incepatorilor, el mai poate fi lucrat si detaliat dar asta o sa facem intr-un alt tutorial mai complex. Sper ca v-ati descurcat la acest tutorial si ca va fost de folos.

Add a Comment

Your email address will not be published. Required fields are marked *