în acest tutorial de design web Photoshop, vom proiecta un aspect de site web zdrobitor, curat și profesional în Photoshop. Aspectul pe care îl facem în acest tutorial poate fi folosit ca design de site personal sau corporativ. Acest design este destul de ușor de utilizat, deci ar trebui să fie excelent pentru reputația site-ului dvs.
actualizare: Aceasta este prima parte a unei serii din două părți care vă va învăța cum să creați aspectul în Photoshop și apoi cum să îl convertiți într-un design web HTML compatibil cu standardele (X).
Seria „Web Design curat și profesional”
- Partea 1: Creați un Web Design curat și profesional în Photoshop
- Partea 2: codarea unui Web Design curat și profesional
previzualizare finală
aruncați o privire la aspectul pe care îl vom crea în acest tutorial. Puteți vedea previzualizarea finală a imaginii de mai jos sau faceți clic aici pentru o versiune de dimensiune completă. 
pregătiți documentul Photoshop
1 Creați un document nou în Photoshop (Ctrl/Cmd + n) utilizând setările din imaginea următoare.
setați setările unități și rigle
2 Asigurați-vă că lucrați în unități de pixeli, care este unitatea fixă standard pentru web design.
Configurați următoarele setări pentru riglele dvs. din fereastra de dialog Preferințe (Ctrl/Cmd + K); Faceți clic pe Unități & rigle și asigurați-vă că aveți totul setat așa cum se arată în figura de mai jos. 
adăugați ghiduri pentru a desemna zona de conținut
3 Activați Rigle Photoshop din Vizualizare > Rigle.
comutați vizibilitatea riglelor apăsând „Ctrl/Cmd + R”.
de asemenea, deschideți Panoul Info din fereastra > Info (tasta de comandă rapidă: F8).
Panoul Info oferă informații utile în funcție de instrumentul selectat.
apăsând „M”, alegeți instrumentul dreptunghiular Marquee și creați o casetă care are o lățime de 120px din colțul din stânga al pânzei. Puteți ajusta dimensiunea uitându-vă în Panoul de informații în timp ce efectuați selecția.
Acum faceți clic pe rigla din stânga și trageți un ghid în dreapta selecției de marcă, așa cum se arată în imaginea de mai jos. 
4 mutați această selecție pe marginea din dreapta a pânzei. Alocați un alt ghid în partea stângă a selecției.
pânza dvs. ar trebui să arate acum astfel:
Crearea logo-ului
5 Acum vom crea logo-ul pentru site-ul nostru web.
logo-ul va fi foarte simplu și va avea un efect de gradient de culoare. Creați un grup nou (strat > nou > grup) și denumiți-l „logo”.
6 Selectați instrumentul de tip orizontal (T) și tastați „SMASHING” (sau numele site-ului dvs. web) cu majuscule.
7 apoi, în Panoul de caractere, setați fontul la Arial, stilul la Bold și dimensiunea la 42pt. De asemenea, setați opțiunea metodei anti-aliasing la Sharp și utilizați culoarea #101112.
de asemenea, puteți seta aceste opțiuni în bara de opțiuni atunci când instrumentul tip este instrumentul activ. 
8 faceți dublu clic pentru a deschide caseta de dialog Stil strat. Selectați Gradient Overlay, faceți clic pe editorul Gradient și utilizați setările așa cum se arată mai jos.
9 puneți stratul de tip „SMASHING” la distanța de 35px de sus și 0px de la ghidul din stânga. Puteți face acest lucru cu precizie folosind instrumentul Mutare (V) și tastele săgeată. Duplicați acest tip de strat (strat > strat duplicat).
mutați stratul duplicat chiar lângă cuvântul „SMASHING” și editați textul în „Dzine”. Repetați pașii 6, 7, 8, dar utilizați diferite culori de gradient (oprire culoare stânga: #b27625, oprire culoare dreapta: #e5ad27) pentru cuvântul „Dzine”.
10 Selectați instrumentul de tip orizontal (T) și adăugați o linie de etichetă sub logo cu următoarele setări. 
11 logo-ul final ar trebui să arate ca imaginea de mai jos.
pentru a activa / dezactiva ghidajele, accesați vizualizare > afișare > grilă sau utilizați comanda rapidă Ctrl / Cmd + ; 
crearea barei de navigare
12 creați un grup nou și denumiți-l „navigare”, ar trebui să fie deasupra grupului „logo”. Trageți un ghid din rigla superioară, la 150px sub marginea superioară a pânzei. Selectați instrumentul dreptunghi (U) și trasați o linie orizontală de înălțime de 4px cu o culoare de #e3ab27, pe pânză.
13 adăugați legături de navigare la 12px-înălțime de la această linie orizontală și 20px la dreapta ghidajului din stânga.
selectați instrumentul dreptunghi rotunjit (U) și desenați o cutie cu dimensiunea de 72px pe 35px. Mutați acest strat sub linkurile de text și denumiți stratul „hover”.
îndreptați colțurile rotunjite de jos cu instrumentul Convert Point. Mutați părțile laterale ale marginilor inegale de mai jos cu o margine de 8px pentru a face marginile egale cu alte margini interioare din partea de jos.
faceți dublu clic pe stratul „hover” pentru a deschide caseta de dialog Layer Style și pentru a adăuga culori de gradient (Stop color stânga: #e5ad27, stop color dreapta: #b27625). Selectați instrumentul de tip orizontal (t), selectați textul, „acasă” și schimbați culoarea în #ffffff (alb). 
crearea secțiunii „sunați-ne”
14 în continuare vom crea secțiunea „sunați-ne” în partea dreaptă sus a designului nostru (partea exact opusă a logo-ului).
descărcați această pictogramă a telefonului și plasați-o lângă ghidul din dreapta. Denumiți acest strat „pictograma telefonului”. Selectați instrumentul de tip orizontal (t).
adăugați un număr de telefon în partea stângă a pictogramei telefonului folosind fontul Arial, cu dimensiunea setată la 20pt și culoarea #292929.
adăugați un text înrudit sub numărul de telefon folosind fontul Arial, setat la Bold, cu o dimensiune de 11pt și o culoare de #595959. 
crearea antetului
15 acum vom crea o secțiune antet. Creați un grup nou și denumiți-l „antet”.
16 selectați instrumentul dreptunghi (U) și creați o formă de dreptunghi cu dimensiunea de 1200px pe 440px.
puneți acest dreptunghi la o distanță de 1px sub bara de navigare și denumiți acest strat „header bg”. Faceți dublu clic pe stratul” header bg”, selectați stilul stratului de suprapunere a gradientului și aveți aceste două culori în Editorul de Gradient (Stop color stânga: #2e2226, stop color dreapta: #7a7556).
vedeți imaginea de mai jos pentru poziția dreptunghiului și detaliile culorilor. 
17 creați un alt dreptunghi din instrumentul Rectangle Tool (U) cu dimensiunea de 960px pe 360px.
puneți acest dreptunghi la distanța de 40px din partea de sus a stratului „header bg” și 0px din Ghidul din stânga. Denumiți acest strat „container antet”. Previzualizați mai jos ce am făcut până acum cu designul.
crearea secțiunii „proiect prezentat”
18 în continuare vom crea secțiunea proiect prezentat. Creați un grup nou în interiorul grupului antet și denumiți-l „fp”. Selectați instrumentul dreptunghi (U) și creați un dreptunghi cu dimensiunea de 630px pe 340px la distanța de 10px din partea de sus și din stânga containerului antetului.
dați acestui strat culoarea #000000 și denumiți-l „container fp”. 
19 deschideți o imagine în Photoshop pentru a o plasa aici ca proiect prezentat. Selectați > All (Ctrl/Cmd + a), apoi editați > Copy (Ctrl/Cmd + C).
reveniți la designul nostru web.
creați un nou strat deasupra stratului „container fp” și accesați editare > lipire (Ctrl/Cmd + V) pentru a lipi în imaginea proiectului prezentat. Redenumiți acest strat în „imagine fp”. Faceți clic dreapta pe stratul” imagine fp ” și selectați Creare mască de tăiere.
acum imaginea este vizibilă numai în interiorul dreptunghiului („container fp”).
efectuați ajustări astfel încât imaginea proiectului prezentat să fie similară cu cea prezentată mai jos. 
20 mergeți la editare > transformare > scară (Ctrl/Cmd + T). Din bara de opțiuni, faceți clic în caseta de rotație și tastați -4 și apăsați enter de două ori pentru a regla unghiul.
rămâneți pe același strat („imagine fp”) și selectați luminozitate ca mod de amestecare a acestui strat. 
21 în continuare vom crea bara de titlu și descriere pentru imaginea de proiect prezentată. Selectați instrumentul dreptunghi (U) și creați o formă de dreptunghi cu dimensiunea de 630px pe 90px folosind culoarea #161718.
schimbați opacitatea acestui strat la 90% și denumiți-l „title bg”. Plasați acest dreptunghi așa cum se arată în imaginea de mai jos. 
22 creați un alt dreptunghi cu dimensiunea de 630px cu 1px folosind culoarea #9c9c9c și denumiți-l „titlu linie orizontală”.
plasați acest dreptunghi pe marginea superioară a conținutului stratului „title bg”.
23 adăugați un titlu și o descriere în interiorul dreptunghiului pe care l-am creat la Pasul 21, utilizând următoarele setări pentru titlu și descriere.
pentru titlu:
- font: Arial, culoare: #ffffff, Dimensiune: 25pt și metoda anti-aliasing opțiune: Sharp
pentru Descriere:
- font: Arial, culoare: #a4a4a4, Dimensiune: 12pt și opțiunea metodei anti-aliasing: Nici unul
crearea secțiunii „quick quote”
24 creați un alt grup în interiorul grupului antet și denumiți-l „quick quote”. Selectați instrumentul dreptunghi (U) și creați un dreptunghi cu dimensiunea de 300px pe 340px. Plasați acest dreptunghi la distanța de 10px în dreapta secțiunii proiectului prezentat și denumiți-l „container qq”.
25 vom copia un stil de strat dintr-un alt strat pe care l-am creat într-un pas anterior.
intrați în grupul „navigare”, faceți clic dreapta pe stratul „hover”, selectați Copy Layer Style, reveniți la stratul „QQ container”, faceți clic dreapta și selectați Paste Layer Style. Avem același stil de strat al stratului „hover” pentru „containerul qq” acum. 
26 Selectați instrumentul de tip orizontal (t).
scrieți „Quick Quote” în interiorul „containerului qq” la distanța de 20px de marginile superioare și stângi ale cutiei care conține. Setați familia font la Trebuchet MS (sau un font web-safe de preferință) cu thecolor de alb (#ffffff) și opțiunea metoda anti-aliasing setat la Sharp. Vom folosi instrumentul dreptunghi rotunjit (U) pentru a crea trei câmpuri de formular.
selectați instrumentul dreptunghi rotunjit (U) și setați raza la 3px. Apoi creați două dreptunghiuri rotunjite cu dimensiunea 260px cu 35px folosind culoarea albă (#ffffff). Apoi denumiți straturile de formă ca „field1” și respectiv „field2”.
Creați al treilea dreptunghi rotunjit cu dimensiunea de 260px cu 75px folosind o culoare albă (#ffffff) și denumiți-l „field3”. Selectați instrumentul de tip orizontal (T) și creați etichete pentru fiecare câmp de formular. 
27 Selectați instrumentul dreptunghi rotunjit (U) și creați o casetă de 80px cu 35px și denumiți-o „submit btn”.
28 faceți dublu clic pe strat pentru a deschide fereastra de dialog stiluri strat și bifați caseta de selectare Gradient Overlay din stânga.
Faceți clic pe editorul de Gradient și schimbați culorile gradientului așa cum se arată mai jos. 
29 selectați instrumentul de tip orizontal (T) și tastați „trimiteți” folosind fontul Arial, style Bold și size la 13pt. Selectați ambele straturi în panoul Straturi („trimiteți btn „și”trimiteți text”).
30 alegeți instrumentul Mutare (V) din panoul Instrumente și faceți clic pe Aliniere centre verticale și aliniere centre orizontale din bara de opțiuni.
(alternativ, puteți obține același rezultat accesând Layer > Align > Vertical Centers și Layer > Align > Horizontal Centers). 
crearea zonei principale de conținut
31 creați un grup nou și denumiți-l „conținut”. Selectați instrumentul dreptunghi (U).
creați un dreptunghi de 300px cu 175px și denumiți-l „c01”. Plasați acest strat 30px sub antet și 0px din Ghidul din stânga. Faceți dublu clic pe strat și utilizați setările din imaginea următoare.
32 vom adăuga conținut la această casetă acum. Selectați instrumentul de tip orizontal (T) și adăugați textul „despre SmashingDzine”. Faceți o selecție a cuvântului” despre ” folosind instrumentul de tip orizontal (T), apoi schimbați culoarea acestuia la #b47825.
apoi faceți o selecție a cuvântului „zdrobitor”, apoi schimbați culoarea în #2f2f2f. adăugați o mică descriere și un text de legătură sub titlu. Următoarele opțiuni au fost utilizate pentru titlul, descrierea și textul linkului.
(puteți ajusta aceste opțiuni după cum este necesar). 
pentru titlu:
- Font: Trebuchet MS, stil: Normal, Dimensiune: 24pt, metoda anti-aliasing: Sharp
pentru Descriere:
- Font: Arial, stil: Normal, Dimensiune: 12pt, metoda anti-aliasing: nici unul, Culoare: #767676
pentru textul linkului:
- Font: Arial, stil: Bold, Dimensiune: 13pt, metoda anti-aliasing: nici unul, Culoare: # 252525, subliniat
33 vom adăuga acum o casetă pătrată lângă descriere. Selectați instrumentul dreptunghi (U) și culoarea #ffffff, țineți apăsată tasta Shift pentru a menține proporțiile și a crea un pătrat cu dimensiunea 88px pe 88px. Mutați acest pătrat la o distanță de 10px din stânga dreptunghiului („c01”).
denumiți acest strat „chenar”. Faceți dublu clic pe strat pentru a deschide fereastra de dialog Stil strat și adăugați un stil strat Stroke cu următoarele setări: 
34 creați o altă casetă cu dimensiunea de 82px pe 82px și plasați-o în centrul stratului „border”. Denumiți acest strat „cutie” și schimbați culoarea acestui pătrat în #d5d5d5.
Selectați toate straturile din acest grup (grupul”conținut”), accesați stratul > nou > grup din straturi (Ctrl/Cmd + G) și redenumiți acest nou grup „despre”. 
notă: Cutia pătrată gri interioară este un suport pentru o imagine și poate fi înlocuită cu orice imagine la alegere.
35 duplicați grupul „despre” (faceți clic dreapta pe grup și selectați grup duplicat) și denumiți-l „servicii”. Faceți clic dreapta pe grupul” servicii „și selectați din nou Duplicate Group și denumiți-l”portofoliu”.
avem trei grupuri acum („despre”, „servicii” și „portofoliu”). Mutați ultimul grup („portofoliu”) în ghidul din dreapta, așa cum se arată mai jos. 
36 Selectați toate cele trei grupuri din panoul Straturi, apoi mergeți la stratul > Distribuiți centrele orizontale > pentru a le spațializa în mod egal.
Faceți clic aici pentru a vedea imaginea de dimensiune completă a imaginii următoare. 
37 modificați titlurile pentru grupul” servicii „(centru) și grupul” portofoliu ” (dreapta) așa cum se arată mai jos. (Puteți schimba aceste titluri în funcție de cerința dvs.) 
crearea subsolului
38 creați un grup nou și denumiți-l „subsol”.
selectați instrumentul dreptunghi (U) și creați un dreptunghi cu dimensiunea de 1200px pe 100px în partea de jos a aspectului nostru de proiectare. Denumiți acest strat „subsol bg”. Utilizați același stil de suprapunere a gradientului ca stratul” antet bg „făcând clic dreapta pe stratul” antet BG ” și alegând stilul stratului de copiere.
reveniți la grupul de subsol, faceți clic dreapta pe stratul „footer bg” și selectați Paste Layer Style. 
39selectați instrumentul de tip orizontal (T) și adăugați textul drepturilor de autor și linkurile de subsol text din stânga folosind fontul Arial, dimensiunea de 12pt și o culoare Gri (#dddddd). 
40 vom adăuga secțiunea de abonament prin e-mail din dreapta.
creați un grup nou în grupul „subsol” și denumiți-l „abonați-vă”. Selectați instrumentul dreptunghi rotunjit (U) și creați un dreptunghi de 85px pe 35px. Denumiți acest strat „abonați-vă btn”.
41 repetați pasul 26 pentru adăugarea câmpurilor de formular și a etichetelor.
42 selectați instrumentul de tip orizontal (T) și tastați „Abonare” folosind fontul Arial, stil setat la Bold și dimensiune la 13pt.
selectați ambele straturi („abonare btn” și „abonare text”).
43 repetați pasul 28 pentru crearea butonului abonare.
44 selectați instrumentul dreptunghi rotunjit (U) și setați raza la 3px. Creați un dreptunghi rotunjit cu dimensiunea 210px cu 35px folosind o culoare albă (#ffffff) și denumiți acest strat de formă ca „câmp de e-mail”. Adăugați o linie de text deasupra”câmpului de e-mail”.
Rezultat Final
OK, asta este și am terminat. Iată rezultatul final.
Faceți clic pe imaginea de mai jos pentru a vedea aspectul de dimensiune completă. Vă mulțumim pentru următoarele, împreună cu tutorialul meu. Sper că v-ați bucurat cu toții și ați învățat ceva nou din acest tutorial.
vă rugăm să lăsați comentariile dvs. de mai jos și să vă împărtășiți gândurile și opiniile, mi-ar plăcea să le aud. De asemenea, puteți împărtăși acest tutorial de design prietenilor dvs. dacă credeți că le-ar putea fi de ajutor!
Descărcați fișierul sursă
puteți descărca fișierul Photoshop (PSD) al acestui tutorial din linkul de mai jos ca arhivă ZIP.
- curat-profesional-weblayout (ZIP, 2.4 MB)
rezumat
dacă decideți să utilizați acest design, asigurați-vă că optimizați imaginile pentru a reduce timpul de încărcare. Acest decide ar trebui să fie mare pentru site-uri mici, cum ar fi unul pentru un teren de golf, deoarece este simplu, ușor de utilizat, și ușor de utilizat.
conținut înrudit
- cum se creează un Design de Blog curat cu Photoshop
- codarea unui web curat 2.0 Style Web Design from Photoshop
- creați un aspect Web elegant și Minimalist în Photoshop
despre autor
Waheed Akhtar este un web designer independent din Dubai, Emiratele Arabe Unite. Este fondatorul și editorul Boost Inspiration, unde prezintă diferite resurse creative de artă digitală, design grafic, Ilustrație, fotografie și tipografie pentru inspirație. Puteți ajunge la el prin Twitter sau Facebook.