Realizarea unui Web Layout, in Adobe Photoshop CS3


Vom incepe prin deschiderea unui nou document (CTRL + N), cu dimensiunile 768 x 650.



Vom aplica o culoare inchisa pe fundal, folosind Edit -> Fill (SHIFT + F5). Eu am ales o nuanta de gri (#292929).



Folosind Rectangular Marquee Tool (M) vom face o selectie a ceea ce va fi header-ul.

[img]http://i4.photobucket.com/albums/y113/AdyX/Tutorial-WebSite/3.png[/img

Facem un nou Layer (CTRL + SHIFT + N) si mergem la Edit -> Fill, si vom umple selectia cu negru (#000000).



Dam click dreapta pe noul Layer, si selectam Blending Options. Vom modifica Gradient Overlay si Stroke.



Folosind Elliptical Marquee Tool (M), facem o selectie, cat mai simetrica, peste header.



Creeam un nou Layer (CTRL + SHIFT + N) si umplem selectia cu alb (#FFFFFF). Apoi vom scadea opacitatea Layer-ului la 15%.



In continuare, vom selecta Horizontal Type Tool (T) si vom scrie numele site-ului. Eu am folosit, ca setari: Font Family - Arial, Font Style - Bold, Font Size - 40 px



Vom scrie, mai jos, si o scurta descriere, folosind dimensiunea textului de 20px.



Folosind, din nou, Rectangular Marquee Tool (M), vom face un mic dreptunghi, a ceea ce va reprezenta meniul.



Facem un nou Layer si il umplem cu alb. Apoi apasam click dreapta pe acest nou Layer si selectam Blending Options. Vom modifica Gradient Overlay.

http://i4.photobucket.com/albums/y113/A … ite/14.png

Vom adauga link-urile din meniu. Eu am folosit: Font Family - Verdana, Font Style - Bold, Font Size - 14, Font COlor - #404040.



Vom face o noua selectie.



Cream un Layer nou, umplem cu alb, dam click dreapta pe el si alegem Blending Options, unde vom folosi Gradient Overlay. Peste el vom adauga un text. Am folosit: Font Family - Verdana, Font Style - Bold, Font Size - 12px, Font Color - #FFFFFF.



Creeam o noua selectie.



Umplem un nou Layer cu culoarea #dedede. Adaugam si text (Font Family - Verdana, Font Style - Regular, Font Size - 11px, Font Color - #000000).

[imgl]http://i4.photobucket.com/albums/y113/AdyX/Tutorial-WebSite/20.png[/img]

In mod asemanator vom crea inca o asfel de "cutie" si partea principala.



Mai avem de realizat footer-ul, drept pentru care vom mai realiza o selectie in jos-ul paginii.



FOlosind aceeasi procedura, vom crea un Layer nou, accesam Blending Options si setam Gradient Overlay



Nu ne mai ramane decat sa adaugam textul (Font Family - Verdana, Font Style - Bold, Font Size - 10px, Font Color - #666666) si sa ne bucuram de rezultat.




AUTOR: AdyX