Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Futuristic Web Layout

Futuristic Web Layout


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.

image 1
Click to enlarge

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.

image 2
Click to enlarge

Now create a new layer labeled "main_top", select the rounded rectangle tool and draw out your rectangle. Now go to "edit > transform > warp" (only available to CS2+ users) drag the bottom anchor point inwards.

image 3
Click to enlarge

If you don't 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.

image 4

Now add these layer styles to your "main_top" layer.

image 5

image 6

Add these layer style to your "main_glow" layer.

image 7

image 8

Add these layer styles to your "main_bottom" layer.

image 9

image 10

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.

image 11
Click to enlarge

Repeat the steps above to add more boxes.

image 12
Click to enlarge

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

image 13
Click to enlarge

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

image 14
Click to enlarge

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

image 15
Click to enlarge

Add these layer styles to your arrows.

image 16

image 17

Once finished you should end up with this.

Futuristic Web Layout
Click to enlarge


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 "Futuristic Web Layout"

Captcha