I want to take a rectangular image in Sketch and give it a circle/radius style.
For example:
Answer
That’s actually quite easy. There are two ways to do it:
1. Use a Mask
Best way IMHO, as it gives you more flexibility / editing options.
-
Import your image:
-
Draw a circle that will mask your image:
-
Move the circle behind the bitmap using the
Backward
toolbar icon: -
Use the circle to mask the bitmap, by selecting it and choosing
Layer › Use as Mask
from the menu: -
Ta-da!
-
As an extra step, you can group your bitmap and the circle mask, to stop the circle from masking other shapes:
-
To add a border: add another circle shape placed above the masked image.
2. Use a pattern fill
-
Draw the circle where you want your image to appear:
-
Select Fill › Pattern Fill
in the inspector: -
Click
Choose Image…
and select your bitmap: -
Set the fill options to
Fill
in the drop down: -
Add a border to the circle as you normally would.
-
Ta-da!
Hope it helps!
Attribution
Source : Link , Question Author : Daniel Fischer , Answer Author : Beau Smith