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


Create a new document 1200 x 1500, fill your background layer with the color #e9e3c9. Select the rectangular marquee tool and add a big rectangle the width of your canvas at the top. Fill with any color then add these layer styles.

image 1

image 2

You should have something like this.

image 3

Add your website title, slogan and logo to the top of your header, also to the right of your title etc… add a small brief summary about your company.

image 4

The layer styles for my title text are.

image 5

image 6

image 7

To make the logo, select the rounded rectangle tool, with a radius of 20pixels. Draw out your rectangle, fill with any color then add these layer styles.

image 8

image 9

Once you have add your layer styles add your logo in the middle.

Next select the rectangular marquee tool, draw out a smallish rectangle the width of your canvas, again fill with any color. Copy your header title text layer styles to your rectangle, disable the drop shadow. You should have something like this.

image 10

Add some navigation text. But color one of them white.

image 11

The reason why we left one of them white is because there will be 2nd navigation bar underneath. Create two 1pixel lines next to each other like this.

image 12

Your navigation should now look like this.

image 13

Select the rectangular marquee tool and make a selection over your white bit of text, make sure the layer is behind the text. Fill with the color #9bcd00. Next make a smaller rectangle across half of the button, fill with the color white, lower the opacity to about 20%. Your button should now have a matching shine.

image 14

Using the same method add another navigation underneath, use the same color.

image 15

Now add your 2nd navigation text. That's the navigation done, underneath your navigation were going to add 3 featured important posts. Using the same method for creating our site logo add 3 logos for our featured posts.

image 16

The icons were made using adobes custom shapes library. Now add some text to represent each post, also add a divider separating each one of the posts.

image 17

Now select the rectangular marquee tool once more and create a big box for our main content. Fill with the color #a9a282 and add a stroke using the color #7c6c4b.

image 18

Inside the big box add a further 4 boxes, which should comprise of our main post content and post content footer.

image 19

Format the boxes with text and our thumbnails to look like blog posts.

image 20

Continue to add your preferred wordpress items. I wont go into to much detail here as its mainly text and simple boxes.

image 21

Finally select the rectangular marquee tool once again and basically mirror the header, copy and paste the title, logo and slogan also add your copyright information.

image 22

Finished.

Design Studio Layout



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Design Studio Layout"

Captcha