Create a Shiny Lock Icon Design

Another popular icon that you can find on the internet is (no doubt) the lock icon. It is widely used to identify secure web pages. It often indicates password fields for secure files. Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use!

Editor's Note: This tutorial was originally published in the Czech language at Grafika Online. Grafika have kindly given permission for Vaclav to republish here on PSDTUTS for those of us who haven't quite mastered Czech...

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. As always, the full Photoshop file is available via our PSDTUTS Plus membership.

Step 1

Let's start with a new document, filled with a light grey color (#D5D5D5). Choose the Rounded Rectangle Tool. Then draw the basic shape of a lock. Set the Radius how you feel is right. Then fill it with a light grey color (#DDDDDD).

Step 2

Let's add the upper part. Use the Ellipse Tool to draw a circle. Choose it with the Path Selection Tool, then copy, paste, and make it a little smaller using (Ctrl + T). Then Subtract the smaller circle from the larger one by punching a hole in it.

Step 3

Change your tool to the Rectangle Tool, and with the Alt Key pressed (subtracting) draw a rectangle as shown below. Then with the same tool, but with the Shift Key pressed (adding), finish the left and right side.

Make the left end rounded by drawing an ellipse with the Ellipse Tool. Again, with the Shift key pressed. If you want to make it pixel-accurate, you will need to turn on the grid.

Step 4

Let's start adding some effects to make the lock look realistic. We will start with the bottom part and use some layer effects. Create a little darkening around the edges with the Inner Shadow effect.

Step 5

Some effects must be done manually. Let's add a strong shadow by copying the layer (Ctrl + J). Choose the Select path tool (A). Then select copy (Ctrl + C) and insert (Ctrl + V). Then move a few pixels upwards and set subtract style. Fill the shape we just created with a dark grey color (#505050). The shadow (bottom outline) is done.

Now you may be wondering why we used this technique and didn't simply apply an inner shadow effect? Well that is because we do not want the shadow to be applied to the whole lock. That is why we add the layer mask. Pick up a Brush Tool (black soft brush) and draw in the middle of a shape. That will make the shadow less visible and add a little bit more plasticity to our final image. As you can see in the last image below, the shadow disappears as we proceed to the middle.

Step 6

Ok, let's darken our lock more. Above the shape layer (of a bottom part), create a new layer (Ctrl + Alt + Shift + N). Set the layer as a cutting mask of the previous layer by pressing (Ctrl + Alt + G). Pick up the Brush Tool (big soft black). Set the Opacity to let's say 30%. Then draw on the left and right sides. That will create soft shadows.

You can draw lighter parts just like you drew the shadows. Use a light colored brush with a similar opacity. Draw them into either new or the very same layer. Follow the images below for guidance.

Step 7

Let's create reflections on the top edge next. Select all of the bottom layer (Ctrl + click on the layer). Go to Select > Modify > Contract. Then fill the selection (in a new layer) with a white color (Alt + backspace). Move the selection two pixels down (just press the down arrow two times). Then hit the Delete key to delete this part of the layer. Don't forget to deselect with Ctrl+D!

Step 8

After that, start defining the plasticity of a lock using bigger reflections. Use the Rectangle selection tool to create a rectangle in a new layer. Draw a linear gradient (Gradient tool) from white to transparent.

Step 9

Select a 2 pixels line on the top with the (rectangle selection tool), as shown below. Then Skew it, as in the second image below. This is how the reflection copies the shape of the lock.

Step 10

Just like that create reflections on the other side, but much bigger.

Step 11

We make it bigger so it doesn't look too similar. We are almost done with the bottom part. Below is how our lock should look so far.

Step 12

Next we add a strip! Again create selection a selection. Then draw a gradient into this selection from yellow (#F5E02F) to orange (#F3BB2A).

Step 13

After that choose the Single Row Marquee Tool. Then select the first and last line of the previous selection (select both lines with Shift pressed).

Use a Brush Tool and a dark color to satisfy your needs. That is how you make the difference between the background and the strip.

Step 14

Make a selection by pressing (Ctrl + click) on a new layer. Then from the Layers menu add a new Pattern Fill. Use this pattern, just change the Scale to 50% to match the icon size. Then set the layer style to Multiply. Then only black stripes will be visible.

Step 15

To make the pattern smaller near the edges, make the mask bigger on the right and on the left side. Then rasterize the layer (Layer > Rasterize > Fill Content).

Step 16

Next, narrow down the left and right sides. Cut out portions and resize as needed. This will make the sides appear to taper and cut at an angle. This can be done a few times to maximize the effect.

Step 17

Add another layer. Draw some to darken the sides of the strip. Again, use the Brush Tool with a black color, soft, and lowered opacity.

Step 18

The bottom part of the lock is done, great! Let's work on the upper part. Start with a new upper part layer and begin coloring and defining the edges. Use a grey color (#D5D5D5). Then give it an Inner Glow with effect (1px size, grey color #848484). That should do it just fine. Set the Blend Mode to Multiply.

Step 19

As we learned before, another important part of metallic surface is reflection. So let's create a reflection that will only be applied to half of the upper part. Another shape could help us. Copy the one we have (Ctrl + J), and color it black - so we see exactly where the edges are. Then grab the Path Selection Tool and use it to select the inner circle. Then make it bigger with Ctrl + T.

Step 20

Over the left and right side draw two rectangles with the Alt key pressed (subtraction).

Step 21

Lower the Opacity of this shape down to 30 %. Create a new layer between this and the original shape. Then draw a linear gradient from white to transparent. Press Ctrl + Alt + G (cutting the mask of the previous layer) to make the reflection visible only on our icon.

Step 22

Like on the bottom part, we will add two bigger reflections here. They just have to be formed like the shape they are on, so it will not be rectangles, but ellipses. Draw an ellipse using the Ellipse Tool, as in the image below.

Step 23

Rotate it with Ctrl + T about 45 degrees.

Step 24

Finally, use the Direct Selection Tool (A) to select two points in the middle of the ellipse. Then move them until the ellipse emulates the curve of the upper portion of the lock.

Step 25

Duplicate this layer (Ctrl + J). Then flip it horizontally, and move it to the right side.

Step 26

The lock is almost done. We just want to darken the edges on some places, so the icon is fully separated from the background.

First, make a layer selection of the lower part of the lock icon (Ctrl + Click on a layer). Create a new layer. Then draw into that new layer. Use our familiar dark soft brush to draw spots where you want to make the lock darker. When done, make the selection 1 pixel smaller by going to Select > Modify > Contract. Then hit the Delete key. The following image shows the stage just before deleting.

Step 27

Below is the 100% view after deleting. We're almost done.

Step 28

Exactly the same technique can be used to achieve a high level of detail on the upper part of a lock. The arrows show you where to darken.

Step 29

Whenever you decide to put the icon into your design, don't forget to add to the grey color a little bit from a color style of the background it will be placed on. In the following image, more purple was added to fit into the application design.

Conclusion

And that's all. I hope you learned something new. The final image is below.

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback