Share
Ce veți creaÎn acest tutorial vă voi arăta cum să creați un aspect simplu și elegant de blog în Photoshop. Vom folosi o imagine puternică deasupra ori (oriunde s-ar putea) cu niște mesaje simple, urmate de o tipografie foarte curată și elegantă.
Pentru a vă urma, veți avea nevoie de următoarele active (disponibile în mod gratuit):
Începeți prin crearea unui nou document (Fișier> Nou ... ) folosind setările de mai jos. Aveți libertatea de a utiliza o pânză de dimensiuni pe care o preferați - web-ul nu are lățime fixă, la urma urmei.
Asigurați-vă că rezoluția este setată la 72 pixeli / inchSă stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Nu folosesc întotdeauna o grilă, dar stabilirea unor linii directoare va asigura unitate și va contribui la definirea lățimii site-ului nostru. Mergi la Vizualizare> Ghid nou ... și stabiliți câteva linii directoare. De obicei, aleg 1000px ca lățime de site și adaugă niște linii directoare din colțuri, așa că are spațiu pentru a respira.
Notă: Linii directoare utilizate pentru acest tutorial: verticală la 100px, 285px, 445px, 600px, 605px, 765px, 925px și 1100px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Lipirea acestei etichete Photoshop va păstra lucrurile organizate și va fi ușor de navigat sau editat. Să creați trei grupuri de straturi numite Header, Content, Sharing și Footer. Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictogramă.
Zona headerului joacă un rol foarte important în a-și implica utilizatorii și a se asigura că vizitatorul rămâne pe site. Pentru acest blog voi folosi o fotografie de primăvară a unei cafenele din Londra. Atunci când alegeți o imagine pentru proiectul dvs., asigurați-vă că trimite mesajul potrivit vizitatorilor și îndeplinește nevoile clientului.
Să creați mai întâi fundalul blogului. În interiorul Antet grupul trage orice formă de dreptunghi de culoare folosind Instrumentul dreptunghiular (U). În cazul meu, am desenat un dreptunghi de dimensiune de 1200x600px și l-am așezat în partea de sus a documentului.
Acum descarcati fotografia Cafe, trageti-o in documentul Photoshop si plasati-o deasupra stratului dreptunghiular. Redenumiți stratul imaginii la ceva ce puteți recunoaște mai târziu, în cazul meu am folosit IMG. După aceea, țineți apăsată tasta Alt cheia și mouse-ul peste stratul de fotografie până când vedeți o mică săgeată îndreptată în jos, apoi eliberați-o. Tocmai ați creat o Mască de tăiere.
Acum lovit T Cmd + și redimensionați fotografia pentru a se potrivi nevoilor dvs..
Bacsis: țineți-vă jos Schimb cheie pentru a transforma proporțional.
Acum trebuie să facem fundalul blogului mai întunecat și mai neutru, astfel încât atunci când punem copia pe partea de sus este ușor de citit. Să ne estompeze ușor imaginea Filtru> Blur> Gaussian Blur ... și setarea Rază la 3 pixeli. Folosind un efect de estompare ușoară ajută la eliminarea detaliilor clare ale imaginii și permite ochilor vizitatorilor să se concentreze pe elemente mai proeminente, în cazul nostru mesajul de blog.
Să creați un strat nou deasupra imaginii plasate și să o faceți Mască de tăiere așa cum se arată în pasul anterior. Apoi umpleți-o cu o nuanță neagră și reduceți opacitatea la 50%, astfel încât imaginea noastră devine mai întunecată, dar este totuși destul de vizibilă.
Este timpul să adăugați un logo pentru blogul nostru. Creați un grup nou în interiorul Antet grupați-l și denumiți-l Siglă. Pentru acest tutorial voi folosi un logo simplu, bazat pe tipografie. Alegeți Instrument tip orizontal (T), Bentham 30px dimensiunea fontului și scrieți titlul blogului dvs. Observați că spațiul dintre litere este mai mare decât de obicei, creând un aspect mai elegant și făcând caracterele majuscule mai ușor de citit.
Pentru a adăuga accentul să facem o graniță în jurul ei. Alegeți a Instrumentul dreptunghiular (U) și trageți un dreptunghi ușor mai mare decât textul.
Acum faceți clic pe butonul din dreapta al mouse-ului și selectați Opțiuni amestecate… aplicați următoarele opțiuni pentru curse.
În cele din urmă, setați stratul dreptunghiului Completati la 0% și aveți un accident frumos de 1px în jurul logo-ului tău fictiv.
Acesta este momentul în care adăugăm un mesaj blog care rezumă tot ce înseamnă acest blog. Alegeți Tip orizontal (T), 60px mărimea Bentham font și scrieți un mesaj scurt pentru cititorii dvs. Asigurați-vă că înălțimea liniei este destul de spațioasă, astfel încât textul să aibă spațiu pentru a respira și arata echilibrat.
Pentru ampersandul pe care l-am folosit Baskerville (italiană) deoarece este mai ornamentată. Pentru mesajul secundar pe care l-am folosit PT Serif (italic) font setat la 20px in marime. Asigurați-vă că ați pus mesajul vertical în mijlocul imaginii antetului, astfel încât să pară echilibrat și lustruit.
Minimizați Antet grupând clic pe săgeata mică de lângă titlul grupului și deschizând grupul Conținut astfel încât toate straturile să fie organizate și ușor de navigat prin.
Să începem să realizăm postarea pe blog. Alegeți Instrument tip orizontal (T) și, folosind o culoare închisă și un font destul de mare, scrieți titlul postului. Încercați să evitați utilizarea negru absolut și alegeți o culoare mai subtilă, ca de exemplu gri închis, astfel încât să nu pară prea aspru. Pentru acest tutorial folosesc gri închis # 444444 42px mărimea Bentham font în majusculă. Plasați titlul în mijlocul documentului și dați destul spațiu în partea superioară, astfel atenția cititorilor este atrasă de titlul.
Reduceți mărimea fontului în jur 14px și introduceți data postării blogului, autorului, categoriei, etichetelor, locației sau a ceea ce doriți, astfel încât să ofere cititorilor dvs. o imagine de ansamblu a publicației. În cazul meu, am introdus data și locația intrării în majuscule, pentru a rămâne valabilă titlului.
Un blog fără conținut real nu merită nimic, indiferent cât de bun este designul. Utilizarea Instrument tip orizontal (T) țineți apăsat butonul mouse-ului și faceți un container între cele două linii directoare penultimate. Lățimea containerului între aceste linii directoare ar trebui să fie 640 x și înălțimea va depinde de lungimea postului.
Setați culoarea de fundal la ceva mai ușor și ușor la ochi. În cazul meu folosesc gri mai deschis # 6f6f6f 18px PT Serif cu o înălțime a liniei setată la 34 de pixeli. Înălțimea liniei ar trebui să fie în jur 1,5 - 1,9 în funcție de stilul fontului. Puteți calcula cu ușurință înălțimea liniei prin înmulțirea dimensiunii fontului pe care îl utilizați cu 1.9, de exemplu în cazul meu pe care îl folosesc 18px dimensiunea fontului, astfel: * 1.8 = 18 34,2.
În calitate de designer trebuie întotdeauna să vă gândiți la proiectarea unui mediu dinamic, astfel încât să includeți stiluri pentru hyperlink-uri sau stări de hover pentru butoane. Crede-mă, dezvoltatorii vă vor mulțumi pentru asta. Alegeți o culoare subtilă care să se evidențieze în copia principală, evidențiați una dintre frazele care se vor lega în altă parte și schimba culoarea. În cazul meu folosesc roșu palid # e3514e.
Am terminat cu copia principală pentru postarea pe blog și acum vom crea niște butoane de partajare, astfel încât cititorii să poată partaja conținutul cu rețeaua lor de alegere.
Minimizați Conţinut grup și deschide Partajarea grup unde vom plasa butoanele noastre. Alegeți a Instrumentul dreptunghiular (U) și trageți un rectangular care să fie între cele două linii directoare penultimate ca și poștă principală. În cazul meu e 640x54px. Apoi faceți clic dreapta, selectați Opțiuni amestecate… și aplicați următoarele opțiuni.
folosit culoarea # 838383În cele din urmă, reduceți stratul Completati opțiunea pentru 0% și veți avea un contur contur pentru rețelele media sociale.
Alegeți Instrumentul de linie (U) și setați lățimea la 1px, după care trageți trei linii verticale care ne împart containerul în patru bucăți egale. Orientările vor ajuta la poziționarea acestora. Asigurați-vă că liniile au aceeași culoare ca conturul containerului.
Bacsis: țineți-vă jos Schimb cheie pentru a vă asigura că liniile funcționează perfect drepte.
Bacsis: clic Cmd +; pentru a ascunde / afișa linii directoare.
În cele din urmă alegeți Instrument tip orizontal (T) și scrie o copie, lăsând oamenii să știe că este pentru partajare. În cazul meu folosesc simplu ACȚIUNE:, după care am scris numele rețelelor sociale disponibile pentru partajare.
Plasați numele în interiorul containerului și centrați-le pentru a fi în mijlocul blocurilor separate.
Grozav! Partajarea socială este făcută, tot ce trebuie să terminăm este să creați un mouse peste stat pentru buton. Pur și simplu alegeți Instrumentul dreptunghiular (U) și, folosind aceeași culoare ca și link-ul, trageți un dreptunghi sub unul din numele rețelei sociale acoperind spațiul divizat.
În cele din urmă este timpul să îmbrăcăm designul blogului, punând un subsol simplu, cu informații despre drepturile de autor.
Minimizați Partajarea grup și deschideți Subsol grup. După aceea, trageți un dreptunghi simplu în partea de jos care trece peste orizontală a documentului și lăsați suficient spațiu în partea de sus. Am folosit gri # 555555 și în jur 110px spațiu alb deasupra formei.
În cele din urmă alegeți Instrument tip orizontal (T) și scrieți o copie simplă a drepturilor de autor. În cazul meu am folosit-o PT Serif 14px alb #FFFFFF. Plasați copia în mijlocul dreptunghiului și aliniați-l vertical.
Și am terminat cu aspectul. Felicitări!În acest tutorial am parcurs procesul de creare a unui aspect foarte simplu și elegant de blog. Are un antet puternic bazat pe imagine de deasupra ori și folosește o abordare tipografică-prima pentru conținutul blogului.
Check out Creează și Temă un blog Evernote Powered cu Postach.io unde ne vom uita la construirea acestui aspect blog pentru browser, integrând cu o platformă de blogging pentru o măsură bună!
Dacă aveți întrebări sau gânduri, vă rugăm să ne anunțați în zona de comentarii!
Accentsconagua