Share
Photoshop este adesea instrumentul potrivit pentru web design, mai ales dacă creați un design folosind numeroase imagini și efecte de perie. În acest tutorial, vă vom arăta cum să creați un design complet de pagină de start grunge. Vom proiecta antetul, bara laterală, corpul, subsolul și stilul totul pentru a lucra împreună într-un design puternic și texturat.
De data aceasta vom crea un design web complet în stil grunge folosind Photoshop și o mulțime de imagini stoc. Deoarece acesta este un tutorial intermediar la nivel avansat, voi trece peste explicația câtorva pași de bază. Mai întâi creați un document nou de 950 px la 800 px la RGB 72dpi. Afișați riglele și trageți patru ghidaje care leagă documentul, aceasta va fi zona optimă a designului. Am de gând să păstrez o structură de lățime fixă.
Accesați Imagine> Canvas Size și măriți lățimea și înălțimea mult mai mult, 1200 px la 1000 px este OK, astfel vom fi proiectați pentru rezoluții mai largi ale ecranului. Apoi adăugați mai multe ghidaje pe care intenționați să le adăugați (antet, bara de navigare, bara laterală, subsol).
Să ne imaginăm că acest design este destinat unui șablon Wordpress, deci avem nevoie de un antet, o bară de navigare în interiorul antetului și o bara laterală dreaptă. Uitați-vă la partea de jos a imaginii următoare. Apoi, completați un fundal cu această culoare # 7A8173.
Acum vom crea un model pentru fundalul antetului, ceea ce este destul de simplu. Creați un document nou de 50 px la 300 px și trageți ceva asemănător imaginii de mai jos. Folosesc ghidaje pentru a-mi forma cât mai simetric posibil. Apoi mergeți la Editare> Definiți modelul și salvați forma ca "model 1."
Pe un nou strat din fișierul nostru principal de desen, trageți un dreptunghi de înălțime de 300 px utilizând Instrumentul dreptunghi. Accesați Filtre și adăugați o suprapunere de tip, căutați modelul nou și aplicați-l. Pentru a face acest lucru corect, trebuie să faceți clic pe butonul Snap to Origin. Schimbați stratul Umpleți la 0%, creați un nou strat gol deasupra stratului de formă și îmbinați ambele, în acest fel veți avea modelul gata să adăugați anumite efecte. Denumiți acel strat "Modelul 1."
Selectați stratul "Pattern 1" și aplicați anumite stiluri de straturi: Drop Shadow, Overlay de gradient și o suprapunere cu modele. Încercați să obțineți ceva similar celui de jos al imaginii de mai jos, utilizând următoarele valori.
Acum vom adăuga fundalul bara de navigație. Desenați un dreptunghi care ascunde un pic din stratul "Pattern 1". Aplicați în acest dreptunghi o suprapunere de tipar, o acoperire de gradient negru până la roșu și o umbră moale de Drop. Utilizați valorile imaginilor de mai jos ca referință. Apoi, adăugați o mască Layer> Ascundeți toate și trageți un Gradient negru în alb la negru Reflected Gradient pe masca stratului, veți obține ceva asemănător cu imaginea de jos.
Acum, trageți o elipsă (# 691E1B) deasupra stratului "Pattern 1", numiți-o "Lumină" și Aplicați un Gaussian Blur cu o rază de 50 de pixeli. Am creat un ghid suplimentar pentru a atrage lumina în centrul antetului. Ștergeți totul sub bara de navigare și schimbați modul de amestecare a stratului în Color Dodge.
Pentru a termina prima parte a layout-ului, vom desena fundalul bara laterala. Desenați niște ghiduri pentru a delimita bara laterală și editați ghidurile existente pentru a le face să se potrivească cu designul propriu-zis. Apoi trageți un dreptunghi roșu (# 3D100B) și aplicați următoarele stiluri: o Shadow Drop, o suprapunere de culoare și o suprapunere de tipar.
În acest moment, trebuie să vă gândiți la felul în care mergeți a taia imaginea în HTML + CSS; de aceea folosesc Umbre de Drop cu 0px de Distanță în cea mai mare parte a timpului și numai gradiente orizontale sau verticale. Textura în acest caz are multe linii orizontale. Trebuie să fie ușor să transformați acest lucru într-un context repetat pentru multe domenii. De asemenea, acesta este un punct bun pentru a face o pauză și a organiza straturile din dosarele dvs. pentru a păstra lucrurile organizate.
Acum, începeți cu detaliile, vreau să adăugați numele site-ului într-un loc proeminent, de aceea voi folosi această imagine frumoasă a etichetei de grunge. Evident, trebuie să extrageți eticheta și să o plasați în colțul din stânga sus al designului nostru. Încercați să obțineți ceva de genul primei imagini de mai jos. Apoi, utilizați instrumentul Magic Wand pentru a selecta cercul maro, apoi Command + Shift + I pentru a inversa selecția. Reglați nivelurile și nuanța / saturația utilizând valorile afișate mai jos.
Acum, folosind instrumentul Eraser și o pensulă neregulată, ștergeți unele zone ale marginii etichetei. Pentru a adăuga a taietura in hartie efect, selectați instrumentul Dodge și utilizați aceeași formă de perie pentru a aplica apăsarea la marginea etichetei.
Vom adăuga o umbră etichetei noastre în continuare. Pentru aceasta, duplicați stratul "Label", schimbați Hue / Saturation> Lightness la -100 și aplicați un Blur Gaussian cu o rază de 10 px. Apoi, schimbați modul de îmbinare "Etichetare copie" la Multiplicare și setați opacitatea la 75%.
O ultimă retușare pentru etichetă, modificați Saturația la -40 pentru ao face mai gri.
Acum vom adăuga câteva imagini de asistență, vom încerca să găsim imagini care înconjoară un concept, dar pentru că acesta este un tutorial despre tehnici, aleg unul aleatoriu. Aceasta este o imagine frumoasă a unui tren de epocă aici, în zonele muntoase din Bolivia. Extrageți forma trenului, oricum doriți. Apoi schimbați modul de amestecare a stratului "tren" în Darken.
Să adăugăm un text, mai întâi numele paginii. Introduceți ceva folosind a grunge font; puteți găsi câteva interesante aici. Pentru titlu, folosiți un tip negru și schimbați modul de amestecare al stratului la Overlay, duplicați stratul și modificați opacitatea copiei la 75%. Pentru a obține un efect de estompare mic, deplasați stratul copiat cu unul sau doi pixeli la stânga sau la dreapta. Adăugați mai mult text utilizând această tehnică, ca un slogan sau ceva similar. De asemenea, este un moment bun pentru adăugarea legăturilor de navigare, de asemenea.
Acum adăugați mai multe lucruri, e stilul grunge! Am descarcat perii de la Jenn B de aici, aceste perii au restrictii. Folosind acele perii adăugați niște numere, colțuri, casete de mascare și ce nu, nu ezitați să faceți tot ce doriți în acest pas. Amintiți-vă că adăugați toate straturile de sub straturile "Label" și "Copy Label".
Acum vom începe să adăugăm secțiunile de pagină. Mai întâi de toate, în antet vom avea nevoie de o bară de căutare. Introduceți o etichetă de căutare. Apoi, trageți un dreptunghi roșu (# 6A0400) ca câmp de introducere a căutării, apoi aplicați un efect de strat Stroke și Pattern overlay layer.
Acum vom începe să adăugăm conținutul principal al designului nostru. Mai întâi vom adăuga un câmp pentru a pune un text special. Desenați un dreptunghi gri închis (# 0D0F0E) într-un strat sub bara laterală. Am creat patru dosare pentru a păstra ordinea organizată: una pentru "Header" de mai sus, unul pentru "Sidebar" de sub "Header", unul pentru "Content" de sub "Header" și "Sidebar" unul pentru "Footer".
Puteți adăuga acest dreptunghi în stratul "Conținut", de asemenea puteți adăuga câte foldere este necesar în interiorul acestor patru dosare. Odată ce ați plasat dreptunghiul într-un loc potrivit, aplicați un efect de umbrire și un efect Stroke utilizând valorile de mai jos.
Descărcați niște colțuri de grunge și granițe de aici, și lipiți una peste fundalul cenușiu. Apoi, aplicați un efect de suprapunere în colț cu o culoare de # 171612. De asemenea, adăugați un alt colț pe fundalul bara laterală, dar de data aceasta reduceți Opacitatea sub 25%.
Să adăugăm un text. Puteți adăuga orice text exemplu, imaginați-vă că este o secțiune de postări recente din textul javascript sau o secțiune de postări recomandată, ceva de genul ăsta. Folosesc aceeași tip de afișaj de tip grunge folosit pentru bara de navigare cu culoarea # 4D0D0D și Arial cu culoarea # 3F3F3F pentru textul corpului.
Aplicați un efect de umbră a titlului și adăugați același efect elementelor de navigare. Când convertiți acest PSD într-un fișier HTML + CSS, va trebui să convertiți aceste titluri în imagini, deci este OK dacă doriți să le adăugați mai multe stiluri. În sfârșit, folosiți niște ghiduri pentru a plasa straturile de text într-un loc potrivit.
Barul nostru recomandat arată puțin gol, așa că adăugăm o imagine de suport. În acest caz, am folosit o lovitură de polaroid. Puteți descărca imaginea polaroid de aici. Extrageți polaroidul, lipiți-l într-un strat deasupra fundalului gri și colțul de grunge din dosarul "Conținut", apoi schimbați Hue / Saturation pentru a face polaroidul mai puțin sepia (Selectați opțiunea Colorize).
Utilizați aceleași tehnici pentru marginile stratului "Label" (Pasul 9). Ștergeți și Dodge marginile imaginii Polaroid. În cele din urmă, adăugați o umbră de picătură folosind aceeași tehnică ca cea folosită în pasul 10 al acestui tutorial.
Am avut această imagine sepia a mea, așa că am adăugat-o la design. Adăugați orice imagine într-un strat nou deasupra stratului "Polaroid", selectați pătratul negru al polaroidului, apoi Command + Shift + I pentru a inversa selecția. Selectați stratul de imagine și Ștergeți toate extra. Apoi, puteți adăuga mai multe detalii de grunge, cum ar fi niște benzi de mascare peste imagine, așa cum se arată în imaginile de mai jos. Am aplicat un efect de 1px Drop Shadow la banda adăugată, de asemenea.
Este un moment bun să adăugați o pictogramă RSS în bara laterală. Desenați un dreptunghi rotunjit în colț (# 99917E), apoi aplicați următoarele efecte: o strălucire interioară, o acoperire cu modele și o umbră de picătură, utilizați valorile afișate în imaginea de mai jos. Apoi, trageți sau inserați într-un strat nou deasupra dreptunghiului forma RSS standard și completați-o cu negru. În cele din urmă, modificați modul de îmbinare a stratului "Forma RSS" pentru a suprapune.
Acum plasați pictograma RSS în partea stângă sus a barei laterale. Adăugați un text precum "RSS FEED". Desenați o altă bandă de mascare și scrieți numărul de abonați peste ea. Rețineți că acum lucrăm în dosarul "Sidebar".
Este timpul să adăugăm un singur post la designul nostru. Doar scrieți un text aleatoriu ca Titlu, o altă linie pentru dată, categorie și autor. De asemenea, unele cuvinte ca textul postului. Tipografia este cea mai importantă în acest pas. Îmi place să folosesc fonturile Serif pentru titlurile și Sans-Serif pentru corp, dar sunt doar eu. Decideți ce simțiți cel mai bine pentru designul dvs..
Pentru a da o mostră mai multă atitudine, vom adăuga o imagine de previzualizare, la fel ca în site-urile TUTS, dar, deoarece acesta este un design grunge, trebuie să adăugăm un fundal grunge imaginilor noastre. Acest lucru este la fel de simplu ca adaugarea padding-ului de sus si de jos cu CSS, apoi setarea unei imagini de fundal repetate.
Această imagine va fi de 35 mm film. Extrageți două benzi mici din film și schimbați Hue / Saturation utilizând valorile din imaginea de mai jos. Apoi, folosind un Eraser neregulat, ștergeți câteva zone ale dungilor. În cele din urmă, adăugați o Shadow Drop la fiecare banda. Când ați terminat filmul, lipiți orice imagine sub straturile de film. Aduc o imagine a uneia dintre călătoriile mele. În cele din urmă, aplicați un efect Stroke (# 2F261D) acelei imagini.
Desenați o linie roșie de 2px sub post și un text pentru comentarii, este o idee bună să adăugați toate straturile legate de postare într-un folder nou numit "Postare". Apoi, creșteți înălțimea documentului puțin, puteți face acest lucru folosind instrumentul Crop, faceți acest lucru doar pentru a vedea cum va arăta designul nostru dacă are două sau trei postări pe acesta. Duplicați grupul "Postare" și schimbați textul și imaginea, după cum se arată mai jos.
De fapt, arata destul de bine, acum adaugati titlurile elementelor barei laterale. Yo poate crea un dosar pentru fiecare element, de asemenea.
Acum adăugați o pictogramă de listă. Puteți utiliza orice formă personalizată. Adăugați un text aleator, folosesc Georgia pentru bara laterală. Duplicați pictogramele și editați unul pentru a reprezenta planare stat. Faceți același lucru pentru fiecare element din Bara laterală.
Suntem aproape de terminat. Adăugați câteva detalii de grunge în partea inferioară a barei laterale, adăugând câteva perii de grunge într-un strat nou deasupra stratului de fundal al barei laterale. Selectați stratul de fundal al barei laterale, apoi mergeți la Layer> Mask Layer> Reveal all. Apoi ascundeți unele zone din stânga jos ale fundalului buclei laterale folosind o pensulă neregulată neregulată.
În cele din urmă, selectați stratul de fundal al barei laterale și copiați stilul stratului. Desenați un dreptunghi în partea de jos a desenului din interiorul dosarului "Footer" și lipiți stilul stratului în acesta. Apoi, extrageți și inserați această imagine deasupra fundalului subsolului.
Reglați saturația pentru ao face mai puțin gri. De asemenea, puteți aplica acelei coli de hârtie o umbră de picătură care repetă tehnica de la Pasul 10. Adăugați un text pe bucata de hârtie, poate o Slogan sau ceva. Și adăugați, de asemenea, un text din subsol, ca o bară de navigare rapidă și informațiile privind drepturile de autor.
Web design-ul nu este o bucată de tort, dar sper că acest tutorial vă va ajuta să vă îmbunătățiți abilitățile. Depinde de dvs. acum, proiectați-vă propriul sau înscrieți-vă pentru PLUS pentru a descărca sursa PSD și a vă juca cu ea. Mi-ar plăcea să văd câteva modele de web grunge în grupul Psdtuts + Flickr. Puteți vedea imaginea finală de mai jos sau puteți vedea o versiune mai mare aici.
Aboneaza-te la feed-ul Psdtuts + RSS pentru cele mai bune tutturi Photoshop și articole de pe web.
Accentsconagua