Password Strength Widget
>> Create an interface to repsresent the quality of a password
Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.
The idea of this tutorial is to create the effect a set of images to respresent various password strengths like this (if you would like to learn how to code the actual password checker visit the Password Strength in JavaScript page):
1. Create a new canvas 263 pixels wide and 52 pixels in height. with a background colour of #858585.
2. Choose the Rounded Rectangle Tool and set the radius to 5px. Set the fore ground colour to #111111 and draw a rectangle that resembles this:
3. Name this layer Base; right-click the Base layer and choose Rasterize Layer.
4. Apply these Stroke settings:
5. Your canvas will look like this:
6. Apply these Outer Glow settings:
7. Your canvas will look like this:
8. Create a new layer above the Base layer and rename it Base Highlight. Hold down Ctrl and click on the Base layer to select its transparency. Set the Opacity for this layer to 20%.
9. Choose Select > Modify > Contract and enter 1px.
10. Using the Paint Bucket Tool fill the layer with white (#FFFFFF) - your canvas will look thus:
11. Using the Rectangular Marquee Tool select the bottom half (just over half actually) of the Base Highlight layer:
12. Press Delete so that you get this:
13. With the Base Highlight layer selected set the foreground colour to #650000 and then select the Rounded Rectangle Tool. Set the Radius to 3px and draw a rectangle over the Base layer and rasterize it (using the method from step 3) sop that your canvas looks like this:
14. Apply these Stroke settings:
15. Your canvas will look thus:
16. Apply these Gradient Overlay settings:
17. Your canvas will look like this:
18. Rename this layer to Strength Base. Then create a new layer above it and call it Strength Base Highlight; set the opacity of this layer to 30%.
19. Holding down Ctrl click the Strength Base layer to select its transparency. Again choose Select > Modify > Contract and enter 1px.
20. Using the Paint Bucket Tool fill the layer with white (#FFFFFF) - your canvas will look thus:
21. Using the Rectangular Marquee Tool select the bottom half of the Strength Base Highlight and press Delete so that you have this result:
22. Using the Horizontal Type Tool write some centered text on the bar using the Arial font, colour #FFFFFF, size 10pt and anti-aliasing method Sharp and type TOO SHORT so that you have something like this:
23. Apply these Stroke settings:
24. So your text looks like this:
25. Now set the foreground colour to #ADADAD and select the Polygon Tool; set sides to 3.
26. Draw a small triangle with the point facing down at the left-hand side of the Strength Base layer - it should look like this:
27. Name the layer to Pointer and then apply these Stroke settings:
28. So that you have this effect:
29. Now apply these Drop Shadow settings:
30. So that your have this look:
31. Now select the Strength Base layer. Hold down Ctrl and click this layer. Now choose the Brush Tool; set the Master Diameter to 90px and the Hardness to 0%. Set the foreground colour to #FFFFFF, the Blending Mode to Colour Dodge and the Opacity to 10%.
32. Apply brush strokes to the left hand side of the layer. Shorten the strokes each time so that the left-hand side of the bar progressively gets lighter. After a few strokes it should look like this:
33. This is one "strength" done. You will need a series of strengths. To do this you should move the Pointer layer closer to the right each time, refill the Strength Base layer with a different colour, change the text and carry out steps 31 and 32 on the Strength Base layer. You should create several versions like this:
Support Dr Quincy
These resources are provided free of charge. If, however, you would like to make a donation to help finance these resources, no matter how big or small, please use the PayPal button below.
Credits
This resource was written by Tim Bennett Bsc (Hons). Tim Bennett has a First Class Degree in Multimedia Systems Computing from Leeds Metropolitan University. He works as a freelance multimedia developer under the company name Texelate creating free and commissioned high-quality multimedia solutions. Find out more by visiting the portfolio section and viewing his blog. If you'd like to request a resource get in touch!
Rate this Resource
Comments
