the Empire Dezign Learning Center

Aqua Blue Media Player

This tutorial is quite long and may prove to be a bit tedious to some, so instead of having you draw out ALL of the shapes, I will give you options to cut the journey in half. You can either download the "Sci-fi pack" which includes a large majority of the interface shapes, or you can get some extra practice with the Pen Tool and draw them yourself. For you overachievers out there, you may want to create your own look of the shapes.

So let's begin the journey, shall we? Here is a screenshot of the final.

To begin, create a new canvas at a size of 350 x 194 with 041728 as your color or a dark color of your choice. Then choose the "Custom Shape Tool" and find the "frame1" shape. Use White as the color and draw the shape as I have done below. Name this layer "Frame 1" in the Layers palette.

		Now right click on the "Frame 1" 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 " Gradient Overlay".
			use settings at left
		You may now click OK.

You should now have the below image.

Next, find the "frame2" shape. Use 222222 as the color and draw the shape as I have done below. Name this layer "Frame 2" in the Layers palette.

Next, duplicate the "Frame 2" layer and change the color to White and name this layer, for lack of a better name, "Frame 2a".

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

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

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

You should now have the below image.

Then, find the "frame3" shape. The color of this particular shape doesn't matter at this point. Then draw the shape as I have done below. Name this layer "Frame 3" in the Layers palette.

		Now right click on the "Frame 3" layer and select, "Blending Options...". Now click on "Gradient Overlay".
			use settings at left
		You may now click OK.

You should now have the below image.

Next, find both the "leftinner" and "rightinner" shapes. The color of these particular shapes are Black. Then draw the shapes as I have done below. Give these layer names the same name as their shape names. Example: "Left Inner" and "Right Inner".

Next, find both the "leftarm" and "rightarm" shapes. The color of these particular shapes do not matter at this point. Then draw the shapes as I have done below and give these layers names as done above.

		Now right click on the "leftarm" and "rightarm" layers and select, "Blending Options...". Now click on "Gradient Overlay".
			use settings at left
		You may now click OK.

You should now have the below image. The frame of the Media player is now complete. We can now begin working on the display of the player. Please select "Page 2" below to continue.

Page 1

Page 2

Page 3