A blank winners podium with numbers on it. Number 1 and first place symbol. Edit PSD file and change the color easily or update text.

Resolution: 1280x1024px
Full size JPG preview: Winners podium icon
File Format: PSD
Color theme: orange, white
Author: PSD Graphics
Similar item: Gold trophy cup

Download Photoshop PSD source:
File Size: 942 KB

White gamepad icon in PSD format, video game controller against white background, with clipping path. Computer and game console joystick symbol.

Resolution: 1280x1024px
Full size JPG preview: White gamepad icon
File Format: PSD
Color theme: white, blue, purple
Author: PSD Graphics
Similar item: Tablet PC

Download Photoshop PSD source:
File Size: 2.90 MB

Icons are inseparable part of a GUI (graphical user interfaces) design. I was downloading, buying and creating icons for ages, then one day I decided to make my own usable icon set. Something to help other GUI designers make work faster and better. This article explains in detail the process of creating and phases I was going through with this project, and may act as guidance when you decide to make something similar. I went down more than one creative path before finalizing this “GUI Design Icons” font.

Chapters

Since this article is little bit longer, I’ve split it into chapters. You can use these links to jump to desired chapter.

• The Idea
• Drawing icons in Adobe
  Illustrator
  • Locked padlock
  • Unlocked padlock
  • Adjustments, changes and
    fine-tuning
  • Loading icon
  • Combinations
  • Dividing lines
  • Preparing icons for final
    product
• Stencil ruler is
  finished, well, almost
• How the stencil ruler
  become a font
  • Export icons
    for FontLab
• Creating the font in FontLab
• Conclusion
   

The Idea

I was drawing sketches of graphic user interfaces literally for ages, and this idea was the whole time in my head. I thought about making a ruler – stencil – with every frequently needed icon used in GUI design?

Let’s face it – I have missed the chance of being the first. Somebody else had already made this. I found a nice, stainless ruler (stencil) from DesignCommision (see photo), which you can buy at uistencils.com.

I immediately ordered it. After seeing it live, I was even more determined to make one on my own. My idea was to execute this a little bit differently – with plastic. There is nothing wrong with stainless steel. It is shiny, modern, it’s nice. But you can not see though it, the edges are sharp, and it destroys the pencils and scrape your fingers (it’s not that bad, but working with it is not very comfortable).

At the beginning was a paper, loads of paper, pencils, felt tips and a lot of time. In the meantime (in the non-drawing time) I was exploring various GUIs, searching what can come in handy, and ended up with many papers full of drawings. These you can also see here (click for bigger photo). Once I decided that I had enough of sketching, I marked all the icons that I might try to recreate on computer. This is where I jumped into the second phase.

Drawing Icons in Adobe Illustrator

The time needed for sketches was nothing compared to time spent in Adobe Illustrator. As you can see, the icons are quite simple, but you have to care about maximum accuracy, as few point as possible (no needless points) and – the most important thing – consistency in style.

If you take a closer look at the ruler from DesignCommision, this is the biggest imperfection – the icons don’t have a unified style. Most of the icons are simple, but user icon have a very detailed outline. Most of the icons have similar size, but the play button is too big (and wide). Most of the icons are made from straight lines, but the "i" and book icons are unreasonably rounded… and so on.

Let me show you the process of creating two icons: the lock icon and loading animation icon. In the beginning, I created two guides (quite randomly) in the document – and I’ve tried to keep the icons sizes along these guides. Not that every icon is from the first guide to the second, but to roughly keep the scale the same.

Locked Padlock

The fastest to create icons is to imagine the icon as a compound of basic shapes. It’s always faster to delete half of a circle than to draw the half circle by hand (with the Pen Tool). Keeping the work with the Pen Tool to a minimum will help you create accurate shapes in a short amount of time. Instead of using the Pen Tool, try to think used basic shapes and the Pathfinder tools to break them apart as needed.

1. Lets start with making a Rectangle with a Round Corners effect applied (Menu > Effect > Stylize) applied to it. We could also draw the rounded rectangle with the Rounded Rectangle Tool, but this way the corners will keep the Radius even after resizing.
2. Now draw the base of the keyhole with the Ellipse Tool (hold Shift when drawing the circle). For perfect alignment use the button in the top bar, or use buttons in the Align palette.
3. The bottom part of the keyhole is drawn with the Rounded Rectangle Tool (press the up and down arrow keys to adjust the radius).
4. Also the top part of the padlock is drawn with this tool, here we just swap the fill and stroke (Shift + X). This means no fill and a bold stroke. Since the keyhole is not transparent but white, all you need to do to hide the bottom part of this last rounded rectangle is to send this object to back (right-click on the object, choose Arrange > Send to Back. We don’t need to worry about this for now though.

Unlocked padlock

The unlocked padlock icon is even simpler (and faster) to create.

1. First select and drag the whole icon to the side. While dragging, hold the Alt key to duplicate the object (or you can use Command + C and Command + V).
2. Move the top part leftwards and a little bit upwards (just like when you’re opening the real padlock).
3. And with the Pen Tool, add a new point (be sure the path is selected and the cursor shows a plus sign, otherwise you will not add the point to the current path).
4. Now choose the Direct Selection Tool (white arrow), select the unwanted point and hit the Delete key to delete them.
5. Find the Stroke palette and check that the path style is set to Round Cap.

Adjustments, Changes and Fine Tuning

Don’t think that you can make everything perfect on the first try – just like the padlock icons. In fact I’ve printed a lot of papers to see the icons in bigger size and on paper (believe it or not, paper is still better for adjustments). After that, I’ve added some details, adjusted some areas and deleted some parts. And then applied these changes in Illustrator.

The images below show my process. After printing the icons in a bigger size, I’ve picked the marker in the same color (don’t ask why gray, I just like it) and added some parts where I wasn’t satisfied. I’ve also
marked other imperfections with a red marker (like change of size, weight of stroke, etc). For deleting, I’ve used the white correction tape or just a piece of white sticker.

As you can see below, simpler icons are just lines in various lengths and angles, but with the same Weight.

Now back to the creation. Let’s look at how to create another icon – used for loading animations.

Loading Icon

1. Start with a line as show (use the Line Segment Tool). In the Stroke palette choose rounded ends (Round Cap) and same Weight as usual (in my case 4 px).
2. Copy this line and move it to the bottom – it can overreach the guide a little. The fastest way how to do this is to drag the line with the Shift and Alt keys pressed. Then select both lines and group them with Command + G – this step is very important! Otherwise the following transformation would change every line separately.
3. Select the Transform effect (Effect > Distort & Transform).
4. And all you need to do for the final icon is to set the copies to 5 and Angle to 30°. And that’s it.

Adjusting this icon is even simpler because it’s created from just two lines, all you need to do is:

1. Select one point in the top line.
2. Move it upwards.
3. Select one point in the second line, and move it downwards.
4. According to the duration of movement you can have icons from short lines, long lines or just small dots.

Combinations

One of main advantages of these icons should had been the possibility to combine them. For example to place a small plus sign beside the user icon to have an add user icon, or a small cross over the folder icon to create a remove folder icon. And so on. Below shows one example of a magnifying glass, which you can combine with a plus and minus sign.

My original plan was to add numbers, which could be placed for example over the calendar icon or into the comments bubble icon.

Here is how it looks in Illustrator – icon, in/over/beside which I’ve placed some example small icons to test the appearance.

To avoid the confusion between which icon is drawn and which is just copied, I’ve changed the color of the copied one to a lighter gray.

And now for testing…

…and printing, adjusting and changing.

I will briefly mention a very useful function in Adobe Illustrator. Artboards, which were introduced in Illustrator CS4 allow you to have multiple pages in one document. You can say – nothing new in competitive products, but consider the possibility of different sizes of the pages and different positions. You can add the pages, as you are adding the pages in your work. And so I was adding and adding the artboards…

…and I was moving unused icons sideways, while moving the final ones into the new artboards.

It helped me a lot, especially with printing and corrections. Without artboards, I would have to use layers, or one big document (but you can’t print just a part of this big canvas easily).

Dividing lines

I wanted to make the ruler really multi-purpose. I was thinking about every possible way how to make it even better. For example with adding dividing lines. In Illustrator it’s really simple, just draw a line and then, add a Zig Zag effect to make a jagged line (a), zigzag line (b), properly set the options in the Stroke window to make the lines dashed (c), or dotted (d).

Continue Learning…

Welcome to the fifth and last tutorial in the “Creating a Set of Digital Painting Icons” series. We will end with an icon that depicts both a tool and a typical application of digital painting: a large display with a finished matte painting.

The screen will be drawn in a few easy steps using familiar Photoshop tools. We will then employ techniques and workflows utilized by professional matte painters to create a finished cityscape. Far from being an exercise on matte painting, this tutorial nonetheless gives us a peek into this fascinating branch of digital arts.

Psd Plus Membership

Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial and Series Details

Below are the five icons we are creating in this series.

Take a look at the icon we’ll be creating in this tutorial, which is a large LED display with a finished cityscape matte painting on screen.

• Program: Adobe Photoshop CS2 and later
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Step 1

Today’s operating systems give us the chance to work on big icons. Open a new document and set the canvas to 512px by 512px. Set the foreground color to light gray. Select the Rounded Rectangle Tool (U) from the toolbar, make sure the Radius is set to 10px, and draw a 480px by 300px rectangle at the center of the canvas. This will be the outer frame of the display.

Step 2

Select the frame’s pixels by Command-clicking the thumbnail in the Layers palette. From the Select menu choose Modify > Contract and enter 2 pixels (2a). Fill the selection with black on a new layer. This is the glass that covers the LCD panel (2b).

Step 3

Command-click the glass and contract the selection by 1 pixel (3a). Fill the selection with a white-to-black vertical gradient on a new layer, which we’ll call “reflection” (3b). Select the Polygonal Lasso Tool (L) and make a trapezoidal selection around the right half of the display (3c). Apply it as a mask to the “reflection” layer, which should be set to the Screen blending mode and 20% Opacity (3d).

Step 4

Using the Rectangular Marquee Tool (M) create a new layer above the “glass” and below the “reflection” and fill it with a placeholder color, for example light blue (4a). Name it “screen.” Add a pinhole webcam at the top of the screen and a logo of your choice at the bottom. Let’s make the logo glow, too (4b and 4c).

Step 5

Now we need to draw the support. Draw a light gray rounded rectangle just like we created the frame at the beginning (5a). Pick the Direct Selection Tool (A) from the toolbar. Select the top points and nudge them toward the center, tapering the support (5b). Add a vertical Gradient Overlay style to simulate the shadow cast by the display and the curvature of the support. Refer to images 5c and 5d for the settings. The result (5e) looks good but of course we need to add some thickness to the support.

Step 6

Duplicate the “support” layer. Move the copy below it and name it “support thickness” (6a). Add a Gradient Overlay style to shade the rounded corners (6b, 6c). The support is complete (6d).

Step 7

To finish the display we need to draw the shadow it casts on the ideal floor beneath it. Create a horizontal black ellipse (7a) and set it to Multiply, 50% Opacity (7b). Go to Filter > Blur > Gaussian Blur and enter 10 pixels (7c). An Opacity of 50% is a good value to start with, but in this case the shadow is too strong so let’s reduce it to 20% (7d). Now choose the Blur Tool from the toolbar and soften the edges of the shadow with multiple strokes until it resembles image 7e. The display is now finished.

Step 8

Create a layer group called “PAINTING” (8a). I use lowercase for layer names and uppercase for group names. It makes them easy to distinguish when the layer stack becomes long. Command-click the “screen” (8b) and add this selection as a mask to the layer group (8c). This way we ensure our matte painting won’t bleed over the glass.

Step 9

We will now create a very basic matte painting that features a cityscape on a shoreline set at dusk. Let’s start. Place the “screen” layer inside the “PAINTING” group and rename it “background” (9a). Using a Gradient Overlay (9b, 9c) we transform the placeholder blue into a complex gradient that represents the sky at dusk. For the sake of an icon we don’t need to be extremely accurate. We have quite a few colors, though, top to bottom: dark blue, blue, light hazy blue for the horizon, purple for the setting sun and a deep blue for the sea (9d).

Step 10

In order to draw the buildings that make up the cityscape we need perspective guides. Using the Line Tool (U) and a bright green color, draw a series of perspective lines, all converging to a focus point on the left. Make sure the point lies on the horizon (10a). Group the lines.

Next draw a series of parallel horizontal lines, using a contrasting color like red (10b). Group the red lines too. Now hit Command + T to invoke Free Transform, right-click on the canvas and choose Perspective. Modify the lines’ perspective so they converge to a focus point on the horizon, far to the right outside the screen (10c). Our perspective grid is now ready. Group the green and red lines together and reduce their Opacity to 30% to make them barely visible (10d).

Step 11

Pick a dark blue color. On a new layer, paint the shoreline using the Brush Tool (B) set to 100% hardness. Fill the layer up to the horizon and make sure the top is flat and horizontal. Hold down Shift to paint perfectly horizontal or vertical strokes (11a).

Now comes the fun part! Create a new layer. Using the Rectangular Marquee Tool (M) make multiple selections and fill them with the same dark blue from the shoreline. Try to create organic groups of taller and shorter skyscrapers (11b). Throw in some lowrises for variety. Continue the process until you’re satisfied with your cityscape.

Step 12

The buildings need to be adapted to the perspective grid. Specifically, their tops have to be cut off along the perspective lines. Do that by using the Polygonal Lasso Tool (L) to select and erase the extra pixels (12a). When you’re finished you will see how the city slowly takes shape (12b). My composition admittedly is not so good, I hope you did better!

The key here is to have a couple of tall buildings up front and enough variation in order to avoid regular patterns as the buildings recede toward the horizon. The beauty of this method is that it’s so easy and quick to build the cityscape that it’s no trouble to start from scratch until you like what you see. Let’s push forward.

Step 13

The buildings are lit from the front. This means that we have to paint the front facades with the purply-orange light of dusk (13a). Do this on a separate layer masked with the “buildings” layer. Alt-click between them (13b). Make sure you blur the base of the frontlit facades so they fade out into the lower levels of the city (13c).

Continue Learning…

Welcome to the second tutorial in the “Creating a Set of Digital Painting Icons” series. This time we’ll create a digital SLR camera, a tool digital artists often use to take pictures to create textures or for reference. We will construct a rather simple camera, but we’ll make it interesting through judicious use of brush strokes and shadows. Let’s get to it!

Psd Plus Membership

Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial and Series Details

Below are the five icons we are creating in this series.

In this tutorial we are aiming for a digital SLR camera complete with pun-riddled brand and model name.

• Program: Adobe Photoshop CS2 and later
• Difficulty: Intermediate
• Estimated Completion Time: 2 hours

Step 1

Create a new blank document and as usual set both width and height to 512 pixels.
Select a very dark gray foreground color and create the shape of the camera’s body using the Pen Tool (P) in Shape layers mode. Pay attention to the fact that the shape is not symmetrical and the corners have different radiuses.

Step 2

Using brush strokes in selected spots we’ll add three-dimensionality to this flat shape. Make the foregound color white. Select the Dodge Tool (O) from the toolbar and set it up as in image 2a. If you have a pressure-sensitive tablet, then paint very lightly to add roundness to the right edge (2b). If you don’t have a tablet, you need to reduce the Dodge Tool’s exposure to a very low number and use successive strokes to achieve a similar effect. You’ll get the hang of it soon enough. On the left there’s a bulging grip barrel. Paint vertical strokes with the Dodge Tool near to but not on the edge (2c).

Step 3

Now let’s switch to the Burn Tool (O) to add shadows. Set it up as in image 3a and darken the spots marked in image 3b. Now the convex grip barrel is more visible and the bottom is darker. The brush strokes are visible, too, and it’s not a pretty sight. We want the camera to be smooth.

We can use a blur pass on the whole surface. In order to keep the edges sharp we must toggle on Preserve Transparency in the Layers palette (3c). Now we can go to Filter > Blur > Gaussian Blur and choose a moderate value (3d) to smooth the surface (3e).

Step 4

Let’s create the lens now. First set up a few guides to mark its center (4a). Now create a medium, dark gray circle. It will be the outer rim of the lens (4b). Create a smaller, darker circle by duplicating and scaling the first one (4c).

Step 5

Add a radial Gradient Overlay style to the first circle (5a) with tightly placed color spots (5b) to create a couple of rings (5c). Once satisfied with the result rasterize the layer style. Command-click the New Layer icon at the bottom of the Layers window to create a layer below the one selected (5d). Now Hit Command + E to merge the outer rim down with the empty layer (5e).

Step 6

Using the Dodge and the Burn tools add some reflections to the outer rim. Refer to image 6 for the detailed instructions.

Step 7

We will now add several smaller rims and circles to the the lens and we will simulate reflections with the Dodge and Burn technique explained before. Add a smaller rim (7a), add reflections (7b) and use the Gaussian Blur filter set to 1px (7c).

Step 8

Create a smaller rim (8a), erase the top-left part with the Eraser Tool (E) set to a big, soft brush. Enhance the lighting with a dab of the Dodge Tool (8b).

Step 9

Add a smaller, dark circle (9a) and two smaller, half-erased rims (9b, 9c).

Step 10

Add a dark gray circle (10a) and the shutter hole. The shutter hole is a black circle with a medium gray thin stroke (10b). Finally use Dodge and Burn on the circle created in image 10a to make it look convex (10c).

Step 11

Let’s add some cool highlights on the lens. Using the brush tool set to a soft, round preset and low opacity paint a few colored highlights near the shutter hole: a purple one (11a), a green one (11b) a white one and a yellow one (11c).

Step 12

The lens has a glass cover. Create a white circle above all highlights (12a) and set it to Screen blending mode, 15% opacity (12b). Now a little adjustment: increase the contrast on the body by using Levels, Brightness/Contrast or Curves (12c). I used Levels (Command+L) and moved the left slider (black point) to the right and the right slider (white point) to the left (12d).

Step 13

The lens is finished so we can group all its layers together. Make a duplicate of the group and hit Command+E to merge it down to one layer (13a). Hide the original group and keep it for later tweaking. Add a Drop Shadow style to the lens layer (13b) so it casts a shadow onto the body (13c). The shadow must not be visible outside the contour of the body so Alt-click between the lens layer and the body layer to mask the first with the latter (13d). Now the shadow doesn’t stick out from the bottom of the camera anymore (13e).

Step 14

We’ll create the shutter button now.
Draw an ellipse above the convex grip barrel on the left side (14a). Fill in the gap between the body and the ellipse (14b)

Step 15

Duplicate the ellipse and align the copy to the top of the camera’s body (15a). Fill the bottom ellipse with a horizontal gradient. Use the values indicated in image 15b. Now grab the Blur Tool from the toolbar and blur the bottom of the ellipse to remove its hard edge and blend it with the main body (15c).

Step 16

Add a Stroke style to the top ellipse (16a, 16b). Right-click on the “fx” icon on the layer and choose Create Layers (16c). The Stroke style has been converted to a separate layer masked to its “parent.” We can now erase most of it and just leave the bottom part to create a front highlight (16d). Merge the stroke down (Command+E) when you’re finished. The highlight is too sharp so blur it a bit (16e).

Step 17

Draw a very dark ellipse on top of the ones you have: it will be the hole where the shutter button sits (17a). A smaller, lighter ellipse will be the base of the shutter (17b). Select the Direct Selection Tool (A) and move the top point up a bit (17c). Duplicate it and scale down the copy to create another shape (17d).

Continue Learning…

This is the first tutorial in a series called “Creating a Set of Digital Painting Icons.” We will design five icons that depict common tools associated with digital painting: a sketchbook with pencil, a camera for taking reference pictures, a paintbrush, a pen tablet and a large screen with a complete matte painting displayed on it. Let’s get started with the sketchbook icon!

Psd Plus Membership

Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial and Series Details

Below are the five icons we are creating in this series.

Here is the icon we will create in this tutorial. Every artwork starts with the most basic combo, pencil and paper, so let’s do that first.

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1 hour

Step 1

We’ll create the pencil first because it’s the trickiest item in our icon. Draw a small green circle at the center-top of the canvas using the Elliptical Marquee Tool (M). Then make two smaller copies, one on each side.

Step 2

Activate Snap from the View Menu (Shift + Command + and create guides for the pencil. Snap to the three circles to mark where the pencil’s vertical edges will be. Draw a light yellow triangle on a separate layer below the circles using either the Pen Tool (P) or the Polygonal Lasso Tool (L), snapping to the guides to ensure symmetry. Name this triangle “tip.”

Step 3

Draw a black circle on top of the “tip” on a separate layer and name it “lead” (3a). Command-click the “tip” layer and use this selection to mask the “lead.” Right-click on the mask in the Layers palette and choose Apply Layer Mask to crop the “lead” to the “tip” (3b).

Step 4

Add two gray ellipses at the bottom guides, right where the metal clasp will be, using the Ellipse Tool (U) (4a). Copy the bottom ellipse, name it “eraser” and move it down. Change its color to a pinkish orange then rasterize all three shapes. With a simple rectangular selection fill in the gap between the bottom gray ellipse and the “eraser” (4b).

Step 5

Move the bigger green circle down a bit, then using the Pen Tool (P) draw the shape for the pencil’s body, snapping to the guides (5a). Adjust the position of the three circles so they look like a crown on top of the main shape then merge all green shapes together (5b).

Step 6

Using the Rectangular Marquee Tool (M) and snapping to the edges of the circles at the top, select each vertical side of the pencil’s body then hit Shift + Command + J to create a new layer from the selection, or go to Layer > New > Layer via Cut. You will thus obtain three layers. From left to right name them as follows: “top”, “front” and “bottom.”

When we rotate the pencil so it points to the sketchbook, the left side will be on top, the middle side will be at the front, and the right side will be at the bottom (6a). Let’s imagine that the light comes from the left so when we rotate the pencil to make it write on the sketchbook it will appear to be coming from the top. To comply with the light’s direction we have to make the “top” layer lighter and the “bottom” layer darker. You can use the Brightness/Contrast, the Hue/Saturation (Command + U) or the Levels window to accomplish that. It’s your choice (6b).

Step 7

Let’s shade the tip now. Add a pale yellow-to-orange horizontal Gradient Overlay style to the “tip” layer (7a) so the right part, which will be the bottom once the pencil is rotated, is darker (7b). To enforce the lighting we must also brighten the left side of the “lead.”

Lock its transparency so you won’t be able to paint inside the existing pixels (7c). Hit B to select the Brush Tool and make sure the color is pure white. Then paint a single stroke along the left side with a big, soft, white brush, while keeping the opacity to a low number (7d). This adds a nice, subtle highlight.

Step 8

Type D to activate the default colors (black and white). Create a black square on a new layer between the “tip” and the “lead” and name it “wood texture” (8a). Go to Filter > Render > Fibers and choose the same values as in image 8b. The resulting texture (8c) hides the “tip” so we reduce the Opacity to 50% and choose the Overlay blending mode (8d). The wooden tip now has a nice color and a realistic grain (8e).

Step 9

All we have to do now is deform the “wood texture” so it follows the contour of the “tip.” To do that type Command + T to activate Free Transform, then right-click the texture on the canvas and choose Perspective. Drag the top anchor points inward to fit the texture to the “tip” (9a). Take a look at what we have so far (9b). We want to add a bit of shininess to the pencil so let’s paint the main highlight on the “tip” on a new layer, using a soft, white brush. Reduce the highlight’s opacity to let the texture shine through (9c).

Step 10

Let’s introduce some color variation on the pencil’s body, it looks flat right now.

Select the Burn Tool (O) from the toolbar and set it up as in image 10a. It’s important to use a large, soft brush and very low opacity. Use several brush strokes to darken the top and the bottom of all three sides, making the bottom darker (more brush strokes). Try it on the “bottom” layer first to get a feel for the Burn Tool. Once you’re satisfied with the shading (10b), repeat this for the remaining two layers. Make sure the pencil becomes progressively darker as you go to the right and to the bottom (10c).

Step 11

Let’s make the edges pop out. With the guides showing and Snap active, draw a path along the left vertical side (11a). In the Paths palette double-click it to name it “edge” (11b). Now set up a 3px, hard-edged, white brush (11c). Create a new layer on top of the three sides and select it.

In the Paths palette right-click on the “edge” and choose Stroke Path. From the pop-up window select the Brush and toggle on the “Simulate Pressure” option (11d). This is what it looks like: a nice, tapered highlight (11e). Name the layer “edge.” Create a second edge by copying the first one. Make the copy a bit transparent since it’s closer to the bottom where less light arrives (11f).

Step 12

On to the metal clasp now. Hide the “body” and “tip” layers. Darken the top ellipse. It will be the hole where the wooden pencil inserts. Fill in the lighter ellipse to close the gap (12a). Apply a Gradient Overlay style with many highlights to get a nice metal surface (12b).

Step 13

Duplicate the “hole” ellipse. Name the copy “ring,” reduce its Fill to 0% then add a dark Stroke (13a). Erase the top half (13b). Now add a white Drop Shadow (13c) to simulate a highlight (13d). Make a bunch of copies of the “ring” and arrange them over the metal clasp (13e). Group all similar layers together.

Step 14

Before we move on let’s take a look at the layer structure we have. It’s important to keep files tidy. We can easily toggle layers on and off, which speeds up productivity. It also makes complex layer structures less scary to look at (14a).

Move the “CLASP” group above the “BODY.” Add an internal shadow by painting with a soft, black brush on a separate layer (14b). To complete the pencil we have to shade the eraser. First let’s scale it down a bit so it’s smaller than the metal clasp. Then lighten the left part and darken the right part. How do you do that? Just like we did for the “lead,” lock the eraser’s transparency then paint with low opacity brushes along the edges, white to lighten and black to darken (14c).

Step 15

The pencil is complete. Select all layers and group them as “PENCIL.” Duplicate the group and hit Command + E to merge all layers into one. Keep the original group for later adjustments, just in case, but work on the single layer from now on (15a). Rotate the pencil 135 degrees clockwise so it points down diagonally (15b). Lock this layer to avoid messing it up. You can see now that the shading suggests light coming from the top. Let’s keep that in mind.

Continue Learning…