Create a detailed futuristic navigation menu using different photoshop tehniques

Navigation menu

Step 1.

In this tutorial using photoshop you are going to learn on how to make an advanced layout. This tutorial requires advanced photoshop knowledge because we are going to use tools like the pen tool.

Step 2.

Make a new document using a regular website size. I chosed 800×600 but there are several standard sizes that you chose from for example :1024×768. Choose the base color a dark teal or any color that you want. You have to use your creativity to pick great colors. But note there are no Ugly colors. If you know how to use them they all are beautiful.

Now chose the size of your header using the rectangular marquee tool make the selection and on a new layer fill the selection with any color I chosed a teal color but I will change it soon.

Step 2.

Now here comes the hardest part. Pick the Pen tool using the settings below:

Make a new layer and be very carefully. Use the image below if you have any difficulties. Start from Point 1 and pressing countinously the mouse button click on Point 2. Then go carefully up with the mouse cursor untill the shape is getting good. Now close the selection by getting the pen to the start point 1.

Step 3.

Now right click in the middle with the pen tool still on and select Make Selection…

Now with the selection on make a new layer if you haven’t made any already and fill it with any darker color I chosed #74632E.

Now add the following layer styles:

Inner glow:

Stroke:

This is what I got untill now :

We are going to add some shine and glow to the shape so press Ctrl+click on the shape layer to select it. Now select any marquee tool and use

the arrows to move the selection up.

If you are pleased with the size of the shine make a new layer and fill the selection white and lower the opacity to 40%.(check image)

Step 5.

Now we are going to add the glow so make a new layer and use a soft brush using white color brush the top like in the image below:

Now go to Filter>Blur>Gaussian Blur… using a 36 pixels radius

This is a review of what you should have got untill now:

Step 6.(aditional step)

This step is aditional and requires a bit of skills. duplicate the shape layer one time and select it by using ctrl+click then using what you learned in step 4. move the selection up and delete. There will still be a left part so right click on it in the layers table and clear layers style. Then change blending to Color burn. Then repeat the step using a smaller selection and change blend to color dodge.

Step 7.

Now add your text and add a outer glow with the settings below:

This is what I got :

Step 8.

Now using again the pen tool using the steps I showed you last time make another selection like mine and fill it with #74632E.

Now go back to the first shape layer and right click on it Copy Layer style and then back to the latest shape layout and right click Paste Layer style

Now repeat Step 4 for this tutorial but be carefull the selection will get over the image and the shine will be in all the places so after you made the shine layer and lowered opacity to 40% Press CTRL+G.

Now on a lew layer pick again a soft round white brush and brush like I did :

Now go to Filter>Blur>Gaussian Blur… and press Ctrl+G again.

This is what I got :

After repeating step 6. and adding some shapes I got this :

You can notice I have changed the background aswell.

After adding some burn and dodge and more details to the shapes I got this :

This ends the tutorial. I wish you good luck.