website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Futuristic Layout #2
rss

Futuristic Layout #2

Author: Hv-Designs.co.uk More by this author


Create a new document 850x850 pixels with a black background. Select the polygonal lasso tool and create a shape like this.

Futuristic Layout #2 image 1

Fill with the color white, but leave the selection still selected. While its still selected head over to the channels pallette and click save selection as channel.

Futuristic Layout #2 image 2

Once you have clicked the save selection as channel button you should have a another layer called "alpha1? select it, press ctrl + D to deselect the selection, then goto filter > blur > guassian blur, blur by 10 pixels. You should be left with this.

Futuristic Layout #2 image 3

Press CTRL + L to open the levels panel, drag the 3 trianglar points into the middle, you will notice the blured shape sharpens and becomes more rounded.

Futuristic Layout #2 image 4

Futuristic Layout #2 image 5

Click your "alpha1" layer whilst holding down the ctrl key on the keyboard to load a new selection. Click back to your layers pallette, create a new layer then fill the selection with the color white. Delete your other layer you created previously with the polygonal lasso tool. Add these layer styles to your new shape.

Futuristic Layout #2 image 6

Futuristic Layout #2 image 7

Futuristic Layout #2 image 8

Futuristic Layout #2 image 9

Move your shape to the very top of your canvas and your result should look similar to this.

Futuristic Layout #2 image 10

Create a white rectangle with the opacity at 10% across the top half of the shape.

Futuristic Layout #2 image 11

Select the colors #232323 and #383838 and create two 1 pixel lines on the navigation shape. Duplicate the lines across both end of the navigation.

Futuristic Layout #2 image 12

Add your navigation text and site title/logo/slogan to your shape. (color code for the blue text is #1a88e4).

Futuristic Layout #2 image 13

Select the eliptical marquee tool and create 2 blue circles using the color code #1a88e4, place them under your shape on the bends where it sticks out.

Futuristic Layout #2 image 14

Goto "filter > blur > guassian blur" and blur them by a couple of pixels, to give them a soft glow effect. Your end result should look something like this.

Futuristic Layout #2 image 15

Next create to shapes similar to this.

Futuristic Layout #2 image 16

Blur the shapes by 15 pixels. Once you have blured them add a layer mask and drag a linear gradient over the top to blend them in abit, you can also lower opacity if you need to… your trying to archieve an effect like this.

Futuristic Layout #2 image 17

Again using the color #1a88e4 add a 1pixel line underneath each navigation item.

Futuristic Layout #2 image 18

Select the rounded rectangle tool with a radius of 10 create a big box underneath your naviagtion and add these layer styles.

Futuristic Layout #2 image 19

Futuristic Layout #2 image 20

Futuristic Layout #2 image 21

Next add your logo but a much bigger version inside the box, then add abit of information about your company.

Futuristic Layout #2 image 22

The little blue arrow by the about us text and the white arrow by the more info text where icons used from adobes custom shapes libary, and the blue light in the corner was made by create a small rectangle then adding this outer glow.

Futuristic Layout #2 image 23

Next create another two boxes underneath the big one, add the same layer styles as thye big box, and add the little light in the corners.

Futuristic Layout #2 image 24

Begin to add your content to your other two boxes.

Futuristic Layout #2 image 25

Finally duplicate all of your header/navigation elements, flip it vertically by going to "edit > transform > flip vertical" then move it to the very bottom. Delete your nav text, site title etc.. and replace with your footer information. Also using adobes custom shapes i add two more buttons.

Futuristic Layout #2 image 26

Thats it all done, hope you enjoyed this tutorial, dont forget to social bookmark it.

Futuristic Layout #2 Tutorial: Final Result



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Futuristic Layout #2"