Share
Proiectele bune nu ar trebui să se dărâme niciodată. Acest proiect a fost inițial făcut pentru un client care nu a plătit niciodată, și din moment ce a existat un feedback pozitiv atât de copleșitor, am decis să creez un tutorial pentru el. Textele bogate și cremoase conferă acestui design o temă unică. Sper că vă place cafeaua!
Nu numai că dezvăluim fișierele Photoshop pentru acest design, dar vom dezvălui și fișierele HTML, astfel încât să puteți vedea cum a fost codificat după faza de proiectare! Ar trebui să lucrați prin acest tutorial de la bun început, dar nu ezitați să luați și fișierele sursă.
Ca orice proiect, vom avea nevoie de o rețea bună pentru a începe. Întotdeauna încep cu un document de 960px (care va fi lățimea paginii noastre). Asigurați-vă că ați dat documentului suficientă înălțime pentru a permite toate elementele pe care le vom crea - am ales 1100 de pixeli.
Trageți linii directoare către părțile laterale ale documentului. Acestea vor acționa ca jgheaburi pentru zona noastră de design, care va avea o lățime de 960 pixeli. De asemenea, trageți linii directoare la 10px și 960px pe orizontală. Acestea vor acționa ca un ident pentru a păstra totul în față, pe măsură ce ne mișcăm în jos.
Odată ce ați stabilit instrucțiunile, accesați Image -> Canvas Size și modificați valoarea lățimii canapei la 1000px. Acest lucru ne va oferi un pic mai mult spațiu pentru a lucra cu privire la exterior, și arată modul în care site-ul se va extinde în browser.
Colțul din stânga sus al documentului dvs. ar trebui să arate astfel:
Trebuie să creați câteva linii directoare, deoarece avem câteva coloane care rulează vertical pe pagină. Creați alte 6 linii directoare verticale la 330px, 350px, 650px, 670px, 730px și 750px. Acestea ar trebui să ne ajute să mergem și să ținem totul aliniat.
Apoi vom completa fundalul. În mod evident, suntem maronii datorită bogăției (și este culoarea cafelei). Începeți prin a crea un nou strat și completați întregul document cu orice culoare solidă (o vom modifica cu stiluri de strat). Puteți face acest lucru rapid apăsând Shift + F5 pe "Fill".
Redenumiți acest strat la "bg" și faceți clic dreapta pe el în paleta Straturi și selectați "Opțiuni de amestecare". Selectați "Overlay Overlay" și creați un gradient de la # 67331c la # 2e1308; vom dori ca maro închis în partea de sus a paginii, iar bricheta să fie maro în partea de jos.
Acum trebuie să adăugăm o mică textură, astfel încât gradientul să nu arate atât de plat. Creați un strat nou, deasupra stratului dvs. "bg", și denumiți acest strat "Pattern".
Rezultatul ar trebui să fie așa:
Acum, când ne-am creat fundalul, vom merge mai departe și vom începe să creăm unele dintre elementele de pe pagină - începând cu bara de navigare galbenă.
Creați un nou grup de straturi și redenumiți acest grup "Navigare". În interiorul grupului "Navigare", creați o selecție care are o înălțime de 100 de pixeli și întreaga lățime a documentului. Creați un nou strat și apăsați pe Shift + F5 pentru a umple stratul. Ca culoare de umplere, utilizați # edd38d (galben). Redenumiți acest strat "bg" în cadrul grupului "Navigare".
Acum aveți bara de navigare. Este un pic cam plat, așa că vom merge mai departe și vom adăuga câteva stiluri de straturi pentru ao face să iasă mai mult. Faceți clic dreapta pe layerul "bg" și selectați Opțiuni de amestecare.
Bara de navigare ar trebui să arate astfel:
Încă o dată, avem nevoie de o anumită textură - în caz contrar, se va termina la suprafață. Am folosit textura de nisip ca mine. Partea importantă aici este culoarea. Puteți utiliza orice textură dorită, dar culoarea ar trebui să fie similară culorii de umplere pe care am folosit-o mai devreme. Adăugați această textură într-un strat nou deasupra stratului "bg" pe care l-am creat anterior și setați opacitatea la 30%. Redenumiți această textură a stratului și asigurați-vă că este exact aceleași dimensiuni ca stratul "bg".
Vrem să dăm o mică adâncime barei galbene, așa că vom crea manual o umbră mai închisă pe marginea de jos. Pentru a face acest lucru, faceți o selecție în partea inferioară a barei galbene și creați un nou strat.
Umpleți acest nou strat cu un gradient (Shift + F5) de la Transparent la # 2f1408 (la 30% opacitate)
Ar trebui să o facă pentru bara galbenă. Ar trebui să arate ceva de genul:
Creați un nou grup numit "Nav" și creați toate textele și straturile care urmează.
Navigare destul de simplă aici, mare și ușor de citit. Fontul este Georgia, 30px. Asigurați-vă că textul are distanțe bune între fiecare cuvânt (pentru a permite posibilele stări active). Efectuați culoarea textului # 92583f, cu elementul activ (Acasă în acest caz), # 64311b.
Pentru a crea sublinierea "activă" pentru navigare, am folosit instrumentul perie pentru a vedea o subliniată oarecum intitulată. Acest lucru leagă logo-ul împreună cu restul site-ului. Nu vă faceți griji dacă nu reușiți la prima încercare - probabil că am atras-o de 50 de ori înainte să găsesc linia pe care mi-am plăcut.
Acum avem nevoie de butonul "Înscrieți-vă". Duplicați textul de navigare (selectați stratul de text și Command + J) și schimbați cuvintele pentru a citi "Înscrieți-vă".
Apoi, selectați Instrumentul rotunjit dreptunghi și trageți un dreptunghi cu Radius 20px; Acest lucru ne va da forma în jurul textului înscrierii.
Setați Umplerea acestui strat la 0% și aplicați următoarele stiluri de straturi:
Pentru a crea logo-ul, am găsit un șervețel gratuit și mi-am tăiat marginile puțin. Puteți găsi propriul dvs. la: iStockPhoto sau alte site-uri gratuite.
Am adăugat o umbră pentru a face să pară că șervețelul stătea deasupra tuturor celorlalte:
Am folosit o textură de stoc dintr-o pată de cafea (pentru a da puțin mai multă autenticitate site-ului nostru de cafea și șervețelului). S-ar putea să trebuiască să dăruiți cu opacitatea până când pare corect. De asemenea, puteți încerca să setați Modul de amestecare a pensulei la Multiplicare pentru a face să se remarce un pic mai mult.
În ceea ce privește restul siglei, am ales un font de mână și am tras rapid o ceașcă de cafea. Nimic prea dificil aici.
Acum vom crea caseta de căutare translucidă. Creați un nou grup de straturi, sub straturile "Bară galbenă" (deoarece dorim ca bara de căutare să apară ca o filă care se află sub antetul). Stack-ul dvs. de strat trebuie să fie ceva de-a lungul acestor linii:
Vom începe prin crearea dreptunghiului rotunjit care are bara de căutare în el. Prindeți instrumentul Rounded Rectangle și creați un dreptunghi care are o lățime de 300px și o înălțime de aproximativ 70px. Asigurați-vă că dreptunghiul se potrivește în "jgheabul din coloana din dreapta" cu ghidurile pe care le-am creat în primul pas al acestui tutorial.
Rezultatul ar trebui să arate astfel:
Apoi vom crea caseta de intrare cu instrumentul Rounded Rectangle. Creați un dreptunghi, cu Radius 5px, Lățime: 280px, Înălțime: 30px. Centurați acest nou dreptunghi în interiorul dreptunghiului "container" pe care l-ați creat anterior. Redenumiți acest strat "de intrare"
Prindeți instrumentul de text și adăugați un text cu culoarea # af8753. Alegeți pictograma stoc preferat (Vă recomandăm să utilizați IconFinder pentru pictograme).
Acum, când am creat întregul antet, putem ajunge acum la conținutul real. Vom crea mai întâi cele trei găleți principale de conținut. Încă o dată, apucați instrumentul dreptunghi rotunjit cu o rază de 20px și creați 3 dreptunghiuri rotunjite în cele 3 coloane pe care le-am creat mai devreme.
Pentru a face ca aceste cutii să arate cum am arătat în captura de ecran, aplicați următoarele stiluri de straturi:
Am găsit niște icoane de cafea minunate pe web care se potrivesc perfect designului, pe care l-am folosit pe aceste 3 secțiuni. Încă o dată, folosim doar resursele noastre - și nici un sens în recrearea roții de aici.
Apoi am adăugat o rubrică, folosind același font Georgia, și un text marcat, iar această secțiune este terminată.
Deoarece designul folosește transparența pe tot parcursul designului, am simțit că stilurile de masă nu ar trebui să fie diferite. Masa este curată și simplă, ceea ce îi ajută să se amestece perfect în design.
Prindeți instrumentul de marcaj și creați o selecție pătrată unde doriți să fie masa dvs. Tabelul meu are o lățime de 700 de pixeli (respectând regulile pe care le-am stabilit mai devreme) și o înălțime de 220 de pixeli.
Creați un strat nou și completați acest strat (Shift + F5) cu un brun mai închis (am ales # 3c2014). Redenumiți acest strat la "table bg" și setați opacitatea la 70%. Acum, utilizând instrumentul de selectare a unei singure linii, vom crea separarea între coloane și rânduri. După ce ați selectat unde doriți diviziile dvs., apăsați Ștergeți și eliminați pixelii încărcați din stratul "table bg".
Ar trebui să aveți acum o grilă de masă cum ar fi:
Eu folosesc Georgia pentru a umple celulele cu text, și voi lăsa asta până la tine pentru a alege culori / dimensiuni. Asigurați-vă că ați adăugat titlul principal și titlurile tabelului.
Acum vom crea pictogramele de rating. Pentru evaluările de "preț", am ales un font cu un semn gros de dolari și am aplicat anumite stiluri de straturi. Când găsiți fontul, introduceți semnele de 4 dolari. Duplicați acest strat, apoi mutați-l drept și tastați semnul de 1 dolar (acestea vor avea stiluri de strat separate aplicate acestora). Pentru semnele "active" de galben, vom aplica următoarele stiluri de straturi:
Și pentru semnele inactive de dolari, le dorim ca acestea să arate inset (ca în cazul în care acestea nu sunt umplut). Vom aplica diferite stiluri de strat aici:
Pentru ratingul de stele, am folosit instrumentul Photoshop Custom Shape și am ales steaua. Aceeași tehnică pe care am folosit-o pentru semnele dolarului (pur și simplu copiați / lipiți stilurile stratului de mai sus) acestor stele.
Rezultatul dvs. ar trebui să fie în acest sens:
Grupați acest singur rând pe care l-ați creat și dublați grupul de două ori, schimbând rândul în jos pentru a se încadra în grila pe care ați creat-o mai devreme. Rezultatul final ar trebui să arate astfel:
Ultima noastră secțiune principală este cea mai activă listă de utilizatori. Ne continuăm folosirea Georgiei, dar adăugăm o notă plăcută acelor utilizatori care nu au avatare. Veți vedea că modelul este de fapt de la pictograma din caseta "Răsfoiți" în partea de sus - aburul care vine din cană. Un alt detaliu minunat care leagă designerul împreună. Iată cum îl creați.
În jgheabul din coloana din dreapta, adăugați titlul (reutilizați ceea ce ați creat pentru "Recenzii recente") și umpleți o zonă dreptunghiulară cu opacitate de 40% (culoarea nu contează aici). Denumiți acest strat "container" și apoi vom adăuga câteva stiluri de strat (Color Overlay & Stroke) la acesta:
Rezultatul ar trebui să fie o cutie opacă cu o margine exterioară frumoasă, care este mai întunecată decât fundalul interior:
Pentru avatar, utilizați instrumentul de marcă pentru a crea o selecție de 50 x 50 pixeli. Creați un nou strat și completați selecția cu orice culoare (Shift + F5).
Acum vom adăuga câteva stiluri Layer pentru a face acest avatar să arate puțin mai bine pentru utilizatorii care nu au un set de avataruri.
Adăugați un text pentru numele și țara utilizatorului, iar aburul se învârte din ceașcă de cafea și duplicați rândul de câteva ori pentru a umple spațiul.
În cele din urmă, subsolul. Pentru a da o mică separare, există un gradient maro închis până la transparent, de sus în jos pentru a furniza o linie vizuală pentru a rupe cele două secțiuni. Pentru a crea această separare, utilizați instrumentul de marcare pentru a face o selecție și completați selecția cu un gradient (maro până la transparent). Reglați opacitatea gradientului până când puteți vedea modelele din fundal strălucind.
Încă o dată, vom folosi Georgia aici pentru a crea câteva linkuri suplimentare despre site. Am folosit 18px pentru link-uri și 14px pentru notificarea privind drepturile de autor de mai jos. Asigurați-vă că partea stângă este aliniată la liniile directoare pe care le-am creat mai devreme.
Atingerea finală este refolosirea pictogramei cupei de cafea din caseta "Răsfoiți" de mai sus, în colțul din dreapta jos; din nou aliniind partea dreaptă cu liniile directoare.
Nu așa de greu? Este destul de simplu atunci când o puteți descompune, reutilizând unele dintre aceleași stiluri și tehnici pe care le-ați făcut de peste și peste din nou. Fișierele în formă de felii sunt, de asemenea, incluse, pentru a vedea cum a fost codificat. Multe lucruri s-au schimbat de când am proiectat și codat acest lucru, iar multe dintre imagini ar putea fi recreate cu CSS3 și gradiente, dar acum aproape trei ani, așa am făcut-o. Este posibil să fi văzut acest design la www.coffeenatic.com; acum că site-ul a dispărut, am crezut că ar fi o idee bună să o împărtășesc cu toată lumea, deoarece am primit un feedback pozitiv despre asta. Sper ca ti-a placut!
Accentsconagua