Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Watercolored Design Studio Blog Layout

Watercolored Design Studio Blog Layout


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

Watercolored Design Studio Blog Layout image 1

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

Watercolored Design Studio Blog Layout image 2

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

Watercolored Design Studio Blog Layout image 3

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

Watercolored Design Studio Blog Layout image 4

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.

Watercolored Design Studio Blog Layout image 5

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

Watercolored Design Studio Blog Layout image 6

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

Watercolored Design Studio Blog Layout image 7

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

Watercolored Design Studio Blog Layout image 8

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.

Watercolored Design Studio Blog Layout image 9

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%.

Watercolored Design Studio Blog Layout image 10

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.

Watercolored Design Studio Blog Layout image 11

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

Watercolored Design Studio Blog Layout image 12

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

Watercolored Design Studio Blog Layout image 13

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

Watercolored Design Studio Blog Layout image 14

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

Watercolored Design Studio Blog Layout image 15

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

Watercolored Design Studio Blog Layout image 16

Watercolored Design Studio Blog Layout image 17

18. You should have something that looks like this

Watercolored Design Studio Blog Layout image 18

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.

Watercolored Design Studio Blog Layout image 19

20. Now insert the following blending options onto its layer

Watercolored Design Studio Blog Layout image 20

Watercolored Design Studio Blog Layout image 21

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)

Watercolored Design Studio Blog Layout image 22

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

Watercolored Design Studio Blog Layout image 23

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

Watercolored Design Studio Blog Layout image 24

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

Watercolored Design Studio Blog Layout image 25

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

Watercolored Design Studio Blog Layout image 26

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

Watercolored Design Studio Blog Layout image 27

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

Watercolored Design Studio Blog Layout image 28

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

Watercolored Design Studio Blog Layout image 29

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.

Watercolored Design Studio Blog Layout image 30

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)

Watercolored Design Studio Blog Layout image 31

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

Watercolored Design Studio Blog Layout image 32

Watercolored Design Studio Blog Layout image 33

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

Watercolored Design Studio Blog Layout image 34

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.

Watercolored Design Studio Blog Layout image 35

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

Watercolored Design Studio Blog Layout image 36

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

Watercolored Design Studio Blog Layout image 37

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

Watercolored Design Studio Blog Layout image 38

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

Watercolored Design Studio Blog Layout Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Watercolored Design Studio Blog Layout"

Only registered users can write comment

No comments yet...