Share
Ce veți creaÎn acest tutorial vom parcurge procesul pas cu pas de creare a unei tematici simple, bazate pe tematica Tumblr din Photoshop. Voi începe în întregime de la zero și vă va ghida în întregul proces de înființare a documentului, folosind câteva instrumente de bază și finalizând design-ul în cel mai scurt timp. Scopul acestui tutorial este de a arăta cum se fac unele dintre deciziile de proiectare și modul în care designul final vine la viață.
Pentru a urmări de-a lungul timpului, veți avea nevoie de anumite active (disponibile în mod liber)
Începeți prin crearea unui nou document Photoshop (Fișier> Nou ... ) folosind setările de mai jos. Aveți libertatea de a utiliza o pânză de orice dimensiune preferați - web-ul nu are o lățime fixă, la urma urmei.
Să stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Nu folosesc întotdeauna o rețea predefinită, 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, 600px, 720px și 1100px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Antetul sau zona "deasupra ori" (oriunde este în zilele noastre) joacă un rol foarte important în ceea ce privește implicarea cu utilizatorii și asigurarea că vizitatorii rămân pe site. Pentru acest jurnal foto al călătorului voi folosi o frumoasă fotografie pe plajă pentru a stabili starea de spirit aventuroasă și pentru a trimite subconștient un mesaj pentru vizitatori spunând că acesta este site-ul este despre călătorie.
Să creați mai întâi un grup denumit "Antet" pentru antet făcând clic pe Layer> Nou> Grup ... sau lovind pictograma mică din partea de jos a panoului straturilor.
Pentru a începe, hai să navigăm în partea de sus a jurnalului nostru, astfel încât oamenii să poată naviga cu ușurință. Selectează Instrument tip orizontal (T), alege PT Sans font 13px dimensiune, setați culoarea la gri închis # 323232 și introduceți numele jurnalului dvs. foto. Acesta este un loc potrivit pentru logo-ul nostru, așa că aruncați unul dacă aveți unul. Folosesc un nume fictiv pentru acest jurnal foto "Boarding Gate". Pentru a face mai atractiv vizual extinde urmărire (spațiul dintre litere) la 200.
Asigurați-vă că permiteți un spațiu pentru titlul de mai sus, am mutat-o în jos 25px.
Accentsconagua
# 666666. Așezați-l în colțul din dreapta sus, înainte de ultima orientare verticală.
În interiorul grupului "Header" trageți o formă dreptunghiulară (utilizați orice altă culoare decât albul pentru ao face vizibilă) folosind Instrumentul dreptunghiular (U). În cazul meu, am desenat un dreptunghi de dimensiune de 1200x640px și l-am așezat în partea de sus a documentului, lăsând un decalaj de 25px sub navigația de sus.
Descărcați acum această fotografie pe plajă (sau orice altă placă), trageți-o în documentul Photoshop și plasați-o deasupra stratului dreptunghiular. Redenumiți stratul imaginii la ceva ce veț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. În final, reduceți stratul IMG Opacitate la 75% pentru a face textul pe care îl vom pune pe partea de sus va fi mai ușor de citit.
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.
Să facem un mesaj introductiv care să spună utilizatorilor despre ce este vorba. Asigurați-vă că utilizați text mare pentru a atrage atenția vizitatorilor. În cazul meu este același lucru PT Sans font, 52px mărimea. Pentru un mesaj secundar folosiți un font mai mic, pe care l-am folosit PT Serif 28px mărimea. Observați spațiul dintre linii, lăsând întotdeauna spațiu suficient pentru ca copia să poată fi citită.
În cele din urmă, avem nevoie de un buton de apel pentru acțiune (CTA) pentru a le spune oamenilor ce să facă. Alegeți Instrumentul dreptunghiular (U) și trageți un alb #FFFFFF formă de dreptunghi. După acest loc, textul din interiorul dreptunghiului alb spune ceva de genul "Răsfoiți fotografiile". Asigurați-vă că permiteți un spațiu de deasupra butonului, astfel încât acesta să pară puternic și independent.
După cum probabil știți, Tumblr are multe tipuri diferite de posturi disponibile. Mai jos este o captură de ecran a interfeței de bord Tumblr care prezintă posibilele tipuri de posturi pe care le puteți crea.
Pe parcursul următorilor pași vă voi trece prin procesul de creare a unor tipuri diferite de posturi, și anume:
Vă voi lăsa să finalizați restul ca o sarcină.
Să începem mai întâi cu introducerea textului. Vom crea o unitate, apoi o vom reproduce pentru celelalte tipuri de posturi. Toate postările se vor baza pe aceeași structură și vor împărtăși caracteristici similare (data postării, etichetele, opțiunile de partajare).
Creați un nou grup numit "unitate de text". După această modificare, culoarea de fundal este maro deschis # f8f7f6, alegeți Instrumentul dreptunghiular (U) și trageți o formă dreptunghiulară între prima și ultima orientare verticală. În exemplul meu, dreptunghiul este de 1000x284px.
Prindeți Instrument tip orizontal (T) și utilizarea PT Sans (Bold) 32 px introduceți un titlu. Asigurați-vă că pentru a vă oferi titlul ceva spațiu în jurul pentru a face să pară echilibrat și curat. În cazul meu, l-am împins cu 50 de pixeli din partea de sus și din stânga.
Folosind alegerea aceluiași instrument PT Serif font, reduceți dimensiunea fontului la 15px și schimbați culoarea la culoarea gri mai deschisă # 444444. După aceea, introduceți conținutul postării. Asigurați-vă că creșteți înălțimea liniei pentru ao face mai lizibilă și mai atrăgătoare. În acest caz, am setat înălțimea liniei la 26px.
În cele din urmă trebuie să afișăm data publicării alături, cu unele etichete și opțiuni de partajare. Utilizând același tip de instrument introduceți câteva etichete, fiecare prefixate cu o etichetă hash #, și plasați-l sub conținutul. După această modificare, culoarea va deveni mai gri # 666666 astfel încât este mai ușor vizual și oferă impresia că este mai puțin important, permițând o mai mare atenție pentru conținutul principal.
Acum îndreptați-vă spre Iconfinder și descărcați pictogramele de partajare, retweet și inimă.
În cele din urmă, creați un nou grup numit "Icoane" și plasați pictogramele din interiorul grupului. Aplicați un spațiu în lateral și reduceți grupul Opacitate la 30% astfel încât pictogramele să se potrivească cu data și culoarea etichetelor.
Cu acest lucru, duplicați grupul "Unitate de text" și redenumiți-l la "Unitate fotografie". Mutați-o cu 60 de pixeli sub primul bloc, eliminați stratul de conținut și mutați titlul postului în partea de jos pentru a fi în linie cu data și etichetele postării. Modificați titlul postului, data și etichetele. Selectați stratul de fundal al unității, apăsați T Cmd + și redimensionați-o pentru a avea un spațiu de 50px deasupra și dedesubt.
Duplicați stratul de fond al unității și redimensionați-l utilizând T Cmd +. În cazul meu, l-am redimensionat la 1000x510px.
Mutați-o deasupra titlului și treceți la Skitterphoto pentru a alege o fotografie pe care doriți să o utilizați pentru postul foto, plasându-l deasupra dreptunghiului. Ține-te jos Alt cheia și mouse-ul peste miniatură de strat până când vedeți o săgeată mică îndreptată în jos. Apoi eliberați mouse-ul pentru a crea un Mască de tăiere.
Acesta este ușor. Duplicat CMD + J grupul "Photo Unit" și redenumiți-l la "Video Unit". Deplasați-l cu 60 de pixeli sub postul de poze și schimbați imaginea, titlul, data și etichetele. După aceasta, trebuie să indicați că este vorba despre o postare video prin plasarea unei pictograme YouTube peste ea.
Descărcați pictograma YouTube de la Iconfinder și plasați-o în centrul imaginii postare video.
Încă o dată duplicat (CMD + J) grupul "Unitate de text" și mutați-l sub postul video. Eliminați titlurile și straturile de conținut care părăsesc data, etichetele și pictogramele de distribuire.
După aceea, ridicați Instrument tip orizontal (T), alege PT Serif (italic) font, setați dimensiunea la 35px și asigurați-vă că culoarea este gri închis # 323232.
În cele din urmă, lipiți cotația preferată și ajustați fundalul în jurul acesteia, amintindu-vă să lăsați săgețile de 50px consecvente pe laturi.
Acum duplicați grupul "Photo Unit" și plasați-l sub postul de cotație, astfel încât machetul nostru arată mai mult ca un blog Tumblr real.
Acolo ești. Te-am arătat cum să creezi tipuri de texte, poze, video și cotații și acum e timpul să creezi restul tipurilor de postări pentru link-uri, chat și audio. Consistența este cheia, încercați să refolosiți elementele pe care le-am creat deja și să utilizați aceleași fonturi, culori, spațiere, astfel încât designul dvs. să pară echilibrat și să fie perceput ca un întreg.
Suntem foarte aproape de a finaliza această temă simplă Tumblr. Să adăugăm acum un buton "încărcați mai mult" (ceva comun pentru temele Tumblr) și o declarație privind drepturile de autor.
Minimizați toate grupurile și creați unul nou numit "Footer". După ce deschideți grupul "Header" și găsiți straturile butoanelor "Răsfoiți fotografii", forma dreptunghiului și stratul de text. Țineți apăsată tasta CMD și selectați ambele straturi, apoi apăsați CMD + J să le duplicați și să le glisați în grupul "Footer".
După ce ați terminat, faceți dublu clic pe stratul de formă dreptunghiulară și schimbați culoarea cu cea folosită pentru fundalul "Foto" pentru a menține coerența.
În cele din urmă, introduceți informațiile privind drepturile de autor. Pentru consistență, utilizați același font ca cel utilizat pentru copia de intrare a fotografiilor. În acest caz este PT Serif 15px culoare gri # 444444. Observați distanța, în întreaga structură avem o mulțime de spațiu alb care dă acest sentiment de curățenie și organizare. Am folosit 60px pentru spații între intrările de fotografii, butonul "încărcați mai mult" și linia de drepturi de autor.
Alinierea este centrată pentru a menține lucrurile în concordanță cu butoanele de mesagerie și apel la acțiune (CTA).
Asta e! Am terminat cu designul temelor, examinați acum straturile de documente, ștergeți cele inutile și transmiteți-le dezvoltatorului dvs. sau chiar codificați-le chiar mai bine. Într-un tutorial care vine, vom codifica acest design într-o temă Tumblr pe deplin funcțională, așa că rămâneți tunat!
