Share
În acest tutorial, vom crea un design Web high-end folosind un font clar, subțire, imagini de fundal superbe și o utilizare inteligentă a spațiului și a aspectului. Puteți utiliza cu ușurință tehnica pentru a crea propriile dvs. modele unice.
Apoi, când ați terminat de citit acest tutorial, puteți trece la site-ul nostru sora NETTUTS și urmați-l pe măsură ce construim designul în HTML curat și simplu. OK, să ne jucăm rock'n'roll!
Este un design destul de elegant, care probabil ar fi potrivit unui site de tip portofoliu de designer, dar într-adevăr ar putea fi modificat pentru tot felul de scopuri. Se bazează pe o tipografie elegantă, o structură structurată și un fundal vizual interesant.
Puterea reală a acestui design este de a vă arăta ce se poate realiza prin menținerea simplă. La sfârșitul acestei părți a tutorialului din Photoshop, vă voi arăta cum putem schimba cu ușurință mediile și fonturile și le putem explica De ce acest design funcționează bine.
Este o structură simplă: meniul orizontal, panoul principal al poziției și zona de conținut. Deși acesta este un design de pagină de pornire, vă puteți imagina că o pagină interioară ar avea pur și simplu un panou de poziție diferit și o nouă zonă de conținut. În scopuri de simplitate, vom pune împreună designul paginii de pornire.
Mai întâi de toate, creați un nou document. Mina are o lățime de 1100px x 1100px. Acest lucru este astfel încât să pot crea un site web creat pentru o lățime de 1024 de pixeli, dar încă mai are spațiu pentru a decide ce se va întâmpla în afara zonei vizibile, astfel încât să se degradeze chiar și pe ecranele mari.
Acum, prima noastră sarcină este să creăm un fundal abstract frumos. Pentru a face acest lucru vom trage un gradient liniar în jos folosind aceste două culori: # 1b204c la # 472373.
Acum vrem un fundal interesant vizual care să fie suficient de abstract pentru a nu distrage atenția de la text. Din fericire, există o imagine minunată de acuarelă disponibilă gratuit prin Arsenal al GoMedia, faceți clic pe secțiunea freebie și veți găsi două acuarele; cel pe care-l dorim este cel verzui.
Acum, în timp ce este foarte plăcut ca atare, este mult mai răcoroasă dacă apăsăm CTRL + I și îl inversăm, așa că este frumos roz / violet pe negru.
Acum, copiați acuarela pe panza noastră principală și apăsați pe Ctrl + T pentru ao transforma până la o dimensiune rezonabilă. Scopul nostru este să-l facem să se estompeze la negru pe dreapta (pentru a ne putea construi ulterior HTML-ul cu mai multă ușurință). În plus, nu vrem prea mult timp pe verticală, deci este mai bine să ștergeți puțin din exces. Pentru a face acest lucru apuca o perie vopsea și vopsea în negru pentru a elimina doar părțile de jos.
Rețineți că este mai bine să obțineți o pensulă care are o anumită textură, astfel încât nu este evident că am șterse părți. Dacă parcurgi lista de perii, există o perie care vine cu Photoshop care arată ca cea prezentată. Nu este o perie proastă de folosit. Desigur, s-ar putea să aveți niște pensule de vopsea mai frumoase și să vă simțiți liberi să le folosiți.
După ce ați terminat, completați toate zonele din dreapta și de jos cu negru, astfel încât întreaga pânză să fie acoperită de acest strat.
Acum scăpați opacitatea stratului de acuarelă la aproximativ 70% și setați modul de amestecare la Overlay. În acest fel, o parte din colorare trece prin a crea un aspect mai frumos.
Acum, într-un strat nou de deasupra stratului de acuarelă și desenat drept în sus, faceți un Gradient Linear mergând de la negru la transparență, astfel încât, ulterior, panza să se estompeze până la negru în jos.
În continuare, în două straturi noi, desenați două gradienți radiali de la alb la transparență, unul mai mare decât celălalt. Stabiliți aceste opțiuni pentru Suprapunere și 40% și 100% Opacities pentru cele mai mari și, respectiv, mai mici.
Practic, ar trebui să faceți o evidențiere a imaginii noastre pentru ao oferi o textura mult mai clară.
Deci, iată fundalul final. Este întunecată, abstractă și destul de elegantă cu colorarea. Desigur, este posibil ca rozul să nu fie alegerea dvs. specială de culoare, de obicei, și dacă este cazul, puteți adăuga un strat de ajustare a culorii în partea de sus și utilizați-l pentru a regla colorarea. Îmi place destul de roz / violet, așa că am să merg cu ea!
Acum creăm un strat nou și adăugăm un "logo". Nu am un scop cu acest design, așa că am decis doar să pun un text și să pretind că este logo-ul meu. Deoarece acest tutorial este jumătate Psdtuts + și apoi jumătate NETTUTS, am scris un mic puțin "psd vs net".
Fonturile pe care le folosesc aici sunt Egyptian505 BT Bold și Egyptian505 LT BT Light (versiunea mai ușoară a fontului este ceea ce am folosit pentru "vs").
Pentru a face ca bitul "vs" să crească puțin, puteți folosi comanda de bază în Paleta de caractere (prezentată în a doua imagine de mai jos).
În cele din urmă, am adăugat, de asemenea, un stil de strat mic la text, cu un Gradient Overlay slab ca a arătat și o 1px Inner Glow cu alb.
Acum, în acest moment, mi-am pornit conducătorii (Ctrl + R) și am desenat câteva ghidaje. Am împărțit pagina mea în trei coloane cu linii la 50px, 320px, 610px, 900px. Cel puțin acestea sunt numerele pe care ar fi trebuit să le folosesc. Privind la screenshot-ul meu, mi-am dat seama că linia a treia este oprită!
Oricum, ideea este că eu definesc spațiul pe care voi fi plasat toate elementele mele și dacă aș face mai multe pagini aș putea folosi această rețea în moduri diferite. Așa cum este, doar cu pagina de pornire proiectată, voi folosi doar acele trei coloane o singură dată - puțin mai târziu.
Așa că acum tragem prima noastră cutie neagră. Cu conducătorii și ghizii în continuare, creați un nou strat și desenați o margine dreptunghiulară (M) care merge de la o parte la alta. Completați-l cu negru, apoi setați acest strat la Opacitate 80%, faceți clic dreapta pe strat și alegeți Opțiuni de amestecare. Apoi, faceți clic pe Stroke și adăugați o curgere albă de 1px pe exterior și setați la Overlay. Acest lucru ne va oferi o frontieră foarte rece, care va face caseta să arate mult mai clară.
Acum, duplicați stratul cutiei și utilizând Ctrl + T, transformați caseta astfel încât să aibă aceeași lățime, dar mult mai scurtă (după cum se arată mai jos). Aceasta va fi caseta noastră de navigare.
Schimbați Opacitatea la 40% și Umpleți la 50%. Acest lucru va face caseta noastră mult mai slabă și să dea o oarecare profunzime celor două cutii, făcând una să pară mai importantă și mai impunătoare decât cealaltă.
Acest tip de contrast între cele două cutii este o modalitate excelentă de a stabili o prioritate vizuală între elemente. Când utilizatorul ajunge la pagină, vrem să vadă mai întâi mesajul nostru mare, apoi bara de navigare. Făcând-o decolorată, îi spunem utilizatorilor că cel mai puțin proeminent trebuie privit la cel de-al doilea.
OK, acum adăugăm un text. Din nou am folosit lumina egipteană aici pentru copia mare (care va fi o imagine în HTML finală) și Arial pentru elementele de meniu (care vor fi linkuri HTML).
Acum un cuvânt despre tipografie. Acest design se bazează foarte mult pe faptul că am folosit o simplă și curată tipă. Având textul frumos și mare îl face să pară foarte îndrăzneață, dar în același timp, pentru că este o textură foarte subțire, se pare că arată elegant.
Dacă sunteți în căutarea unui design de înaltă calitate, subțire, caractere clasice sunt greu de învins. Când am descoperit pentru prima oară Helvetica Ultralight, îmi amintesc că am fost nebun proiectând toate aceste desene care păreau foarte minime și în sus.
În plus, acest font specific - egiptean - are o serifă foarte ascuțită, combinată cu un fel de squarishness care face să pară destul de răcoros (cred).
Există o mulțime de alte fonturi minunate pe care le puteți utiliza. Ca regulă generală, totuși, vrei ceva mai clasic caută. Sau, cu alte cuvinte, dacă nu știți ce faceți, ați dori să vă îndepărtați de fonturi cu adevărat ciudate - de ex. ceva care arată foarte futurist. De fapt, ca o regulă generală bună, dacă nu sunteți foarte încrezător, tinde să fie mai bine să vă apropiați de fonturi mai obișnuite.
Un alt tip de text care ar funcționa foarte bine aici este ceva care este un pic cam tehnologic ca acest font folosit de Chris Garrett Media. Nu am nici o idee despre ce tip de font este sau despre ce tip de font este numit, dar este destul de curat. Poate că un fel de tipofil ar putea să ne lumineze în comentariile :-)
Oricum, după ce am văzut site-ul lui Chris Garrett Media, am hotărât că ar fi destul de interesant să adaug un plus de gradient tipului meu și să-i dau un pic de strălucire. Așa cum puteți vedea mai jos, aici adăugăm o suprapunere de gradient de la negru la alb, a scăpat puțin și în modul Overlay.
Acum putem desena o cutie neagră mare pentru zona de conținut. De fapt, puteți duplica stratul anterior și îl puteți transforma din nou.
Și asta ne duce la punctul prezentat în imaginea de mai jos. Privind destul de cool!!
Acum adăugăm un conținut de inactiv în caseta de conținut. Aici am folosit din nou Arial pentru cea mai mare parte a textului, dar pentru titluri mai degrabă decât pentru a folosi egiptean, am plecat cu Georgia. Georgia nu este la fel de elegantă, dar este un font standard, ceea ce înseamnă că pot face aceste titluri în HTML simplu și vechi, în loc să se bazeze pe imagini (sau Flash).
De fapt, cu lansarea Windows Vista există și un alt font semi-standard care ar funcționa bine aici numit Cambria. Dar Cambria are unele probleme ciudate de redare în Firefox pe Mac-uri la anumite dimensiuni, așa că pentru moment vom rămâne bine cu Georgia.
În cele din urmă, am creat un nou strat în partea de jos, l-am umplut cu o culoare purpurie închisă, am adăugat o margine de 1px în partea de sus, și voila avem un subsol.
Punând totul împreună, site-ul este gata să construiască.
Acum, unul dintre lucrurile reci despre acest design este că putem schimba cu ușurință fundalul și designul arată încă minunat. Iată că l-am schimbat pentru o imagine din iStockPhoto numită Pasiune, cu o schemă de culori similară. Este o redare 3D superbă a luminii și, asemeni fondului nostru actual, este și abstractă și frumoasă din punct de vedere vizual.
Aici am folosit o altă imagine abstractă din iStockPhoto numită Blue Energy. Deoarece culoarea sa schimbat, am parcurs și modificat culorile în câteva locuri - în special în text - și, de asemenea, am adăugat o strălucire mare în copia principală.
Acum este puțin probabil să aveți nevoie de acest design exact - acum că am scris un tutorial întreg pe el. Deci, să vorbim puțin despre De ce funcționează bine, pentru că aceasta vă va ajuta să utilizați principiile pentru a vă crea un aspect unic.
Există mai multe lucruri care vin împreună pentru a face un design care funcționează aici:
Desigur, există multe lucruri despre care am putea vorbi, cum ar fi culoarea și precedența, dar cred că principalele lucruri pe care ar trebui să le priviți aici sunt tipografia în legătură cu fundalul. Ca o declarație finală în acest scop, aici este o mică imagine care spune totul :-)
Acum, destul de multe lucruri din Photoshop-ul nambi-pambi, hai să facem câteva HTML / CSS! Urmați la a doua parte a acestui tutorial, în care construim designul nostru într-un site web de lucru de la NETTUTS-Web Development Tutorials!
Accentsconagua