Share
În acest tutorial veți învăța cât de simple, simple tehnici de design direct pot crea o temă blog comună curată în Adobe Photoshop. Câteva tehnici discutate în acest tutorial includ folosirea distanței adecvate, tipografia, culorile și ierarhia vizuală - câteva instrumente esențiale într-un set de instrumente de designer de succes. Să începem!
Astăzi vom examina designul temei "Revolution Magazine" al lui Alex Pascal pentru WordPress. Versiunea complet codată este disponibilă pe ThemeForest ca temă blog WordPress.
Revolution Magazine este o revistă curată, modernă, premium WordPress, care se dublează și ca blog comunitar, blog personal sau orice altceva îl veți folosi. Dacă ați căutat scânteia să vă aprindă vechea publicație într-o revistă populară, ați găsit-o.
Totul începe cu designul, dar Alex ne va ajuta să ne apropie de faza de proiectare a acestui proiect. Deoarece acesta este doar un tutorial de design, el nu va intra în codarea temelor, dar amintiți-vă că puteți verifica tema revoluției la ThemeForest pentru a vedea un exemplu live. Există, de asemenea, o grămadă de temă WordPress mare care codifică tuts peste la Nettuts (ca aceasta). Sperăm că vă place - să săpăm!
Mergeți la File> New>, apoi setați înălțimea la aproximativ 2000px, lățimea la 1400px și rezoluția la 72dpi.
De asemenea, trebuie să ne asigurăm că conducătorii și ghidurile noastre sunt vizualizate. Deci, vom merge la Vizualizare> Extra / Rulers / Snap (astfel încât obiectele noastre să se alinieze la Ghidurile noastre).
Acum trebuie să stabilim câteva linii de ghidare rapide pentru a putea fi utilizate mai târziu în proiectare. Accesați Vizualizare> Ghid nou ...> Verificați "Vertical" și introduceți următoarele valori, apăsând "OK" după fiecare pentru al introduce. Vrem linii de ghidare la 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px și 1180px.
Acum, să umplem fundalul cu o culoare solidă. Selectați stratul "Background", faceți clic dreapta pe el și alegeți "Layer from background" și dați-i un nume. Acum, folosind Instrumentul de marcaj dreptunghiular (M), creați o selecție pe întreaga pânză și completați selecția cu # d0d0d0.
Vom crea acum un fundal antet. Creați un strat nou și denumiți-l "antet", apoi apucați-vă Instrumentul de margine rectangulară (M) și faceți o selecție în partea superioară a pânzei dvs. cu o înălțime de 175px și pe întreaga pânză și umpleți-o cu orice culoare. Faceți dublu clic pe stratul pe care tocmai l-ați creat și faceți clic pe "Gradient Overlay"> gradient existing image> apoi setați culoarea cea mai potrivită la # 383838. Poziționați culoarea stângă la aproximativ 60% și schimbați culoarea la # 2D2D2D.
Acum mergeți mai departe și duplicați stratul "antet" și mutați-l direct sub primul antet. Faceți dublu clic pe stratul din nou și treceți la "Gradient Overlay"> imaginea gradient existentă> apoi setați cea mai potrivită culoare la # e0e0e0. Poziționați culoarea stângă la aproximativ 50% și schimbați culoarea în # d0d0d0.
Acum faceți clic pe "Inner Shadow" și schimbați culoarea în #EEEEEE, opacitatea la 100%, distanța până la 1px, suflarea la 100% și dimensiunea la 0px. Schimbați unghiul la 90 de grade și debifați "Global Lighting" deoarece vom folosi diferite unghiuri de lumină pe întreaga temă.
Acum că avem fundalul pregătit să mergem, să facem un logo pentru site-ul nostru! Creați un nou strat, de aproximativ 40 de pixeli din partea de sus și lignat cu prima linie de ghidare, utilizând Instrumentul de tip orizontal (T), tastați numele site-ului în fontul preferat (imaginile demo afișează Helvetica Neue LT Std, dar Helvetica sau Arial funcționează foarte bine). Continuați să schimbați stilurile stratului așa cum este afișat în exemplul de mai jos.
Acesta ar trebui să arate ca antetul dvs. până acum.
Un site web nu este nimic fără navigare, și unul bun la asta! Să creați acum o bară de navigare care se potrivește cu fundalul antetului existent.
Creați un strat nou și numiți-l "Gradient vertical" și apucați-l pe Rectangular Marquee Tool (M) și faceți o selecție de 960x105px de 115px din partea de sus a pânzei, lăsând aproximativ 20px sub selecția pentru fundal și umplând-o cu orice culoare . Apoi, puteți adăuga stilurile de straturi afișate în imaginea de mai jos la stratul pe care tocmai l-ați creat.
Acum duplicați stratul pe care tocmai l-ați creat și redenumi-l la "Gradient orizontal". Schimbați stilurile stratului în funcție de imaginea de mai jos.
În cele din urmă, creați o linie de 960px pe 1px într-un nou strat numit "darklight" chiar deasupra celor două straturi anterioare și completați-o cu # 1d1d1d. Acum, navigarea ar trebui să arate cumva în imaginea de mai jos.
Acum, să încercăm să facem un buton personalizat pentru link-ul "acasă" care se va deosebi de celelalte linkuri din navigație. Creați un nou strat și faceți o selecție cu instrumentul Rounded Rectangle (U) de aproximativ 50px și 60px vertical, umplut cu # 444444 și completați marginile rotunjite inferioare, astfel că selecția este doar rotunjită în partea de sus.
Descărcați această pictogramă acasă, deschideți-o în Photoshop și importați-o în panza dvs. existentă. Redimensionați-l la aproximativ 18px și 17px și completați-l cu # 999999. Centrați-o în stratul anterior pe care l-ați făcut și acum aveți un link elegant la domiciliu!
Apoi vom adăuga elemente de navigare în navigația noastră! Prindeți instrumentul de tip orizontal (T), setați următoarele stiluri și introduceți un element de meniu. În exemplul nostru, primul element este "Documentație", cu o descriere a "temei suport & ghid". Adăugați cât mai multe elemente pe care le doriți, lăsând o umbră de 20 de pixeli între fiecare element de meniu.
Pentru următorul pas, vom avea nevoie de icoane sociale. Vom începe prin descărcarea acestui set de pictograme de social media, de către KomodoMedia și apoi plasând patru pictograme și desaturând-le (Shift + Ctrl + U) ca în imaginea de mai jos.
Felicitări! Antetul site-ului nostru este acum complet! Să continuăm pe corpul site-ului.
Acum, când antetul este complet, vom continua să mergem la corpul site-ului nostru.
Pentru început, vom diviza corpul în două jumătăți - unul pentru conținutul corpului principal și celălalt pentru bara laterală. Creați un strat nou, numiți "corpul principal" și faceți o selecție cu instrumentul Rectangular Marquee (M) 640px lățime și la înălțimea dorită (cel puțin 1000 pixeli), pornind direct sub fondul antetului. Completați această selecție cu #ffffff. Acum creați un strat nou, numiți-l "sidebar" și faceți o selecție de 320px lățime pe partea dreaptă a stratului "corp principal" și îl faceți la fel de înalt ca și corpul principal. Completați-l cu # e6e6e6.
Apoi, vom da bara laterală o umbra interioară ușoară pe partea stângă pentru a crea o iluzie "indreptată". Adăugați stilurile de strat de mai jos în stratul "lateral".
Creați un nou strat și utilizați instrumentul Rectangle Marquee (M), faceți o selecție de 960px la 360px chiar în partea de sus a corpului nostru, direct sub navigare și completați-l cu # e6e6e6. Creați un alt strat și lăsând o marjă de 25px pe toate laturile, în interiorul selecției anterioare, faceți o selecție de 910x312px și completați-o cu #ffffff. În stilurile stratului, adăugați un curs 1px #dddddd interior pe acest strat.
Pentru următorul pas, vom avea nevoie de o imagine de probă pentru a fi folosită ca substituent. Orice imagine a oricărui lucru va funcționa astfel încât să găsești ceva care este de 580 de pixeli până la 300 de pixeli și să îl plasezi într-un strat nou, potrivind-o cu 5 pixeli distanță de fiecare parte a containerului pe care tocmai l-am făcut.
Creați un nou strat și numiți-l "tab_hover". Prindeți instrumentul Rectangle Marquee (M) și faceți o selecție de 320 x 41 pixeli direct din dreapta imaginii, în colțul din dreapta sus al containerului glisant alb. Umpleți-l cu orice culoare. Folosind Tool Polygonal Lasso, faceți clic pe 20px la stânga a dreptunghiului, exact la jumătatea drumului în poziție verticală și țineți apăsat Ctrl în timp ce trageți în diagonală în sus și până când ajungeți la colțul din stânga sus al dreptunghiului. Țineți încă apăsat Ctrl, trageți în jos până ajungeți la colțul din stânga jos și, în cele din urmă, reveniți la poziția de plecare. Completați această selecție cu orice culoare.
Continuați să adăugați stilurile afișate în imaginea de mai jos la stratul "tab_hover".
Faceți acum o selecție de 320 x 92 pixeli cu instrumentul Rectangle Marquee (M) direct sub filă, plasați-o într-un nou strat numit "tab_space" și aplicați stilurile de straturi descrise în imagine.
Acum, să repetăm pașii pentru a crea restul filelor, urmând stiluri ușor diferite, pentru a diferenția starea "activă" de restul filelor.
În cele din urmă, ar trebui să vină cu ceva care arată similar cu acest lucru și toți gata să meargă!
Uau! Suntem aproape acolo! Cu cea mai grea parte din drum, să continuăm pe corpul site-ului nostru. În acest pas, vom discuta tehnici cheie, cum ar fi spațierea.
Să începem secțiunea "Ultimul post" cu o postare. Să facem o graniță făcând o selecție de 615px la 210px cu Rectangle Marquee Tool (M), umplând-o cu orice culoare într-un nou strat numit "frontieră" și apoi adăugând un gradient descris în imaginea de mai jos. De îndată ce terminăm cu asta, introduceți o imagine de 610 x 200 pixeli, lăsând 5 pixeli în cadru. Imaginea nu este importantă, deci din nou, puteți folosi orice doriți ca un substituent!
Spațierea corectă este esențială într-un design de succes. Tema blogului nostru comunitar demonstrează puterea sa în consistența generală și spațierea, având margini congruente în jurul elementelor post, pentru a ajuta cititorul să curgă cu ușurință pe pagină. Să aruncăm o privire asupra modului în care vom arăta postul nostru, cu ajutorul unor linii directoare!
Următoarea parte este relativ explicativă. Folosind instrumentul de tip orizontal (T), tastați o rubrică, meta informație și un extras pentru substituenți (puteți utiliza textul utilizat în imaginea demo pentru a economisi timp) referindu-se la imaginea anterioară de ajutor pentru spațiu și aliniere. Consultați imaginea de mai jos pentru stilurile de text necesare. După adăugarea întregului text, apucați Instrumentul rotunjit dreptunghiular (U) și faceți câteva butoane rapide (aproximativ 120px-32px), aliniați-le cu partea stângă a postului și adăugați stilurile prezentate în imaginea de mai jos. Ar trebui să aveți acum un post atractiv pe care să îl puteți duplica mereu până când sunteți mulțumit!
Aproape la fel de vital ca orice parte dintr-o temă a blogului comunității, bara laterală! În scopuri demonstrative, vom proiecta doar câteva widget-uri generice - în mod evident ar fi imposibil să acoperiți un design personalizat pentru fiecare widget acolo, dar majoritatea vor permite sucurilor creative să curgă pentru a crea mai multe!
Pentru această parte, va trebui să descărcați gratuit pachetul Icon din Graphic River și să importați icoanele RSS 48x48px și Twitter 48x48px în proiectul nostru. Poziționați aceste icoane la 20px distanță de partea stângă a barei laterale și asigurați-vă că acestea sunt aliniate vertical cu primul post din stânga.
Prindeți instrumentul Tip orizontal (T) și tastați un număr aleatoriu pentru abonații și urmașii folosind fontul Georgia și cuvintele "abonați" și "urmați" în Arial așa cum este descris în imaginea de mai jos.
Ce zici de un widget publicitar simplu? Sigur! Prindeți instrumentul de marcaj dreptunghiular (M) și faceți o selecție de 280 x 410 pixeli, umpleți-o cu alb simplu și dați-i o lovitură interioară de 1px #dddddd. Prindeți câteva exemple de anunțuri din Theme Forest și plasați-le în noul container, lăsând o umbră de 9-10 pixeli între ele (în funcție de situația în care se află între graniță sau între fiecare anunț).
În cele din urmă, introduceți un Widget Text rapid cu Instrumentul de tip orizontal (T) utilizând stilurile furnizate în imaginea de mai jos.
Prindeți instrumentul Marcaj dreptunghiular (M) și faceți un container de 280 x 225 pixeli. Umpleți-l cu #eeeeee și dați-i o lovitură interioară de 1px #dbdbdb. Un nou strat, faceți o filă de aproximativ 84px-37px în colțul din stânga sus al containerului, lăsându-l pe fiecare parte în stratul de 4px, apoi creând în același strat o altă selecție de 270 x 180 pixeli și umplându-l cu alb, creând un dreptunghi cu un mic dreptunghi lipind în partea stângă sus. Dați-i o lovitură interioară de 1px # e0e0e0. Finalizați celelalte două file, lăsând în permanență 4 pixeli pe fiecare parte. Completați textul cu Arial 12px Bold. Faceți un glonț de 3x3px completat cu #bbbbbb și creați cât mai multe elemente pe care le doriți.
Asta e pentru bara laterală, hai să ne mutăm pe restul site-ului!
Acum, înfășurăm încet acest site cu ... ați ghicit-o, subsolul! Să pregătim subsolul nostru creând un fundal rapid pentru el. Prindeți instrumentul Rectangle Marquee (M) și creați o selecție de 960px cu 510px într-un nou strat, direct sub fundalul corpului principal. Completați această selecție cu # 2d2d2d. Acest lucru va servi ca subsolul nostru cu 4 coloane în el. Imediat sub acest bloc de culoare, faceți o selecție de 960px la 60px și umpleți-o cu # 1d1d1d și puneți-o într-un nou strat. Aceasta va servi drept porțiunea de "drepturi de autor" a subsolului și o modalitate simplă, dar eficientă de a semnifica sfârșitul paginii.
În site-ul nostru, vom avea 4 coloane chiar în subsol, fiecare lățime 200px, cu o margine de 25px între fiecare. Pentru a păstra lucrurile uniforme, vom lăsa și 25px în partea de sus a subsolului nostru, după care vom avea rubricile din fiecare coloană. Mergeți și luați instrumentul de tip orizontal (T) și începeți să tastați titlurile pentru fiecare coloană, utilizând stilurile descrise în imaginea de mai jos. Părăsind 20 de pixeli sub rubrici, tastați un scurt paragraf sau o listă de elemente separate printr-un separator punctat cu un singur pixel pe un pixel oprit.
Felicitări, tocmai ați creat o temă clară, blog comunitar în Adobe Photoshop. Sperăm că ați învățat câteva sfaturi și trucuri despre cum să proiectați anumite aspecte ale site-urilor organizate în mod clar și că puteți folosi aceste abilități în proiecte proprii în viitor!
Deoarece acesta este doar un tutorial de design, nu am intrat în codarea temelor, dar puteți verifica tema Revoluției la ThemeForest pentru a vedea un exemplu live.
Mult noroc și mulțumiri pentru lectură! :)
Accentsconagua