Tutorial Online

tutoriale ubuntu, tutoriale fedora, tutoriale slackware, tutoriale dreamwever, tutoriale flash, tutoriale photoshop, tutoriale fireworks, tutorial online

Bara de meniu – tutorial grafica web

Posted by ascultradio pe Mai 14, 2010


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

1.Deschide un nou document : File – New – Width:700px / Height: 350 px – OK

2.Adauga un nou layer : Layer – New – Layer.
Selecteaza culoarea gri (#182020) , apoi unealta Rounded Rectangle Tool ( Radius: 15px) si deseneaza un dreptunghi in scena:

3.Alege unealta Pen Tool si adauga setarile (de sus):

4.Apropie( CTRL + „+”) si incearca sa faci o selectie asemanatoare – urmand pasii:
Adauga doua puncte pe partea superioara a barei :

Adauga un punct in dreapta/jos, si tinand apasat click trage cursorul in jos pana vei obtine o imagine asemanatoare:

Aplica din nou un click in dreapta:

Tinand apasata tasta SHIFT  click in dreapta barei:

Adauga puncte pentru a acoperi suprafata barei care urmeaza sa fie steara:

5.Click dreapta in scena – Make Selection – Feather Radius: 0 pixels – OK

6.Select – Inverse.
Avand layerul cu dreptunghiul selectat, apasa tasta Delete pentru a sterge.
CTRL + D pentru a deselecta.

7.Click dreapta pe layerul cu bara de navigare – Blending Options – Bifeaza Gradient Overlay si adauga un gradient , in stanga un gri mai inchis, iar in dreapta mai deschis:

8.Bifeaza Outer Glow si modifica la culoare – Negru , si la Blend Mode – Normal – OK.

9.Selecteaza layerul Background si adauga un nou layer deasupra : Layer – New – Layer.
Selecteaza Rounded Rectangle Tool, culoarea pe care o doresti (am ales #2da7dd) si deseneaza butoanele.

10.Click dreapta pe layerul cu butoanele – Blending OptionsBifeaza Outer Glow si adauga setarile de la pasul 8:

11.Selecteaza unealta Text Tool, culoarea alb, marime 35 px , font Arial si adauga numele butoanelor.

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s

 
%d blogeri au apreciat asta: