Graphic blog, Webdesigns tip&tricks, Photoshop tutorials

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

Resources:

16column_Tumblr_Practice PSD

This is a starter PSD that includes a 16 column grid overlay and preset guidelines to help you place your layout elements. Most of the time you will probably have the grid overlay turned off, but turn it on now and then to check your progress.

Glyphish Free Icon Set

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.

Here is a look at my finished layout:

Download the PSD

Related posts:

1. How to create a clean and design portfolio layout using Photoshop
2. How to do a glossy and animated jQuery button 1/2 Photoshop part
3. How to create an icon shield using Photoshop
4. How to do a fancy layout for a graphic design blog using Photoshop
5. Create a Vintage Movie Intro Wallpaper in Photoshop