Design a 3D web layout in photoshop

In this tutorial we’re going to design a 3D web layout.
It will have perspective in the header, but the content area will have to remain clean in order to keep things readable and not irritating.
There are a lot of things you can modify to your own needs in this tutorial, it’s mainly about learning some of the techniques used.

Result Preview:

So let’s start.

Step 1

Open a new document of at least 1280×2000 px
When that’s done create a new Layer Group and call it “background”.
Inside of this group create a new layer and fill it with the #1c1c1c color. That’s basically a soft black.
On top of that layer add another one and pick a huge brush with the size of 1550px or something close to that, set the hardness to 0% and make sure the color is set to White.
Now click once at the top and in the middle (seen horizontally).
It should turn out as something like this:

Step 2

Create another Layer Group on top and make sure it isn’t inside the other group. Call it “header”.

Step 3

Open a new document again and make it 1024×2000 px.
Fill it with any color and press ctrl+a to select it and ctrl+c to copy it.
Go back to your first document and paste this into a new layer inside the “header” group.
Cut away the bottom part by using the Rectangular Marquee Tool and dragging from the bottom all the way up to the 6.5 mark at the rulers. (if you don’t see rulers, go to view>rulers).

Change it’s color to #3f88c2 by adding a layer style color overlay or by using one of the many other methods.
It should be something like this now:

Step 4

Create another new document of 728x90px.
This will become an advertisment space. Just fill it with something white-ish and use the copy paste method we used before and paste it in the header group as a new layer on top of the blue bar.
Possition it in the middle (vertically) at the right side.
It will look like this:

Add any logo (or keep it empty) at the other side of the blue bar.

Step 5

Duplicate the blue bar and drag it right below it so it exactly hits eachother (if you use the snapping function in cs4 or above, you often get a line in between, move it up 1px with your arrow keys).
Now open the Info panel (F8) and make the height to something like 1.59
You could also just do it by view ofcourse, it’s just a tutorial.
Now we’re going to ad perspective to this new shape.
Go to edit>transform>perspective.
Drag one of the bottom nobs in direction of the middle and now it’s up to you how “deep” your website will be, the more you drag it to the middle, the more it will look deep.
I’ve got this so far:

Step 6

Now create another layer and create a rectangle (rectangle tool) with any color at the same size of the bottom part, don’t make it too high.
Just something like this:

I already placed an image on top of it because it will be our slider.

Step 7

We’re going to apply some layer styles on the perspective layer before we move on.
Add a gradient overlay from #183852 to #316e9f
Now duplicate that layer and rotate it so it’s upside down.
Make it fit right beneath the slider image we just made.

Step 8

On top of our slider image we’re going to add a little preview of text of the actual post.
Drag a new Black rectangle on top of it.
It can be any size, up to you to choose where to place it also.
Make it 70% opaque and add white text on top of it.

Step 9

In order to navigate through those slides we’re going to add 2 buttons.
Pick the Rounded Rectangle tool and set it’s radius to 10px at the top of your screen.
Drag a small rectangle at the lower right corner of the slide and add the following Layer Styles:
Gradient Overlay:
From white at 0%
To #e7e8e8 at 25%
To #c7c8ca at 55%
To #f1f1f1 at 75%
To #d8dada at 100%
If that’s too much effort for you, just change the gradient style to Reflected and make it from white to silver.
Stroke:
1px with a color of #a2a2a2

Step 10

In the middle of that we’re going to create a small separator.
Pick the Line Tool and change it’s color to black, drag a small line in the middle.
Now duplicate this line and make it white, move it 1px to the left so they’re right next to eachother.
Lower the opacity of the black line to something like 60%
Ctrl+click both layers and press ctrl+e to merge them
You can optionally take a small and soft eraser and erase a bit of the upper and lower ends to make the button look more rounded.

Step 11

We’re going to add 2 arrows on this button.
Simple draw a really tiny rectangle with the color #4b4b4c, then rotate it 45° and cut the left or right half of with the Rectangular Marquee Tool.
Place the part at the appropriate side of the button and maybe consider decreasing the height of it.
Now duplicate it, rotate it 180° and place it on the other side.

Step 12

Create a new layer group and call it “navigation”.
Add a new layer on it and pick the Text Tool.
Use the Helvetica (only on Mac) or Arial font at 18pt size, use a color of #98c1e2.
Place it at the top bar we created in the beginning of this tutorial, duplicate it a few times and move them next to eachother. You can assign any names to them.
Make one of those names in the color white, this will be the one we’re hovering over.

Step 13

The highlighted text is a bit to plain maybe.
So let’s add a buton behind it that should flow with your mouse when navigating (if you’re coding it ofcourse).
Use the Rounded Rectangle Tool at 10 px radius again and draw a rectangle behind the text (make sure the layer is below the text), make sure it fits.
Add the following layer styles:
Gradient Overlay:
From #323232 at 0%
To #353535 at 49%
To #4a4a4a at 50%
To #7b7b7b at 100%
Stroke:
1px
Black
25% opacity

Step 14

Next to this navigation we’re going to add a search box.
Use the Rectangle Tool again and draw a long rectangle with the same settings as before.
Add the following layer styles to it:
Gradient Overlay:
From #235b88 to #3f88c2
Stroke:
1px
40% opacity
color Black
Inner Glow:
Blend Mode: Normal
Opacity 27%
Noise 0%
Color White

It should look like this:

Step 15

We need to make clear it’s a search box of course, let’s add an icon and some text.
Duplicate the bar itself and cut out the right part so we only keep one small piece at the left (a square proportionally).
Add some Layer Styles to it again:
Gradient Overlay:
From #1674a4 at 0%
To #2f8dbc at 49%
To #2f8dbc at 50%
To #67b4db at 100%
Stroke:
1px
20% opacity
Color Black

Pick the Custom Shapes Tool and search and at the top of your screen pick the loupe shape. It could happen there isn’t such shape, just click the small triangle icon at the right and select “All”.

Place this on top of the small button we made and add a black Stroke of 1px with 50% opacity on it, also change the color to #b2d5e6.
You can also add some white transparent text (60% opacity) in the search bar.

Step 16

We’re done with the header now.
Let’s keep on moving and get the content area there.
Add a new Layer Group called “Content”
Create a white rectangle that is as wide as the bottom of the header.
Make it close to the bottom of the document, but remember there needs to come a banner too.
Add a Gradient overlay to this rectangle:
From white at 0%
To white at 95%
To #e4e4e4 at 100%

Step 17

Create yet another Layer Group called sidebar.
Open up a new document of 300x2000px
Copy that into the first document again and place it at the right side on top of(!) the content rectangle.
Add a Gradient Overlay:
From #3f88c2 at 85%
To #2f6894 at 100%

Step 18

We’re going to add some social bookmarking icons on there, you can find them in the .psd file provided with this tutorial, or you can find your own (48×48).

Step 19

A sign up form for an email campaign would be nice too.
Pick the Rounded Rectangle Tool and drag a rectangle on the sidebar below the icons.
Add these Layer Styles:
Inner Glow:
Opacity: 59%
Color White
Size: 2px
Gradient Overlay:
From #7cbdf1 to #083050
Style: Radial – On the document itself (with the gradient window still open) drag while holding the mouse button to the top of the box.
Stroke:
1px
Color #12334d

Step 20

Inside of this create a small rounded rectangle again at the bottom, this will be the submit button.
Inner Glow:
75% opacity
Color white
Size: 1px
Gradient Overlay:
Style: Reflected
From #d6e528 to #98d049
Stroke:
1px
Opacity: 47%
Color Black

Step 21

Duplicate this button and with the Rectangular Marquee Tool select the bottom half and delete is.
Remove all Layer Styles, but add a white Color Overlay.
Set the opacity of the layer to 35%
This made the button look glossy.

Step 22

Now create a Rectangle (not rounded) with something close to the same size as the button we just made.
Add a Drop Shadow:
Blend Mode: Normal
Color: White
Opacity: 35%
Angle 45%
Distance: 1px
Spread: 0px
Size: 1px
Also add an Inner Shadow:
Blend Mode: Normal
Color: Black
Opacity: 100%
Distance: 2px
Choke: 5px
Size: 6px
Color Overlay:
Color #575757

Step 23

Duplicate this layer so you have to input forms below eachother, don’t place them too high in the big box.

You should add some white transparent (45%) text in those fields to make clear it’s a sign up form and what needs to go in the boxes.

Step 24

Now add a banner above these fields with what people will get when signing up. It can be anything, preferably a cover of an eBook or something.
I just put some text with an
Outer Glow:
Blending Mode: Normal
Opacity: 75%
Color: #60ade9
Spread: 3px
Size: 13px
Satin:
Opacity 11%
Distance 1px
Size 0px
Color Overlay:
Color: #daeb77

Step 25

The sign up button still needs some text.
Make it just black in any font and size you want, but make sure it’s BELOW the layer with the glossy effect!

Step 26

The sidebar is almost done now, I just want it to merge a little better with the rest of the layout. (Remember it’s nice to keep some empty space in the sidebar if the client wants to add some widgets).
Pick the Pen Tool and draw a shape like shown below:

The part at the left isn’t important, but the hollow curve is.
Just make your first click on the line of the header box, set the second at the line of the sidebar and drag your mouse (while holding click) until it get’s a nice curve, then close the shape. Don’t make it too big though!
Fill it with the same color as the sidebar: #3f88c2

Step 27

The only things we need to do is making some preview content and adding a footer.
Let’s start with the content first. This should go very fast.
Create a new Layer Group called “article”
Use Arial as default font for all we’re going to add now.
For the title, get it at 30pt size in black color.
Above the title (with some whitespace) add a sample category, comments count and date. Make their distances the same on view.
Their color should be #99c9ef
Add small separators in between those with the Line Tool (set at 1px) in the color #dbdbdb
Create a long horizontal separator below the title.
For the content, we’re not going to write, but just get some generated and meaningless content.
Go to http://lipsum.com and generate some text, copy some of it and paste until it comes at the height of the Email Adress field of the sidebar.
Make sure it’s aligned to the right, but set the text block at the right also.
You can add a thumbnail of 200×200 or 125×125 next to it now.
Make sure the text isn’t more than the thumnail. Now add a Rounded Rectangle with a radius of just 5px with the color #3f88c2 again. Don’t look at the size, we’ll fix that later.
Add some text on top of that rectangle, in white, that says “read more”. I used Euphemia UCAS at 15pt.
Now resize the blue rectangle so it fits right around the text.
Add another separator like shown before below this all.

Step 28

Now the fun part, select the Layer Group “article” and duplicate it (ctrl+J).
Move it down until it it has the right distance compared with the first article and the header.
Do the same again for a third article or more if you need to.

Step 29

The only thing we need now is a footer.
It’s really a matter of personal preferences, but I like the big kind of footers.
Of course you can make a small one with just copyright and you’re done. But for the ones who want to see the big one we’re going to make such footer.
Make your last Layer Group and call it “footer”. Make sure it’s on top of all layers.
Add a rectangle that hits the bottom of your sidebar and content block and that has the same width as the two together.
Add some layer styles (feel free to let your own skills flow):
Drop Shadow:
Blend Mode: Normal
Color: Black
Opacity: 50%
Angle: -90° (deselect Use Global Light)
Distance: 3px
Spread: 0px
Size: 7px
Inner Shadow:
Blend Mode: Normal
Color: White
Opacity: 70%
Angle: 90%
Distance: 1px
Choke: 0%
Size: 1px
Gradient Overlay:
From #c4c4c4 to #e6e6e6

Step 30

The last step is adding some text on it. But you could add anything.
Like images, or another sign up form or Sponsors…
For the titles I used Helvetica (or Arial) at 24pt in Bold Oblique (bold and italic), color #434343.
Below that place some text in 14pt, oblique (not bold) in #6c6b6b.
I made it so there could be 3 colums.
Just duplicate the first one and rename the titles.

Final Result: