Go ahead, make a circle.

Between the categories page I designed for sfgirlbybay and the multitude of round icons I’ve made in the last couple of days on Twitter, I’ve gotten a lot of questions lately about how to make a circle with an image in it. Because it’s such a huge part of my daily working life, I tend to assume that everyone (a) owns Photoshop, and (b) knows how to use Photoshop, so it doesn’t occur to me that things that seem so simple (making circles, putting type on photos, etc.) to me might not be as obvious to everybody else. This is super-easy, though. I promise.

Okay, first things first: I don’t know how to use any image editing programs other than Photoshop. I’ve been using Photoshop for 17 years (that doesn’t seem possible, but I double-checked with a calculator to be sure…EEK!), and I’ve never had any reason to use anything else. I’m sure it’s possible to accomplish these results with other programs, but I can’t tell you how. I’m sure there are tutorials out there, though!

Second things second: These instructions assume you are creating a graphic element for use on the web. This is not how I would create a similar element for print. Designing and creating documents for print is a whole ‘nother ball of wax!

Now that that’s all out of the way, let’s get started…

STEP ONE: Open your photo. For this demo, I’m using an Instagram photo of Rick Moranis as Vinz Clortho, the Keymaster of Gozer in Ghostbusters.

If your photo is really huge, now would be a good time to knock down the pixel width to a manageable size (Image > Image Size). Remember, when you view something at 100% in Photoshop, that’s the same size the image will appear when it’s on the web at screen resolution.

STEP TWO: Choose the Elliptical Marquee Tool from the toolbar.

See the area I highlighted in yellow above? Make sure that Feather is set to 0px, Anti-Alias is checked, and Style is set to normal.

Click and drag the marquee tool to select the area you want to make into a circle. Hold down the shift key to keep your circle perfectly round. If you need to move your selection around as you drag, hold down the space bar at the same time. (You’ll get the hang of it, trust me!)

STEP THREE: With the selection still active, crop your image (Image > Crop) to remove any extraneous areas.

Double-click on the Background in your layers palette to turn your image into a free-floating layer. A dialogue box will pop up—just hit OK—you don’t need to change any of the settings.

STEP FOUR: With the selection still active, click the “Add vector mask” button at the bottom of your layers palette (highlighted above in yellow). WOAH! Magical! Circle!

STEP FIVE: You’re pretty much done now, but for extra bonus points, you can now save your circle with its transparent background intact. That way, if you use your circle somewhere with a colored background (like on Twitter!), there won’t be a white square around it.

Go to File > Save for Web & Devices and choose PNG-24 (highlighted above) from the pull-down menu. Make sure the Transparency box is checked. Click Save, name your file, and you’re done!