29/04/2010 - Blogger.Iconshock

Photoshop Tutorial: padlock icon

Buckle up your seatbelts, because this is going to be a long and fun ride. We are going to show to you how to create a high quality professional padlock icon, ideal for applications. We will be using Adobe Photoshop, making extensive use of paths and layer styles. So let’s begin!

Final Padlock

1. Gather references.

This point is not mandatory in all cases, but it’ can be a good starting point if your tight on a deadline and out of ideas, or just want to check if your revolutionary concept is already taken. gathering references is a good way to nurture your mind with different approaches and styles, so you can build a ground to invent your own.

padlock-references

2. Sketch.

We can’t insist on this issue enough. Sketching is the single most important step in the whole process of icon creation, and in general in any workflow that implies creating something new. Good old pencil and paper are the most versatile and productive ways to develop your ideas and be really inventive. Your brain doesn’t need much translation between the pencil and your brain.

3. Create your canvas.

tutorial-iconshock-icon-01

TIP: In this tutorial, I left the grid and snap grid options active. These allow us to place and align objects very easily. You can activate them by clicking in the “view” menu and selecting show>grid. To activate the snap choose the “view” menu > snap to >grid

4. Our first path.

We will begin with the upper lock of the padlock, that sometimes chromed piece of metal shaped like an inverted “U” letter.

Open your “Paths” tab. If you have misplaced accidentally or closed it in a prior moment of rage against Adobe, don’t worry. You can display it again by going to the “Window” menu and clicking on “paths”

tutorial-iconshock-icon-02

In the “path” tab, click on the “create new path” button beside the trashcan icon. You will se your new path layer.

tutorial-iconshock-icon-03

Choose the rectangle tool at the toolbar.

tutorial-iconshock-icon-04

Draw 2 identical rectangles that will become the base of the shape.

tutorial-iconshock-icon-05

TIP: You can activate and deactivate your grid by pressing CTRL+’

Now pick the ellipse tool at the toolbar.

tutorial-iconshock-icon-06

Drag and draw a circle between the two previous rectangles. If you made any other clicks and your rectangles disappeared, fear not. Just click on the path layer in your “path” tab.

tutorial-iconshock-icon-07

Now click on the “Direct selection tool”. (white arrow) Remember that the “Direct selection tool” is for selecting parts of a path, whilst the “Path selection tool” selects entire paths.

tutorial-iconshock-icon-08

We will now begin to tweak the paths we just made. try to join the two equatorial path vertices of the ellipse with the outer superior vertices of the rectangles.

tutorial-iconshock-icon-09
tutorial-iconshock-icon-10

Now choose the “Path selection tool” from the toolbar (black arrow) and pick the curve path we are working on. Copy it (CTRL+C) and Paste it (CTRL+V). Nudge it downwards until we get the with the piece is going to have.

tutorial-iconshock-icon-11

Then pick again the “Direct selection tool” (white arrow) and nudge the equatorial vertices until you snap them to the inner upper vertices of the rectangles. You will get something like this.

tutorial-iconshock-icon-12

Don’t worry, we now it’s ugly. We need a lot of tweaking. Grab the bezier handles of each vertice and adjust the curvature until you get the right thing. It’s not hard to do. With the snaps on, I made it in 1 minute. (drunk and all)

tutorial-iconshock-icon-13

Just kidding about the drunk part. Ok, now let’s delete the useless lines by just clicking on them and hitting the delete button. And voilá, you will get something like this.

tutorial-iconshock-icon-14

How about that? Now, right click over your active layer on the “Layer” rollout and click on “Layer from background” This will unlock the default layer that is created when you create a new Photoshop document so you can begin painting on your canvas. (remember that inside Photoshop, “paths” are unrendereable vectors.)

tutorial-iconshock-icon-15

You could have just clicked on the “New layer” button, but I just liked the thought of making thousands of readers doing my will:)

Ok, now go to the “Layer” menu>New Fill layer>Solid color... pick pure white

tutorial-iconshock-icon-16

Now let’s apply some layer styles. Go to the “Add a layer style” button at the button of the layer rollout.

tutorial-iconshock-icon-18

Choose “Stroke”. Check out the parameters we used.

tutorial-iconshock-icon-19

You will get something like this.

tutorial-iconshock-icon-20

Now go again to the “Add a layer style” button and pick “bevel and Emboss”. These are the parameters we used.

tutorial-iconshock-icon-21

You’ll get something like this.

tutorial-iconshock-icon-22

Congratulations! you are 19 steps away from achieving a shiny padlock icon!

5. Adding weird chrome reflections.

Click on your path in the “path” window. Go to the “Layer” menu>New Fill layer>Solid color... pick pure white. get used to this step, we will repeat it a lot in this tutorial.

Now click on the “Add a layer style” button and pick “Gradient Overlay”. These are the parameters we used.

tutorial-iconshock-icon-23

TIP: When you add a layer style, always make sure that the correct layer is selected, otherwise you will end making a mess adding the wrong effects to the wrong layers.

At this point, your mighty padlock has to be looking something like this:

tutorial-iconshock-icon-24

Which is not beautiful at all. But be patient my dear padawans, the journey is long and treacherous.

6. Even more weird reflections.

Click again on your path layer in the layer window. Go to the “Layer” menu>New Fill layer>Solid color... pick pure black.

Go to the “Add a layer style” button and pick “Gradient overlay”. Check out the general parameters, and pay special attention at how we changed the gradient. You can edit your gradients by clicking on the gradient itself.

tutorial-iconshock-icon-25
tutorial-iconshock-icon-26

Check out the result.

tutorial-iconshock-icon-27

I know, still not looking good. Hold on tight.

7. Adding volume.

Go to the Path window and click on our beloved path layer.

tutorial-iconshock-icon-28

Right click and pick “Duplicate path…” Choose the “Direct selection tool” at the toolbar (white arrow, haven’t you memorized yet?) and let’s tweak the vertices until we get something like this. I know it looks pointless, but you’ll see.

tutorial-iconshock-icon-29

Make sure our new path layer is highlighted. Go to the “Layer” menu>New Fill layer>Solid color... pick pure white again.

Go to the “Add a layer style” button and pick “Inner Shadow”.

tutorial-iconshock-icon-30

Click again the “Add a layer style” button and add “Outer Glow”.

tutorial-iconshock-icon-31

Click once more the “Add a layer style” button and add “Gradient Overlay”.

tutorial-iconshock-icon-32

Go to the “Layer” menu >Layer mask>Reveal all. You will see a blank thumbnail in between the solid fill and the path.

tutorial-iconshock-icon-33

Pick up the gradient tool at the toolbar. Double click the gradient in the gradient options to edit the gradient. Add a new white color stop about 3/4 of the total gradient to tighten up a bit the transition between white and black.

tutorial-iconshock-icon-36
tutorial-iconshock-icon-38

Make sure the blank thumbnail that we just revealed is highlighted, and drag a gradient from the top to the bottom of the canvas. Remember, the black contents of the gradient blocks the solid. You will get something like this.

tutorial-iconshock-icon-37

If you turn off all layers, this is what we have just done.

tutorial-iconshock-icon-39

Getting better isn’t it?

P.D. We lowered this layer’s master opacity to 85%. You can play with this value at will until it suits your taste.

8. More volume detail.

Right click on the layer we are working on. Select the “Duplicate Layer" option.

Select that new duplicated layer (Make sure it’s on top of the original one) and right click. Select the “Rasterize Layer" option.This will erase all vector info from the layer. You will no longer have dependency on the path, yet you have inherited all layer styles.

tutorial-iconshock-icon-40

Now go to the “Filter” menu>Blur>Gaussian blur

tutorial-iconshock-icon-41

Nudge the layer a bit upwards with the move tool until it looks like this.

tutorial-iconshock-icon-42

9. Add Highlights.

Go to the “Path” panel and create a new “path” layer. Pick up the “Pen Tool” at the toolbar. As you may now, the “Pen tool” is for path creation.

tutorial-iconshock-icon-44

Draw a polygon in this area by pointing and clicking. This way you’ll end up with straight lines with no Bezier in the vertices. If you want to make Bezier corners while drawing, you hold your click and drag. This is not the case though. Straight lines are enough for now.

tutorial-iconshock-icon-45

Now let’s add some curvature with the convert tool. Pick up the convert tool at the toolbar.

tutorial-iconshock-icon-46

With the convert tool, click on each of the vertices to give curvature until you get something like this.

tutorial-iconshock-icon-47

Now go once more to the “Layer” menu>New Fill layer>Solid color... pick pure white. Yet again.

Go to the “Add a layer style” button and pick “Outer Glow”. Check out the parameters.

tutorial-iconshock-icon-48

Click on the “Add a layer style” button again and pick “Gradient Overlay”. These are the parameters we used.

tutorial-iconshock-icon-49

Lower the master opacity of the layer to 60%. Up to this point your padlock will look something like this:

tutorial-iconshock-icon-50

Cool isn't it?

10. Adding dark reflections.

Let’s add more strange reflections to the chromed material. Again create a new path layer and with the “Pen tool” create something like this:

tutorial-iconshock-icon-51

Go again to the “Layer” menu>New Fill layer>Solid color... pick pure black.

Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-52

Now we have a cool reflection area that looks almost real.

tutorial-iconshock-icon-53

11. Just one more highlight.

Add again a new path layer and create a new path with the “Pen tool”

tutorial-iconshock-icon-54

“Layer” menu>New Fill layer>Solid color... pick white.

Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-55

The highlight is pretty good, but lacks a natural falloff. Let’s rasterize the layer by right clicking> “Rasterize layer”

tutorial-iconshock-icon-56

Make sure the layer is highlighted. Go to the “Layer” menu >Layer mask>Reveal all. Again, you will see a blank thumbnail in between the solid fill and the path.

Pick up the gradient tool at the toolbar. Double click the gradient in the gradient options to edit the gradient. Add a new white color stop about half of the total gradient to tighten up a bit the transition between white and black.

tutorial-iconshock-icon-57

Make sure the blank thumbnail that we just revealed is highlighted, and drag a gradient from the bottom to the top of the canvas. The length of your line is the total length of the gradient, so try to eyeball where you want the falloff to affect the highlight.You will get something like this.

tutorial-iconshock-icon-58

Group your layers so far so you can navigate easily throughout your composite. Select your layers so far and then click on the little folder icon at the bottom of the layer panel. It will create a new group with the selected layers. Name the group whatever suits you.

tutorial-iconshock-icon-59

12. Building the Padlock body.

Create a layer outside the group we have just created. In case you forgot, you do this by clicking on the “create a new layer” button on the bottom of the layer panel.

tutorial-iconshock-icon-60

We are going to create a bunch of layers that build up the body of the padlock, so be sure all this stuff stays outside the group of previous layers so we don’t end up with an impossible mess to understand.

Add a new path layer in the layer panel. Pick the rectangle tool in the toolbar and draw the square that will become the padlock’s body piece.

tutorial-iconshock-icon-61

“Layer” menu>New Fill layer>Solid color... pick R=149, G=114, B=46.

tutorial-iconshock-icon-62

Now as always, let’s add some volume and lighting effects with “Layer styles”. Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-63

Now let’s add some “Stroke”:

tutorial-iconshock-icon-64

And some yellow “Inner Glow”

tutorial-iconshock-icon-65

Looking as good as mine?

tutorial-iconshock-icon-66

13. Giving some contrast to the metal.

Metals in icon creation are pretty tricky. Each artist has different methods to give the perfect balance between highlights, reflection and shadows to give the right metallic look. We usually give create a dark colored layer above the base color to achieve that.

Right click on the previous layer. Choose “Duplicate Layer”.

Go to the duplicated layer and reveal all the layer styles. Turn off the eye on “Stoke”

tutorial-iconshock-icon-103

Now double click on the solid color thumbnail and change the color to pure black.

tutorial-iconshock-icon-67

Then change the master opacity of the layer so some value between 50% and 60%, depending on whatever feels right.

Placing this dark layer over the color base helps give a sense of “weight” to objects and materials.

tutorial-iconshock-icon-68

Ok let’s carry on.

14. Create the brushed metal look.

Padlocks sometimes have that solid brushed metal texture. This technique will be handy in many texture creation situations, so be eager to use it whenever it fits.

First create a new layer above the dark one we just made.

Pick the “Paint bucket” tool in the toolbar and fill the layer with pure black. You will temporally see all your project black. Don’t worry.

tutorial-iconshock-icon-69

Go to the “Filter” menu> render>fibers… try to give your fibers a reasonable size according to your object.

tutorial-iconshock-icon-70

Now, with your fibers layer highlighted, press CTRL+T to activate the transform gizmo. Go to the options and turn the layer 90 degrees so the fibers lay horizontally.

tutorial-iconshock-icon-71

Don’t press anything yet. If you applied the change already, press CTRL+T again. For the patient ones, carry on…

Drag the corners of the gizmo and resize the layer so it snaps to the padlock body piece. (you do have your snaps on don’t you? “View” menu> snap) You can accept the changes by clicking the check on the options bar or by pressing the “ENTER” key.

tutorial-iconshock-icon-72

Now click on the “Lock transparent pixels” tiny button.

tutorial-iconshock-icon-73

Go to the “Filter” menu > Blur > motion blur…

tutorial-iconshock-icon-74

We checked the “lock transparent pixels” before to avoid the blur spreading all over the canvas.

Change the layer blending mode to “Linear burn” and the layer master opacity to anywhere between 15% to 30%.

tutorial-iconshock-icon-104

Let’s control the texture effect with a gradient. Go to the “Layer” menu >Layer mask>Reveal all.

Pick the “gradient tool” at the toolbar and edit the gradient so it’s a bit tighter. Add a new white color stop about 1/3 of the total gradient.

tutorial-iconshock-icon-75

Drag the gradient line over the fibers we just made (remember to check if your mask thumbnail is active) and eyeball where you want to control the effect.  I made a slightly diagonal gradient and got this.

tutorial-iconshock-icon-76

15. Some lighting.

Let’s give some general light to the padlock piece. Go to the “Path” panel and click on the square padlock piece path.

“Layer” menu>New Fill layer>Solid color... pick pure white once more.

Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-77

Now Click on the “Path” panel and create a new path. Pick the “Pen tool” on the toolbar and draw a big highlight like this. Pay attention to the lower part of the path, because it’s going to be the guide for a chisel we are going to add later on. Remember how we did earlier, first draw the straight line version, then tweak it with the “Convert tool “ and the “Direct selection tool” (White arrow)

tutorial-iconshock-icon-78

Now go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

Click on the “Add a layer style” button and pick “Gradient Overlay”. Check out the values:

tutorial-iconshock-icon-79

Go to the “Layer” menu >Layer mask>Reveal all. Once more, you will see a blank thumbnail in between the solid fill and the path.

Pick up the gradient tool at the toolbar. Double click the gradient in the gradient options to edit the gradient. Add a new white color stop about 1/3 of the total gradient to tighten up a bit the transition between white and black.

Drag the gradient placing the mask in the best spot to give the highlight a realistic falloff.

tutorial-iconshock-icon-80

16. Chamfer.

Let’s add a bit of detail to the piece. Click on the “Path” panel and create a new path. Pick the “Pen tool” on the toolbar and draw a small triangle at the bottom of the padlock.

tutorial-iconshock-icon-81

tweak it with the “Convert tool “ and the “Direct selection tool” (White arrow) so it turn into an arch that fits the previous highlight path we made.

tutorial-iconshock-icon-82

Now go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-87

Go to the “Add a layer style” button and pick “Inner Glow”. Check out the parameters.

tutorial-iconshock-icon-83

And then add another layer style, an “Inner shadow”.

tutorial-iconshock-icon-84

At this point you should have something like this:

tutorial-iconshock-icon-95

17. Some more highlights.

Everybody loves highlights right?

Click on the “Path” panel and create a new path. Pick the “rectangle tool” on the toolbar and draw a small box at the top of the padlock body piece. Tweak it a bit with “convert tool” and the “direct selection tool”.

tutorial-iconshock-icon-86

Go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

Click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-87

Click on the “Path” panel and create a new path. Pick the “rectangle tool” on the toolbar and draw a small box at the top of the padlock aligned with the chromed “U” shaped piece.

tutorial-iconshock-icon-88

Tweak it a bit with “convert tool” and the “direct selection tool”.

tutorial-iconshock-icon-89

Go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

Then click on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-90

The highlight will look something like this.

tutorial-iconshock-icon-91

Now right click on the layer and choose “Duplicate layer”

Pick up the “Move tool” from the toolbar and nudge the layer each end of the curved lock has its highlight.

tutorial-iconshock-icon-92

18. Finishing touches.

Don’t blame us, We are perfectionists, just like you!

Click on the “Path” panel and create a new path. Pick the “rectangle tool” on the toolbar and draw a small box at inside the chisel, at the bottom of the padlock.

tutorial-iconshock-icon-92a

Let’s tweak it with the “convert tool” and the infamous white arrow tool.

tutorial-iconshock-icon-93

And the moment has come… for the last time in this tutorial… Go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

And then, click once more on the “Add a layer style” button and pick “Gradient Overlay”:

tutorial-iconshock-icon-94

You will end with something like this.

tutorial-iconshock-icon-95

Select all the layers we have created since step 12 and click the “create group” icon at the bottom of the layer panel. Name it as you wish.

tutorial-iconshock-icon-96

And well…that’s all for today. Thank you very much for your kind attention… donations are voluntary of course.

Bye….

hmmm… no. not yet. Did you think we would end just like that? Without some epic, pretentious little detail?

19. Padlock engravings.

Click on the  “path” panel again. Create a new “path” layer.

Pick up the “pen tool” form the toolbar. and draw a series of geometrical patterns like these. The grid snap will be absolutely useful here.

tutorial-iconshock-icon-97

Ok, this is really the last time. Deep breath now… Go to the “Layer” menu>New Fill layer>Solid color... pick pure white.

Make sure this new layer sits on top of the two groups we’ve created. This is essential.

tutorial-iconshock-icon-105

Then, click once more on the “Add a layer style” button and pick “Gradient Overlay”. Let’s add a funky orange gradient.

tutorial-iconshock-icon-98

Now let’s add some “bevel and emboss”

tutorial-iconshock-icon-99

And finally, some “Outer Glow”

tutorial-iconshock-icon-100

20. Final Shadow.

Contact shadows give a nice finishing touch to your designs and make icons feel “grounded” to the operating system or app they’re in.

Create a new layer below the two groups we’ve made so far.

Pick up the “brush tool” from the toolbar and draw a black, soft, 15px wide line along the Padlock’s bottom. You can choose your brushes by right clicking on the canvas while the brush tool is activated.

tutorial-iconshock-icon-101

Go to the “Filter” menu, >Blur > Gaussian blur.

tutorial-iconshock-icon-102

So this is it. The 20 most exhausting steps you have followed in your cyber life. The results really pay off, so I hope you are as satisfied as us. Don’t hesitate in leaving us your feed back and asking further questions. We will be glad to clarify for you any step of the process. Take care, until next time!

Final Padlock icon

Final Padlock

 

If you liked this tut, maybe you should check out these other quality resources from Iconshock:

Photoshop Tutorial: Realistic, High quality printer icon

printer

 

Useful Icon design lessons and tips

tips

ThemeShock

8 Responses to “Photoshop Tutorial: padlock icon”

  1. alkeneNo Gravatar
    May 1st

    i have very simple step on how to remove
    blemishesand pimples on the face.

  2. JuicyIcons.comNo Gravatar
    May 2nd

    A very detailed and informative tutorial. I will give it a go and see how I go! Thanks!

  3. Blogger.IconshockNo Gravatar
    May 3rd

    Hope you make it through all my intricate tech language:) Good luck!

  4. KathyNo Gravatar
    June 10th

    I am running into problems. I came up with a good similation of what you did by exporting illustrator shapes into Photoshop and going from there. However, when I did the paths, I could not get them onto the layers and when I did finally get them there, there were lines connecting the two rectangles which shows that this shape is a combination of shapes.

  5. Blogger.IconshockNo Gravatar
    June 10th

    @Kathy Hello Kathy how are you? Let’s see. First off, remember that a path inside Photoshop is not rendered into bitmap information “per se”. In PS paths are just that. Paths. Guidelines for you to stroke, fill, or whatever. It’s not until you paint over the path that the path becomes bitmap information.
    Second thing: We created a lot of shape layers in this tutorial. So yes, every complicated shape is a result of more than one path layers. You can pick those nasty spare lines and delete them.

    Hope you nail it. Tell me if you need anything else.

Leave a Reply