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

Futuristic Layout #2


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

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.

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.

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.

image 4

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.

image 6

image 7

image 8

image 9

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

image 10

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

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.

image 12

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

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.

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.

image 15

Next create to shapes similar to this.

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.

image 17

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

image 18

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

image 19

image 20

image 21

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

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.

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.

image 24

Begin to add your content to your other two boxes.

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.

image 26

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

Futuristic Layout #2



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 Layout #2"

Captcha