09/04/2010 - Blogger.Iconshock

Photoshop Tutorial: Realistic, High quality printer icon

In this long tut we will make a lot of use of vector masks and layer styles in Photoshop in order to create a slick looking ink printer reminiscent of some Canon and HP ink printers. So let’s begin!

1. Gather your references

When we are depicting real life objects, the best way to start is to go to find various pictures of your objects. Try to find objects in different angles and lighting conditions so you can build in your mind a thorough palette of the characteristics of what you are going to recreate. Google images, Flickr and Creative commons are great sources if inspiration.

2. Sketch away.

Grab your good old pencil and paper and sketch what comes into mind. No thinking about canvas, brushes or filters. Just draw.

3. Create canvas.

In this tutorial, we are going to make a huge 512x512 icon. File>New>Width/Height = 512. Resolution 72 DPI and RGB Color mode. We don’t need more than 72 dot per inch because icons are not meant to be printed.

3. Create your first shapes.

Choose the rectangle tool and draw a simple rectangle. Congratulations! We have just created our first vector. You can tap your back repeatedly as a sign of auto encouragement. … Sorry, just kidding.
You can see your newly created path at the path palette. Now pick your direct selection tool (the white arrow) and nudge the vertices a bit inwards so the side lines are a not straight but rather slightly diagonal.
Always remember, the white arrow is to pick elements of a vector mask, like vertices, lines or beizer handles. The black pointer selects the entire path.

4. Our first Fill layer

Pick the path selection tool (black arrow) and click on the rectangle either on the canvas or on the path palette. Go to Layer> New Fill layer> Solid Color… Pick a black color in the color picker. You will see your layer like something as this
Now we have the rough element. (In this case the paper input tray). We will polish the element with the easy to use layer styles.

5. Applying Layer styles

Click on the “Add Layer Style” button at the bottom of the layer window. You will see a drop down with all the options.
We will apply three layer styles to almost all elements. Let’s begin with “Gradient Overlay”
Choose a Black to dark Gray gradient, 100% Opacity, Angle 90, Scale 100%. Using Gradient Overlay is an easy way to give lighting to your elements and is very recommended for icon work.
Now let’s apply “Bevel & Emboss” to give a bit of fake and easy 3D.
Move around your parameters intuitively until you achieve the right look.
Now let’s apply Inner Glow to add some highlight and definition.
Enter Opacity 33%, Softer Edge, Size 5, Quality Range 50%. Check out the final result.

6. Create the paper sheet.

Choose the rectangle tool and draw a rectangle for the paper sheet.
Change the pen tool to the Convert point tool. (Hold Click on the Pen Tool)
Click on the upper vertices and drag the beizer handles to give the rectangle a little curve so it looks more organic, like a real sheet of paper. If you want to break the handles so you can use different curvatures on each side of the vertices hold the SHIFT key and drag. You can also add vertices at other points of the lines to give more curvature if you want to.
Then go to layer, New fill layer, solid color. Pick a pure white color.
Now that we have our basic shape, we will proceed to apply our layer styles. This is basically the same process to all your objects in this tutorial. Create shape and later apply the layer styles that suit best the specific element. Let’s first create a 1 pixel gray stroke around the paper sheet to give it definition. A good tip is to always try to give a stroke around white objects when you are working in icon design.
Then choose Gradient overlay and give it a white-gray-white gradient. You can pick your gradient type by clicking on the gradient pulldown.
If you want to, you can apply a slight inner glow as last finishing touch.

7. Create more paper sheets.

Copy the layer we have just made, by right clicking on the layer and choosing “duplicate layer”. Then choose the “Move Tool” and nudge the layer downwards until it gives the impression of a stack of paper.
Repeat the process and make another sheet.
We are beginning to have too many elements, and later on it could become a real mess. An easy way top organize your layer stack is to group your elements. Choose your three layers (CTRL click) and press the “Create a new group” button.

8. Create the lower base of the printer

We have just finished our first group, containing the paper tray and some paper sheets. Now let’s dig into the printer’s body. Let’s begin with the lower base of the printer. Choose the rectangle tool and make a rectangle path.
TIP: You can nudge, move and rotate paths by using the Path Selection Tool Go to the menu Layer>New Fill Layer>Solid Color…Pick a middle gray. We used R:139 G:139 B:139.
Now let’s add layer styles like in step 5. Pick Bevel and Emboss. This effect always gives an easy and controllable 3D feel. We used here a 3 pixel smooth inner bevel. There are tons of options to play with so there is plenty of room for experimentation. Good thing these parameters are always editable.
Now add our second layer style, a Gradient overlay to give some highlights. We used a transparent-white-gray overlay at 75% opacity.
Now add a transparent to gray 2pixel stroke.

9. Create the white plastic of the Printer body

Create another rectangle path but this time with the rounded rectangle tool. Pick a 5px corner radius.
Then choose the Direct selection tool and tweak the corners so they look something like this:
Now apply some layer styles. First go for a Bevel and Emboss. Check out the values we used.
Now add a Gradient Overlay effect with a transparent-white-Black gradient.
Now add a 2 pixel gray stroke as a finishing touch. We have just added without much effort shine, lighting and volume to a simple rectangle. How about that?
We are half way there. At this point you must have something looking like this.

10. Reflection

Reflection is a property that depends entirely on the environment. We have to fake an environment for the printer’s plastic to reflect. In this case, we chose a simple wave shape. But you can use a window grid, leaf patterns or whatever you feel suits your icon better. Pick the pen tool and draw your reflection shape. Then go to the menu Layer>New Fill layer>Gradient. Pick a transparent to white gradient.
Now on top of that, apply a Gradient overlay layer style effect.

11. Black plastic panel

Pick the rounded rectangle tool and again, draw a rectangle path. Lower the corner radius to 2.
TIP: Always change the corner radius before you draw the rounded rectangle. Now tweak the corners with the direct selection tool to give a bit of perspective. Then choose again a Solid color fill layer and pick a middle gray. We used R:60 G:65 B:70
Now we are going to apply 4 layer style effects. First an Outer Glow to give the illusion of a 3D fit within the white plastic element.
Now give some lighting with a Inner glow.
With some Bevel and emboss we can give complete three dimensionality to a simple 3D shape.
To finish, let’s add a black to transparent Gradient overlay to give some contrast.

12. Frontal Reflection

Now let’s create a basic shape for the frontal reflection. We chose a triangle. Pick the Pen tool and create your path.
Let’s do a more controllable and fancy gradient this time. Go to the menu Layer>New Fill Layer>Solid Color… Pick a pure white color. Then select again your active layer to confirm by clicking on it, and go to the menu Layer>Layer mask>Reveal all. A white box will appear in between your path and the Solid Color Fill.
The layer mask will let us perform a control gradient exactly where we want it to be. Pick the Gradient tool at the tool bar, and choose Black to white linear Gradient from the tool options bar.
Apply a left to right gradient over the triangle shape we drew earlier. You must turn out with something like this.
Then apply the Gradient Overlay Layer style effect.

13. More details.

Now let’s do some details. Pick up the rectangle tool and draw a narrow rectangle over the top surface of the printer. Choose the direct selection tool and nudge the upper vertices a bit so the rectangle is aligned with the same perspective as the sides of the printer. Go to menu Layer>New Fill layer>Solid Color… And choose straight black.
Now apply some layer style effects. First we are going to apply Inner glow and then Gradient Overlay.
Now, right click on the layer’s name to display more options. Pick Duplicate Layer… Choose that new layer and move it sideways to make the detail symmetrical.

14. The brand label

Now, choose an Ellipse tool and draw an ellipse path at the center of the printer top surface. As with most of the elements in this exercise, go to the Layer menu, and apply a Solid color Layer fill. We chose black.
Now apply some layer style effects. First let’s go for some Inner Glow and then for some Gradient Overlay.
Let’s create the label highlight. Right Click on the layer’s name again, and duplicate the layer. Pick the direct selection tool and tweak the path.
Double Click on the Solid Color fill and change the color to white.
Click on the little eye aside the inner glow layer style effect to turn it off and double click the Gradient Overlay to edit it.

15. Exit paper tray

Draw a rectangle on the front of the printer with the rectangle tool.
Again let’s choose a Solid color layer fill. This time black. If you forgot how to do it, first you have to go and by some vitamins, and second, go to menu Layer>New fill layer>Solid Color…
Doesn’t look much now. But check out how it can be transformed with no additional drawing. Just by the magic of layer style effects. First go for an inner glow. Then for a Bevel and emboss.
How about that! No extra drawing. The trick here is to match the lighting and shadows with the all the rest. Pick the rectangle tool again and draw the tray. Tweak the vertices with the Direct selection tool so it has some perspective.
Turn it black with a Solid Color Layer fill.
Apply some inner glow.
Some Bevel and emboss.
And some Gradient overlay.
The tray is now ready.

16. Tray finishing details

Let’s give a bit more of depth and lighting to the inside of the printer. Draw a rectangle just above the tray. Use the rectangle tool.
Menu Layer>New fill layer>Solid Color… Choose black. Then apply layer styles Gradient Overlay.
Now let’s make yet another rectangle.
Again, Menu Layer>New fill layer>Solid Color… Choose black. Then apply layer styles Gradient Overlay.

17. Printed paper Sheet.

Now our last finishing touch. A nice printed paper sheet. First, find some image in Google. We chose this one.
Use “CTRL+T” to resize properly. Just drag the handles until you have a satisfying size.
Now let’s give some perspective by applying skew. Press “CTRL+T” again if you already accepted the previous transformation and right click on the object. Choose Skew from the menu.
Move the upper handles just a bit so the transformation gives the illusion of perspective so it matches the rest of the printer.
Now apply layer styles and give it a white stroke to give it more realism. No printer ever prints to the very edge of the paper.
Let’s add some gloss to the paper. Make a curved path over the paper for the reflection area. Choose the pen tool or tweak a rectangle to create it.
Menu Layer>New fill layer>Solid Color… Choose white.
Then apply layer styles Gradient Overlay.
Now let’s do the shadowing and overlapping so the sheet of paper actually looks as if where sliding out of the printer. Create a new group containing all the paper layers so far. That means, the photo, and the highlight.
Click on the group and go to Menu>Layer>Layer Mask>Reveal all. A mask thumbnail will appear beside your group. This means we have activated a pass through mask for the paper sheet.
Now choose the Gradient Tool and double click on the gradient to edit its options. Change the gradient so it has a tight transition between black and white.
Now draw a gradient over the paper sheet until it looks right.
TIP: Try to group the rest of the elements into a tidy and organized stack. Name your groups accordingly to the parts they are containing (printer body, printer tray) So it’s easy to access them at any time.

18. Printer Control Panel.

Draw a nice rounded rectangle with a bit of perspective above the paper sheet. Use the direct selection tool and the Convert point tool we used earlier.
Go to menu Layer>New fill layer>Solid Color… Choose a dark gray. We used R:112 G:112 B:112.
Now apply layer style effect. First go for a Drop shadow to give it visual connection with the other elements.
Now add some bevel and Emboss to give it volume.
And for last, give it a Gradient Overlay to add lighting.
Now draw another shape on top of the previous. Use the same tools as before, Rectangle, Pen tool and Direct Selection Tool.
Menu Layer>New fill layer>Solid Color… Choose a light gray. We used R:191 G:191 B:191. We used three layer style effects here. First Bevel and Emboss.
Next, a Gradient overlay.
And a subtle stroke just for kicks.

19. Control panel buttons and details.

Use the rounded rectangle tool with a corner radius value of 1, and draw the shape of what should become the printer’s information screen.
Menu Layer>New fill layer>Solid Color… Choose a dark gray. We used R:106 G:106 B:106.
We used two layer style effects here. First some inner shadow to give the screen some depth.
And then some gradient overlay to give the screen a more realistic color.
Now let’s draw a couple of circles with the ellipse tool.
Go to the menu Layer>New Fill Layer>Solid Color… Choose black.
Now add some layer style effects. First some Inner shadow.
Next some blue gradient Overlay.
Let’s do more buttons. Draw six circles with the ellipse tool. Remember that you can choose the complete shape with the Path selection tool. (Black arrow)
Menu Layer>New Fill Layer>Solid Color… Choose black again. Now add some layer style effects. First some Inner shadow.
Then some Gradient Overlay.
Patience my friends. We are almost done. Only one element left. The power button. Draw it with the Ellipse tool.
Menu Layer>New Fill Layer>Solid Color… Choose black.
For the power button, we used three layer style effects. First an Inner shadow. Doesn’t look like much now, but trust me, it will make a difference at the end,
Next, some red Outer glow.
And for last, some Gradient overlay.

20. Finishing touch, the shadow.

Congratulations! You have done a mighty fine printer icon. Just one little thing left. The shadow. Draw the shadow shape with the pen tool. You can do something like this.
Last time. I promise. Menu Layer>New Fill Layer>Solid Color… Choose black. Right click on the layer name, and choose “Rasterize Layer”. Now you will have a layer with the shape. No editable solid color fill.
Go to Menu Filter>Blur>Gaussian Blur. Pick a value that works best for you. This is your call.
And then lower down the layer’s opacity. Voila!
20 steps and almost a hundred images later, we have finished our printer icon. The most important thing you can acknowledge from this tutorial, is the power of Photoshop’s paths and layer styles. We have made tons of 3D looking objects based only on basic shapes. If you apply this technique to your own projects, there will be little you cannot accomplish. Thanks for following! Until next time!
And remember to check all our other icon tutorials.


37 Responses to “Photoshop Tutorial: Realistic, High quality printer icon”

  1. RichieNo Gravatar
    April 10th

    Wow.. this is so cool. I’ve never seen a better and more detailed tutorial before. Excellent work guys. Keep it up. You are my first choice for icons :)

    Looking forward for more such tutorials guys

  2. Kelly wuNo Gravatar
    April 10th

    I just added your blog to my bookmarks. I’m an Icon designer myself and never thought of this approach. This Tutorial is genius, very well explained and detailed. TOO detailed maybe:) Only a moron could not follow it. Keep up the good work!

  3. .: Owl :.
    April 11th

    Another good toturial from IS!!!!

  4. pipi
    April 11th

    absurd tutorial, can’t be the real way that icon was created.

  5. Blogger.IconshockNo Gravatar
    April 11th

    Hey people, Thanks a lot for your comments!

  6. adminNo Gravatar
    April 11th

    this is the best icon tutorial I’ve seen so far, Another great creation from our team and of course our master blogger !!


  7. PaulNo Gravatar
    April 13th

    I don’t know where to turn to contact the admin of iconshock. I’ve paid for the full subscription package a week ago and have not received any notification as to anything that is happening with my membership. I have sent emails to the email address as well as filled out the form on the website a number of times.

    If your the admin, please look at your emails and set me up. The pdf said it would take up to 48 hours. Because of this delay, I’m now in a time crunch.

  8. Blogger.IconshockNo Gravatar
    April 13th

    Hi Paul how are you? I don’t have any part at the customer service department,as I’m the Iconshock blogger, but I can help you with pleasure. It is very strange that none of the methods you described had worked to get in touch with us. We have like 80 clients per day, and never had that complaint. Write to jp.iconshock@gmail.com
    Good luck!

  9. juan iconshockNo Gravatar
    April 13th

    Paul, please contact me at jp at iconshock . com
    It’s really weird we haven’t answered yet, we have full time support. I’ll be pending

  10. grevenNo Gravatar
    April 13th

    Nice Tutorial mate. :)

  11. Matthew HeidenreichNo Gravatar
    April 13th

    wow, so detailed. What an outstanding tutorial, great job!

  12. iconshockNo Gravatar
    April 13th

    thanks Matthew :)

  13. michelleNo Gravatar
    April 18th

    great job! thanks for the tutorial!

  14. ultrasound technicianNo Gravatar
    June 24th

    Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  15. adminNo Gravatar
    July 15th

    thanks… you might check webdesignshock.com and tutorialshock.com

  16. Mike D.No Gravatar
    January 13th

    This was a nice tutorial. I will be sure to use what I learned in the future.

Leave a Reply