Subscribe Via RSS

3243 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Business Layout Tutorial

July 19th, 2008 in Photoshop Tutorials by Richard Carpenter

Business Layout Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars11 Votes, Rating: 4.64
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 331 posts.

Create a new document 800×800 pixels with a white background. Double click your background layer and press ok when the new layer box pops up, doing this will unlock the background layer. Add this layer style to your background layer.

Now select the rounded rectangle tool with a radius of 20pixels.

Draw out a rectangle in the middle of your canvas, then right click and goto “fill path”. Select the pen tool then right click on your canvas and goto “delete path”, you should be left with a white box with nice curved edges.

Add these layer styles to your rectangle.

Duplicate your content box you just created and make a new layer above it, hide your background layer and your orginal content box layer. Select your new layer and then goto “layer > merge visable”. Head over to “filter > blur > guassian blur” blur the content box by 6pixels, change layer opacity to 60% and layer blending mode to screen. You should have something like this.

Thats our content box done, select the type tool and type your site title and slogan.

Select the custom shapes tool and select this arrow (see image below).

Add the arrow by your site title and slogan.

Whilst holding down the “ALT” key on your keyboard hit the down arrow key then the right arrow key, do this about 10-15 times depending on how thick you want your arrow to look. Everytime you hit the down and right arrow button (not together) a new layer should be created. Once your down merge all your layers together APART FROM THE ORGINAL. Drag the duplicated layer underneath your orginal, then label them top and bottom so you dont get mixed up. Add these layer styles to your bottom layer.

Your arrow should look like this.

Now add these layer styles to your top layer.

You should have something like this.

Create a new layer above your top layer select the newly created layer and click on your top layer whilst holding “CTRL”, once the selection has been activated goto “edit > stroke”, fill with a white 1 px stroke.

You should have something like this.

Ive also added a shine as you can see on the image above, you should no how to do that by now. Select various custom shapes from the custom shapes tool and create your navigation.

Duplicate Your header elements and transfer them under your content box change the text to suit your footer.

Now fill your content box with your content.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

10 Responses to “Business Layout Tutorial”

  1. Xphunt3r says:

    nice and simple business template

  2. outstanding work done

  3. Arend says:

    Very nice one!
    really like the outcome!

  4. mj says:

    thanks for your tutorial!
    it’s very clean.

  5. Ahmad .. says:

    Nice..

    and thanks.. :)

  6. vaibhav says:

    wow…………………superb site dear…………………….lovely

  7. mohammad says:

    very Good boy , thanks ;)

  8. Houdini says:

    very nice tutorial; I would love to complete it, except the fill path is grayed out when I right click after drawing the rounded rectangle.

  9. Houdini says:

    I figured it

  10. Lauren says:

    I was stuck there too but managed to get to the fill path box. Nothing happened after that however and I did not end up with the nice white box. Id really like to try this so any suggestions? Using CS3. Thanks guys!

Leave a Reply