How to create a business layout with 3D elements

Hello my friends. As you know we release each day a new resource or tutorial here on Graphstock. As you know we write tutorials specially for web templates. Today will create a business layout for wordpress, with a 3D look. The layout will have some nice 3D elements. We will create a nice slideshow, and a 3D navigation bar with a nice and smooth shadow.

Step 1 – Download our PSD framework

For start i recommend you to download our PSD framework available here: Download PSD Framework

Open this PSD layout in Photoshop, and make sure you have the guides visible. the shortcut to show/hide guides is cmd+; or CTRL+; if you are on windows.

I will leave my guides always invisible in this tutorial, because i want you to see better my elements from this tutorial. Try to use the shortcut from above, because you will be able to align very good this layout, and in the same time you will see the layout very good.

Step 2 – Create a nice 3D navigation bar

With Rounded rectangle tool i will make a shape on the top of the wordpress layout. When you select Rounded rectangle tool, make sure you change the radius value to 5 pixels.

For this shape i will add the following layer styles. Please save this layer style because we will use several times later in this tutorial.

Here are the settings for the gradient. If you want some great sets with gradients i recommend you to register for a Premium account and download our huge set of over 11.000 gradients

Step 3 – Create a nice shadow for our navigation area

With pen tool i will make the following shape. It doesn’t matter if you can not create the same shape like mine, but make sure you will try to create something similar.

I will go to Filter > Blur > Gaussian Blur and i will enter a value between 5 and 8. If you are not happy with your result you can always change the opacity of the shape. You can change the opacity if you select the right layer in your layer palette, and you will see on the top of the layer palette the settings for the opacity , and fill. Try to change that values if you are not happy with the shadow.

Step 4 – Duplicate the shadow

Make sure you have the layer with the shadow selected, and then press on cmd+J ( CTRL+J for windows users ).

You will see a new layer on top of the original layer. Now we have to move the layer on the other side of the layout. In this way you will have some perfect shadows. Before you move the layer to to right side you need to go to Edit > Transform > Flip Horizontally. Your navigation bar will look like mine. as you can see it has already a nice 3D look.

Step 5 – Add button on your 3D navigation bar

With horizontal type tool i will write some text over this bar. As you can see the Graphstock logo has some nice layer styles. You can download the indented layer styles from here : Download Premium Layer Styles

Step 6 – Add images and text under the navigation bar

I will add a nice 3d stock image with some domino pieces., and on the right side i will add some text. As you can see from the next screen shot i have different font sizes for  my introductory text. This text is very important because it will be visible from all your users, and sometimes this piece of text can change how your website will perform. Even if you don’t believe this area can bring you 50 % more sales than you think.

Step 7 – Add details under the header of your wordpress theme

With Line tool i will add 2 thin lines. Each line has 1 pixel, and as you can see from my next screen shot the lines are placed one above the other.

Step 8 – Add icons and text on your body

I will add some icons from the following set of icons: 81 Universal vector icons

Our premium users can download this set of icons, and you can use which icons do you like best. You have some options, and this layout can be used for may types of websites.

Step 9 – Create the jquery slidesho

On the right side it is good if you can create a nice slide show powered by jquery or MooTools. or if you are comfortable you can use any other java script framework. For this you need to create two shape like in the following image.

I will use the following layer styles for both shapes.

Step 10 – Use our colorful corner ribbons

Download the following set of 3D corner ribbons

After you download this set of web 2.0 ribbons you need to open the PSD file , and select Group 4, or any other ribbon you like, and drag it on your business wordpress theme. As you can see in the next image i have placed ton the bottom of the slide show also some circles ( made with Ellipse Tool )

Step 11 – Create the footer of the wordpress theme

On the bottom of the layout it will be nice if you place there some useful information for your users. I will select rectangle tool and i will make a big shape (  i will add the same layer style i have used for our 3D navigation bar )

Step 12 – Create a contact form on the footer

If you sell a product , or a service it is very important to allow your users to contact you with ease. This is important because this means  your business will offer support , and some people are feeling safe if you offer support for your products. With Rounded rectangle tool i will create some shapes,a nd a button.

The layer styles used to create the forms are bellow.

Step 13 – Add quick access links

On the top right side of your layout, you need to place some links for some of most important areas of your layout.

Final result – Already ?

Yes. We try to create very easy follow tutorials for beginners, or advanced users of Photoshop.If you have problems creating this layout please leave a comment and one member of our staff will answer you in a few hours.

If you want to see the full size layout press on the following image

Want to download ?

We offer a premium membership, which allows you to download ALL our resources. All you need is to register for  Premium Account and you will have unlimited access to download all our resources.

If you are a Graphstock Premium member you can download this psd layout from here