Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Learn How To Create A Real Magnifying Glass

Learn How To Create A Real Magnifying Glass


What We'll Be Creating

img

Getting Started!

Simply start off with a screenshot of some sort and place it onto your canvas. I'm using a screenshot of my upcoming website code snippet.

img

I've gave my screenshot a simple background and shadow just to add a bit of depth to the overall image.

Download the "Vector Magnifying Glass" from the resource list above.

Vector Magnifying Glass From SXU

Once downloaded place the magnifying glass onto the canvas.

img

Modifying The Magnifying Glass

Using your desired cutting tool remove the white background from the vector magnifying glass. Once the background is removed, removed the inner lens then resize the vector to a reasonable shape using the "Free Transform Tool" (Ctrl + T).

img

Now to the magniying glass shape add a "Drop Shadow" using the settings below.

img

img

Next, select the "Circle Tool" (U) then drag out a new white circle #ffffff inside of the lens area.

img

Magically Transform The Magnifying Glass

Open a bigger vesion of the screenshot you used in the first step then copy it to your canvas. Before we proceed we need to organise our layers.

img

Its important that the bigger screenshot sits inbetween the magniifying glass layer and the white circle layer. Once you have organised the layer right click the bigger screenshot and select "Create Clipping Mask". The bigger screenshot should disapear into the magnifying glass lens.

img

If you select the magnifying glass layer and white circle layer then right click and select "Link Layers" you can freely move the magnifying glass around the canvas to zoom into the different areas.

img

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I'd love to see some of your results. Feel free to post them up on our Facebook Fan Page.

img



About the Author:

Click to Visit Author's Website Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.
Author's URL: photoshop.plus
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: