Proiectați interfața Web 2.0 în Photoshop
Înțelegerea tutorialului de mai jos este o înțelegere a tehnicii sale, cu care vă puteți desena o interfață grafică de utilizator pentru un site web. Navigare laterală, butoane, antete, de exemplu. Toate stilul Web 2.0.
Lansați o nouă pânză; orice marime. Ceva mai mare decât 450x300px ar fi bine. Selectează Instrument rectangular rotunjit și trageți un dreptunghiular la fel de mare ca cel prezentat în imaginea de mai sus.
Faceți dublu clic pe stratul rotunjit dreptunghiular pentru a lansa Opțiuni amestecate. Modificați setările pentru următoarele stiluri.
Umbra
Opacitate: 31% Distanță: 1px Spread: 0% Dimensiune: 5px
Bevel și Emboss
Adâncime: 100% Dimensiune: 0px Soften: 0px
Gradient Overlay
Faceți dublu clic pe Gradiant și setați următoarele puncte de oprire. Locul de amplasare: 0%, # 1378cd Locul de amplasare: 100% # 4da5f0
Accident vascular cerebral
Dimensiune: 5px Poziție: Interior Culoare: # 54abf6
Să inserăm un text, un slogan, o adresă URL sau ceva asemănător. Puneți-l în mijloc și aliniați corect, astfel încât logo-ul să poată locui pe partea stângă mai târziu. Să stilăm textul. Eu folosesc Lucida Sans Unicode; 55pt; neted; -120 pentru urmărirea caracterelor (spațierea literelor). Faceți dublu clic pe stratul de text și setați următorul text Opțiuni amestecate.
Gradient Overlay
Faceți dublu clic pe Gradiant și setați următoarele puncte de oprire. Locație: 0%, # 9ec7eb Locație: 100% ecf6ff
Va trebui să inserați sigla pe partea stângă a textului. Voi folosi un dreptunghi rotunjit cu o rază de 5px pentru a reprezenta logo-ul. Iată-l Amestecarea opțiunii setările dreptunghiului rotunjit.
Umbra interioara
Opacitate: 45% Distanță: 0px Dimensiune: 43px;
Bevel și Emboss
Adâncime: 100% Dimensiune: 0px Soften: 0px Mod opacitate evidențiere: 50% Opacitate ShadowMode: 100%
Gradient Overlay
Faceți dublu clic pe Gradiant și setați următoarele puncte de oprire. Locație: 0% # 0e2f4a Locație: 47% # 001a31 Locație: 48% # 002545 Locație: 100% # 0f4b7f
Accident vascular cerebral
Dimensiune: 5px Faceți dublu clic pe Gradiant și setați următoarele puncte de oprire. Locul de amplasare: 0% # 1468af Locul de amplasare: 100% # 50abf8
Să-i dăm un efect lucios. ține CTRL și faceți clic stânga pe dreptunghiular rotunjit Layer Thumbnail. Când se selectează întregul dreptunghi rotunjit, se trece la Instrument de marcaj dreptunghiular, deține ALT și scoate a doua jumătate a zonei selectate; la fel ca imaginea de mai sus.
Creați un nou strat; Trageți-l astfel încât să stea pe toate straturile; umpleți partea selectată cu alb [#ffffff]; schimba opacitatea la 15%.
Tutorialul se va termina aici. Cum veți folosi acest design depinde în întregime de dvs. Prin schimbarea ușoară a dimensiunilor și a culorilor, poate fi folosită ca antet sau butoane web. Iată câteva exemple.
Antet pentru site
Butoane pentru site
