Share
Anul acesta a înregistrat o creștere mare a designului site-urilor cu design grunge / texturat / desenat manual. Prin natura mea, am tendința de a crea un aspect mai curat, dar m-am gândit să încerc mâna mea la grunge astăzi și să scriu un tutorial despre crearea unei texturi simple de hârtie de la zero în Photoshop, apoi să se căsătorească cu un layout web pentru a crea un design elegant.
Mai târziu, în această săptămână, vom face același design web și vă vom arăta cum puteți să remixați chiar mai mult decât schimbarea fundalurilor și a schemelor de culori, fapt ce poate schimba întregul stil al unui design. Dar mai intai sa ne facem site-ul texturii pe hartie!
Această postare este Ziua 4 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 3-a sesiune"
Există trei moduri diferite de a obține un aspect textil de hârtie:
Efectuarea unei texturi în Photoshop va avea, în general, un aspect mai stilizat decât realist, dar are propriile farmece. De asemenea, înseamnă că nu aveți nevoie de imagini externe.
Deci, mai întâi vom începe un nou document, această pânză este de 1200px lățime x 900px înălțime. Apoi vom umple stratul de fundal cu o culoare bej - # e8e8e2.
Acum creați un strat nou pe partea de sus și faceți culorile primului și fundalului: # 979a8f și # cfd1c5 care sunt variații ale culorii originale. Apoi du-te la Filtru> Render> Nori
Acum fugim Filtru> Artistic> Cuțit palet cu setările afișate în imaginea de mai sus. Paleta de cuțit transformă norii noștri în blobs ... un fel de, în cele din urmă acest lucru va da o ușoară simțire crumbled la textura.
Apoi vom adăuga un zgomot pe panza prin Filtru> Zgomot> Adăugați zgomot utilizând setarea afișată. Acest lucru ar trebui să facă textura noastră arăta dur.
Acum, luăm stratul nostru zgomotos și crud și îl punem Multiplica și 30%. Acest lucru o va tonifica chiar inapoi.
Acum creați un strat nou pe partea de sus și faceți culorile primului și fundalului: # 42433e și # cfd1c5 - care este o versiune mai întunecată a ultimului set, astfel încât să obținem mai mult contrast de data aceasta. Apoi du-te la Filtru> Render> Nori
Apoi, rulați din nou Filtru> Artistic> Cuțit palet filtru.
De data aceasta am setat noul strat Acoperire și 60%. Acest lucru ar trebui să ne dea puțin textura.
Si asta e! Aceasta este textura noastră!
Pentru acest tutorial textura luminii este perfectă, dar puteți face cu ușurință și alte variante, doar prin amestecarea cu instrumente de amestecare. De exemplu, pentru a face această textura întunecată de hârtie maro:
Dacă variațiile de culoare nu sunt suficiente, puteți schimba și simțul texturii prin folosirea unor filtre diferite. De exemplu, aici am realizat o pergament mai simt prin luarea texturii noastre ușoare și:
Acum, că aveți o textură, puteți transforma, desigur, într-un fundal fără sudură.
Pentru acest tutorial vom folosi primul textura pe care am făcut - cea de la pasul 8.
Deci, acum vom crea un aspect de portofoliu care să meargă cu textura noastră pe hârtie. Iată structura aproximativă a paginii de pornire. După cum puteți vedea că este un pic mai mult de o structură complicată decât în tutorialul pentru aspectul web anterior, deoarece de data aceasta avem un aspect în interiorul layout-ului.
Deci, grila noastră globală este o rețea de trei coloane, apoi în panoul principal, am folosit grila pentru a sparge zona în două spații principale, una este dimensiunea coloanei 1, iar cealaltă se întinde peste ambele coloane.
Deci, mai întâi vom crea o zonă de lucru și o va ușura. Deci, aici am tras două ghiduri pe ecran, unul la 100px și unul la 1100px - ceea ce face zona în care lucrez în exact 1000px, care este perfectă.
Apoi vom crea un strat nou și vom desena o cutie albă mare așa cum este arătat.
Apoi vom seta caseta albă înapoi 25% opacitate.
Atunci o să-i înălțăm. Există o mulțime de perii de grunge mari, dar pentru acest pas vom folosi doar una dintre periile standard ale Photoshop. Puteți vedea acest lucru în captura de ecran de mai sus cu cele 60 de dedesubt.
Dacă această perie nu apare pentru dvs., faceți clic pe acea săgeată dreapta din partea de sus a ecranului periilor și alegeți Wet Media Perii, apoi faceți clic pe Adăugare pentru a le adăuga la setul dvs. curent.
Deci alegeți Instrumentul de ștergere (E), selectați acea perie pe care tocmai am menționat-o și apoi mergeți în jurul marginilor formei noastre și pur și simplu zdrobiți-o cu toate acestea vă simțiți. Am lăsat marginea superioară intactă după cum puteți vedea.
Apoi creați un nou strat chiar sub cutia albă și trageți a Radial Gradient (G) trecând de la alb la transparență. Numai asta va scoate în evidență locul în care vom plasa logo-ul nostru într-o secundă. Setați layerul la Acoperire și 70%.
Acum vom adăuga un mic "logo" - în cazul nostru, doar un cuvânt fixat într-un tip frumos de tipar. Fontul pe care l-am ales aici este Egyptian710 BT, care este un font destul de bine cunoscut și potrivit pentru scopurile noastre, deoarece este foarte neuniform caută - literele majuscule sunt mai groase decât literele minuscule - și serifele plat arată ca o mașină de scris-ish care merge cu tema noastră de hârtie.
Apoi vom face un filigran doar pentru a adăuga un pic mai mult în fundal. De fapt, puteți să vă înnebuniți și să adăugați tone de lucruri în textură de fundal, dar vom rezolva un singur filigran.
Deci, aici am scris cuvântul Folio în unele fonturi aleatoare (HumstSlab712 Blk) și l-am setat în această culoare - # c5c6ba.
Acum, să schimbăm modul de amestecare la Color Burn și 70% și vom adăuga o lovitură de 1px așa cum este arătat. Observați că pentru Completați tipul Am folosit a Model și apoi am ales o textura pe care am agățat. Atunci când este combinată cu o opacitate scăzută (36%) și un mod de amestecare (Multiply), acest lucru face ca conturul să pară ca și cum acesta este decolorat în părți.
Acum ne vom mișca filigranul să stea în spatele logo-ului.
Apoi vom face un mic element separator orizontal. Deci, creați un nou strat și trageți într-o linie de 1px în maro închis.
Acum, luați aceeași pensulă veche pentru ștergător și pur și simplu treceți peste linia ștergând bucățele mici din ea, astfel încât aceasta pare a fi în dificultate. De asemenea, eliminați marginile astfel încât să pornească în același loc ca și cutia albă.
Apoi creați un nou strat de mai jos și trageți o cutie maro, care este de aproximativ 3-4px înălțime așa cum este arătat.
Setați caseta brună la Multiplica și 5%. Acesta va fi un fel de umbră pentru separatorul nostru.
Apoi creați un nou strat și de această dată trageți o cutie albă cu o înălțime de aproximativ 20px deasupra liniei.
Setați caseta albă la aproximativ 50% opacitatea și folosirea din nou a periei noastre, doar ștergeți topul într-un mod dezordonat.
Acum repetați ultimii trei pași pentru a desena oa doua cutie albă, dar de data aceasta când o ștergeți, ștergeți mai mult, astfel încât să fie o bandă albă mai subțire.
Atunci când ambele straturi albe sunt combinate, acestea vor da un fel de mizerie.
Grupați aceste straturi de separare într-un singur grup de straturi.
Acum putem duplica grupul nostru de straturi pentru a avea trei copii pentru a forma zona noastră de rețea orizontală după cum se arată.
Aici am introdus ceva conținut. După cum puteți vedea, am amestecat un pic de tip de afișare cu o textură de tip HTML obișnuită.
Pentru textul obișnuit am folosit de fapt Cambria, care este un font pentru Vista. În CSS veți avea implicit înapoi în Georgia pentru persoanele care nu au fonturile Vista. Dacă tu, tu nu ai fonturile Vista, le poți obține liber și legal, trebuie doar să urmezi aceste instrucțiuni. Există câteva fonturi îngrijite, îmi place și Calibri.
Acum o să adăugăm panoul nostru principal. Trageți astfel o cutie dreptunghiulară mare, în culoarea maro închis - # 1e1a19 - și faceți acest lucru folosind Instrument rotunjit dreptunghiular (U) cu un rază de 5 pixeli.
Acum, măriți colțul din stânga sus și apucați o selecție mică pătrată, apoi completați-o cu aceeași culoare maro închis. Nu vrem o curbă în acest colț.
Acum, măriți colțul din dreapta sus și folosiți Instrumentul poligonal Lasso (L) în timp ce mențineți deplasarea în jos, efectuați o selecție înclinată așa cum este arătată și apoi lovită Șterge.
Acum, într-un strat nou de mai sus trageți un pătrat de culoare maro deschisă, să zicem # 352f2b, și apoi faceți o altă selecție înclinată și ștergeți o jumătate din pătrat astfel încât să rămâneți cu un triunghi care este la 1px distanță de margine.
Apoi creați un nou strat și măriți din nou colțul din stânga sus. Acum vom face forma noastră de filă. Facem acest lucru folosind instrumentul stilou și câteva clicuri foarte precise. În imaginea de mai sus am oprit toate straturile de fundal pentru a putea vedea exact forma. Iată cum faceți acest lucru:
După ce faceți al cincilea punct, puteți să completați restul formei oricare ar fi vechiul model, pentru că vom tăia marginea inferioară pentru a fi oricum drept.
După ce ați terminat forma, faceți clic dreapta și alegeți Faceți selecția.
Acum puteți completa forma cu maro închis pentru a se potrivi casetei principale. Apoi tăiați bucățile inferioare suplimentare, astfel încât este frumos și plat și se află perfect pe partea de sus, așa cum este arătat.
Apoi vom duplica stratul filă și vom muta cel nou de mai jos vechea filă (așa că maro arăta ca în față). Apoi faceți clic dreapta pe noua filă și alegeți Opțiuni amestecate și dați-i a Suprapunere de culori din această culoare frumos roșu-portocaliu - # cc5630. Motivul pentru care facem o suprapunere de culoare și nu completați doar tab-ul cu noua culoare este că, dacă faceți a doua metodă, veți obține câțiva pixeli maro rămași peste.
Apoi țineți apăsat CTRL și faceți clic pe prima filă apoi alegeți Instrument de marcaj dreptunghiular și apăsați săgeata din dreapta de câteva ori până când selecția dvs. sa mutat de-a lungul timpului pentru a se suprapune cu fila portocalie. Motivul pentru care spun că ar trebui să alegeți instrumentul de marcaj în acest pas este că pentru a muta o selecție trebuie să aveți un instrument de selecție în sus. Dacă, în schimb, aveați instrumentul de săgeată obișnuit selectat, veți muta în mod efectiv pixelii, precum și selecția. Încercați și voi și veți vedea ce vreau să spun.
Acum, creăm un nou strat între cele două file și umplem selecția noastră cu o culoare portocalie mai închisă - # b44724. Apoi țineți apăsat CTRL și faceți clic pe stratul filei portocalii, apoi faceți clic pe CTRL-SHIFT-I pentru a inversa selecția și faceți clic pe stratul intermediar și apăsați Șterge. Acest lucru ar trebui să vă lase numai cu partea portocalie mai închisă, care se suprapune cu filetul portocaliu.
După cum puteți vedea, am creat un fel de umbră în cea de-a doua filă.
Acum, dacă spun asta, aceste tab-uri arată minunat, iar motivul pentru care se fac este că se suprapun. Din păcate, acest lucru le face și mai greu să lucreze în HTML. Cu toate acestea, poți să faci o varietate de lucruri cu PNG-uri transparente sau, alternativ, să faci doar modificări de text în rollover și să nu-ți faci griji cu privire la schimbarea culorilor filelor. Oricum aceasta este cu totul un pic dincolo de scopul acestui tutorial. Este suficient să spunem că meniul ar putea fi un pic dificil de construit.
Deci aici este aspectul nostru până acum. Am adaugat cateva tab-uri si le-am dat un text.
Acum vom desena în zona de lucru recomandată. Acesta va fi un simplu dreptunghi alb, unde va merge lucrarea. Apoi, în spatele asta creați un alt strat și utilizați Instrumentul poligonal Lasso (L) pentru a desena un fel de dreptunghi nehotărât și ao umple cu o culoare întunecată, maro închis - # 0e0c0c.
Apoi vom adăuga un text descriptiv în stânga și elementul însuși. Observați că cu textul am folosit un maro închis pentru cei doi descriptori (Titlul proiectului și Descrierea proiectului) acest lucru le face să se estompeze în fundal, ceea ce este bun pentru că nu sunt atât de importante. Titlul proiectului și textul descriptiv, pe de altă parte, ies în evidență. Aceste două elemente sunt setate într-o culoare bej deschis, luată din fundal, cu titlul fiind mai strălucitor decât textul.
De asemenea, am adaugat un gradient radial slab la proba de lucru mergand de la alb la bej deschis - doar pentru ca imi plac gradienti radiali si nu pot sa le fac destul :-)
Acum, în cele din urmă, voi adăuga câteva doodle mici desenate manual pentru a finaliza designul. Pentru acestea am folosit pensulele excelente și libere ale lui David Leggett din Tutorial9. Puteți adăuga perii deschizând paleta periei așa cum se arată, făcând clic pe săgeata din dreapta și selectând Încărcați periile, apoi selectând fișierul periat descărcat.
Deoarece periile sunt mult mai mari decât le doresc, este important să acoperiți stratul după ce l-ați redimensionat. Deci, aici am scăzut săgeata în jos și apoi alerga a Filtru> Ascuțire> Decupare mască să o rezolvi.
Așa că mergem, designul final, cu câteva variante pentru pagini diferite. Desenele finale PSD sunt, desigur, pe ThemeForest de vânzare, și voi adăuga pagina de pornire PSD la sistemul Plus.
Așa că îmi iau un aspect de textură pe hârtie. Există o mulțime de designeri care fac acest aspect mult mai bine decât mine, în special, verificați activitatea lui Liam McKay la WeFunction și, de asemenea, aruncați o privire prin galeriile de design precum WebCreme și veți găsi o mulțime de designuri minunate,.
Această postare este Ziua 4 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii 3-a sesiune"
Accentsconagua