The staple of every Italian breakfast is home espresso coffee, brewed with the iconic "Moka Express" pot. In this tutorial, we'll create a Moka entirely from scratch using shapes, layer effects and a bunch of productivity-enhancing tips. We will then proceed to turn our design into a Leopard and Vista-ready professional icon. So get your coffee mugs ready and let's start brewing!
Final Image Preview
This tutorial is aimed at intermediate Photoshop users, therefore command of the interface and knowledge of the main keyboard shortcuts are required. Take a look at the image below to see what our finished icon will look like.
Step 1
Before we start let's get aquatinted with our coffee pot. Read all about it then take a look at the following picture. This is my own beloved Moka Express without which I couldn't start a day. It looks complicated but it really isn't.
We can see that the Moka is comprised of: an octagonal bottom reservoir with a valve on one side, an octagonal screw-on top chamber with a beak for pouring the coffee and a ring-like base, a lid topped by a knob and a handle connected to the lid's hinge. There are two materials here: black plastic for the knob and the handle and aluminum for the body.
Step 2
Let's start from the ring. Create a new blank RGB document and set its size to 512 pixels by 512 pixels, the maximum resolution of OS X Leopard icons.
Throughout the tutorial use white, gray and dark gray background layers to help you see the artwork better. Let's set up our document. Hit D to activate the default black (foreground) and white (background) colors. From the View menu turn on Rulers (Command + R) and Snap (Command + Shift + Colon key). We're ready to go.
Using the Ellipse Tool and with the help of some guides, draw two ellipses on two separate layers. Make the bottom ellipse black and name its layer "bottom." Make the top ellipse white and name its layer "base."
Step 3
With the Rectangular Marquee Tool (M), make a selection at the center of the guides on the "bottom" layer, then hit Alt + Backspace to fill it with the foreground color of black (see fig. 3a).
Hit Command + D to deselect all. While still on the "bottom" layer Command-click the thumbnail of the white ellipse on the "base" layer to select its outline, then hit Delete to erase this selection from the black ellipse (fig. 3b).
Turn off the "base" layer to see the result (fig. 3c). Erase the two triangles at the top by enclosing them with a rectangular selection then deleting its contents. We have a half ring now (fig. 3d). Rename this layer to "ring."
Step 4
Now let's add some materials. To simulate environment reflections on the aluminum add a Gradient Overlay style to the "ring" layer. Create a horizontal linear gradient with several color variations. Try to suggest slight tints while keeping close to a medium gray. Also make the right side lighter to hint at the light direction. See the picture for the details.
Step 5
The aluminum looks good enough, but we want to give it a brushed texture to make it more realistic. On a new layer create a white rectangle with similar proportions to the ring (fig. 5a). Now rotate it 90 degrees so it's in a vertical position. Use the Free Transform Tool (Command + T) to rotate and keep Shift pressed to snap to right angles (fig. 5b).
Make sure to have the default black and white colors activated and go to Filter > Render > Fibers and adjust the settings until you get many thin stripes with just a little variation (fig. 5c). Now you see the reason why we had to rotate the rectangle: the filter created vertical fibers but we need them to be horizontal.
So now rotate the rectangle 90 degrees back to its original horizontal position. Name this layer "brushed_alu" and change its Blending Mode to Screen. This will hide the black parts, leaving nice bright lines to shine through (fig. 5d).
Step 6
Now we need to warp the brushed texture so it matches our ring. Set the layer's Opacity to 25% so the ring will be visible. Once again invoke the Free Transform Tool (Command + T), Right-click and select Warp (fig. 6a).
A mesh will appear. Manually drag down on the handles and the inner points to make the mesh conform to the ring. Try to keep an even spacing between the mesh lines so the layer will deform correctly (fig. 6b).
Command-click the "ring" layer, then use this selection to mask the "brushed_alu" layer or simply invert this selection (Command + Shift + I) then hit Del to get rid of all the extra pixels. What a nice subtle texture (fig. 6c)! We will repeat this technique every time we want to achieve the brushed look.
Step 7
Turn the "base" layer back on. Move it under the "ring" layer and duplicate it by hitting Command + J. Scale the new ellipse down a bit and move it up a bit. Make this layer black (Alt + Backspace) and rasterize it. Apply a Gaussian Blur filter (Filter > Blur > Gaussian Blur) with a Radius of 5px. This will be the ring's shadow.
Step 8
With the ring and its shadow in place, let's move on to the reservoir. Duplicate the "base" layer, move it down and scale it up (fig. 8a). Name this layer "bottom."
Set up a grid of Guides to define the reservoir's size and position. Always use the Snap function to help you scale and move elements to their proper location. With the grid in place, choose the Pen Tool (P) in shape-layer mode and draw the frontal face of the octagon (fig. 8b). Make it any color you like, we will change it soon enough. Name this layer "center."
Step 9
Duplicate the "center" layer to create the face to its right. Move it and adjust it with the Free Transform Tool (Command + T), alternately choosing Distort and Skew via right-clicking to correct the perspective. Name this layer "right."
Duplicate and mirror it, name it "left" and move it to the left of the "center" layer. All you need to do now is to add the two outermost faces using the same technique outlined here. Name these layers "rightmost" and "leftmost."
Step 10
Let's give the reservoir some texture. First add to each face a Gradient Overlay layer style, then using the technique learned in Steps 5 and 6, add a brushed aluminum layer right on top of it. Use linear gradients from light to medium grays, rotated to line up with the perspective.
Aluminum is quite reflective therefore its color is deeply affected by the environment surrounding it. There will be light and dark objects coming from many directions so don't make the gradients all go the same way. A good method to give a sense of depth is to make a stark contrast between two adjacent faces as you can see in the following picture where a really dark gray meets a really bright one. Also note the brushed aluminum layer being distorted so that the lines flow with the perspective.
Step 11
Move the "base" layer under the reservoir layers and fill in the gap with white. Same as before add a Gradient Overlay layer style and a brushed aluminum layer. Be careful to match the light direction: the bottom-right corner should be light while the top left should be dark. It's this consistency that will give realism to our icon. Also note how the "bottom" layer has been darkened.
Step 12
In the real world no edge is perfectly sharp. There is always a thin strip of material that will catch highlights where faces meet. So for realism's sake let's add this neat little touch. Duplicate the "center" face, rename it "highlight" and reduce its Fill value to 0%. This will hide the contents of the layer while keeping the layer styles visible.
Add a Stroke layer style using these parameters: Color of white, Size of 1px, Position of Outside and Opacity of 30%. Then add an Outer Glow style: Blend Mode of Normal, Color of white, Opacity of 50%, and Size of 5px (see the picture). Repeat this process for the "left" and "right" faces.
Step 13
The highlights will not run the whole height of the reservoir so we need to mask the bottom out. Put the three highlight layers in a new layer group named "highlight."
Select the group and hit Command + E to merge it down: you'll now have one layer ("highlight") and the layer styles will have been baked in. Hit Q to enter Quick Mask, and with a soft, round, black brush paint out the bottom part of the edges.
Use 100% Opacity on the bottom and gradually decrease it as you move up the edges to make a gradual selection. When you hit Q again the painted parts will be masked out by a reversed selection. Use it to mask the layer, eventually applying the mask when you're satisfied with the results.
Step 14
Let's build the top chamber now. Create a new ellipse on top of the ring (fig. 14a). This will be the base of the chamber. Now draw the center-right side of the octagon just like in Step 8. Set up the guides, activate Snap and use the Pen Tool (P) in shape-layer mode (fig. 14b). Duplicate this layer, flip it horizontally and place it next to the first one (fig. 14c).
Add Gradient Overlays (fig. 14d) and the brushed aluminum texture (fig. 14e). Build the outermost faces and texture them the same way (fig. 14f). Name these layers, respectively, "right", "left", "rightmost" and "leftmost."
Step 15
Let's add some fine edges to the top too. Use the same technique explained in Steps 12 and 13, but this time give a black Stroke to the "leftmost" and "left" layers and a white Stroke to the "rightmost" and "right" layers. This is because we previously highlighted the right side on the reservoir, remember?
Step 16
To keep things organized, group all the layers with meaningful names like "BASE", "RING" and "TOP." Duplicate the "TOP" group and flip it vertically (fig. 16a). Scale it down vertically just a little bit. With the help of our light blue friends (the guides), draw a white octagon in the space between the two tops (fig. 16b). Discard the upper top as we don't need it anymore.
Step 17
Duplicate the white octagon and make it black (fig. 17a). Fill in the gaps at the corners of the white octagon (the circled areas in fig. 17b). Make rectangular selections on the white octagon and darken them a bit to simulate the reflections on the lid's thickness (see the rectangle on fig. 17b). Remember to keep the right side lighter. Now we have a nice thin lid. Draw a white ellipse slightly above the center of the lid. It will be the base of the plastic knob (fig 17b).
Step 18
Now draw the top of the lid. Using the Pen Tool (P), draw four triangles (fig. 18a) then copy and flip them over to the other side. Add Gradient Overlays (fig. 18b) and the brushed texture (fig. 18c). The lid is now complete.
Step 19
For the knob duplicate the small ellipse, enlarge it and give it a Gradient Overlay style (fig. 19a). Draw a trapezoid on the right side (fig. 19b), mirror it to the left side. Rasterize both layers then merge them into one. Give this layer a horizontal Gradient Overlay to make it look round (fig. 19c).
Step 20
Now let's give the knob a highlight. Duplicate the top ellipse, set its Fill value to 0% and give it a white Stroke (fig. 20a). Put this layer in a group and merge it. Now enter Quick Mask and paint out the parts we don't need (fig. 20b). Exit Quick Mask mode, turn the selection into a mask and apply it (right-click on the mask and choose Apply Mask). Just add a bit of Gaussian Blur and you're done (fig. 20c)!
Step 21
Now let's add some scalloping to the knob. Draw an oval shape right down the middle (fig. 21a) and give it an Inner Shadow (fig. 21b) and a Stroke (fig. 21c). Duplicate this layer twice (fig. 21d). Now put all these layers in a new group named "KNOB."
Step 22
Let's add a reflection. Duplicate the "KNOB" group and merge the resulting "KNOB copy" group. Flip it vertically and move it behind and under the knob (fig. 22a). In Quick Mask, make a gradient selection (fig. 22b) and use it to mask the layer. Set its Blending Mode to Pin Light and its Opacity to 50%.
Step 23
Now on to the beak. Draw a series of shapes and add Gradient Overlays just like in the picture below. Finally, add a brushed texture to all parts just like we learned earlier. Put all these layers in the "BEAK" group.
Step 24
Follow a similar process to draw the hinge. Notice that the little circle (the hub) has a dark gray stroke applied to it. Put these layers in a new group called "HINGE."
Step 25
To draw the handle create a new black shape layer (fig. 25a). Tweak the path until you're satisfied with it then rasterize it. Now pick the Color Dodge Tool (O), choose a semi-transparent, soft round brush and gently paint the highlights on the top of the handle and down the sides to simulate backlighting (fig. 25b), then refine the top highlight to make it more prominent (fig. 25c).
The handle has a scallop too. Draw it with a shape layer and give it a subtle white Inner Shadow by setting its Blend Mode to Normal and playing with the Opacity until you're satisfied (fig. 25d). The handle is done!
Step 26
Now for our final step let's put in the valve. First let's draw the screw. Make one shape layer and color it medium gray, make a lighter copy and move it beside the first one (fig. 26a).
Add the remaining shapes and cover them with gradients to make them look rounded (fig. 26b-26e). Finally, put all parts inside a new group named "VALVE", rotate it and place it at the side of the reservoir (fig. 26f). We're done!
Conclusion
Boy was this long-winded! It was worth it though, don't you think? Now that the Moka Express is done, all we need to do is scale it down to 256px (for Vista), 128px (for dock applications), 48px, 32px and 16px (for the various icon/list/detail views in OS windows) and import all sizes into our favorite icon editing software. I hope you had fun and learned a lot of useful techniques during this tour de force. Now go brew some icons of your own!
