SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Design A Detailed Printer Icon in Photoshop

May 19, 2010 by Callum Chapman 11 Comments

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!

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

Printer Photoshop Tutorial

Printer Photoshop Tutorial

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…

Printer Photoshop Tutorial

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

Printer Photoshop Tutorial

Printer Photoshop Tutorial

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.

Printer Photoshop 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.

Printer Photoshop Tutorial

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

Printer Photoshop Tutorial

Printer Photoshop Tutorial

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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.

Printer Photoshop Tutorial

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

Printer Outcome

Download Files And More!

MediaLootYou can download this icon (and 6 more icons) in 32×32, 64×64, 128×128 and 256×256 along with the PSD file for free by heading over to MediaLoot →

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. :)

Filed Under: Design, Photoshop, Tutorial

Comments

  1. astho - web designer says

    May 19, 2010 at 1:16 pm

    This is cool.., very usefull..
    thanks

  2. Sarah William says

    May 19, 2010 at 1:18 pm

    Great tut.simple and effective..the outcome is superb..thanks..

  3. Kimcool says

    May 19, 2010 at 11:15 pm

    Nice tutorials! The step is so great

  4. AEXT.NET MAGAZINE says

    May 20, 2010 at 2:28 am

    Great design and tutorial, but I don’t like Canon :D

  5. Callum Chapman says

    May 20, 2010 at 10:07 am

    Thanks everyone, glad you like it!

    @AEXT.NET Magazine: Lol! Maybe we’ll look into doing another printer icon just for you. How does an Epson sound? :D

  6. WebCreationUK says

    May 21, 2010 at 7:12 am

    It’s awesome! Thanks dude!

  7. sriganesh says

    May 24, 2010 at 10:19 am

    nice outcome ! like it brother :D

  8. Steve says

    May 27, 2010 at 10:28 pm

    nice outcome ! like it brother :D

  9. InkOasis says

    June 2, 2010 at 3:49 pm

    Pretty cool! Now if I can just find my Photoshop icon :)

  10. Abdul Akbar says

    August 9, 2010 at 3:12 am

    I don’t like the details and outcome of the icon…

  11. Callum Chapman says

    August 9, 2010 at 9:09 am

    @Abdul Akbar: The title does suggest it is a detailed icon, not a minimal one! ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022