Designing a glow menu with photoshop

What’s up folks?. It’s time for a new Photoshop Tutorial. In this case, a special one for those who are starting to work on the web market or are beginning to create one of their one. We will be working with custom brushes, layer styles and other items. Well no more talk, let’s get it started.

1. Take a look at other websites

Before start making our menu header, it’s recommendable to first take a look around some other websites which shows you menu header examples. Some good sources are DeviantArt and Flickr, so feel free to take a minute and take a look at these pages.

2. Sketch for a while

I know we are working with something entirely made for the web, but its still useful to place some of your ideas on paper first, its always good to work on you drawing skills, because they can be useful when you need to take a quick note and don’t have a computer close to you.

3. Create Canvas

For start, go to File>New and assign to the canvas the following measures: 1071 px X 287 px. Also remember to keep the color mode in RGB and the dpi at 72, which are the two standards for screen work.

4. Defining the background

Go to Layer>New Fill Layer>Solid Color and choose a dark blue, now we have the main background of our header.

5. Making the menu

The next thing to do is to create the main menu element. To do this, select the rounded rectangle tool and adjust the radius in the menu above to 13 inches, also make sure that you are making it as a path

Now let’s add it some color. Go to Layer>Layer Mask>Reveal All.

Go to to Layer>New Fill Layer>Solid Color and choose a dark gray.

Lets play with the layer styles. First add “Gradient Overlay” and adjust the parameters to blend>normal, opacity>30 %, a blue gradient which you can modify by double click over it and then over the house shaped icons to change it. leave the style on linear, angle>90 and scale>100 %.

Now “Bevel and Emboss”, remember that you can access to the layer styles within the button found under the layers next to the mask button. Enter the parameters style>inner bevel, technique>smooth, depth>100 %, direction>up, size>0 px, soften>0 px, angle>90, altitude>32, highlight mode>screen, opacity>75 %, shadow mode>multiply, opacity>75 %.

The next layer style to add is “Drop Shadow”; select it and then adjust the parameters to blend mode>multiply, opacity>32 %, angle>150, distance>0 px, spread>0 %, size>5 px and noise>0 %.

We are going to add the “on press” appearance to our menu, so we need to use one more time the rounded rectangle tool and keep the parameters as we used it before, then draw the shape inside the main body.

Go to Layer>New Fill Layer>Solid Color and select a black 100 %, then go to the layers menu and reduce its fill value to 20 %. The object is now ready for some extra edition.

Lets add some layer styles. First add “Inner Shadow” and adjust the values to the blend mode>multiply, opacity>37 %, angle>135, distance>2 px, choke>0 %, size>2 px and noise>0%.

Now select “Drop Shadow” and change its parameters to blend mode>screen, opacity>32 %, angle>150, distance>1 px, spread>0 %, size> 0 px and noise>0 %.

OK, I thing we are doing fine, so far we have chosen a background color, made the menu body and an “on press” button. Our next step is going to be the glow, so here we go.

6. The Glow

Making the glow requires a series of steps, although they’re long, they’re easy to do as well. We are going to create a personalized brush. To do this, save all changes of our header document and without closing it, lets create a new file of 220 x 220 pixels, RGB mode and 72 dpi.

Now we must draw a random drawing over our canvas. Select the brush tool and make something like this:

We are going to turn this design into a personalized brush. Go to Edit>Define Brush Present and hit OK.

Lets go back to our header file and look for the brushes window. If you don’t see it click on Window>brushes, then select the brush tool.

This part is a constant game of adjustments and testing. Select our custom brush at the brush menu on the upper part of the program, then you must play with the different options until you get a smooth fade brush. You must only work with the “Shape Dynamics” option, all the others don’t apply in our case.  After a while we came out with a nice brush of this characteristics:

We decided to leave everything at 0 %, but you can play with this values. Also remember to leave the “Size Jitter” control in Pen Pressure, the “Angle Jitter” in Direction and the “Roundness Jitter” control Off.

On the Brush Tip Shape menu, leave the diameter at 30px and the Spacing in 1 %.

OK we are almost done with this part. Now we must draw the path where our custom brush will be passing through. Select the pen tool and draw something like this:

Using the direct selection tool (white arrow), right click over the path and choose “Stroke Path”.

Select Brush and activate the Stimulate Pressure field, then hit OK.

Now we have our initial glow, you must be seeing something like this on your screen:

OK, as we continue, why not go and grab some food from the kitchen?, we need a lot of energy to complete this tutorial.

Now lets add some layer styles to complete our glow. First add “Gradient Overlay” and adjust the values to blend mode>pin light, opacity>40 %, a blue gradient like the one we did before, style>linear, angle>90 and scale>100 %.

Next is “Outer Glow”, select it and adjust its parameters to blend mode>linear dodge(add), opacity>52 %, noise>0 %, technique>softer, spread>1 %, size>24 px, range>57 % and jitter>0 %.

Finally “Drop Shadow”. Change its values to blend mode>multiply, opacity>75 %, angle>41, distance>6 px, spread>0 %, size>49 px and noise>0 %.

Next, select the eraser tool and choose a smooth brush, then change its opacity to 27%. We are going to light up some parts of the glow to give it a nice touch.

Now click once over the glow’s tail, then decrease its diameter and click over the glow’s head, its a subtle effect that gives a nice touch to the artwork we are doing.

Pretty cool so far, isn’t it?, now the final steps.

7. Finishing our Header

We must now make the menu items. Select the Text tool and write for example, “Home”, if your wondering about the font, we used Arial. Place it at the left side of our menu. Go to the layer menu and change the text fill value to 0 %.

Now some layer styles. Lets start with “Color Overlay”. Adjust its parameters to blend mode>normal (white color) and opacity>100 %.

Next is “Drop Shadow”, select it and switch its values to blend mode>multiply, opacity>75 %, angle>120, distance>1 px, spread>0 %, sixe>3 px and noise>0 %.

OK we are almost there. Now we must complete the menu. Using the text tool enter the following words and place it over the menu: Portfolio, Products, About Us and Contact Us.

All the words have the same layer style that we gave to Home, so lets copy these values by right click over the Home layer and select Copy Layer Style.

Now right click over each text layer and select Paste Layer Style, that way all our menu items will be looking the same.

Well guys, that’s it, we have learned to create a good looking menu header, ideal for your website applications, From here we hope that you have enjoyed this tutorial, we will be bringing soon new tips just for you, until the next time.