4 ways to create an image with a transparent background

Creating images with transparent backgrounds is an essential skill in your designer toolkit. But it can also be tricky and time-consuming.

In this tutorial, we'll show you four tried-and-tested ways to create transparent backgrounds using four Linearity Curve tools:

• Background Removal
• Auto Trace
• Layers
• Pen Tool

Ready to dive in? Let's lay the foundation of what exactly a transparent background is and why you would need it for graphic design and illustration. We'll also list the image file types that enable transparent backgrounds.

What exactly is a transparent background?

A transparent background in the context of graphic design refers to an image that has no background color. An image with a transparent background is achieved by removing color information from the background pixels, enabling the background to show through.

Unlike a flat image with a color, black, or white background, transparent background images contain transparent pixels.

By eliminating the background color, your images, logos, or text can be placed in a variety of designs without any awkward white or colored rectangles around them. This flexibility opens up a wide range of creative opportunities, whether it's designing a logo, an album cover, creating a stunning flyer, or crafting a compelling image for social media.

Images with transparent backgrounds are versatile and adaptable. They can be reused in other designs and easily incorporated into websites, videos, presentations, or any other medium where the background may vary. This enhances the design's overall visual appeal and cohesiveness.

How image transparency works

RGBA values

Most image formats that support transparency use RGBA (Red, Green, Blue, Alpha) color values.

This is what we mean when we speak of 'transparent pixels.' They're essentially pixels that have a 0% alpha value. This allows the elements behind the transparent parts of the image to show up crisp and clear, creating an integrated design.

Image layers

Graphic design software like Linearity Curve manages transparency using layers. When you make a layer or a part of a layer transparent, it reveals the layers beneath it.

Clipping paths or masks

You can use clipping paths or masks to define which parts of an image should be transparent. Image masking is a powerful tool for designers, as it's a non-destructive way to frame raster images, vector shapes, text, and other designs.

Keep reading on to see how to use image masking using Linearity Curve.

What file types enable transparent backgrounds?

Several file types enable transparent backgrounds, making it possible to create clean and professional-looking designs. The most commonly used file types for transparent backgrounds include:

• .png
• .svg
• .curve
• .webp
• .pdf
• .gif
• .eps
• .tiff
• .bmp
• .ai
• .psd

.png (Portable Network Graphics) is widely popular among designers as it supports transparency. It allows for intricate details and smooth edges, which is ideal for logos, icons, and images with transparent backgrounds. This file format is also highly optimized for web use due to its smaller file size and compatibility with various browsers.

.svg (Scalable Vector Graphics) is a vector file format that uses mathematical equations to render images, making them infinitely scalable without losing quality. .svg files also support transparency, making them a great choice for web-based designs and graphics that need to be resized or altered frequently.

.curve is Linearity Curve's (formerly Vectornator) native file type for vector designs. You can open your .curve files on iOS, iPadOS, and macOS using our Linearity Curve software.

.webp (Web Picture) is an image format that Google developed. It's designed to provide high-quality images with smaller file sizes compared to traditional formats like JPEG and PNG. This relatively new image file format provides both lossless and lossy compression, supporting transparency for web image applications.

.pdf (Portable Document Format) is a widely used format developed by Adobe Systems, designed to present documents consistently across different devices and platforms. .pdf files support raster and vector graphics and can contain a mix of text, vector shapes, and photos. This makes it versatile for a wide range of purposes, from digital publications to printable documents.

.gif (Graphics Interchange Format) is another commonly used file type that supports transparency. It's well-known for its ability to render low-resolution animated images, but it also supports static images with transparent backgrounds. .gif files are often used for small, simple illustrations or graphics with limited colors and transparency needs.

.eps (Encapsulated PostScript) is a file format part of the PostScript language developed by Adobe Systems. It's used for vector-based images in graphic design, typesetting, and laser printers. .eps files can support transparency but with some limitations. Transparency in .eps is typically not as straightforward or versatile as in formats like .svg or .pdf.

.tiff (Tagged Image File Format) also supports transparency features. However, these file types are typically used for high-quality photos or professional printing purposes rather than for web-based designs due to their larger file sizes.

.bmp (Bitmap) is an older raster file format developed by Microsoft. It's one of the simplest image file formats that store bitmap digital images. .bmp can support transparency, but it's quite limited compared to other modern formats like .png or SVG. Transparency in .bmp is usually managed through a specific color being designated as transparent (chroma keying).

.ai (Adobe Illustrator) is the proprietary file format for Adobe Illustrator, a design software primarily used for creating and editing vector graphics. It's often combined with .eps files due to its versatility and scalability in vector designs.

.psd (Photoshop Document) is the default file format for Adobe Photoshop, a leading software in raster graphics editing. One of the key features of .psd files is their support for multiple layers. This allows designers to work on individual elements of an image separately without affecting others. Photoshop allows you to export composite images with transparent image backgrounds.

Now, let's dive into our step-by-step tutorial on how to make an image background transparent using Linearity Curve's sophisticated and easy-to-use tools.

1. Make a transparent PNG file using the Background Removal tool

Looking for an accurate transparent background maker? You can use the Background Removal tool in Linearity Curve to make a raster image transparent in 2 steps. Follow the steps below:

Add your image

Open the Linearity Curve software on your Desktop, iPhone, or iPad and import the image you want to make transparent. We'll be using an iPad for this post.

You can also open the Library (+) tab on the right, choose Unsplash, and search for a high-quality, royalty-free stock image to use. Drag any image from the Unsplash gallery and drop it onto your Artboard.

Automatically remove the background

Select your image and click or tap on Image > Remove Background in the Style tab on the right.

Now you can freely add other backgrounds to your image, or export it with a transparent background for use in other designs or applications, such as a website.

2. Make a transparent background vector using Auto Trace

The previous section showed how to use Curve's transparent background tool for raster images. But did you know you can also automate vector image transparency?

To make a transparent background vector using Auto Trace feature in Linearity Curve, follow these steps:

Add your image

Open or import your image in Linearity Curve, or use an Unsplash image from the Library (+) tab.

Trace the image using Auto Trace

With your image selected, navigate to the Style tab and scroll down to the Auto Trace section.

There are 3 Auto Trace modes; we recommend selecting the Sketch mode for turning the background into transparency.

Ensure the Ignore White toggle is on. This means Curve will automatically turn the white or excluded areas into a transparent image background when you trace your image.

Tap on the Auto Trace button.

Now that you've turned your image into a vector, you can edit the Nodes, scale it, change the Fill color, add a background shape or image, and more. The possibilities with vector design are endless.

3. Save your vector design with a transparent background

If you've created a layered vector design or illustration from scratch, it's really simple to save it as a transparent .png image.

Get this template

Here's how to save a design with a transparent background:

Prepare your design document for Export

Open your design in Curve. Select your entire design and ensure all layers are visible without unwanted elements on the Artboard.

Export your file

Now, tap on the name of your file in the top left corner to open the file options. Tap on Export To and select your file type.

Exclude the background

A modal will open up. Here, you have several options, such as Include Background.

Including the background will export your image with a white background color (no transparency). Toggle Include Background off to export your design with a transparent background.

Tap on the Export button, choose a destination, and you're done.

Once saved, your design can now be used in various formats. You can incorporate it into your website, social media posts, digital presentations, or print materials, ensuring a professional and seamless integration with any background or visual composition.

The transparent background allows you to easily overlay your design onto different backgrounds or combine it with other elements in your creative projects, providing flexibility and creative opportunities.

4. Make a transparent background using the Pen Tool

Another way to make a background image transparent is to use the Pen Tool in Linearity Curve. This empowers you to precisely trace the shape or areas you want to make transparent. Follow these simple steps:

Open your image in Curve

Start by opening your image in Linearity Curve. Select the Pen Tool from the toolbar on the left. This tool allows you to create precise paths or shapes.

Trace a shape around your subject

Carefully trace around the area in your image that you want to keep. Take your time and ensure that the path follows the edges accurately.

You may notice that this method is more time-consuming than using design automation tools like Background Removal and Auto Trace.

Create an image mask

Once you're happy with the shape you've traced around your subject, you can switch to the Selection Tool and choose the Multi Select Mode.

Now, tap on your path and your image to select both simultaneously. The Quick Actions Tab will pop up. Tap on the Mask icon to remove the image background.

Clipping masks are handy because you can edit them at any time. To edit your image mask, double-tap on it and use any of the available tools to add, remove, or adjust its elements. 

Using the Pen Tool to trace and make selections, you can create flexible and detailed masks of your original image.

Your next steps

We've shared four of the easiest methods to create transparent backgrounds for a wide range of design use cases. And there are also other ways to create these versatile image types.

If you haven't tried Linearity Curve yet, remember that it's free for individual users. So, you don't have to worry about entering credit card details upfront.

We’ve also introduced an exciting new marketing animation tool called Linearity Move, which will be launched soon. It’ll give you powerful timeline and animation tools to put your designs in motion. You can sign up for early access by joining the waitlist here.

Frequently asked questions