How to Add a Headshot with a Transparent Background

Want to give your site a clean, modern look by adding a headshot with a transparent background? This popular design, often called a “cutout” or “knockout” effect, helps your photo stand out and blend seamlessly with your site’s design.

You may have seen this popular style in some of our block patterns and wondered how to create one with your own photo. For example:

Our block patterns include this effect with a stock photo, but you can easily replace it with your own image.

This guide will walk you through the simple process of creating a headshot with a transparent background using a third-party tool and then adding it to your site.

Let’s dive in!

How to Create a Headshot with a “Cutout” Effect

Watch our tutorial video, or keep reading for step-by-step instructions below:

Step 1: Prepare Your Image

First you’ll want to have your image prepared by editing it to have the cutout effect with the transparent background. You can do this by using a tool such as remove.bg on desktop, Canva, Photoshop, or iPhone’s native background removal on newer iPhone models.

On remove.bg, simply upload your image and let the tool do the work! Once it’s done, go ahead make any desired style adjustments then download your image.

Step 2: Add the Block Pattern

Now it’s time to head over to Carrot and set the stage to add your new image! (If you’re editing a page that already has a block pattern with the transparent image, you can skip to step 3.)

Head to your Pages section, find and edit a page, then in the editor click the + button in the top left corner. This should bring out the block search.

In the left pane, click the “patterns” tab, then in “about” category select the pattern of your preference.

Step 3: Replace the Image

Once you have the pattern added to the page, click on the existing stock image, then click “replace” in the toolbar, then “upload”.

Step 4: Crop Your Image (Optional)

You may want to trip some extra space around your image! If so, use the Crop feature on the toolbar to trim down your image.

Conclusion

That’s it! You now have a custom headshot with a cut-out effect added to your pattern. This helps a ton with bringing personality to your site, and crafting a conversion-optimized design.

If you would like to learn more about images, patterns or design, check out the guides below!