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

Design Studio Layout


1. The first thing we want to do is open up Photoshop and create a new document with the dimensions of 1024x998.

Design Studio Layout image 1

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

Design Studio Layout image 2

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

Design Studio Layout image 3

Design Studio Layout image 4

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

Design Studio Layout image 5

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

Design Studio Layout image 6

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

Design Studio Layout image 7

Design Studio Layout image 8

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

Design Studio Layout image 9

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

Design Studio Layout image 10

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

Design Studio Layout image 11

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

Design Studio Layout image 12

You will have something that looks like this when your complete

Design Studio Layout image 13

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

Design Studio Layout image 14

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.

Design Studio Layout image 15

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

Design Studio Layout image 16

Design Studio Layout image 17

14. Your header should now look something like this

Design Studio Layout image 18

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

Design Studio Layout image 19

Design Studio Layout image 20

Design Studio Layout image 21

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

Design Studio Layout image 22

17. And that's it! Your final results will look something like this:

Design Studio 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 "Design Studio Layout"

Only registered users can write comment

No comments yet...