A popular icon that you can find on the internet is 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-pixel 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 effect with 1px size, grey color #848484. That should do it just fine. Set the Blend Mode to Multiply.
Step 19
As we learned before, an important part of a metallic surface is the 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 by pressing 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 they 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.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Kim Dolleris May 21st
Beautiful!!
( )Kim Dolleris May 21st
*First*
( )xcarpatti May 21st
exellent design!!
( )Jimizm May 21st
More like this!:) Its sweet!
( )Phil May 21st
second
( )EmpireGFX May 21st
Me Likey Shiney Things!
( )Carlos May 21st
Quality finished product. Very polished. This is what PSDTuts is about and hopefully shuts up those complaining.
( )Zach May 21st
awesome. this guys creates some amzing tuts.
( )Nate May 21st
Pretty neat! Thanks for the awesome tutorial.
( )Tony May 21st
Awesome work. I love the way the top of the lock came out. Very realistic looking chrome.
( )Snorri3D May 21st
realy nice would love to see more icon design here
( )Robert May 21st
Nice , nice
But if the icon is for a _secure_ login, shoudn’t the lock be, you know, locked
( )Razvan May 21st
Excellent tutorial, thanks!
( )Deddy May 21st
I like, I like.
( )Lamin Barrow May 21st
WOW thats a killer icon design. I think it more than exceeds the expectations of this site. I can definitely see myself using that technique right away. Thank you very much.
( )Colin Stein May 21st
yea very nice
( )TheBolivianessence May 21st
Very clean, very nice.
( )BogDinamita May 21st
now that sure is SHINYYYYYYYYY
( )appox May 21st
Love it. More like this.
( )Mark May 21st
cool
( )Mike May 21st
Great Job. Thanks for showing a demo of how it could be used.
( )Arik May 21st
That’s hot.
( )Johan May 21st
Love the small details. Sexy!
( )Constantin Potorac May 21st
Another great work.
( )Danny May 21st
Love this lock here! It’s great.
( )Toxel.com May 21st
Icon looks great! thanks
( )Qbrushes May 21st
nice clean icon, looks great
( )Fabio Sasso May 21st
Damn it, that’s really cool… I will definitely use that
thank you very much.
( )lawrence77 March 7th
yeah!
( )Matthew Yankelovich May 21st
Thanks so much! This had some amazing techniques I’ve never tried before.
( )Ben Griffiths May 21st
Great tut and well written, thanks!
( )Medium May 21st
GREAT tutorial ! Thanks !
( )kamel May 21st
ahhh this dude here again with his tutorials from another site
dawg come up with something new!
( )Michael Soriano May 21st
Very Useful – a tutorial for manipulating shapes!
( )Grafiko May 21st
Realy nice, it give’s me some ideea’s.
( )Adrienne May 21st
very nice. although a closed lock would indicate a more secure site. i think the tut is awesome
( )Andrew May 21st
Another quality tutorial. Thanks!
( )Cain May 21st
You officially have a new biggest fan. I absolutely love your work and I would love to learn more from you.
( )oneiric May 21st
I love it and will keep checking back for more, great icons.
( )Louie May 21st
Cool Icon.
( )Joefrey Mahusay May 21st
Wow! this is great tutorial. The lock icon is very detailed. Thanks for sharing!
( )jerry May 21st
no more of this
I dont really have time to translate it all , muhaha 
Upir rulezz, to vime uz davno
( )Grant Friedman May 21st
Nice tut!
( )Moeed May 21st
what the hell? raster or vector? pick one and stick to it!
( )Aikyrie May 21st
Thanks this is great!
( )T Jay May 21st
THANKS!!! Nice icon..)
( )fajaws May 21st
just perfect
( )goldenthunder May 21st
Wow. I see nothing wrong with that at all! It is very professional looking! Thank you!
( )Daniel May 21st
very well done! great! thanks a lot !
( )D. Carreira May 21st
Great! Thanks for sharing this!
David Carreira
( )SpazZ May 21st
Well made, and good looking result!
( )RAFi May 21st
Very nice!
( )giackop May 21st
Yeah it’s really cool..
( )Manuel Merz May 21st
See the pathtool is always your friend
Killerwork there, exactly the stuff we need here 
( )Spence May 21st
Very nice tutorial, I would have thought Illustrator for this 100%, but seeing it done so well in Photoshop might make me reconsider in the future!
( )Rijalul Fikri May 21st
Wow, nice. I always like such a shiny thing
( )ZaFaR May 21st
Way cool! I love how you did the shiny on the sides! Very nice – thank you!
( )Jeff May 21st
Very nice sleek design.
( )Filipe M May 21st
sick!!! Trully that is nice to see, more icons please :>
( )Jeff May 21st
Were is PSDtuts based? I’ll from Ireland and I noticed there seems to be a big time difference.
( )Arnaud Alves May 21st
Really quality !
( )thiago May 21st
great one!!! more like this please!
( )JPH May 21st
Cool.
( )Ariful Khan May 22nd
Final result is cool. Thanks.
( )Rjton May 22nd
really nice
( )Daniel May 22nd
Cool design…
Daniel
( )Alberto May 22nd
Great, thank you!
( )Omkar May 22nd
Its great to see more icon tutorials.
( )I hope you make some VISTA or LEOPARD icon tutorials next.
Thanks.
Jimmy Xander May 22nd
I love this tutorial, and this is exactly the kind of stuff I love. I want to see more.
However, I recognized the icon design, I want this to be legit, so please tell me there is no copyright infringement going on.
( )yellowicon.com/stockicon/view/16/itoolbar_icons
K3v May 22nd
Nice icon! Helpfull tutorial
( )Andre May 22nd
pretty cool, I try this when I have time
( )jerry May 22nd
Dear Jimmy Xander, WHAT THE F**K are you talking about ?! What do you think, you think that reproduction of a simple lock can be under any type of copyright ? You are (no doubt) sick and totally should read any local laws before using your mouth to create excrements.
On the site you talk about – oh look, there is red circle ! Does this mean I cant use red circles without any sick permission ? You are totally sick.
To psdtuts – dont bother with that, you have better things to do.
( )Jimmy Xander May 22nd
I’m not trying to cause any upset. I love these tutorials, I just don’t want this to be removed because an artist decides to cause some trouble and complain. I thought I had made that clear in my previous post, I guess I did not.
( )Josh May 22nd
Well done!! Thanks for the great tutorial, and well explained pen functions.
( )Josh May 22nd
BTW, Jimmy Xander: the issue with the copyright violation from a couple weeks ago wasn’t the final product. It was the fact that the entire tutorial was copied from another source, and posted as original. Photoshop is great because it gives so many different ways to create the same thing. You shouldn’t be afraid to create a tutorial of a common item or technique, just make sure it’s an original tutorial with a fresh approach.
( )Tutzor May 22nd
Nice tutorial, could really use those techniques in my own icon designing. thanks.
( )Andrew D May 22nd
Great techniques
( )glsmaster May 22nd
Wow… looks really nice.
Very good Job!
( )puffgirl May 22nd
woah, this is cooooooooooooool.
( )great tut.
Tyler May 22nd
It really reminds me of something out of a Joomla backend.
( )Hank May 22nd
cool. more icon design!
( )The Mafalian May 22nd
i’m tiered to say it but it worth :
( )“thank you very much”
“you’re the best guy’s”
“awesome work”
………………………………………………………….
viva psdtuts
Dave Wilkinson May 22nd
Well, I just finished the PSDtuts Traffic cone tutorial, learning about 20 things along the way. So I’m really looking forward to giving this one a go. It looks brilliant.
( )dEcadEnt May 22nd
Shouldnt a secure login be locked? As in: the padlock should be locked not unlocked..
( )Apart from this little flaw, very well explained tut, thanks alot.
jazznoise May 22nd
Which font did u use to write “psdtuts” in the last image?+
Bye
( )Arda May 23rd
Good.
( )RedLine RedApple May 23rd
This is CCCOOOOOOOOOOOOOOOOOOOOOOLLLLLLLLLLLLl
thank you very much
( )Josef May 23rd
wow! nice and shiny… i like it.
( )tamashii May 24th
Even if you aren’t making a shiny lock, this tutorial has a good amount of elements that can be applied elsewhere. I also learned of a few more tools in Photoshop that I thought exclusive to Illustrator. Yay!
( )gerard porio May 24th
Wow this tutorial is really great! Thanks for sharing!
By the way, what font face did you use for this tutorial?
Thanks!
( )Ian May 24th
Am i the only one htat is dumb here? am stuck on step 5
and ended up having ot create the open lock the white bit with the pen tool because i dont understand step 3, would anyone be willing ot help me please, i always seem to get stuck with tutorials with a lack of understanding but everyone else seems to grasp them so it must just be my lack of intellegence, thanks in advance
( )lawrence77 May 25th
stunning !!!!!!!!!
( )David Wilkinson May 25th
Phenomenal! Couldn’t get some of the gloss working (I’m a bit of a n00b), but I’ve got myself a pretty darn slick design all the same.
( )George May 27th
Beautiful. Nice one guys, I’m going to make me one of those ;D
( )BenRulz May 27th
great job…!! lovely tutorial..!!
( )keep ‘em coming.
mxsf May 28th
very simple,very nice!
( )Eris Discordia May 30th
Ian, I found step 5 to be confusing as well, and I’ve been using Photoshop for 8 years. I’m still not sure what’s going on in that step. If anyone could elucidate or rephrase step 5 it would be appreciated!
Thanks!
( )Er.
PaTQo June 1st
Very good tut
( )L.J June 20th
wow dis is amazing
( )you can’t possibily of creted dis on photoshop version. 7
i really commend your work
smexybanana July 27th
OMG! The result is just AWESOME!
( )Jv August 2nd
Very nice !!! This is my outcome : http://i36.tinypic.com/2pyds3q.png
( )((rQ)) August 4th
wonderful!!! itz a very realistic design….
( )luogou September 12th
so nice
( )http://www.ittang.com
arunkumar k December 8th
very very super
( )Osiris January 21st
Great tutorial! Fairly easy to follow.
( )Rafael March 9th
The effect is amazing, but no well explained… Sorry!
( )Shahzad (+923457244724)(+923006371293) March 14th
thats wonder full, i impressed, thats funny. i like it
( )anthony May 6th
hard to follow dont know when i should make a new layer confusedd…..
( )heroturko June 6th
greatttt….
( )Adi Dabu June 30th
Could someone please tell me what’s the name of the font last used in this tutorial? I’m looking for it for quite some time now and I couldn’t find its name.
Thanks a bunch!
( )Dale July 17th
Terrible… you don’t tell when you’re creating new layers, which end up being required later on for effects. We are not psychics – leaving out vital information completely invalidates the point of a tutorial.
( )Mark October 3rd
Impossible to follow. I’m newish to photoshop and need step by step instructions. I got lost round about the top part of the lock shape.
( )Patrick Lewis October 29th
I am also stuck on step 5, and I consider myself almost intermediate (with tutorials). I know the bare minimum, but I can’t seem to fill the path with the darker gray.
( )Patrick Lewis October 30th
Figured out at least the first half of step 5:
Copy the layer (Ctrl + J).
( )Choose the Path Selection Tool (A).
copy (Ctrl + C)
Paste (Ctrl + V).
Press the up arrow key a few times (I did 5) to move the path upwards a bit.
Set the foreground color to #505050.
Fill the path with color by pressing Alt + Backspace.
Set it to subtract style, as you did to create the hole in the circular part of the lock.
Patrick Lewis October 30th
After that, I just skipped the rest of step 5 and moved on to step 6.
( )jmarreros November 1st
definitly I learnt sth interesting, thanks for the tutorial.
( )