Blog Entry Box

In this tutorial I will be teaching you how to make a blog entry box for your blog web site like the one below, using Adobe Photoshop.

Step 1:

First open up Photoshop and start a new document with the following settings:

Now fill in the background with a gradient. I used a top to bottom gradient going from #3c6c96 to #204c73. You should now have something like below:

Step 2:

Now let’s add the box for the date. Get out the Rectangle Tool and on a new layer make a small box in the top left corner. Fill it in with a gradient going from top to bottom. I used #99cb39 to #748b01. You should now have something similar to what I have below:

Now let’s add the text in the date box. Use Tahoma 20 pt and type in “30” in the box. We can also add the rest of the title text. Using Trebuchet MS 20 pt, type “Portfolio Updated” to the right of the date box. Under that text, using Trebuchet MS 10 pt, type the blog author, the date the blog was written on, and the tags. You can underline some parts that would have a link (such as the blog author). After all that, you should now have something similar to this:

Step 3:

Now we’re going to be adding the main content text. Using Verdana 11 pt and 16 pt line-spacing, type in some text. I just used dummy text as an example. Only use around 8 lines of text and align the text to the left. After that you should have something like this:

Now let’s add the bottom content. The bottom content is going to contain icons and text for the users. If you would like to use the icons I used, you can download them below:

Start off by taking the print icon (first icon) and placing it down below the main text. To the right of that type “print”. Now to the right of that, place the comment icon (second icon) and type “comments” next to it. Now take the read more icon (third icon) and place it to the right of the print text. Now type “read more” to the right of the read more icon. Make sure all this is aligned and use equal spacing between items. You should now have something similar to what I have below:

Step 4:

Now to finish off the blog entry box, we will be adding the top right control box. This box will have icons and text for the users. Get out the Rounded Rectangle Tool and on a new layer, make a box so that only the bottom left corner is round. Fill it in white for now, but soon we will be adding a gradient. This can get confusing so use the picture below as a guideline:

Now that we have that done, let’s add the gradient and outer glow. Add a gradient overlay by doube-clicking to the right of that layer in the layers palette and use the settings below:

Now add the outer glow using these settings:

You should now have something similar to what I have below:

Now let’s add the icons and text for that control box. Using Verdana 11 pt and 20 pt line-spacing, type “Subscribe:”, ” User CP:”, and ” Tags:” on different lines. Now you can add icons next to the text. If you would like to use the icons I used, you may download them below:

Now place those icons next to the text. Make sure to keep everything aligned. You should now have something similar to what I have below:

Once you’ve finished all those steps, you’re finally done! You’ve completed your blog entry box.

Leave a comment