How to Design a Pixel Perfect Magnifying Glass Pictogram?

Today, I will show you how to create a simple 32px by 32px pictogram of a magnifying glass that is just perfect for search boxes. Again, only five steps, so if you have 10 minutes, why not give it a shot?

Step 1

Open up Photoshop and create a new canvas with a width and height of 32px. When zooming right in for these pixel perfect icons it’s a good idea to use a grid so from the top menu Edit -> preferences -> Guides, Grids & slices. As you can see I set a grid line every 2 pixels with 4 subdivisions.

Step 2

Grab the ellipse tool and draw a circle within the grid lines (use them!). Holding shift will help in drawing an equal height and width circle.

Step 3

With the circle path selected (should be already, once you’ve drawn it) and the ellipse tool also selected hold alt and shift to draw another smaller circle inside the circle you just drew. By holding alt you are subtracting the shape rather than adding it.

Step 4

Now select the rounded rectangle tool (radius 5px) and draw a handle just to the side of the circle.

Step 5

Rotate both layers about 30-45 degrees and there you have it, a simple pictogram. (I rotated both layers which you can see below messed up the pixel symmetry a bit so you may just want to rotate the handle instead).

Finished!

That’s it! Any questions just leave a comment below and I’ll respond asap 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *