Kako napraviti Tumblr teme s PSD dizajnom

Tumblr kombinira naglasak na vizualnoj kreativnosti s duljinom posta koja pada između kratkoće Twittera i otvorene duljine tradicionalnog unosa na blogu. Kada upotrebljavate prilagođenu Tumblr temu koja proširuje izgled vašeg identiteta na mreži i izvan nje, tumblelog se uklapa u strategiju koja uključuje ostale mrežne i društvene medije. Web dizajneri često počinju razvijati prilagođene teme u Adobe Photoshopu, koristeći slojeviti format PSD datoteke programa kao svoj vizualni radni prostor.

Utvrđivanje dimenzija

Vodiči za ravnala u Adobe Photoshopu i mogućnosti slojeva pojednostavljuju zadatak stvaranja osnove teme Tumblr, zajedno s rešetkom rasporeda koja definira dimenzije područja sadržaja. Ako postavite grupe slojeva za svaki aspekt vašeg dizajna, uključujući njegovo glavno područje sadržaja i bočnu traku, možete sve vodilice za svaki element smjestiti na jedan sloj unutar svake grupe. Ovaj vam raspored omogućuje da svoje vodiče učinite selektivno vidljivima, umjesto da ih jednostavno prikažete i sakrijete pomoću Photoshop tipkovničke prečice ili stavke izbornika, a povezane elemente vodiča drži zajedno. Imenujte svoje grupe i slojeve kako biste prepoznali funkciju svakog dijela vašeg dizajna. Trenuci koje ulažete u postupne zadatke imenovanja isplaćuju se u vremenu koje ne trebate trošiti na uključivanje i isključivanje slojeva kako biste utvrdili što oni sadrže. Da biste brzo pronašli dimenzije bilo kojeg elementa izgleda, pritisnite "F8" da biste otvorili ploču s informacijama, a zatim "Ctrl-klik" na minijaturi njegove ploče Slojevi kako biste učitali odabir na temelju piksela na tom sloju.

Odabir boja

Bez obzira koristite li vremenski testirani alat za odabir boja za odabir nijansi teme, učitavanje opcija iz biblioteke boja koje odgovaraju ispisanom komadu ili logotipu ili se oslanjate na alat Eyedropper za uzorkovanje nijansi iz druge datoteke ili grafike, Adobe Photoshop nudi široku paletu boja raspon načina odabira boja teme. Kada sloj popunite punom bojom kako biste simulirali boju pozadine teme Tumblr ili drugih elemenata vašeg dizajna, možete kopirati formulu boje kao tekst iz hex čitanja Color Picker-a i zalijepiti identifikaciju boje u naziv sloja za brzu referencu. Šest alfanumeričkih znakova u šesterostranoj boji prikazuje se u Tumblr kodu, kao i u web dizajnu za blogove i druge mrežne formate.

Izrada grafike

Zaglavlje koje identificira tumblelog može koristiti bitmapiranu grafiku kao tematsku grafiku. Ovaj kritični element možete stvoriti kombinacijom teksta i elemenata temeljenih na pikselima ili vektorima unutar vaše PSD datoteke. Ako grafika sadrži prilagodljive elemente koje ste kucali u Photoshopu, ostavite ih kao aktivni tip u datoteci teme temeljenoj na PSD-u i rasterizirajte ih samo u kopijama datoteke koju dajete drugim ljudima koji nemaju licencu za potrebne datoteke fontova u svojoj temi. Kada za crtanje u Photoshopu koristite vektorske alate, uključujući alate Olovka i oblik, crtajte pomoću pravila vodiča koja se poravnavaju s osnovnom razlučivošću datoteke predloška. Ova tehnika pomaže da vaše umjetničko djelo bude što oštrije kada ga spremate ili izvozite rasterizirane verzije.

Sljedeći koraci

Ako znate kodirati HTML i CSS i razumijete specijalizirane varijable koje Tumblr koristi u svojoj strukturi koda, možete prevesti dimenzije, specifikacije boja i grafiku koju gradite u PSD-u u prilagođenu Tumblr temu. Ako kodiranje na mreži ne spada u vaš skup vještina, svoj PSD možete predati programeru da vam napravi temu. Zajedno s vizualnim tretmanom, Tumblr tema mora sadržavati varijable i blokove. Varijable prihvaćaju dinamičke vrijednosti za stvaranje standardnih Tumblr vizualnih elemenata. Blokovi tvore dijelove koda koji kombiniraju varijable s HTML-om. Blokovi postavljaju postove i stalne veze koje do njih dolaze, poveznice koje se kreću među dijelovima kronološki organiziranog materijala i elementi koji mogu prilagoditi ljude koji vole ili slijede pojedinačni dnevnik.

Informacije o verziji

Informacije u ovom članku odnose se na Adobe Photoshop CC i Adobe Photoshop CS6. Može se malo ili značajno razlikovati od ostalih verzija ili proizvoda.