Sådan laver du Tumblr-temaer med et PSD-design

Tumblr kombinerer vægt på visuel kreativitet med en postlængde, der falder mellem Twitters kortfattethed og den åbne længde af en traditionel blogindgang. Når du bruger et brugerdefineret Tumblr-tema, der udvider udseendet på din on- og offline-identitet, passer en tumblelog ind i en strategi, der inkluderer andre online og sociale medier. Webdesignere begynder ofte at udvikle brugerdefinerede temaer i Adobe Photoshop ved hjælp af programmets lagdelte PSD-filformat som deres visuelle arbejdsområde.

Etablering af dimensioner

Adobe Photoshops linealguider og lagfunktioner forenkler opgaven med at skabe grundlaget for et Tumblr-tema komplet med et layoutgitter, der definerer dimensionerne af indholdsområder. Hvis du opretter laggrupper til hvert aspekt af dit design, inklusive dets hovedindholdsområde og sidebjælke, kan du placere alle hjælpelinjerne for hvert element på et enkelt lag inden for hver gruppe. Dette arrangement giver dig mulighed for at gøre dine guider synlige selektivt i stedet for blot at vise og skjule dem alle med en Photoshop-tastaturgenvej eller et menupunkt og holder relaterede guideelementer sammen. Navngiv dine grupper og lag for at identificere funktionen af ​​hver del af dit design. De øjeblikke, du investerer i inkrementelle navngivningsopgaver, betaler sig i den tid, du ikke har brug for at tænde og slukke for lag for at bestemme, hvad de indeholder. For hurtigt at finde dimensionerne på ethvert layoutelement skal du trykke på "F8" for at åbne infopanelet og derefter "Ctrl-klikke" på dets lagpanel-miniaturebillede for at indlæse et valg baseret på pixels på det lag.

Valg af farver

Uanset om du bruger den testede farvevælger til at vælge nuancer til dit tema, indlæse indstillinger fra et farvebibliotek for at matche et trykt stykke eller logo eller stole på pipetteværktøjet til at prøve nuancer fra en anden fil eller grafik, tilbyder Adobe Photoshop et bredt række måder at vælge temafarver på. Når du udfylder et lag med en solid farve for at simulere baggrundsfarven på et Tumblr-tema eller andre elementer i dit design, kan du kopiere farveformlen som tekst fra farvevælgerens hex-udlæsning og indsætte farveidentifikationen i navnet på laget til hurtig reference. De seks alfanumeriske tegn i en hex-farve vises i Tumblr-kode samt i webdesign til blogs og andre onlineformater.

Oprettelse af grafik

Overskriften, der identificerer en tumblelog, kan bruge en bitmappet grafik som en temagrafik. Du kan oprette dette kritiske element ved hjælp af en kombination af tekst og pixel- eller vektorbaserede elementer inde i din PSD-fil. Hvis grafikken indeholder de elementer, du kan tilpasse, du kan sætte i Photoshop, skal du lade dem være live-type i din PSD-baserede temafil og kun rasterisere dem i kopier af den fil, du giver til andre mennesker, der ikke har en licens til de krævede skrifttypefiler. i dit tema. Når du bruger vektorværktøjer til at tegne i Photoshop, inklusive pen- og formværktøjerne, skal du tegne ved hjælp af vejledningsregler, der stemmer overens med den underliggende opløsning af din skabelonfil. Denne teknik hjælper med at holde dit kunstværk så skarpt som muligt, når du gemmer eller eksporterer rasteriserede versioner af det.

Næste skridt

Hvis du ved, hvordan du koder HTML og CSS og forstår de specialvariabler, som Tumblr bruger i sin kodestruktur, kan du oversætte de dimensioner, farvespecifikationer og grafik, du bygger i en PSD, til et fungerende brugerdefineret Tumblr-tema. Hvis webkodning falder uden for dit skillset, kan du give din PSD til en programmør for at producere temaet til dig. Sammen med en visuel behandling skal et Tumblr-tema omfatte variabler og blokke. Variabler accepterer dynamiske værdier for at oprette standardvisuelle Tumblr-elementer. Blokke danner klumper af kode, der kombinerer variabler med HTML. Blokke opretter stillinger og permalinks, der når dem, links, der bevæger sig mellem klumper af kronologisk organiseret materiale og elementer, der passer til de mennesker, der kan lide eller følger en individuel tumblelog.

Versionoplysninger

Oplysningerne i denne artikel gælder for Adobe Photoshop CC og Adobe Photoshop CS6. Det kan variere lidt eller markant med andre versioner eller produkter.