Design Studio Layout

In this tutorial you will learn how to make a layout for your design studio website. 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 open up Photoshop and create a new document with the dimensions of 1024×998.

2. Next lets go ahead and change our background color. Using your Paint Bucket Tool fill your background layer with #CCD8E1

3. Now we want to start off by creating the banner in our header. Using your Rectangle Tool create a rectangle similar to the following

4. Now right click your rectangles layer and choose blending options from the drop down menu and insert the following


5. Next we want to add a little ‘shine’ to the top of our banner. To do so make a 1px high selection across the top of the banner and fill it with #FFFFFF on its own layer. Using your arrow keys nudge it down 1px, and it will look something like this

6. Now just change that layers blending mode to Soft Light. I chose to leave the opacity at 100%, but you can modify it as you like.

7. I then added some dummy text, where you can provide a short description of your company. Next use your Rounded Rectangle Tool with the radius set to 5px and make a rounded rectangle similar to the following

8. On your Rounded Rectangle layer insert the following blending options


7. Go ahead and place some text on your button and add a little reflection and it will look something like this

8. Now just repeat those steps and you will have something very similar to this

9. For our logo we want to have something terribly simple. For the ‘Design’ I used the color #62686D and for ‘Studio’ I used the color #8ABC16

10. Now insert the following blending options onto our text logo layer

You will have something that looks like this when your complete

11. Next we want to go ahead and add some text for our links in the right. For the text I used the color #3E4041

12. We want to go ahead and show what an active or a hovering link will look like. Using your Rounded Rectangle Tool with a radius set to 3 to 5 pixels make a rectangle similar to the following under your ‘Home’ text.

13. Now lets go ahead and right click that layer and insert the following blending options


14. Your header should now look something like this

15. Now we want to go ahead and make a selection from the bottom of our banner to the bottom of our document. Fill it with any color and then insert the following blending options onto its layer


16. All thats left is to organize your content in a way you wish. This is what I came up with

17. And thats it! Your final results will look something like this:

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

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.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

33 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors