Futuristic Layout #2

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 πŸ™‚

34 thoughts on “Futuristic Layout #2”

  1. Thanks for the reply!
    Keep up the good work~
    Appreciated for your tutorials, helps me so much for doing my work πŸ˜€

  2. Great Tutorial. Got a question tho. How could i get this thing sliced properly? So the boxes reshape when the text is more or less.. So it doesnt get out of the borders?

    But really dude.. This is an amazing design!

    Greetz Oscar

  3. Amazing Tutorial! However, on the start bit with the polygonal lasso tool, how did you get the shape exact? because whenever i try, the two slopes are never the same size…

  4. well i sort of cheated, i created half of the shape then i just copied/pasted and fliped horizontally placed them side by side then merged them together πŸ™‚

  5. I dont know how I do for making the “out drag” from the blue circle. I tried with masking tool but I didnt get it :/

  6. Ok, this is really cool, BUT – I have a question.
    I have seen many sites that have this type of design quality, and now you just taught us how to do it.
    But here is the question :
    How you now take this and create different pages and active links for it, so it becomes an active website.
    this design is cool and all, but now I am just stuck with a design, but not an active website.
    Also I have seen sites like this that has parts moving and things blinking and all that cool stuff.
    What I also need to learn is how to transfer it to Flash CS3 or CS4 and actually create an active website from this.?

    Basically you taught us how to create the graphics for a cool site, but now how you actually create the active site ?

    I want to learn how to make website graphics and designs like 2advanced and many other popular website designers like them.

    thank you.

  7. Awesome, the least ppl can do is learn some css and translate the design as is, with some html knowledge, and stop bothering the creators of these wonderful tutorials with requests like the one above

  8. Hey guys, the first step isn’t qieut hard…but you need to know how you should do it…I used the Rulers to know what the middle of the picture was…and after that you should take a Guide to the middle of it…that’s how I did it..;) Great Tutorial!

  9. Hey, Is it good, that i translate this Tutorial to Dutch?

    As it is right, pls mail me, and say witch text you want into it.


  10. Great Work. Thanks Very Much,

    Here is what I ended up with.
    I have the design done. I even exported it as html/gif’s.
    Now how do I Make my links roll – Over with the blue neon glow (on the nav.bar)\
    And Omg this is hard to cut out im having problems. Can any one Slice it for me. And export it as html/gif’s or Jpg?
    I want it so I can write on the images insted of the current dummy-text. Can’t wait to finish this.

    Any help Please!

    Oh yeah and the spotlight effect is really hard to get. I’v Done it once before but lost it.

    email: thizzbayboyz@gmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *