Projector Icon Design Tutorial

In this tutorial, you'll go through easy steps and techniques to design a simple yet attractive projector icon. It's easy to follow and to play with.

What We’ll Be Creating

Projector Icon Tutorial

Lets Get Started

Create a new document (Ctrl + N) 800 x 600 pixels with any colored background. Right-Click the “Background Layer” and select “Layer From Background” from the fly out menu, doing this will enable you to add layer styles to your background layer. Once the background layer is editable add a gradient overlay using the settings below.

Projector Icon Tutorial

Creating The Projector Top

Select the “Rounded Rectangle Tool” with a radius of 20px, make sure the path type is set to “Shape Layers”.

Projector Icon Tutorial

Drag out a rectangle onto your canvas.

Projector Icon Tutorial

Once you’ve dragged out the rectangle go to “Edit > Transform > Skew”, skew the shape like the image below.

Projector Icon Tutorial

Once you’ve skewed the shape go to “Edit > Transform > Warp”, once you’ve selected the warp tool drag the middle and bottom of the shape so the top and bottom edges curve up.

Projector Icon Tutorial

You should end up with something like this.

Projector Icon Tutorial

Label your shapes layer “Top” then add the following layer styles.

Projector Icon Tutorial
Projector Icon Tutorial

You should have something like this.

Projector Icon Tutorial

Making The Projector Top 3D

Duplicate the “Top” layer, drag it underneath the original layer then label it “Top Bottom”. Right click the duplicated layer and go to “Clear Layer Styles”, once you’ve cleared the layer styles move the shape down a couple of times until you have something like this.

Projector Icon Tutorial

Select the “Rectangle Tool” (U), then click the shapes path whilst holding down the “Ctrl” key on the keyboard.

Quick Tip:

When you click the shape whilst holding down the Ctrl key the shape selection is represented by a black 1px stroke with black anchor points.

Change the path type to “Add To Shape Area”.

Projector Icon Tutorial

Now hold down the shift key and make a square on the left side of the shape so we get a nice straight edge joining to the top shape.

Projector Icon Tutorial

Repeat the above step for the other side of the shape. You should now have something like this.

Projector Icon Tutorial

To your “Top Bottom” layer add the following layer styles.

Projector Icon Tutorial
Projector Icon Tutorial

You should have something like this.

Projector Icon Tutorial

Creating The Projector Body

Select the “Rounded Rectangle Tool” (U) with a radius of 20px then drag our a rectangle underneath your other shapes. Once you’ve dragged out the rectangle label the layer “Body” and drag it to the bottom of the stack above your background layer. So that the body sort of matches the contours of the top go to “Edit > Transform > Warp”, drag the middle bottom square on the warp tool and drag downwards a touch so that the base of the body is nicely rounded.

Projector Icon Tutorial

Now we have the basic shape for our body lets add some layer styles.

Projector Icon Tutorial
Projector Icon Tutorial

You should have something like this.

Projector Icon Tutorial

Right-Click the “body” layer and go to “Convert To Smart Object”.

Quick Tip:

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

Once you’ve converted the “Body” layer to a smart object add some noise. Go to “Filter > Noise > Add Noise”, use the settings below.

Projector Icon Tutorial

Creating The Projector Lens

Select the “Circle Tool” (U) then drag out a big circle on layer above all the rest, label the layer “Lens Big”.

Projector Icon Tutorial

Once you’ve made the circle add the following layer styles.

Projector Icon Tutorial
Projector Icon Tutorial

Select the “Circle Tool” (U) again and make another circle inside the bigger circle but abit smaller. Do not place the new circle in the center of the bigger circle, place it towards the bottom. Finally label the new circle “Lens Bigger Inner”.

Projector Icon Tutorial

Now add a gradient overlay to your new circle layer using the settings below.

Projector Icon Tutorial

So far you should have something like this.

Projector Icon Tutorial

Select the “Circle Tool” (U) again and create another smaller circle inside the “Lens Bigger Inner” circle, label the new circle layer “Black Lens”.

Projector Icon Tutorial

Add the following layer styles to the “Black Lens” layer.

Projector Icon Tutorial
Projector Icon Tutorial
Projector Icon Tutorial

Still with the “Circle Tool” (U) create another smaller circle inside inside of the black lens. Label your new circle layer “Pink Lens”.

Projector Icon Tutorial

Now add the following layer styles to your “Pink Lens” layer.

Projector Icon Tutorial
Projector Icon Tutorial

You should have something like this.

Projector Icon Tutorial

Finally we need to create one more circle which will be the lens shine. Grab the “Circle Tool” (U) then create a small white circle at the top of the pink lens.

Projector Icon Tutorial

Label your white circle layer “Lens Shine” then add a layer mask to the layer. Drag a linear gradient from the bottom of the lens upwards until you have something like this.

Projector Icon Tutorial

Detailing The Body

Select the “Pen Tool” (P) with the color black (#000000) set as your foreground, draw a line near the top of the body from side to the other side. Once you’ve drawn one line duplicate it and nudge it down 1px. Change the color of the duplicate line to white (#ffffff) then merge the two line layer together and set the layer blend mode to “Overlay”.

Projector Icon Tutorial

Duplicate the lines layer then nudge the duplicated layer down a couple of times, you should have something like this.

Projector Icon Tutorial

Next, select the “Circle Tool” (U) and create a small circle on the left side of the body.

Projector Icon Tutorial

Now add the following layer styles to your circle.

Projector Icon Tutorial
Projector Icon Tutorial

Now duplicate the circle 5 times, move 3 of the circles to the right leaving 3 of the circles on the left side of the projector body. Nudge the circles down so all the circles are staggered.

Projector Icon Tutorial

Creating The Projector Shadows

Duplicate the “Top Bottom” layer then shift it down a couple of pixels. Right-Click the duplicated “Top Bottom” layer then go to “Clear Layer Styles”, Righ-Click once more and go to “Rasterize Layer”. Now blur the layer by 2px using the guassian blur “Filter > Blur > Guassian Blur”.

Projector Icon Tutorial

Next, duplicate the “Body” layer then rename the duplicated layer “Body Shadow”. Drag the new layer underneath the original then Right-Click and go to “Clear Layer Styles”, Righ-Click once more and go to “Rasterize Layer”. Nudge the “Body Shadow” layer down a couple of times then blur it by 2px using the guassian blur “Filter > Blur > Guassian Blur”. Finally set the opacity to 50%.

Projector Icon Tutorial

Conclusion

You should now be able to resize the image and use it as an icon.

Projector Icon Tutorial

That’s it you’ve completed the tutorial. Thanks for reading, if you’ve finished the tutorial I’d love to see your results.

About Author

Tom loves to write on technology, e-commerce & internet marketing.
Tom has been a full-time internet marketer for two decades now, earning millions of dollars while living life on his own terms. Along the way, he’s also coached thousands of other people to success.