How to Recreate Tumblr’s Layout Using Adobe Photoshop in 10 Minutes

Posted in Tutorials, Web Interface2 years ago • Written by 3 Comments

In this tutorial we will be re-creating Tumblr’s layout. Keep in mind that we do not want to copy their design with bad intention, but only to develop our skills and would like to see if we could achieve an exact, or at least a similar web layout.

This tutorial is meant for beginners, those who are looking to grasp the basics of Photoshop on how to create web layouts. By the end of this tutorial, you will have a good understanding of how Blending Options can almost solve anything!

What are you waiting for? Let’s begin!

Final Result 

Step 1

We are starting out by creating a layout of the following sizes: 1000 pixels in weight and 900 pixels in height. Give it a blue color (#3a5975) and by using the Rounded Rectangle Tool (U) add a smaller, dark-blue shape of about 900 pixels in weight and 500 pixels in height. The top of the gradient must be a dark-blue color, and the bottom one must be identical to the background. This way we will create a nice gradient which will disappear in the background.

Step 2 


Because we are doing this tutorial for skill-developing purposes only, we will not be copying or creating their website’s logotype. I grabbed a screenshot of their logo and placed it on the top (see tumblr.com for comparison).

Step 3 

We move on to creating one of the top buttons you can see on the official Tumblr page. By using the rounded rectangle tool, create a shape of the background’s color. Apply a white inner-shadow effect as shown on the picture to achieve that top white stroke.

Step 4 

Apply a blue-ish gradient overlay. The colors used are very similar to the background, but we are doing it by intention.

Step 5 

The last touch for our button would be the stroke which is basically the most important element. You can barely notice the button without the stroke effect, that is why the color used for the stroke is a dark-blue one.

Step 6 

It is the time to create another button that you can see on Tumblr’s page. This time we will be using a bright contrast of blue. Add a black drop-shadow effect to it, and set the opacity to 15 percent which will give it a really nice and elegant look.

Step 7 

We are adding the same effect we gave to the previous button – Inner Shadow, for a white top stroke.

Step 8 

We will be adding a little bit of “Bevel and Emboss” effect to the button as well. Along with the gradient overlay effect, it will make it stand out.

Step 9 


Add a gradient overlay effect to button by using 2 variations of the light-blue color.

Step 10

Finish the button by adding a stroke effect, stroke’s opacity being: 30 percent.

Step 11 

By using the Helvetica Neue Bold font, input some text on the buttons. I decided to go with Tumblr’s text on the respective buttons which is “Sign In” and “Register Now”

Step 12 

We continue our layout by creating a search form. By using the Rounded Rectangle Tool (U), create a shape and set it’s “Fill” to 0 percent. Then apply a dark-blue, 1 pixel stroke effect and an almost visible inner glow effect. By using Helvetica Neue bold, input some text inside the search form. Give the text a dark yellow color and a 1 pixel, blue drop shadow effect (30% opacity). Grab the free IconSweets icon set by Yummygum, and find the “Magnifying glass”. Give it a dark blue color and place it near the right border of the form.

Step 13 

Get the Rounded Rectangle Tool (U) again, and create a shape of about 190 pixels in width, and 200 pixels in height. Follow the exact steps we applying to create our first button from header, the only addition this time would be a straight line each 35 pixels. The following line will divide our container into equal shapes. To create a line you can use the Line Tool (U) and hold Shift while dragging it.

Step 14 

As with the button, give our shape a barely visible white inner glow, of 3 percent. Apply a stroke of 1 pixel with an opacity of 60 percent and a dark blue color.

Step 15 

Result So Far

Step 16

In the same IconSweets 2 set, find a tag icon and give it the background color. Apply a black drop shadow with an opacity of 40% and a distance of 1 pixel.

Step 18 

Repeat the same exact steps to create another shape with 5 dividers. Instead of using tag icons, add various small images at the left corner of the shapes and input some bold & regular text. The size for it will be 11 pixels.

Step 19 

As you can notice on the Tumblr.com website, they are showcasing various postings from different people’s blogs. Near each posting you can notice the avatar of the respective author. By using the Rounded Rectangle Tool (U), create a box of the following sizes: Width & Height: 65 pixels.

Step 20 

Right now we will create the base for our postings. By Using the Rounded Rectangle Tool create a shape of 545 pixels in width and 605 pixels in height. Leave it white but apply a black drop shadow effect, with a size of 5 pixels. By using the lowercase Helvetica Neue Bold font, with a size of 12 pixels, input the a random username, near the top left corner of the shape.

Grab some icons from the IconSweets2 set, and place them at the right corner. Give them a bluish-gray color (#adb3bc). Refer to our final result or the oficial Tumblr.com website for details. Use the Rounded Rectangle Tool to create a shape of the same color, and by using the Helvetica Neue Bold font, input 4 numbers, which will represent either the comments a posting has, or the views. To finish up our posting, we are adding a big picture which almost covers the full space. Keep the image size at 500 pixels in width, and 500 pixels in height.

Step 21 

With the same font, and a size of 11 pixels, input some hashtags with text. This will show the tags the post is categorized under.

Final Result 

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

20 Written Articles

3 Comments
  • Santosh

    Tuesday, June 26th, 2012 03:36

    1

    Hello Stelian Subotin,

    This is an wonderful article where everybody can start there own design for Tumblr. I am really hatsoff to your work. Right away I will work on tumblr.

    Thanks once again.

    0
  • Cassis

    Tuesday, June 26th, 2012 11:19

    2

    Thanks for the post, it’s always good to hone your technical skills. Recreating it in photoshop is useful, but it’s also useful to be able to create websites in HTML, CSS, and other coding languages.

    0
    • Dainis Graveris

      Wednesday, June 27th, 2012 13:04

      3

      Hello Cassis, thank you for comment! Of course, but it’s hard to just code everything, when you don’t have a way to do just graphical part! That’s why sketching, wireframing, then doing graphic design..and only then coding is so crucial!

      0
  • Cassis

    Tuesday, June 26th, 2012 11:19

    2

    Thanks for the post, it’s always good to hone your technical skills. Recreating it in photoshop is useful, but it’s also useful to be able to create websites in HTML, CSS, and other coding languages.

    0
    • Dainis Graveris

      Wednesday, June 27th, 2012 13:04

      3

      Hello Cassis, thank you for comment! Of course, but it’s hard to just code everything, when you don’t have a way to do just graphical part! That’s why sketching, wireframing, then doing graphic design..and only then coding is so crucial!

      0
  • Santosh

    Tuesday, June 26th, 2012 03:36

    1

    Hello Stelian Subotin,

    This is an wonderful article where everybody can start there own design for Tumblr. I am really hatsoff to your work. Right away I will work on tumblr.

    Thanks once again.

    0

Comments are closed.

54.81.170.186 - unknown - unknown - US