Design Tabular

Photoshop - Grafica Web


  • Click pe imagine pentru a o vedea la rezolutie originala.

1.Pentru inceput deschidem un nou document : File - New - Width: 800 px / Height : 600 px - OK.

2.Selectam unealta Paint Bucket Tool, apoi culoarea #e5e5e5 si aplicam pe scena pentru a schimba culoarea fundalului.

3.Adaugam un nou layer : Layer - New - Layer.
  Alegem instrumentul Rounded Rectangle Tool(culoarea negru #000000 - Radius: 15px) si desenam un dreptunghi, unde urmeaza sa fie adaugat continutul:


4.Selecteam unealta Rectangular Marquee Tool(Feather: 0px) si facem o selectie asemanatoare: 


Click dreapta in scena - Layer Via Cut 

5.Click dreapta pe layerul nou - Blending Options - Bifeaza Gradient Overlay si adauga un gradient de la #FFFFFF (alb) la #D4D4D4 (gri) :


La final adauga setarile:


6.Apoi bifeaza Stroke , schimba culoarea in gri - #d4d3d3, Size: 2px, Position: Inside:


7.Adauga un nou layer.
  Selecteaza Rounded Rectangle Tool, culoarea alb, radius 15 px si deseneaza un dreptunghi asemanator (tinand tasta Spatiu poti muta dreptunghiul in timp ce desenezi):


8.Modifica opacitatea la 70 % , si modul in Soft Light:
7

9.Selectam unealta Horizontal Type Tool - Culoarea: alb / Font: Arial / Bold / 30 px si adaugam numele butonului Acasa:


10.Selectam layerul de sub cel cu textul si adaugam un nou layer.
  Alegem unealta Rounded Rectangle Tool, culoarea negru , radius 15 px si desenam un dreptunghi care ii va indica utilizatorului site-ului ca se afla in pagina Acasa :


11.Alegem Horizontal Type Tool din nou - Culoarea gri (#c2c2c2) / Arial / Bold / 33 px si adaugam numele celorlalte butoane, despartite-le de o linie verticala:


12.Click dreapta pe layerul cu numele butoanelor - Blending Options - Bifeaza Inner Shadow si adauga setarile:


13.Adauga un nou layer.
  Selecteaza unealta Rectangle Tool - culoarea alb si deseneaza un dreptunghi unde utilizatorul va putea scrie textul pe care vrea sa-l caute:


14.Click dreapta pe nou layer - Blending Options - Bifeaza Gradient Overlay - si aplica un gradient de la Gri la Alb:


15.Alege Rectangular Marque Tool(Feather : 0px) si fa o selectie care va reprezenta butonul "Cauta":


Click dreapta - Layer Via Copy.Apasa tasta V pentru a selecta Move Tool, apoi cu tasta Shift activa,  apasa sageata dreapta pentru a muta:


16.Click dreapta pe ultimul layer adaugat - Blending Options - Gradient Overlay si adauga un gradient de la #00a2ff la #006ba9 :


17.Ultimele lucruri pe care trebuie sa le mai facem la acest buton, sunt sa adaugam o mica stralucire si numele desigur.
  Selecteaza Rectangular Marquee Tool si o selectie in jumatatea superioara a butonului:


18.Click dreapta in scena - Layer Via Copy. Apoi click dreata pe layer - Clear Layer Styles pentru a ramane alb.
  Modifica-i Modul in Soft Light si Opacity: 50 %:


19.Selecteaza unealta Horizontal Type Tool, culoarea Alb, font Arial / Bold / 23 px si adauga numele butonului "Cauta":


Designul este gata. Poti adauga acum continutul. Simte-te liber sa-l imbunatatesti. 
Astept rezultatul pe forum.

Imaginea finala:

  • Click pe imagine pentru a o vedea la rezolutie originala.

  • Descara fisierul sursa (.psd).
    • Aboneaza-te prin RSS
    Comentarii (11)add comment

    Criss said:

    		astept un tutorial pentru > integrarea unui astfel de design intr'un editor html (cum ar fi DW :d ) ;D
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 04, 2009 | url
    Voturi: -1

    Claudiu said:

    		Nu merge sa .psd, pune-l din nou te rog.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 03, 2009 | url
    Voturi: +0

    admin said:

    		Verifica acum :P
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 03, 2009 | url
    Voturi: +0

    Claudiu said:

    		Merci ca l-ai pus din nou! Super site - incerc sa invat si eu da din pacate nu prea imi iasa si ma enervez si ies. :)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 03, 2009 | url
    Voturi: +0

    admin said:

    		Pai incepe cu cele care par mai usurele, apoi sa progresezi pana sa-ti iasa toate.

    Succes
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 03, 2009 | url
    Voturi: +1

    kopela said:

    		eu cum dau layer via cut imi tot zice ca nu poate sa faca asta,The selected area is empty desi am facut exact ca acolo
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 06, 2009
    Voturi: +1

    admin said:

    		Trebuie sa ai selectat layerul cu dreptunghiul de unde vrei sa stergi selectia. Probabil ai selectat alt layer.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    martie 06, 2009 | url
    Voturi: +0

    Tarantula said:

    		Nu pot sa il descarc.Te rog mai pune-l odata.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 28, 2010
    Voturi: +0

    admin said:

    		Verifica acum.

    Multumim pentru raportare.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 28, 2010
    Voturi: +1

    Coach Outlet Online said:

    		Here you will find all the latest Coach Outlet coupons.vvdsfsdadfsa
     
    Reporteaza Abuz
    Displace
    Apreciaza
    iulie 28, 2011 | url
    Voturi: +0

    TISSOT said:

    		More and more fashion ladies to choose www.turhen.org .So its worth to take a look .fashion,Precise,Durable.Never miss it !

     
    Reporteaza Abuz
    Displace
    Apreciaza
    septembrie 06, 2011 | url
    Voturi: +0

    Adauga un comentariu
    Micsoreaza | Mareste

    busy