Butoane web UI
Noi 2011 04

Deoarece progresul tehnologiilor web, site-urilor si aplicatiilor web devin mai receptive, oferindu-ne mai multe moduri si tehnici pentru a interactiona cu utilizatorii. Am decis sa ne axam pe butoane, pentru ca aceastea sunt cea mai grea parte din designul UI, oricum acum incepem pentru a vedea ce putem realiza in Photoshop CS5.

Pentru inceput realizam o pagina noua de 450px latime si înaltime 255px.

Selectati culoarea la Foreground #d8dde3 si umpleti pagina, acum ne ducem la Filter > Noise > Add Noise si setati 2%.

Selectati Rounded Rectangle Tool (M) si setati radius 2px, desenati forma lafel ca in imaginea reprezentativa. Denumiti acest layer cu Normal Button (mai bine daca puneti toate acestea intr-un grup de foldere).

Pe Normal Button layer, faceti click dreapta > Blending Options si setati Gradient Foreground Color #009CFF si background color #1D87CA.

Pe acelasi layer setati drop shadow ca in poza reprezentativa. Foreground color este #979B9C, Distance este 1 si Size este 3.

Acum ne mutam pe Inner Shadow, setati Foreground Color #8DDOFB si Distance 1.

In Stroke > Fill Type > Select Gradient, selectati color pe stroke gradient. Foreground #O44F7F si Background #45E98.

Acum trebuie sa fie ceva asemanator imaginii de mai jos. Observati linia de lumina de mai sus? Este de la Inner Shadow.

Acum butonul este gata, pentru a avea mai multe butoane pentru focus, hover si alte extensii css duplicati butonul si modificati setarile pentru a obtine efecte diferite.
Spor la munca !

1 Comentariu

  1. Eagle spune:

    Enlitgheinng the world, one helpful article at a time.

Scrie un comentariu