How to Make Tumblr Themes With a PSD Design

Tumblr combines an emphasis on visual creativity with a post length that falls between Twitter's brevity and the open-ended length of a traditional blog entry. When you use a custom Tumblr theme that extends the look of your on- and offline identity, a tumblelog fits into a strategy that includes other online and social media. Web designers often start developing custom themes in Adobe Photoshop, using the program's layered PSD file format as their visual work space.

Establishing Dimensions

Adobe Photoshop's ruler guides and layering capabilities simplify the task of creating the basis of a Tumblr theme, complete with a layout grid that defines the dimensions of content areas. If you set up layer groups for each aspect of your design, including its main content area and sidebar, you can place all the guides for each element on a single layer within each group. This arrangement enables you to make your guides visible selectively, rather than simply showing and hiding all of them with a Photoshop keyboard shortcut or menu item, and keeps related guide elements together. Name your groups and layers to identify the function of each part of your design. The moments you invest in incremental naming tasks pay off in the time you don't need to spend turning layers on and off to determine what they contain. To find the dimensions of any layout element quickly, press "F8" to open the Info panel and then "Ctrl-click" on its Layers panel thumbnail to load a selection based on the pixels on that layer.

Selecting Colors

Whether you use the time-tested Color Picker to select hues for your theme, load options from a color library to match a printed piece or logo, or rely on the Eyedropper tool to sample shades from another file or graphic, Adobe Photoshop offers a wide range of ways to select theme colors. When you fill a layer with a solid color to simulate the background color of a Tumblr theme or other elements of your design, you can copy the color formula as text from the Color Picker's hex readout and paste the color identification into the name of the layer for quick reference. The six alphanumeric characters in a hex color show up in Tumblr code as well as in Web designs for blogs and other online formats.

Creating Graphics

The header that identifies a tumblelog can use a bitmapped graphic as a thematic graphic. You can create this critical element using a combination of text and pixel- or vector-based elements inside your PSD file. If the graphic includes customizable elements you typeset in Photoshop, leave them as live type within your PSD-based theme file and rasterize them only in copies of the file that you provide to other people who don't have a license for the font files required in your theme. When you use vector tools to draw in Photoshop, including the Pen and shape tools, draw using guide rules that align with the underlying resolution of your template file. This technique helps keep your artwork as sharp as possible when you save or export rasterized versions of it.

Next Steps

If you know how to code HTML and CSS, and understand the specialized variables Tumblr uses in its code structure, you can translate the dimensions, color specifications and graphics you build in a PSD into a working custom Tumblr theme. If Web coding falls outside your skillset, you can provide your PSD to a programmer to produce the theme for you. Along with a visual treatment, a Tumblr theme must include variables and blocks. Variables accept dynamic values to create standard Tumblr visual elements. Blocks form chunks of code that combine variables with HTML. Blocks set up posts and the permalinks that reach them, links that move among chunks of chronologically organized material and elements that accommodate the people who like or follow an individual tumblelog.

Version Information

Information in this article applies to Adobe Photoshop CC and Adobe Photoshop CS6. It may differ slightly or significantly with other versions or products.