Watercolored Design Studio Blog Layout

In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

This will be your final result

1. The first thing we want to do is to create a new document with the dimensions of 1024×1100. Your height may vary, but i used these dimensions for the purpose of this tutorial.

2. Next, we want to go ahead and add in our background. I used a great stock image I found on deviantart here. The images aren’t large enough, but just go ahead and scale them to fit your document. Or you can download the PSD at the bottom of the tutorial, and get the image from there to save you the step.

3. The first thing I would like to do is to create a simple logo. Using the font Helvetica, I used #000000 for “Vicinity and set it to bold, and used #D75160 for the “Designs” while keeping its font styling to Regular. You should have something that looks like this

4. Now we want to add a little tagline to our logo. Using your Rectangle Marquee tool make a selection similar to the following and fill it with #FFFFFF

5. Lower the opacity of your layer to 90%, so it will blend better with the background. Then go ahead and add some text in your newly created box. I used the color #64685E

6. Next we want to add a spot for you and your clients to login. On the right side of your template we want to use our Rectangle Marquee Tool again and make a selection similar to the following and fill it with #000000.

7. Lower the opacity of your layer to 30%, and then add some text on top of it similar to the following. Make your text color #FFFFFF

8. Next we want to move onto our navigation. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000

9. We now want to lower the opacity of that layer to 70% to give it a nice transparent feel on our colorful background.

10. Now lets show how our links will be displayed. For each link we will have a description under it to keep it fun and friendly. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #303130.

11. Change the blending mode of your square to Soft Light and then we can go ahead and add some text. For the link I used the color #FFFFFF, and for the description I used #FFFFFFF, but just lowered the opacity of the text layer to 50%.

12. Go ahead and repeat those steps to create all the navigation links you’ll need. For my active link I used #3CC1F9 instead of the white.

13. With the extra space on the end, you can go ahead and add some options for users to subscribe to your RSS Feed. Just add some simple white text, and add your RSS icons and your document will look something like this by now

14. Next we want to move onto our content area. Using your Rectangle Tool we want to go ahead and select out a background for our content. So make a selection similar to the following and fill it with #FFFFFF

15. First lets go ahead and add a heading for our blog area. I chose to use the words “Latest Articles” with the color #000000 and set to bold. I then used the color #3B3A3A for the – - – - – - – - – - – - under my heading. You should have something like this

16. Now lets make a search bar. Having fun yet? Using your Rectangle Marquee tool again make a selection similar to the following and fill it with #000000

17. Now insert the following blending options onto its layer by right clicking its layer and choosing blending options from the drop down menu


18. You should have something that looks like this

19. Next we need to make a button for our search box. So using your Rectangle Marquee again make a selection similar to the following and fill it with #000000.

20. Now insert the following blending options onto its layer


21. Now go ahead and add some white text on top of your button and you should have something that looks like this. (note. I added a little white border around the edge, but that is optional)

22. Now go ahead and add some witty text in front of your text box and your document should look a little something like this

23. Lets go ahead and start with our sidebar shall we? The idea is to keep it simple. We want to go ahead and make a heading for our “Recent Posts” box, so using your Rectangle Marquee Tool make a selection similar to the following and fill it with #D65863

24. Now pull out your Text Tool and add the text “Recent Posts” in #FFFFFF.

25. Next use your Polygonal Lasso Tool to make a little triangular bullet and fill it with #000000. Then go ahead and add some text next to it to represent a post. For the link I used the color #2E92BC

26. Now just repeat those steps and you’ll have something that looks like this after about 5 links

27. The last step for the box is to add a 2px high border on the bottom. Use your Rectangle Marquee to do this and fill it with #000000. Lower the opacity of that layer to around 10% and it will look like this

28. Now i just repeated those steps for a Recent Comments box, but changed the back of the heading to #B7D8CF. Your document will look something like this

29. Now its time to make our post list. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #F1F1F1.

30. Next we want to make a nice rounded box where our thumbnail will be for each post. So using your Rounded Rectangle Tool with the radius set to 10px, make a rectangle similar to the following (doesn’t matter what color, we will be changing it)

31. Now on your newly created Rounded Rectangle, insert the following blending options


32. I went ahead and added a thumbnail from our site in there as an example and it will look something like this

33. Now all thats left is to use your text tool to lay it out something like the following. For the calendar icon, I used a pack you can find at this link.

34. We want to have every other post with a background, so on the second post I did not add a background, and changed the calender icon to one of the others in the pack. You’ll have something that looks like this

35. All that’s left is the footer (about time huh?). Go ahead and use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000

36. Now lower the opacity of your newly created layer to about 70%, and then just add some text in a similar way to the following

That’s it! When your all done, your template should hopefully look something like the following

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

33 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors