the Empire Dezign Learning Center

Sci-fi Menu

We'll begin this tutorial, by creating a new canvas at a size of 495 x 121 with 282828 as the background color.

Next, download the Sci-fi Menu Pack" and choose Open. This will install the two custom shapes that I have readied for you to use for this tutorial.

Or, for those of you who are familiar with the "Pen Tool" and it's options you can always pen them out instead.

Then choose the "Custom Shape Tool" and find the "Menu Frame" shape. Use White as the color and draw the shape as I have done below. Name this layer "Menu Frame" in the Layers palette.

		Now right click on the " Menu Frame " layer and select, "Blending Options...". Now click on "Drop Shadow".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on "Inner Glow".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on " Color Overlay".
			use settings at left
		You may now click OK.

You should now have the below image.

Next, find the "Menu Window" shape. Use 009cff as the color and draw the shape as I have done below. Name this layer "Menu Window" in the Layers palette. Now drag the "Menu Window" layer so it is beneath the "Menu Frame" also in the Layers Palette.

		Now right click on the "Menu Window" layer and select, "Blending Options...". Now click on "Inner Shadow".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on "Inner Glow".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on " Color Overlay".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on " Gradient Overlay".
			use settings at left
		You may now click OK.

You should now have the below image.

Select the "Text Tool" and use the below settings. Download the typeface here.

Now type your prefered menu items.

Next, grab the "Rectangle Tool" and draw a rectangle using White as the color. Name this layer "Gloss" make certain that it is above the "Menu Window" layer in the Layers Palette. Then turn the Fill down to 10%.

Now create a new layer and place above all other layers in the Layers Palette and fill with Black. Name this layer "Noise" in the Layers Palette.

Next go to the main menu and choose "Filter" then "Noise" and lastly "Add Noise" using the below settings.

You should now have the below image.

Now change the Blending Mode to Screen to get the following.

Now "Ctrl" click the "Menu Frame" layer to create a selection. Make certain that you are on the "Noise" layer in the Layers Palette then go to "Select" then "Invert" and lastly "Edit" and finally "Cut". Now turn the Fill down to 18%.

Then select the "Elipse Tool" and draw a circle as illustrated using White as the circle color.

		Now right click the circle layer in the layers palette and select, "Blending Options...". Now click on "Inner Glow".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on " Bevel and Emboss".
			use settings at left
		Do not click "OK" yet. Still more to do.

		Now click on " Gradient Overlay".
			use settings at left
		You may now click OK.

You should now have the below image.

The Results!!!

After duplicating the circle layer and placing them to the remaining three corners atop the interface this tutorial is done. To view the rest of the design click the below image. I hope you enjoyed this tutorial.

To ready this for html use the information at the followig link:
psdtohtml

against a white background

Comments