In this tutorial we’ll walk through the step by step process of creating a simple, photo-based Tumblr diary theme in Photoshop. I will start totally from scratch and will guide you through the whole process of setting up the document, using some basic tools and completing the design in no time. The aim of this tutorial is to show how some of the design decisions are being made and how the final design comes to life.
Tutorial Assets
In order to follow along you will need some (freely available) assets:
Photos from Skitterphoto
PT Serif font from Font Squirrel
PT Sans font from Font Squirrel
Photos from Unsplash
Share icon from Iconfinder
Retweet icon from Iconfinder
Heart icon from Iconfinder
YouTube icon from Iconfinder
Get the Document Ready
Step 1
Begin by creating a new Photoshop document (File > New…) using the settings shown below. You’re free to use a canvas of whatever dimensions you prefer–the web is not fixed width, after all.
Step 2
Let’s set some guides so our layout has enough space and looks balanced. I don’t always use a predefined grid, but setting some guidelines will ensure neatness and will help to define our website’s width. Go to View > New Guide… and set some guidelines. I usually choose 1000px as a website width and add some guidelines from the corners so it has space to breathe.
Note: Guidelines used for this tutorial: vertical at 100px, 600px, 720px and 1100px.
Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.
Designing the Header Area
The header or area “above the fold” (wherever that is these days) plays a very important role in engaging with users and ensuring that visitors stay on the website. For this traveler’s photo diary I will use a beautiful beach scenery photo to set the adventurous mood and subconsciously send a message for the visitors saying that this is website is about traveling.
Step 1
Let’s first create a group called "Header" for header by clicking Layer > New > Group... or hitting the little icon at the bottom of layers panel.
To get started let’s put navigation at the very top of our diary so people can easily navigate through. Select the Horizontal Type Tool (T), choose PT Sans font 13px size, set color to dark grey #323232 and enter the name of your photo diary. This is a suitable place for our logo, so throw one in if you have one. I am using a fictional name for this photo diary “Boarding Gate”. To make it more visually appealing expand the tracking (the spacing between letters) to 200.
Make sure to allow some space for the title above, I’ve moved it down by 25px.
Inside the “Header” group draw a rectangle shape (use any other color than white to make it visible) using the Rectangle Tool (U). In my case I drew a 1200x640px sized rectangle and placed it at the top of the document leaving 25px gap below the top navigation.
Now download this beach photo (or any other you like), drag it to the Photoshop document and place it above the rectangle layer. Rename the image layer to something you’ll recognize later, in my case I’ve used IMG. After that hold down the Alt key and mouse over the photo layer until you see a little arrow pointing down, then release it. You have just created a Clipping Mask. Finally reduce the IMG layer Opacity to 75% to make text we’ll put on top will be more readable.
Now hit CMD+T and resize the photo to fit your needs.
Tip: hold down Shift key to transform proportionally.
Let’s make an introductory message telling users what this is all about. Make sure you use large text to draw visitors’ attention. In my case it’s the same PT Sans font, 52px size. For a secondary message use a smaller font, I’ve used PT Serif 28px size. Notice the space between the lines, always leave enough space for copy to be readable.
Finally we need a call to action (CTA) button to tell people what to do. Pick the Rectangle Tool (U) and draw a white #FFFFFF rectangle shape. After that place text inside of the white rectangle saying something like “Browse Photos”. Make sure to allow some space above the button so it looks strong and independent.
Designing the Text Post Unit
As you may already know Tumblr has many different post types available. Below is a screenshot of the Tumblr dashboard interface showing possible post types you can create.
Over the coming steps I will walk you through the process of creating some different post types, namely:
Text post
Photo post
Video post
Quote post
I will leave you to complete the rest as an assignment.
Step 1
Let’s start with Text entry first. We’ll be creating one unit then reproducing it for the other post types. All the posts will be based on the same structure and share similar features (date of post, tags, sharing options).
Create a new group called “Text Unit”. After that change background color to light brown #f8f7f6, pick the Rectangle Tool (U) and draw a rectangle shape between the first and last vertical guidelines. In my example the rectangle is 1000x284px.
Grab the Horizontal Type Tool (T) and using PT Sans (Bold) 32px enter a headline. Make sure to give your title some space around to make it look balanced and clean. In my case I’ve pushed it 50px from the top and left.
Step 2
Using same tool pick PT Serif font, reduce the font size to 15px and change the color to lighter grey #444444. After that enter your post content. Make sure to increase line height to make it more readable and visually appealing. In this case I’ve set the line height to 26px.
Step 3
Finally we need to display the date of publishing alongside, with some tags and sharing options. Using the same type tool enter some tags, each prepended with a hashtag #, and place it below the content. After that change the color to lighter grey #666666 so it is visually lighter and gives the impression of being less important, allowing more attention for the main content.
Step 4
Now head over to Iconfinder and download share, retweet and heart icons.
Lastly, create a new group called “Icons” and place the icons inside the group. Apply some space to the sides and reduce the group’s Opacity to 30% so the icons match the date and tags color.
Designing the Photo Post Unit
Step 1
With that done, duplicate the “Text Unit” group and rename it to “Photo Unit”. Move it 60px below the first block, remove the content layer and move the post title to the bottom to be in line with the post date and tags. Change the post title, date and tags. Select the unit background layer, hit CMD+T and resize it to have 50px space above and below.
Step 2
Duplicate the unit background layer and resize it using CMD+T. In my case I’ve resized it to 1000x510px.
Move it above the title and head over to Skitterphoto to pick a photograph you’d like to use for the photo post , placing it above the rectangle. Hold down Alt key and mouse over the layer thumbnail until you see a little arrow pointing down. Then release the mouse to create a Clipping Mask.
Designing the Video Post Unit
Step 1
This one is easy. Duplicate CMD+J the “Photo Unit” group and rename it to “Video Unit”. Move it 60px below the photo post and change the image, title, date and tags. After that we need to indicate that it is a video post by placing a YouTube icon over it.
Download the YouTube icon from Iconfinder and place it in the center of the video post image.
Designing the Quote Post Unit
Step 1
Once again duplicate (CMD+J) the “Text Unit” group and move it below the video post. Remove the title and content layers leaving the date, tags and sharing icons.
After that, pick up the Horizontal Type Tool (T), choose PT Serif (Italic) font, set size to 35px and make sure the color is dark grey #323232.
Finally, paste your favorite quote and adjust the background around it, remembering to leave consistent 50px gaps on the sides.
Now duplicate the “Photo Unit” group and place it below the quote post so our mockup looks more like a real Tumblr blog.
Designing the Rest of the Post Units
There you are. I’ve showed you how to create text, photo, video and quote post types and now it is time for you to create the rest of the post types for link, chat and audio. Consistency is key, try to reuse elements we’ve created already and use the same fonts, colors, spacing so your design looks balanced and is perceived as a whole.
Designing the Footer Area
We’re very close to finishing this simple Tumblr theme. Let’s now add a “load more” button (something common to Tumblr themes) and a copyright statement.
Step 1
Minimize all groups and create a new one called “Footer”. After that open up the “Header” group and find the “Browse Photos” button layers, the rectangle shape and text layer. Hold down the CMD key and select both of these layers, then hit CMD+J to duplicate them and drag them to your “Footer” group.
Once done, double-click on the rectangle shape layer and change its color to the one used for the “Photo” background to keep consistency.
Finally, enter the copyright information. For consistency use the same font as used for the photo entry copy. In this case it is PT Serif 15px color grey #444444. Notice the spacing, in the whole layout we have a lot of white space that gives this feeling of cleanliness and organisation. I’ve used 60px for spaces between the photo entries, “load more” button and copyright line.
The alignment is centered to keep things consistent with the messaging and call to action (CTA) buttons.
Congratulations!
That’s it! We’re done with the theme design, now review your document layers, delete the unnecessary ones and hand it over to your developer, or even better code it yourself. In a coming tutorial we’ll be coding this design into a fully functional Tumblr theme, so stay tuned!