HV-Designs.co.uk

March 30th, 2008 in Photoshop Tutorials by Richard Carpenter

Futuristic Web Layout

• Share

Open up your futuristic navigation bar that you previously created “HERE” Create a new layer under your navigation label it background. Select the colors #a3adb1 and #ffffff. Now select the gradient tool and drag a reflected gradient over your canvas.

Now duplicate your header and all elements apart from the buttons and text, flip it vertically (edit > transform > flip vertically) place at the bottom of your canvas, this shall be out footer. Add your footer text.

Now create a new layer labelled “main_top”, select the rounded rectangle tool and draw out your rectangle. Now goto “edit > transform > warp” (only availble to CS2+ users) drag the bottom anchor point inwards.

If you dont have the use of the warp tool you could leave the box square will look just as good. Now duplicate your “main_top” layer drag the duplicated layer underneath your “main_top” layer label it “main_glow” do the same again drag layer underneath the “main_glow” layer and label “main_bottom”. you should now have 3 layers all the same.

Now add these layer styles to your “MAIN_TOP” layer.

Add these layer style to your “MAIN_GLOW” layer.

Add these layer styles to your “MAIN_BOTTOM” layer.

Now select your “main_bottom” layer and select the move tool, press the down arrow key 6 times on the keyboard and 3 times to the right. Now select your “main_glow” layer and move the glow to the right to suit your visual preferences. You should have something like this.

Repeat the steps above to add more boxes.

This step is optional, as you can see ive left a gap on the right hand side at the top, ive done that as i wanted to add a 3D render of a robot.

This next step is easy to do, just add your text and any images you need to add.

On the third box at the bottom above the footer i want to add some arrows, head into the custom shapes libary and add 2 arrows either side.

Add these layer styles to your arrows.

Once finished you should end up with this.

• Share