Designing
Tumblr themes is no different from building any other web layout. A PSD
is created, and then turned into HTML and CSS once completed. At that
point, Tumblr functionality is added using a special set of Tumblr
variables. If you are familiar with creating WordPress themes, these
variables are similar to template tags.
With that said, a good Tumblr design focuses on features that are
specific to Tumblr. In this tutorial, you will learn to use layer
effects and other basic Photoshop techniques to create a clean and
elegant layout that is easily recreated in CSS to minimize dependency
on images or other remotely-hosted elements. The layout will focus on
the following Tumblr features:
Twitter feed integration
Post Type icons
Notes counter
Page links
Post type layouts: Text, Image, Link, Video, Quote and Audio
Step 1
Open the 16 Col Tumblr PSD in Photoshop. Ensure the following are visible:
Your right-hand Layers panel (click the tab or click Window > Layers)
Smart Guides (View > Show > Smart Guides)
Guides - Hide and show using Cmd+; (MAC) or Ctrl+; (PC)
Rulers (View > Rulers)
In the layers panel, click the Background layer. Set your foreground
to #e8e8e8 and choose the Bucket Tool from your left-hand toolbar. Click
the background once to fill it.
Click on "Filter > Noise > Add Noise" from your main Photoshop menu. Set the Amount to 2% and select Uniform and Monochromatic.
Step 2
Expand the "Header" layer group in your Layer panel and select the Glow layer. Right-click the Bucket Tool and choose the Gradient Tool. Set your gradient to Radial and "Foreground to Transparent" in the Gradient Options Toolbar.
With your guides turned on, place your crosshair at the 720-pixel
guideline, using the top ruler. Left-click and drag downwards about 300
pixels, then release to create a light source.
Set the layer to "Soft Light" in the layer panel.
Step 3
Expand the "Ribbon" group, select the "Lines" layer and set the foreground to #dfdfdf. Right-click the Rectangle Tool in your left-hand toolbar to choose the Line Tool.
Draw a line 250px from the top, starting at the inside of your 2nd
column(320px mark) to the far side of your 15th(1060px mark).
Repeat to draw a second line 50px lower.
Double-click the Lines layer and select "Drop Shadow." Click the
color swatch to set the color to #e1e1e1 and reduce the Opacity to 40%.
Right-click the Glow layer and choose "Duplicate Layer." Using the Move Tool, click the glow and drag it down to align it just below your top line:
Choose the Rectangular Marquee Tool and drag a
selection along the bottom line and around the rest of the glow. Hit
Cmd+X (MAC) or Ctrl+X(PC) to remove the selection contents.
You are left with an elegant ribbon, which will serve as your micro-post background.
Step 4
Click on the Header layer group and add some header text using the Text Tool. Choose a stylish and modern font that has a somewhat thick weight. I used a font called Alako, which you can download here.
To get the letterpress effect, double-click the text layer and select
"Inner Gradient." Choose the Normal blend mode and set the color to #
cacaca. The distance and size will vary depending on your font choice
and text size. I set mine to 2px.
Add a white drop shadow using the Normal blend mode at 100% Opacity and set the Distance to 1px and the Size to 3px.
Add some personal touches to your logo or header using your own
drawing techniques, adding shapes, or an abstract background such as in
my example. To achieve a similar effect, create a new layer below your
text layer and use the Pen Tool or a decorative font to create some
black scribbles. Set the layer to Screen.
Step 5
Set the foreground to #eeeeee and choose the Rounded Rectangle Tool, which is found under the Rectangle Tool in your left-hand toolbar. Set the Radius to 10px in the Options Toolbar.
Draw a rectangle representing your Text Post, beginning 50px below
your ribbon, from your second column to the 11th. You should see smart
guides appear displaying two equal halves once you have reached the
right point.
Double-click the layer and select "Drop Shadow." It is tempting to
leave the defaults and simply turn down the Opacity until the shadow
looks right to you, but it will be much easier to replicate with CSS if
you set the Opacity to 100% and choose the right shadow color that give
the same effect.
Set the Blend Mode to "Normal," leave the Opacity at 100%, and click
the color swatch. Experiment with shades of grey until the shadow
reaches and appropriate level of contrast.
Set the Distance and Size to achieve your desired effect. I ended up going with a Distance of 3px and a Size of 7px.
Select "Stroke" and set it to 1px. Set the color to #ffffff to give your shape the appearance of light hitting the edges.
Step 6
Select the "Post Type" layer and choose the Rectangle Tool.
Place your cursor 40px to the left of your post rectangle and draw a
background for your Post type icon that is about 80px tall. The Smart
Guides should appear to let you know you have things lined up properly.
Right-click your Post layer and choose "Copy Layer Style."
Right-click the Post Type layer and choose "Paste Layer Style."
Double-click the layer to reduce the Drop Shadow distance to 0 and
select "Gradient Overlay." Leave the Opacity at 100% and click the
Gradient bar to open the Gradient Editor.
Choose the Foreground to Transparent Preset, then click the
lower-left stop. Click the Color swatch and set it to #dfdfdf. Again,
this is to make duplicating the effect with CSS much easier later.
Step 7
Set the foreground to # e2e2e2 and choose the Rounded Rectangle Tool.
Select the Sidebar layer and draw a new rectangle starting 40px, or one
column, to the right of your Text Post rectangle. Use the smart guides
to align the top and stop at the outer edge of the margin column.
Copy the layer style from the Post layer to the Sidebar layer.
Double-click the Sidebar layer to change the stroke color to #d6d4d4.
Step 8
Select the Line Tool and set the foreground to
white. Select the Line layer and draw a line about 40px below the top of
the Sidebar rectangle, using the smart guide to determine when you've
reached an even length.
Double-click the layer and add a 1px drop shadow set to Normal Blend Mode, # cccccc.
Choose the Eraser Tool and set it to 70px size and 10% Opacity. Use it to gently fade the ends of the line into the background.
Choose the Gradient Tool and set the foreground to
#dad9d9. Ensure Radial is still selected in the Gradient Options Toolbar
and your guides are visible. Create a new layer and draw a small
gradient along the center guideline from the horizontal line downward:
Use the Rectangular Marquee Tool to remove the top half of the gradient along the horizontal line.
Choose the Move Tool and stretch the gradient to
align with the left and right ends of the horizontal line. You should
now have a subtle contour below your line like this one:
Step 9
Hold Shift and select your gradient, line and
Sidebar layers. Click "Layer > New > Group from Layers" and name
the new group "Sidebar."
Repeat to select the Post Type and Post layers, and create a group called "Text Post."
Right-click the Text Post group and choose "Duplicate Group." Name
the new group "Image Post." Repeat to create new groups for the
following post type groups:
Quote
Link
Video
Audio
Select each layer group and use the Move Tool to
position the contents in the layout, one below the other. Since each
post type has varying content, select the Post layer of each group and
use the Move Tool to adjust the height of the box as needed.
Step 10
Choose the Rectangle Tool and set the foreground to
white. Click your Image Post layer and add a new layer above the Post
layer. Draw a rectangle within the post area, 20px from the left and
right sides and 30px from the top. My Image is about 300px tall, but you
may choose to make yours any size your wish.
Double-click the layer and add 1px drop shadow in a light grey, and a 1px inner shadow in the same color.
Create a new layer and set the foreground to a light blue. Use the Rectangle Tool to draw your image placeholder in the center of the white box, leaving about 10px on each side.
Step 11
Add content to each post type by selecting the layer group and adding
new layers for elements such as text and placeholder images. Use the
techniques you have learned so far to create backgrounds for your
element, and the smart guides to keep them aligned with one another.
I used Aller for my body text in #727171, but you can use any sans-serif such as Helvetica, Arial or Trebuchet to achieve the same effect.
For my Video Post mockup, I simply placed a cropped screenshot of
YouTube in a new layer over the white background layer, and drew the
placeholder over the content area.
Shortcut: Right-click the white background layer
from the Image Post group and choose "Copy Layer Style." Right-click on
your other element background layers and choose "Paste Layer Style."
Step 12
Click on "File > Place" to place icons from the Glyphish set into your Post Type layers for each group and use the Move Tool
to get them into position using the Smart Guides. Add some text to
represent the number of Likes or Notes and add a 1px, white drop shadow.
You may also choose to place the date here.
When setting text, make sure you create enough contrast. A lighter
grey may seem more understated, but it could be hard to read for some
viewers. Test out your finished design in a variety of lighting
conditions to help fine-tune it.
Shortcut: Duplicate the text layer and drag it into the other groups, using the Move Tool to reposition it over each Post Type box.
Step 13
Flesh out your sidebar using what you have learned so far. The
sidebar is a good place for your profile avatar and description, page
links, social network icons, or gallery thumbnails - whatever special
functionality you want to add to your theme. Experiment with text colors
to get the right level of contrast, and use the shortcuts I've pointed
out to avoid repeating steps unnecessarily.
Elements such as social network icons or share buttons can easily be
screen-captured and then placed into your layout to mockup their
position and style.
Here is an example of how I added the Facebook and Tumblr widgets to
the Image Post, along with the Glyphish tag icon to represent tag links:
Conclusion
You should now have an elegant and stylish layout primed and ready
for conversion into a simple HTML and CSS3 Tumblr theme. By using layer
effects, you have minimized the need for splicing, and will be able to
re-create your theme almost entirely in CSS. The only images you should
need to extract, other than the icons, are the Glow as your header
background, and the Ribbon as your Twitter background.
You can enhance this layout even further by adding a top navigation bar, additional sidebar widgets or a full footer area.
