Cum creezi un Web 2.0 Design

1.    Deschideti aplicatia Photoshop si creati un nou document Web (1280×1024).
2.   Selectati paint bucket tool si colorati backgroundul cu culoarea #0757a1.

3.    Selectati Rectangular Marquee tool si setati Fixed size cu o latime de 1280px si o inaltlime de 300px la optiunea Style.
4.    Selectati partea de sus a backgroundului cu Rectangular marquee tool.

5.     Apasati pe butonul din dreapta al mouse-ului si selectati optiunea Layer via Copy.

6.    In Layers palette, selectati noul layer si  apoi selectati blending options.
7.    In  dialogul Layer style, selectati Gradient Overlay si setati un gradient de la culoarea #0757a1 la #8dbdf0.
8.    Apasati  OK ca sa inchideti dialogul Layer style.

9.    Adaugati un nou layer. (Shift+ctrl+N)
10.  Setati din nou stilul pentru Rectangular Marquee tool sa fie Fixed size cu o latime de 980pxsi o inaltime de  860px.
11.   Selectati un dreptunghi folosind Rectangular Marquee Tool. Incercati sa pozitionati acest dreptunghi in centru, aproximativ cu 15 px mai jos de marginea de sus, cum arata imaginea de mai jos:

12.   Apasati tastele D+X pentru a reseta culorile pentru foreground/background la white/black.
13.   Colorati selectia cu  #e8e8e8.
14.   Acum vom crea bara de navigare: Setati din nou stilul Rectangular Marquee tool sa fie Fixed size cu width de 980px si  height 35px.
15.   Adaugati un nou layer, si desenati un dreptunghi de dimensiune fixa.
16.   In Layers palette, selectati noul layer si  apoi selectati blending options.
17.   In dialogul Layer style, selectati Gradient Overlay si setati parametrii pentru efectul Gradient Overlay: prima si a doua valoare: #0757a1, a treia –#8dbdf0.
18.   Selectati efectul Outer glow, si setati optiunea Opacity la 63, culoarea #ffffff si dimensiunea 24px.

19.   Selectati efectul Inner Glow, si setati optiunea  Opacity la 27.

20.    Selectati optiunea  Stroke effect si setati culoarea #0757a1; dimenisunea 1px, opacitatea de 29.

21.    Apasati Ok [entru a inchide dialogul Layer style. Rezultatul:

22.    Acum vom adauga putin “gloss” (putina stralucire) la bara de navigare.
23.    Adaugati un nou layer deasupra layerului cu bara de navigare.
24.    Selectati rectangular marquee tool (setati o moua dimensiune: width 980 si height 20) si selectati  partea superioara a barii de navigare.
25.    Colorati selectia cu #ffffff folosind Paint Bucket Tool.
26.    Setati valoarea pt opacity la 15%.
27.    Adaugati un nou layer,iar cu text tool selectat scrieti numele paginilor. (Arial Rounded MT bold, size 20pt)
28.    In Layers palette, selectati noul layer si  apoi selectati blending options.
29.    Adaugati urmatorul efect: Drop shadow: opacity 41, size 27px, distance  0 px.

Rezultatul:

30.    Selectati text tool si adaugati Logo-ul comaniei/numele in coltul din stanga. (Eu am folosit urmatoarele setari Minion Pro, bold cond italic, 40pt).
31.    Adaugati un nou layer si cu Text Tool scrieti sloganul companiei.
32.    Adaugati un nou layer si selectati  Rounded Rectangular Marquee tool si deenati un dreptunghi cu colturile rotujite in partea dreapta a logo-ului. Asigurati-va ca lasati suficient spatiu pentru alte doua dreptunghiuri de aceiasi dimensiune.
33.    In Layers palette, selectati noul layer si  apoi selectati blending options.
34.    In  dialogul Layer style, selectati Gradient Overlay si adaugati un gradient de la  culoarea  #ea8106 la #faad07.

35.    Apasati Ok.
36.    Apasati Ctrl+J sa duplicati acest layer.
37.   Mutati in stanga  layer-ul duplicat folosind Select tool.
38.    Duplicati acest layer din nou si pozitionati cel de-al treilea dreptunghi in coltul din dreapta.
Rezultatul:

Acum, tot ce mai trevuie sa faceti este sa organizati continutul paginii inserand text si imagini.  Am impartit pagina in doua randuri:

- primul rand contine o imagine si textul ce reprezinta continutul principal al paginii.

- al doilea rand l-am impartit in trei coloane cu text si icoane.

Photoshop CS3: How to Design Glossy Web 2.0 Buttons

Related posts:

1. Photoshop Wallpaper
2. Cum sa creati o textura de asfalt in Photoshop
3. Cum sa creezi un curcubeu in Photoshop
4. Photoshop CS3: How to Design Glossy Web 2.0 Buttons
5. Efectul Polaroid cu Adobe Photoshop