Kaip sukurti „Tumblr“ temą naudojant PSD dizainą

Tumblr sujungia vizualinę kūrybiškumą su įrašo ilgiu, kuris yra tarp Twitter trumpumo ir tradicinio tinklaraščio ilgio. Naudodami individualią Tumblr temą, kuri atspindi jūsų asmeninį ar įmonės įvaizdį, galite įtraukti šią platformą į platesnę skaitmeninę strategiją. Dauguma dizainerių pradeda kurti temas Adobe Photoshop programoje, naudodami daugiapakopį PSD failą kaip darbo aplinką.

Matmenų nustatymas

Photoshop liniuotės ir sluoksnių grupavimo įrankiai palengvina bazinės Tumblr temos sukūrimą. Sukurkite tinklelio sistemą, kuri apibrėžia turinio srities matmenis. Kiekvienam dizaino elementui (pagrindinė turinio sritis, šoninė juosta ir kt.) sukurkite atskirą sluoksnių grupę, kurioje patalpinsite atitinkamus gaires. Tai leidžia rodyti tik tam tikras gaires, nesukeliant „šviesų“ visų sluoksnių. Pavadinkite grupes ir sluoksnius pagal jų funkciją – tai sutaupys laiką, kai reikės greitai rasti konkrečius elementus. Norėdami greitai sužinoti bet kurio elemento matmenis, paspauskite F8 atidaryti Info skydelį ir Ctrl‑click ant sluoksnio miniatiūros.

Spalvų parinkimas

Spalvas temai galite pasirinkti keliais būdais: tradiciniu Color Picker, spalvų bibliotekos ištraukimu, atitinkančiu logotipą ar spausdintą medžiagą, arba Eyedropper įrankiu, kuris paima atspalvį iš kito failo. Kai užpildote sluoksnį vienos spalvos fone, kopijuokite hex kodą iš Color Picker ir įrašykite jį į sluoksnio pavadinimą – tai patogus greitasis atskaitos šaltinis. Šie šešių simbolių hex kodai naudojami tiek Tumblr temų kode, tiek bendram web dizainui.

Grafikos kūrimas

Headeris, kuris identifikuoja jūsų tumblelog, gali būti bitų grafika arba vektorinis elementas. Jį kuriant naudokite tekstą ir pikselinius arba vektorinius elementus PSD faile. Jei grafiko dalis yra teksto, kurį norite leisti vartotojams redaguoti, palikite jį kaip „live type“ ir rasterizuokite tik tuomet, kai perduodate failą žmonėms, neturintiems jūsų šriftų licencijų. Vektorinius įrankius (Pen, Shape) naudokite pagal gairių linijas, kad elementai išliktų aštrūs net ir eksportuojant rastruotas versijas.

Tolimesni žingsniai

Jei išmanote HTML ir CSS bei žinote, kaip veikia Tumblr specifiniai kintamieji, galite perkelti PSD matmenis, spalvas ir grafiką į veikiantį temų kodą. Jei programavimas nėra jūsų stiprioji pusė, PSD galite perduoti programuotojui, kuris sukurs temą. Be grafinės dalies, Tumblr tema turi turėti kintamuosius (variables) ir blokus (blocks). Kintamieji priima dinamiškas reikšmes, o blokai – HTML fragmentus, kurie kartu sukuria įrašų struktūrą, nuorodas, chronologiją ir sąveikos elementus (pvz., sekimo mygtukus).

Versijos informacija

Šiame straipsnyje pateikta informacija taikoma Adobe Photoshop CC ir Adobe Photoshop CS6 versijoms. Kitoms Photoshop versijoms kai kurie veiksmai gali šiek tiek skirtis.