Tumblr kombinerar en betoning på visuell kreativitet med en inläggslängd som faller mellan Twitters korthet och den öppna längden på ett traditionellt blogginlägg. När du använder ett anpassat Tumblr-tema som utvidgar utseendet på din on- och offline-identitet, passar en tumblog in i en strategi som inkluderar andra online- och sociala medier. Webbdesigners börjar ofta utveckla anpassade teman i Adobe Photoshop, med programmets skiktade PSD-filformat som sitt visuella arbetsutrymme.
Fastställande av mått
Adobe Photoshops linjalguider och lagerfunktioner förenklar uppgiften att skapa grunden för ett Tumblr-tema, komplett med ett layoutgaller som definierar dimensionerna för innehållsområden. Om du ställer in lagergrupper för varje aspekt av din design, inklusive dess huvudsakliga innehållsområde och sidofält, kan du placera alla guider för varje element i ett enda lager i varje grupp. Detta arrangemang gör det möjligt för dig att göra dina guider synliga selektivt, snarare än att bara visa och dölja dem alla med en Photoshop-tangentbordsgenväg eller menyalternativ och håller relaterade guideelement samman. Namnge dina grupper och lager för att identifiera funktionen för varje del av din design. De ögonblick du investerar i stegvisa namnuppgifter lönar sig under den tid du inte behöver spendera på att slå på och av lager för att avgöra vad de innehåller. För att snabbt hitta dimensionerna för något layoutelement trycker du på "F8" för att öppna Info-panelen och sedan "Ctrl-klickar" på dess Lagerpanel-miniatyrbild för att ladda ett urval baserat på pixlarna i det lagret.
Välja färger
Oavsett om du använder den testade färgväljaren för att välja nyanser för ditt tema, ladda alternativ från ett färgbibliotek för att matcha ett tryckt stycke eller logotyp, eller lita på pipetten för att prova nyanser från en annan fil eller grafik, erbjuder Adobe Photoshop ett brett olika sätt att välja temafärger. När du fyller ett lager med en heltäckande färg för att simulera bakgrundsfärgen för ett Tumblr-tema eller andra element i din design kan du kopiera färgformeln som text från Color Pickers hexavläsning och klistra in färgidentifieringen i lagrets namn för snabb referens. De sex alfanumeriska tecknen i hexfärg dyker upp i Tumblr-kod liksom i webbdesign för bloggar och andra onlineformat.
Skapa grafik
Rubriken som identifierar en tumblog kan använda en bitmappad grafik som en tematisk grafik. Du kan skapa detta kritiska element med en kombination av text och pixel- eller vektorbaserade element i din PSD-fil. Om bilden innehåller anpassningsbara element som du har satt i Photoshop, lämna dem som live-typ i din PSD-baserade temafil och rastrera dem bara i kopior av filen som du tillhandahåller till andra personer som inte har licens för de teckensnittsfiler som krävs i ditt tema. När du använder vektorverktyg för att rita i Photoshop, inklusive penna- och formverktyg, ritar du med hjälp av riktlinjer som stämmer överens med den underliggande upplösningen i din mallfil. Denna teknik hjälper dig att hålla ditt konstverk så skarpt som möjligt när du sparar eller exporterar rasteriserade versioner av det.
Nästa steg
Om du vet hur du kodar HTML och CSS och förstår de specialvariabler som Tumblr använder i sin kodstruktur kan du översätta dimensioner, färgspecifikationer och grafik som du bygger i en PSD till ett fungerande Tumblr-tema. Om webbkodning faller utanför din kompetens kan du ge din PSD till en programmerare för att producera temat åt dig. Tillsammans med en visuell behandling måste ett Tumblr-tema innehålla variabler och block. Variabler accepterar dynamiska värden för att skapa standardvisuella Tumblr-visuella element. Block bildar bitar av kod som kombinerar variabler med HTML. Block skapar inlägg och permalänkar som når dem, länkar som rör sig mellan bitar av kronologiskt organiserat material och element som rymmer de människor som gillar eller följer en enskild tumblogg.
Versioninformation
Informationen i den här artikeln gäller Adobe Photoshop CC och Adobe Photoshop CS6. Det kan skilja sig något eller markant från andra versioner eller produkter.
