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!
Printer-icon

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.
References-printer-icon-tutorial

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.
0-printer-icon-tutorial

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.
1-printer-icon-tutorial

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.
2-printer-icon-tutorial
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.
3-printer-icon-tutorial
4-printer-icon-tutorial
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
5-printer-icon-tutorial
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.
printer-icon-tutorial-002
We will apply three layer styles to almost all elements. Let’s begin with “Gradient Overlay”
7-printer-icon-tutorial
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.
8-printer-icon-tutorial
Now let’s apply “Bevel & Emboss” to give a bit of fake and easy 3D.
9-printer-icon-tutorial
Move around your parameters intuitively until you achieve the right look.
10-printer-icon-tutorial
Now let’s apply Inner Glow to add some highlight and definition.
11-printer-icon-tutorial
Enter Opacity 33%, Softer Edge, Size 5, Quality Range 50%. Check out the final result.
12-printer-icon-tutorial

6. Create the paper sheet.

Choose the rectangle tool and draw a rectangle for the paper sheet.
13-printer-icon-tutorial
Change the pen tool to the Convert point tool. (Hold Click on the Pen Tool)
14-printer-icon-tutorial
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.
15-printer-icon-tutorial
Then go to layer, New fill layer, solid color. Pick a pure white color.
16-printer-icon-tutorial
17-printer-icon-tutorial
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.
18-printer-icon-tutorial
19-printer-icon-tutorial
Then choose Gradient overlay and give it a white-gray-white gradient. You can pick your gradient type by clicking on the gradient pulldown.
20-printer-icon-tutorial
21-printer-icon-tutorial
If you want to, you can apply a slight inner glow as last finishing touch.
22-printer-icon-tutorial

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.
23-printer-icon-tutorial
24-printer-icon-tutorial
Repeat the process and make another sheet.
25-printer-icon-tutorial
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.
26-printer-icon-tutorial

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.
27-printer-icon-tutorial
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.
28-printer-icon-tutorial
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.
29-printer-icon-tutorial
Now add our second layer style, a Gradient overlay to give some highlights. We used a transparent-white-gray overlay at 75% opacity.
30-printer-icon-tutorial
Now add a transparent to gray 2pixel stroke.
31-printer-icon-tutorial

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.
33-printer-icon-tutorial
Then choose the Direct selection tool and tweak the corners so they look something like this:
32-printer-icon-tutorial
Now apply some layer styles. First go for a Bevel and Emboss. Check out the values we used.
34-printer-icon-tutorial
Now add a Gradient Overlay effect with a transparent-white-Black gradient.
35-printer-icon-tutorial
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?
36-printer-icon-tutorial
We are half way there. At this point you must have something looking like this.
37-printer-icon-tutorial

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.
38-printer-icon-tutorial
40-printer-icon-tutorial
Now on top of that, apply a Gradient overlay layer style effect.
41-printer-icon-tutorial
42-printer-icon-tutorial

11. Black plastic panel

Pick the rounded rectangle tool and again, draw a rectangle path. Lower the corner radius to 2.
43-printer-icon-tutorial
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
44-printer-icon-tutorial
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.
45-printer-icon-tutorial
Now give some lighting with a Inner glow.
46-printer-icon-tutorial
With some Bevel and emboss we can give complete three dimensionality to a simple 3D shape.
47-printer-icon-tutorial
To finish, let’s add a black to transparent Gradient overlay to give some contrast.
48-printer-icon-tutorial

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.
49-printer-icon-tutorial
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.
50-printer-icon-tutorial
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.
51-printer-icon-tutorial
Apply a left to right gradient over the triangle shape we drew earlier. You must turn out with something like this.
52-printer-icon-tutorial
Then apply the Gradient Overlay Layer style effect.
53-printer-icon-tutorial

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.
54-printer-icon-tutorial
Now apply some layer style effects. First we are going to apply Inner glow and then Gradient Overlay.
55-printer-icon-tutorial
56-printer-icon-tutorial
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.
57-printer-icon-tutorial

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.
58-printer-icon-tutorial
Now apply some layer style effects. First let’s go for some Inner Glow and then for some Gradient Overlay.
59-printer-icon-tutorial
60-printer-icon-tutorial
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.
61-printer-icon-tutorial
Double Click on the Solid Color fill and change the color to white.
63-printer-icon-tutorial
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.
62-printer-icon-tutorial

15. Exit paper tray

Draw a rectangle on the front of the printer with the rectangle tool.
64-printer-icon-tutorial
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…
65-printer-icon-tutorial
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.
66-printer-icon-tutorial
67-printer-icon-tutorial
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.
68-printer-icon-tutorial
Turn it black with a Solid Color Layer fill.
69-printer-icon-tutorial
Apply some inner glow.
70-printer-icon-tutorial
Some Bevel and emboss.
71-printer-icon-tutorial
And some Gradient overlay.
72-printer-icon-tutorial
The tray is now ready.
73-printer-icon-tutorial

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.
74-printer-icon-tutorial
Menu Layer>New fill layer>Solid Color… Choose black. Then apply layer styles Gradient Overlay.
75-printer-icon-tutorial
Now let’s make yet another rectangle.
76-printer-icon-tutorial
Again, Menu Layer>New fill layer>Solid Color… Choose black. Then apply layer styles Gradient Overlay.
77-printer-icon-tutorial

17. Printed paper Sheet.

Now our last finishing touch. A nice printed paper sheet. First, find some image in Google. We chose this one.
78-printer-icon-tutorial
Use “CTRL+T” to resize properly. Just drag the handles until you have a satisfying size.
79-printer-icon-tutorial
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.
80-printer-icon-tutorial
Move the upper handles just a bit so the transformation gives the illusion of perspective so it matches the rest of the printer.
81-printer-icon-tutorial
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.
82-printer-icon-tutorial
83-printer-icon-tutorial
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.
84-printer-icon-tutorial
Menu Layer>New fill layer>Solid Color… Choose white.
85-printer-icon-tutorial
Then apply layer styles Gradient Overlay.
86-printer-icon-tutorial
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.
87-printer-icon-tutorial
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.
88-printer-icon-tutorial
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.
89-printer-icon-tutorial
Now draw a gradient over the paper sheet until it looks right.
90-printer-icon-tutorial
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.
91-printer-icon-tutorial
Go to menu Layer>New fill layer>Solid Color… Choose a dark gray. We used R:112 G:112 B:112.
92-printer-icon-tutorial
Now apply layer style effect. First go for a Drop shadow to give it visual connection with the other elements.
93-printer-icon-tutorial
Now add some bevel and Emboss to give it volume.
94-printer-icon-tutorial
And for last, give it a Gradient Overlay to add lighting.
95-printer-icon-tutorial
Now draw another shape on top of the previous. Use the same tools as before, Rectangle, Pen tool and Direct Selection Tool.
96-printer-icon-tutorial
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.
97-printer-icon-tutorial
Next, a Gradient overlay.
98-printer-icon-tutorial
And a subtle stroke just for kicks.
99-printer-icon-tutorial

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.
100-printer-icon-tutorial
Menu Layer>New fill layer>Solid Color… Choose a dark gray. We used R:106 G:106 B:106.
101-printer-icon-tutorial
We used two layer style effects here. First some inner shadow to give the screen some depth.
102-printer-icon-tutorial
And then some gradient overlay to give the screen a more realistic color.
103-printer-icon-tutorial
Now let’s draw a couple of circles with the ellipse tool.
104-printer-icon-tutorial
Go to the menu Layer>New Fill Layer>Solid Color… Choose black.
105-printer-icon-tutorial
Now add some layer style effects. First some Inner shadow.
106-printer-icon-tutorial
Next some blue gradient Overlay.
107-printer-icon-tutorial
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)
108-printer-icon-tutorial
Menu Layer>New Fill Layer>Solid Color… Choose black again. Now add some layer style effects. First some Inner shadow.
109-printer-icon-tutorial
Then some Gradient Overlay.
110-printer-icon-tutorial
Patience my friends. We are almost done. Only one element left. The power button. Draw it with the Ellipse tool.
111-printer-icon-tutorial
Menu Layer>New Fill Layer>Solid Color… Choose black.
112-printer-icon-tutorial
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,
113-printer-icon-tutorial
Next, some red Outer glow.
114-printer-icon-tutorial
And for last, some Gradient overlay.
115-printer-icon-tutorial

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.
116-printer-icon-tutorial
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.
117-printer-icon-tutorial
Go to Menu Filter>Blur>Gaussian Blur. Pick a value that works best for you. This is your call.
118-printer-icon-tutorial
And then lower down the layer’s opacity. Voila!
119-printer-icon-tutorial
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!
120-printer-icon-tutorial
And remember to check all our other icon tutorials.

ThemeShock

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