Hur man gör Tumblr -teman med en PSD -design

Tumblr kombinerar betoning på visuell kreativitet med en inläggslängd som ligger mellan Twitters korthet och den öppna längden på ett traditionellt blogginlägg. När du använder ett anpassat Tumblr-tema som förlänger utseendet på din on- och offline-identitet, en tumblog passar in i en strategi som inkluderar andra online- och sociala medier. Webbdesigners börjar ofta utveckla anpassade teman i Adobe Photoshop, använder programmets lagrade PSD -filformat som sitt visuella arbetsutrymme.

Upprätta mått

Adobe Photoshop linjalguider och lagerfunktioner förenklar uppgiften att skapa grunden för ett Tumblr -tema, komplett med ett layoutnät som definierar måtten på 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, du kan placera alla guider för varje element på ett enda lager i varje grupp. Detta arrangemang gör att du kan göra dina guider selektiva synliga, snarare än att bara visa och gömma dem alla med en Photoshop -tangentbordsgenväg eller menyalternativ, och håller ihop relaterade guideelement. Namnge dina grupper och lager för att identifiera funktionen för varje del av din design. De ögonblick du investerar i inkrementella namngivningsuppgifter lönar sig under den tid du inte behöver lägga på och stänga av lager för att avgöra vad de innehåller. För att snabbt hitta måtten på ett layoutelement, tryck på "F8" för att öppna infopanelen och sedan "Ctrl-klicka" på miniatyrpanelens lager för att ladda ett urval baserat på pixlarna på det lagret.

Välja färger

Oavsett om du använder den beprövade 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, Adobe Photoshop erbjuder en mängd olika sätt att välja temafärger. När du fyller ett lager med en fast färg för att simulera bakgrundsfärgen på ett Tumblr -tema eller andra element i din design, du kan kopiera färgformeln som text från färgväljarens hexavläsning och klistra in färgidentifieringen i lagrets namn för snabb referens. De sex alfanumeriska tecknen i en hexfärg visas i Tumblr -kod samt 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 grafiken innehåller anpassningsbara element som du skriver i Photoshop, lämna dem som live-typ i din PSD-baserade temafil och rasterisera dem endast i kopior av filen som du tillhandahåller till andra personer som inte har en licens för de teckensnittsfiler som krävs i ditt tema. När du använder vektorverktyg för att rita i Photoshop, inklusive pennan och formverktygen, rita med hjälp av riktlinjer som överensstämmer med den underliggande upplösningen för din mallfil. Denna teknik hjälper till 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å de specialiserade variablerna Tumblr använder i sin kodstruktur, du kan översätta måtten, färgspecifikationer och grafik som du bygger i en PSD till ett fungerande anpassat Tumblr -tema. Om webbkodning faller utanför din kompetens, du kan ge din PSD till en programmerare för att ta fram temat åt dig. Tillsammans med en visuell behandling, ett Tumblr -tema måste innehålla variabler och block. Variabler accepterar dynamiska värden för att skapa vanliga Tumblr -visuella element. Block bildar bitar av kod som kombinerar variabler med HTML. Block blockerar inlägg och de 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 tumblog.

Version Information

Informationen i denna artikel gäller Adobe Photoshop CC och Adobe Photoshop CS6. Det kan skilja sig något eller avsevärt med andra versioner eller produkter.