Jump to content

Designer - Issue with transparency


Recommended Posts

Total newbie; just trying to create a simple png graphic file to laser etch.  It consists of text along a path and three images.  Two of the images needed to be rotated slightly to fit the design, but their "transparent" background is showing up in the exported png file.  I really don't know what to do about this.  I have attached the afdesign file and the exported png file.  Appreciate any insight.

break-bread.png

break-bread.afdesign

Link to comment
Share on other sites

8 minutes ago, clarkleach said:

but their "transparent" background

This is not really transparency, but image screenshots with transparency checkerboard. You must deleted it - for example Flood Select Tool, click to black color, Inverse selection, Delete. 

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.5.2636 (Retail)
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.4317.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.4317.
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

27 minutes ago, Pšenda said:

This is not really transparency, but image screenshots with transparency checkerboard. You must deleted it - for example Flood Select Tool, click to black color, Inverse selection, Delete. 

I'm not seeing a Flood Select Tool.  Maybe it would be easier to just fix the original png file in GIMP...

Link to comment
Share on other sites

23 minutes ago, clarkleach said:

I'm not seeing a Flood Select Tool.

Pixel Persona.

 

break-bread.afdesign

Edited by Pšenda

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.5.2636 (Retail)
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.4317.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.4317.
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

44 minutes ago, Pšenda said:

This is not really transparency, but image screenshots with transparency checkerboard.

Just to be certain, I edited the png file in GIMP to ensure the background is transparent; dropped it onto a white background and exported to png.  No checker board.  Replaced files in Affinity and exported.  Checker board is still there.

Link to comment
Share on other sites

Menu File, Document Setup, Colour, Transparent Background is uncheck?

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.5.2636 (Retail)
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.4317.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.4317.
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

The checkerboard that is shown there doesn't really represent transparency. If it would, the checkerboard wouldn't have a diagonal grid if you rotate the image. A normal transparency-checkerboard even wouldn't be zoomed with the document - it would always keep the same size of the squares. Normally the checkerboard is only an image-independent visualization of transparency that is visible if there is no background in the image. So the black shapes must be released from this opaque checkerboard-background.

You can of course do that with GIMP. I'm not sure if you have the Pixel Persona in Designer if you don't owe Affinity Photo. If you should have it, there should be a button with a pixelated symbol on the top left of your GUI - below the menu bar, right of the button with the Designer-symbol. If you click it, Designer will change to a limited image editing GUI with many functions from Affinity Photo. So you wouldn't need GIMP.

You could also use the Pen-Tool to vectorize the graphics by hand, what shouldn't be too difficult in this case. It would have the advantage that the results would be vector graphics, so not pixelated and scalable without a loss of quality. As long as you don't raterize or export them as PNG, JPEG, TIFF etc., but as Designer file, SVG or PDF.

Link to comment
Share on other sites

16 minutes ago, clarkleach said:

"Pixel Persona" is meaningless to me.

You might consider learning a bit more about the application, and its interface, as knowing the Personas is very important :)

image.png.40a84ef8639a1f4ed98a9dd65a11d071.png

https://affinity.help/designer/en-US.lproj/pages/Introduction/about_Personas.html

26 minutes ago, clarkleach said:

Just to be certain, I edited the png file in GIMP to ensure the background is transparent; dropped it onto a white background and exported to png.  No checker board. 

I agree that the two images on the side probably have the checkerboard in them, already. But we can only be sure if you provide them to us directly.

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

    Laptop:  Windows 11 Pro 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
    Laptop 2: Windows 11 Pro 24H2,  16GB memory, Snapdragon(R) X Elite - X1E80100 - Qualcomm(R) Oryon(TM) 12 Core CPU 4.01 GHz, Qualcomm(R) Adreno(TM) X1-85 GPU
iPad:  iPad Pro M1, 12.9": iPadOS 18.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sequoia 15.0.1

Link to comment
Share on other sites

2 minutes ago, walt.farrell said:

You might consider learning a bit more about the application, and its interface, as knowing the Personas is very important :)

image.png.40a84ef8639a1f4ed98a9dd65a11d071.png

https://affinity.help/designer/en-US.lproj/pages/Introduction/about_Personas.html

I agree that the two images on the side probably have the checkerboard in them, already. But we can only be sure if you provide them to us directly.

Hi Walt!

True transparency-checkerboards don't rotate with image elements. Or am I wrong?

Link to comment
Share on other sites

5 minutes ago, iconoclast said:

True transparency-checkerboards don't rotate with image elements. Or am I wrong?

... and just open the attached file, where two pictures with a chessboard are inserted.

 

29 minutes ago, clarkleach said:

"Pixel Persona" is meaningless to me.

Hmm, with her help, and with her Flood Select Tool, I removed both chessboards, as seen in my attached file.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.5.2636 (Retail)
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.4317.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.4317.
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

18 minutes ago, walt.farrell said:

You might consider learning a bit more about the application, and its interface, as knowing the Personas is very important :)

image.png.40a84ef8639a1f4ed98a9dd65a11d071.png

https://affinity.help/designer/en-US.lproj/pages/Introduction/about_Personas.html

I agree that the two images on the side probably have the checkerboard in them, already. But we can only be sure if you provide them to us directly.

I'm working on it; I've only got about an hour into this... just trying to bang out a quick test project.

PNG file attached...

wheat-barley-trans.png

Link to comment
Share on other sites

9 minutes ago, clarkleach said:

PNG file attached...

I coloured the light grey (actually transparent black) squares yellow and you can see the real transparency checkerboard in the clear transparent areas. they don't scale up. This is a screenshot so there is no transparency in it, your PNG does have transparency.

1950563567_ScreenShot2022-05-22at10_07_39AM.png.a954ab8ee6f8feaf8e6b5a6a6bb16c7e.png

Mac Pro (Late 2013) Mac OS 12.7.6 
Affinity Designer 2.5.5 | Affinity Photo 2.5.5 | Affinity Publisher 2.5.5 | 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

1 hour ago, clarkleach said:

Just to be certain, I edited the png file in GIMP to ensure the background is transparent;

I think GIMP it messed up. 

Mac Pro (Late 2013) Mac OS 12.7.6 
Affinity Designer 2.5.5 | Affinity Photo 2.5.5 | Affinity Publisher 2.5.5 | 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

I am guessing here. This file of the seeds is most likely from a Stock website that does not check the images it puts up for sale. I would ask for my money back.

There is a burned in checkerboard pattern on that image, it is in need of fixing. You must remove the light grey squares, put something other than white behind it in order to better see the burned in checkerboard.

Mac Pro (Late 2013) Mac OS 12.7.6 
Affinity Designer 2.5.5 | Affinity Photo 2.5.5 | Affinity Publisher 2.5.5 | 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

What exactly did you do in GIMP with this images? If you used the magic wand or the Filter "Colour to Alpha", possibly the Threshold wasn't adjusted good enough.

In the Pixel Persona of Designer it works pretty simple with the Flood Select Tool (Magic Wand). You only have to set the Mode "Add" in the context bar on the top left of the GUI and click one leaf after the other to select the whole thing. After that you need to invert the selection and delete the background. Take care that the right layer is active at that moment.

I tested it and it worked.

Link to comment
Share on other sites

4 minutes ago, iconoclast said:

What exactly did you do in GIMP with this images? If you used the magic wand or the Filter "Colour to Alpha", possibly the Threshold wasn't adjusted good enough.

In the Pixel Persona of Designer it works pretty simple with the Flood Select Tool (Magic Wand). You only have to set the Mode "Add" in the context bar on the top left of the GUI and click one leaf after the other to select the whole thing. After that you need to invert the selection and delete the background. Take care that the right layer is active at that moment.

I tested it and it worked.

"Color to Alpha" seems to be the suggested method.  I'm trying to figure out the thresholds.  GIMP is no easy program to fathom and it crashes regularly.

I was having difficulty getting Flood Select to cooperate.  I kept deleting everything...  Thanks for the help. 

Link to comment
Share on other sites

23 minutes ago, clarkleach said:

"Color to Alpha" seems to be the suggested method.  I'm trying to figure out the thresholds.  GIMP is no easy program to fathom and it crashes regularly.

I was having difficulty getting Flood Select to cooperate.  I kept deleting everything...  Thanks for the help. 

No problem, that's why we are here.

"Colour to Alpha" (the Alpha channel is the channel that is responsible for transparency, in addition to the three channels for colours R, G and B for Red, Green and Blue) replaces the colour you select in that dialogue panel by transparency. But if you have different scales of grey (from white to different greyscales to black) you need to set the Threshold to a tolerance that keeps the black but replaces the grey of the checkerboard. Otherwise the checkerboard remains. The equivalent to this Filter is the Blend Ranges function in Affinity. You find it if you click the small Gear symbol on top right of the Layers Panel.

With the Flood Select Tool and other selection tools it is important to distinguish what is in the selection and what is outside the selection. If you select something and delete, you delete everything inside the selection. If you want to delete everything outside, you have to invert the selection and delete then.

Just discover the App a bit, read the Help Files about certain functions and if anything may not be clear to you, ask us.

Link to comment
Share on other sites

4 hours ago, iconoclast said:

You only have to set the Mode "Add" in the context bar on the top left of the GUI and click one leaf after the other to select the whole thing.

Just unclick Contiguous, no need to click on each seed separately.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.5.5.2636 (Retail)
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.4317.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.4317.
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

This is just another way to go.

Use a Curves Adjustment, set to Alpha... which you now know means transparency, to knock out the semi-transparent checkerboard. Move the lower left node to the right a bit (as shown).
The smaller checkerboard "visible" on the left (the result is showing only on one half because I'm using a mask atm) is the actual transparent background. Sorry if that sounds confusing 😜.

1341259870_ScreenShot2022-05-22at7_29_55PM.png.2264c0cf69cfbd587cf93a1992265fb5.png

 

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.