SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Drawing Techniques Projector Icon Design Tutorial

Projector Icon Design 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.

image 1

Creating The Projector Top

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

image 2

Drag out a rectangle onto your canvas.

image 3

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

image 4

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.

image 5

You should end up with something like this.

image 6

Label your shapes layer "Top" then add the following layer styles.

image 7

image 8

You should have something like this.

image 9

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.

image 10

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

image 11

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.

image 12

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

image 13

To your "Top Bottom" layer add the following layer styles.

image 14

image 15

You should have something like this.

image 16

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.

image 17

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

image 18

image 19

You should have something like this.

image 20

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.

image 21

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

image 22

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

image 23

image 24

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

image 25

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

image 26

So far you should have something like this.

image 27

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

image 28

Add the following layer styles to the "Black Lens" layer.

image 29

image 30

image 31

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

image 32

Now add the following layer styles to your "Pink Lens" layer.

image 33

image 34

You should have something like this.

image 35

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.

image 36

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.

image 37

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

image 38

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

image 39

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

image 40

Now add the following layer styles to your circle.

image 41

image 42

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.

image 43

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

image 44

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

image 45

Conclusion

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

Projector Icon Design 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 THE AUTHOR

Richard Carpenter Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.
subscribe to newsletter