Jan
24
2012

Cum sa desenezi un form de autentificare in Photoshop

În acest tutorial vom crea un formular de autentificare, destul de simplu,  pe care il puteţi utiliza in propriile proiecte de web design, tehnicile utilizate vor fi tehnici de bază, şi o sa va explic cum am procedat.

Poza finala cu formularul

Pasul 1.

Pentru inceput vom creea un nou document cu dimensiunea de 600x500px si umplem cu culoarea #f3f6fb;

Selectam Rounded Rectangle Tool, din bara de unelte, setam un radius de 5px si desenam un patrat, tot de culoarea #f3f6fb;

Facem click dreapta pe layerul cu patratul si selectam Blending Options si setam la un  “Stroke” ca in poza de mai jos. Folosim pentru Stroke culoarea alba si Position “Inside”.

Duplicam layerul cu patratul si schimbam setarile pentru Stroke astfel: position : Outside si color: #a6b3c4;

Patratul ar trebui sa arate astfel:

Pasul 2.

Acum vom desena zona de sus a formularului. Desenam cu Rounded Rectangle Tool un dreptunghi ca in poza de mai jos si aplicam la Blending Options setarile din poze.

Drop Shadow

Inner Shadow

Gradient Overlay, unde folosim culorile, de la stanga la dreapta:

f1f5f8; e6ebef; bccad3

Stroke

Pasul 3.

Adaugam textul dorit deasupra acestei zone. Folosim Font Arial, Regular, de 24 pt. Si aplicam setarile din pozele de mai jos.

Drop Shadow

Inner Shadow

Color Overlay, folosim culoarea: #8d8d8d;

Pasul 4.

Ok, a venit momentul sa desenam campurile in care introducem Userul si Parola. Pentru a desena aceste doua zone vom folosi Rounded Rectangle Tool, caruia ii setam un radius de 3px.

Desenam ca in poza de mai jos si aplicam setarile pentru Blending Options:

Drop Shadow, Inner Shadow si Inner Glow.

Ok, dupa ce am aplicat aceste setari duplicam layerul si il pozitionam mai jos.

Pasul 5.

Adaugam texul dorit in aceste campuri. Pe acest text aplicam o umbra folosind setarile de mai jos.

Pasul 6.

Adaugam Iconitele dorite in partea dreapta.

Adaugam textul in partea de jos, folosim aceleasi setari, dar un font mai mic.

Pasul  7.

In final o sa desenam butonul de Login. Pentru a desena acest buton folosim tot Rounded Rectangle Tool, din bara de unelte, cu un radius de 3 px.

Folosim urmatoarele setari:

Adaugam textul “Login” folosim culoarea #ffff; si aplicam Drop Shadow de culoare #001a95;

Follow Me on Pinterest

my portfolio on Portfolios

Articole similare

2 Comments + Add Comment

  • Frumos, imi place cum a iesit. Totusi, butonul de bifare de la Remember Me este un pic cam mare si textul un pic cam mic.

  • foarte bun tutorial..:)



Follow Me on Pinterest

my portfolio on Portfolios