September 6th, 2008 in Photoshop Tutorials by Richard Carpenter
Futuristic Layout #2
42 Votes, Rating: 4.71
Loading ...
Create a new document 850×850 pixels with a black background. Select the polygonal lasso tool and create a shape like this.
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.
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.
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.
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.
Move your shape to the very top of your canvas and your result should look similar to this.
Create a white rectangle with the opacity at 10% across the top half of the shape.
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.
Add your navigation text and site title/logo/slogan to your shape. (color code for the blue text is #1a88e4).
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.
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.
Next create to shapes similar to this.
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.
Again using the color #1a88e4 add a 1pixel line underneath each navigation item.
Select the rounded rectangle tool with a radius of 10 create a big box underneath your naviagtion and add these layer styles.
Next add your logo but a much bigger version inside the box, then add abit of information about your company.
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.
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.
Begin to add your content to your other two boxes.
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.
Thats it all done, hope you enjoyed this tutorial, dont forget to social bookmark it :)
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
48 Responses to “Futuristic Layout #2”