Jump to content
You must now use your email address to sign in [click for more info] ×

How to Make an Image's Background Transparent?


Recommended Posts

How do I make just the background colour of an image transparent in Affinity Designer? Like how you can set a background image as transparent in the colour options in Microsoft Office.

I do not want to set the background as transparent via document set up.

I do not want to use the transparency tool on the left hand toolbar (Unless there's a feature I've overlooked that allows me to make an image's background transparent)

I do not want to export the image as a PNG, as I need to edit the image with its background already being transparent before saving.

 

Many Thanks,

-PJ JONOTHON.

Link to comment
Share on other sites

Welcome to the Serif Affinity forums.

First, are you creating the image from scratch, or starting with an existing image? If you have an existing image, please show us a sample.Ac

3 hours ago, PJ JONOTHON said:

I do not want to set the background as transparent via document set up.

If you're creating an image, I don't think you have any choice. Actually, even if you're starting with an existing image, I think you'll have to specify it via Document setup.

But, if you want a transparent background, why don't you want to say so?

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.5

Link to comment
Share on other sites

16 minutes ago, PJ JONOTHON said:

I need to remove the white background.

Try

Filters->Colours->Erase White Paper.

It may just work for you.

2017 27” iMac 4.2 GHz Quad-Core Intel Core i7 • Radeon Pr 580 8GB • 64GB • Ventura 13.6.4.

iPad Pro (10.5-inch) • 256GB • Version 16.4

Link to comment
Share on other sites

40 minutes ago, PJ JONOTHON said:

Hi can;t find filters on Affinity Design?

You are right. This is only available in Affinity Photo.

2017 27” iMac 4.2 GHz Quad-Core Intel Core i7 • Radeon Pr 580 8GB • 64GB • Ventura 13.6.4.

iPad Pro (10.5-inch) • 256GB • Version 16.4

Link to comment
Share on other sites

Click on the triangle to show the layers within the (Group)

111308658_ScreenShot2020-06-15at12_22_23PM.png.2c275817db508fd7fd2f8b8174288da6.png

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.1 | Affinity Photo 2.4.1 | Affinity Publisher 2.4.1 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

Image in AD (?) in terms of a bitmap/raster or vector? - For a bitmap inside AD going into pixel persona, then using the selection brush tool there on white (should select white areas) and then pressing delete should work. As far as it is a bitmap image.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

3 minutes ago, PJ JONOTHON said:

Nope.

When I select the white space and press delete, the whole image deletes and just left with wavy lines that make no sense whatsoever.

Is it a bitmap aka pixel (rasterized) layer at all you have? - Maybe it's easier you show a screenshot of your image in AD first, or you attach it here, so people can tell you better what and how to do it by examining what you have there.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

19 minutes ago, PJ JONOTHON said:

When I select the white space and press delete, the whole image deletes

It sounds as though you’re working on an Image layer, which is treated as a single object. In order to work at the pixel level (as you need to do if you want to delete selected pixels only) right-click on the layer in the Layers panel and choose ‘Rasterize...’ so that it’s designation changes from ‘(Image)’ to ‘(Pixel)’: pressing the Delete key will then give you the result you expected.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

36 minutes ago, JimmyJack said:

Just select the layer with "Obscurity" on it and set it to Multiply.

Much simpler than fiddling with blend ranges!

36 minutes ago, JimmyJack said:

(It's in the dropdown in the layers panel where it says "Passthrough" in your screen shot.)

It only looks like that because the image layer is in a group. It appears to be a group consisting of only one layer, in which case ungrouping it would make it easier to work on.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

  • 2 years later...

<rant>

This seems like a very basic thing to want to do.

Take an existing image, and make a white background transparent. I have to ask the developers of the App why this isn't easy.

I have followed the above steps too and it simply doesn't do what I want, Snap did for a while, then they patched it, and it stopped working.

It is very frustrating some non-artists trying to do simple things.

</rant>

Link to comment
Share on other sites

Hi @Coldtailand welcome to the forum.

It's easier than you think. Use the coq wheel right hand at the layer panels opacity settings.

Photo_KNTt3evZu6.thumb.gif.671d13e7d06cfb9a284c8fad061c4942.gif

AMD Ryzen 7 5700X | INTEL Arc A770 LE 16 GB  | 32 GB DDR4 3200MHz | Windows 11 Pro 24H2 (26100.712)

Affinity Suite V 2.5.0 & Beta 2.(latest)
Better translations with: https://www.deepl.com/translator  
Interested in a robust (selfhosted) PDF Solution? Have a look at Stirling PDF

Life is too short to have meaningless discussions!

Link to comment
Share on other sites

Coldtail: I’m curious as to why none of the earlier techniques have worked for you.
It would help us to diagnose the issue if you can supply a full-screen screenshot which contains your Layers Panel with the layer in question selected in that panel.

Link to comment
Share on other sites

6 minutes ago, GarryP said:

a full-screen screenshot

... please not full "screen" screenshot, but full "application window" (only when maximizing the app will it be the same). 

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

50 minutes ago, GarryP said:

Under which circumstances would a full-screen screenshot be less useful than a screen-grab of just the application window?

I don't consider displaying completely irrelevant parts of the screen to be "useful" for problem analysis. When viewing on smaller screens, it just unnecessarily complicates the situation.

image.thumb.png.2a8ab4bbe0a0a63f0837675b100810d1.png

 

P.S. In addition, during "full screen" recording, sensitive information may be displayed unnecessarily and personal data may be leaked. Which I don't consider "useful" either.

Edited by Pšenda

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

1 hour ago, Pšenda said:

I don't consider displaying completely irrelevant parts of the screen to be "useful" for problem analysis.

I don’t agree (in general, although there are exceptions); the other “irrelevant” things on a screen can sometimes be useful.

For instance, we might be able to see which other applications are running which may help with performance issue diagnosis.

Or we might be able to see which language the OS is set use to which may help with dictionary/text issue diagnosis.

Also, if the user has undocked some of their panels then just giving us the application window may not let us see all of the panels they have open.

The more of the screen we can see, the more information we have; the more information we have, the better we can help.

Link to comment
Share on other sites

4 hours ago, GarryP said:

Also, if the user has undocked some of their panels then just giving us the application window may not let us see all of the panels they have open.

This! Personally, I almost always run the Affinity apps with the Layers panel undocked, so they would never appear if the screenshot was just the app document window. Also, many users undock the Tools panel, so that would not show either.

All 3 1.10.8, & all 3 V2.5.2 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

20 hours ago, GarryP said:

For instance, we might be able to see which other applications are running which may help with performance issue diagnosis.

If the knowledge of simultaneously running applications is necessary to successfully solve the problem, then "full screen" recording may not be of any use to you. It's enough for the user to have the Affinity application maximized and you can't see anything at all. Alternatively, it can have simultaneously running applications minimized with the taskbar hidden, or it has them on the secondary monitor or secondary desktop, and you can't see anything in "full screen". It is also known that most of the conflicting applications (see Nahimic and others) are not the classic concurrent applications visible on the desktop or taskbar. Therefore, if these conflicts and collisions need to be detected, it is necessary to use other means (display of processes and services) than a simple "full screen" recording.

 

20 hours ago, GarryP said:

Also, if the user has undocked some of their panels then just giving us the application window may not let us see all of the panels they have open.

That's why I used the term "full application window", from which I hope it is clear to everyone that it is a recording of "all" parts of the application, i.e. including undocked/separated panels (perhaps even if they are located on the second monitor, which "full screen" would not even capture).

 

20 hours ago, GarryP said:

Or we might be able to see which language the OS is set use to which may help with dictionary/text issue diagnosis.

For the function of dictionaries in Affinity applications, the setting of the application language (this is obvious from the application window record) is decisive, not the OS language (they can be different), or from the locally set language for a certain text block, which is no longer related to the OS language at all.

 

20 hours ago, GarryP said:

The more of the screen we can see, the more information we have

Of course, email communication including addresses, open company documents and similar sensitive information are always very interesting and useful - for those who want to abuse it. Therefore, advise inexperienced users (experienced users have long known that questions need to be supported with a sufficient amount of additional information and screenshots) to provide a "full screen" record, I consider it unnecessary risky (for them).

Edited by Pšenda

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.