Projector Icon Design Tutorial

What We’ll Be Creating

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.

Creating The Projector Top

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

Drag out a rectangle onto your canvas.

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

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.

You should end up with something like this.

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

You should have something like this.

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.

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

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

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.

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

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

You should have something like this.

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.

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

You should have something like this.

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

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

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”.

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

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”.

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

So far you should have something like this.

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

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

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

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

You should have something like this.

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.

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.

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”.

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

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

Now add the following layer styles to your circle.

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.

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”.

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%.

Conclusion

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

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