Advertisement


How to create a magnifying glass effect in Sketch


Question

I would like to create a few annotations on a screenshot and I'm looking for an effect like this :

enter image description here

This example comes directly from the Sketch Press kit.

2016/03/17
1
2
3/17/2016 1:41:00 PM

Accepted Answer

I've never used sketch before, however I think it would be the same method as Photoshop too.

So what I can see from the initial picture that you provided is that you're trying to create a duplicated image with only certain parts showing?

Here's how I'd do it in Photoshop. you can adapt this to fit your needs.

First of all I'd duplicate the original image.

Then I would use the elliptical marquee tool to cut out the bit that I want.

Once I've got this image, I'd make it slightly bigger to your satisfaction, you can see on the image that you posted that it isn't entirely bigger than the original.

I'd then focus on getting the background, to make it stand out. What it looks like is a white circle, slightly bigger than the actual 'magnify' section. I'd do this by clicking on the layer and selecting it with the marquee tool. I'd then create a new layer and fill it with white and add in a drop shadow.

This would pretty much give the same effect. I hope it helps!

Hopefully you don't have any problems and it is the same as Photoshop.

Let me know how you get on!

Just so you get an idea of the result, I did this mock up quickly just so you could get the idea of what I'm on about.

Example image

2016/03/17
2
3/17/2016 1:40:00 PM