How To Design A Detailed Printer Icon in Photoshop

In this tutorial we’re going to be creating a printer icon, suitable for both the web and print. We’re going to be basing the icon on a Canon printer/scanner I use on a daily basis, the MP610.

We’re going to be creating this icon in Photoshop – although it won’t be fully scaleable, we’ll be creating the icon at a reasonable size, therefore it should be big enough for most (if not all) purposes.

Illustrator may be the obvious choice for a lot of people when it comes to creating icons, but Photoshop offers that little bit more flexibility when it comes to creating realistic mock-ups due to its powerful tools.

Step 1

First of all, we need an image to refer to. As I own the printer that we’re going to be making, I simply took a photo of it myself. I took the photo using a tripod with macro enabled, allowing me to get great quality in the foreground of the image. Other areas are blurred, but as these are not the primary focal points, it will all add to the realisticness of the final icon. Here is the image I’ll be using, feel free to use the same one!

Open up Photoshop and create a new document. Use the RGB color mode and set the document size to 800×600 pixels.

Go to File > Place and locate your source image that you’ll be referring to throughout the tutorial. Resize it so it fits in your canvas nicely.

Lower the opacity of your source image, and lock the layer.

Step 2

We’ve finishing setting up the basics; now it’s time to start working! To create the main shape of our printer we’re going to be using the Pen Tool (which you should know how to use before reading this tutorial – the Pen Tool is a whole tutorial in itself). Create a new layer and grab the Pen Tool; start making a selection around the main shape of our printer. To make the icon symetrical, only select half of the printer, as seen below.

Right-click on your selection and select ‘Fill Path’; fill your selection with gray.

Rename your current layer to ‘Printer Base’ and then duplicate it by dragging the layer over the new layer icon, or by going to Layer > Duplicate Layer. Once you’ve duplicated your layer, go to Edit > Transform > Flip Horizontally, and then nudge your new flipped layer to the other side of your canvas using your cursor keys. Merge the two layers together by selecting them both and pressing Cmd+E or by going to Layer > Merge Layers.

Step 3

We basically need to repeat the last step until we’ve got plenty more layers. We need to use a similar process to create basic shapes for the black area of the printer, the inner silver area, and the open areas such as the mini-screen and paper feed section. Use the same technique to fill in a few more gaps, remembering to use new layers for every shape.

Once we build up enough simple shapes, we can start playing with gradient overlays and various other tools to start adding shadows and more realistic effects, but for the time being the best thing we can do is to keep building up various shapes until we have what looks like a simple vector image, although in this case it isn’t actually vector. Of course, if you prefer working with Illustrator, this side of things can be done using Illustrator, but to keep this tutorial based on one application I decided to use just Photoshop! Keep adding more shapes…

We’ve got the majority of our printer shapes done now, and it’s probably safe to say people could guess it’s on its way to becoming a printer. If your icon is looking the same way, it’s probably time to move onto some shadowing and detailing.

Step 4

Choose a shape to start on. In my case, I’m going to begin adding detail to the gray upside-down “U” shape. Locate the layer that your shape is on, right-click and select Blending Options. Click on Gradient Overlay, and select two or more colors that go well with that particular shape.

Keep repeating this process with the various different shapes in your canvas. Don’t forget to play with different gradient angles and types, such as linear or radial. One thing that may help before starting on lighting and shadowing is deciding what direction your source of light is coming from. In my case, the souce of light is directly in front of the printer, although yours may be from the left or right, in which case your left or right may be brighter than the other side.

By just adding some simple gradients to our shapes, we’ve already started to create a more realistic look.

Step 5

It’s time to add some more shapes, this time those of the printers built-in screen, handles and doors. Select the Polygonal Lasso Tool and draw half of a screen shape on the flap at the top of our design. Fill the selection with black on a new layer, duplicate it and flip it, as we have done previously in this tutorial.

Repeat the step again, this time filling the selection with a light gray. Go to Layer > Layer Style > Blending Options and apply a 2px medium grey stroke and an inner shadow to your screen.

Repeat this step for any other shapes you can find, such as the cracks and doors.

Step 6

With the majority of our shapes now added, it’s time to start adding some more detail using the Burn and Dodge Tools. I’m going to be using my Wacom Bamboo Graphics Tablet for this, however you can use your mouse if you don’t have one.

Put all of your layers in one folder, and duplicate it. Hide the original version, and flatten the new layers by right-clicking on the folder and clicking Merge Group. This will allow us to use the burn and dodge tools. Select the Burn Tool and start “burning” some areas. I’m going to start on the curves of the top of my printer.

Keep adding shadow and highlight areas around your printer icon until you have something looking a little more detailed such as this:

At the moment it’s looking pretty messy, but don’t worry, we’re about to fix that! Make your folder with the original layers in visible, and select your merged layer that we have just modified using the Burn and Dodge Tools. Decrease the Opacity of the layer to 70%, and change the layers blending mode to Overlay.

This gives the colors used in the icon a much more vivid look, and hides the messy-ness of the Burn and Dodge Tool work yet keeps it visible enough to make a huge difference.

Step 7

Grab the Text Tool and add some text to your design.

With your type layer still selected go to Layer > Rasterize > Type, and then go to Edit > Transform > Warp. Drag the bottom corners out just a few pixels so it is in line with the edge of the printer screen and flap.

Step 8

We’re pretty much done! Of course there is a lot more you can add, such as stickers or the inside of the printers. I wanted to keep mine pretty simple though, and here it is. To set it up so its ready for being used as an icon, we’ll want to make the background transparent and reduce the size a little. Delete the background layer of your document, and merge all of your layers together by selecting them all, right-clicking and selecting Merge Down.

Go to Image > Image Size and reduce the total image size by 50%.

Go to File > Save for Web & Devices. Select PNG-24 (this is a high quality PNG file). The reason we are using a PNG file type is because it reserves the quality and allows us to keep a transparent background. Make sure transparency is selected and click save.

You can keep reducing the file size until you have a set of icons in all different sizes. These are great to use for the web or print, all you have to do is convert the color mode to CMYK.

Outcome

Download Files And More!

We did 6 more icons in the same style and made the whole set available for free. There’s of course our printer icon, but also a usb drive, photo camera, laptop, monitor, cell phone and a speaker. So, make sure you stop by MediaLoot and download this free icon set. :)