Advanced Search

How to Draw the Overhead Lighting Navigation from the Pizza House Template

This entry was posted By Cubert on Sunday, January 24th, 2010 at 7:25 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

This tutorial will show you how to use Adobe Photoshop to make a spotlight effect for use on a navigation on a website or a template (this effect was used in our Pizza House Template). The goal is to design a quaint, Italian restaurant style, hand written chalk looking menu board with charming overhead lighting.

You can download the Pizza House Template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

Step 1 – Setting up the Background Gradient

As usual, click CTRL-N for a new document to start with. Since we are only doing the header, set it 1000px X 133px and press OK.


Create a new layer and fill it with a brown gradient color using the Radial Gradient tool (Set Foreground color #b0390b and background color #290a03). Pull it from the center to left as shown below.


Step 2 – Making a Wood Grain on the Background

Now we have the background color ready, but we want it to look like a wood board as the platform for our classic Italian style pizza restaurant. So let’s add in some effects to make it look like realistic wood. Go to filter > Artistic > Film grain and use the settings shown in the below screen shot.


You will get the effect like this example:


Next, go to Filter > Blur > Motion Blur, then set the angle 0 degrees and the distance at 30 pixels. This spreads out all the static dots to long wood grain style lines.

motion blur

Step 3 – Burn it Up

Now, get the burn tool and burn both the corners of the board. Set the brush size to 300 to get a even burn.


Try your best to get the result like the below image. It’s pretty easy, just move your burn tool around both corners, and you will get the nice completed board background with some dramatic color.


Step 4 – Put a Logo on Your Board

Now we have the nice wooden board background ready, let’s start adding the logo and navigational elements on it. Starting with the logo, I used some fancy fonts (Euphorigenic – You can download it from for the site name of the pizza café. I named it the Pizza House.


However, It’s pretty plain just have the name on it right? Why not add in some doodles to make it more interesting? I have added a crown above the ‘P’ and a cup of coffee at the end of the House word. The crown and cup of coffee are actually icon fonts downloaded from as well, found under the name Eller. With these additional elements, the logo area is getting pretty cool, so let’s add in the slogan for the café, which is “A Lifestyle Café” (again you can download the fonts from – Fh_Nicole, color # ab4821)


Step 5 – The Source of the Light

Before we start on the navigation buttons, we first have to create the spotlight. This part of the design will require some basic drawing abilities. Add new layer (Shift+Ctrl+N), and raw a small semi circle then place it at the top of the navigation bar.


Step 6 – The Light’s Outer Glow

Remember to add new layer (Shift+Ctrl+N) each time before you start. Then let’s start with the back shadow for the lighting effect, grab your Elliptical Marquee Tool and draw a circle just like below.


Next, fill it with white linear gradient (set Foreground to Transparent) and pull from top to bottom. Set the layer opacity to 80% and go to Filter > Blur > Gaussian Blur > Radius 1.0 pixels.


Step 7 – The Lamp’s Middle Lighting Effect

Now for the 2nd lighting effect, it’s the lighting from the spotlight itself. Use your path tool and draw a shape like the below diagram.


Then go to your path layer window, make a selection and again use the gradient tool, but this time fill it with the radial gradient; just from top to bottom. Next, click on the layer and add mask. Mask both side of the lighting, and next add in the Gaussian blur as well.

Step 8 – The Lamp’s Main Light Beam

Now for the final lighting effect, again grab your pen tool and draw a triangle and make a selection just like below.


Fill it with the radial gradient as well, just like the previous lighting effect, and also apply the Gaussian blur as well.


Step 9 – Adding in Glistening Specks

Finally, add in some little circle around the triangle lighting just like below. How to do it? Just grab your Elliptical Marquee Tool and draw some small circle and fill it with white. You will get the result like the diagram below.


Step 10 – Adding Spots for Each Navigation Button

Yup, the spot light and lighting effects are done. Now, group all the layers together and duplicate 4 for each navigation button (To duplicate it, press Alt-Shift and pull the Lighting layer to the next position). If you have more than 4 buttons, you can just duplicate extras.

Select all layers together and press Ctrl-G to group them together and name the group Lighting.


Step 11 – Adding Text to the Template Navigation Buttons

All spotlights are installed at their positions, so it’s time for the few final steps is to add in the name for each navigation button. I used the Fh_Nicole fonts that shown for the logo slogan several steps up. Set the size 25px white color. I named the first button About Us – Pizza House.


Previously, I have prepared some little pizza ingredient vectors (there’s cheese, tomato, pepper and mushroom) to include in the button. Below is how I did it.

Step 12 – Add in the Rest of the Text

Continue to name all the buttons just like above and finally your nice Board like Menu Navigation is ready. Enjoy!


You can download the Pizza House Template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

Tags: , , , , , , , , , ,

('DiggThis') StumbleDelicious


Nice effect. I would have wanted to see a bit softer edges, but definitely a nice effect for that specific project…

Thanks and Regards

Noel for
a professional graphic design studio

Nice, looks very sweet. i will try to do this later.


pretty decent effect…. good for beginners…

Leave a Reply

  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost