Jump to content

Outer Shadow is not displayed on top of black background


Recommended Posts

Hi everyone,

new Affinity Designer since yesterday here :)
I'm currently working on my first project with the tool and have encountered something strange.

I'd like to use to outer shadows for some text elements. This works quite well, unless I put some black background behind the text. Then the outer shadow (no matter which color it has) is not being displayed. It seems, like the shadow is hidden behind the background color. When I export the file as a PDF, the outer shadow is back again, both on the white and the black background. I attached 2 screenshots to show you the problem.

Is this a bug or is there any setting I need to change, so the outer shadow is always shown, no matter which background color I use?

Thanks in advance!

Preview in Affinity Designer:

Outer Shadow in Affinity Designer Preview.png

Result in PDF Export:

Outer Shadow in PDF Export.png

Edited by weheri
changed order of screenshots & added a description
Link to comment
Share on other sites

30 minutes ago, weheri said:

Is this a bug or is there any setting I need to change, so the outer shadow is always shown, no matter which background color I use?

This is because the default blend mode for the outer shadow is a Multiply (black times any color gives you black).  Open the Layer Effects panel by clicking on the fx at the bottom of the layers panel and change the Blend mode to normal or play with others to see the effect.

1648582795_ScreenShot2020-12-22at7_05_45AM.png.890fea6550eef3f1e1b22c3126b99145.png

iMac (27-inch, Late 2009) with macOS Sierra

Link to comment
Share on other sites

8 hours ago, Gear maker said:

This is because the default blend mode for the outer shadow is a Multiply (black times any color gives you black).

But it is interesting, that when exporting to PDF it works completely differently! Either it is not exported as Multiply mode, or Multiply mode is blended differently in the PDF. Anyway, this can be quite a surprise after exporting to PDF.

 

Edit: So I made a small test. This is what the image looks like in ADesigner:
image.png.a6ec34c9acd7bf37aeec32dab79dfe4c.png

Here's what it looks like in Acrobat Reader:
image.png.bb31d2e3a7d76731f57f803b356faf8c.png


And this is what it looks like after loading the PDF back into ADesigner:
image.png.c513fca1c518d01826b72f69da18fb0d.png

 

It is therefore clear, that during the export, the fx function was replaced by a specific image layer, which, however, does not correspond to the original appearance, ie that the Multiple mode with black is mixed again into black.

Is this a desirable function (the exported image "does not" match the original), or is it an bug?

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

2 hours ago, Pšenda said:

Is this a desirable function (the exported image "does not" match the original), or is it an bug?

I seem to recall reading in these forums that the PDF specification does not support the Multiply blend mode, which probably requires rasterization (unless your export options don't allow it).

No, that seems to be an incorrect memory. Thanks, MikeW (below).

-- 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 17.7, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.7

Link to comment
Share on other sites

8 minutes ago, walt.farrell said:

I seem to recall reading in these forums that the PDF specification does not support the Multiply blend mode, which probably requires rasterization (unless your export options don't allow it).

Yes, why not - that's not the problem. But this export rasterization (not really rasterization, but the creation of a specific layer with a shadow) must respect the way it is displayed/blended in Affinity.

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

It's due to the fact that when it is exported as a vector format (PDF, SVG), the shadow will be handled as a complete bitmap portion of the initial text here and in the vector sample there is then no blend mode is supplied.

☛ 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

For exported SVG it should be as with PDF here, aka there isn't any blend mode applied then.

Though SVG can make use of the mix-blend-mode CSS property, which then sets how an element's content should blend with the content of the element's parent and the element's background.

Here is a small example, which draws three little circles in SVG and blends these together with the CSS "mix-blend-mode" property in multiply mode.

<!DOCTYPE html>
<html>
   <head>
      <title>SVG blend example</title>
      <style>
      	circle { mix-blend-mode: multiply; }
      </style>
	</head>
	<body>
		<svg>
		  <circle cx="40" cy="40" r="40" fill="black"/>
		  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
		  <circle cx="60" cy="80" r="40" fill="red"/>
		</svg>
	</body>
</html>

blend_mode_svg.jpg.08b48dd385c9c794803471c238077321.jpg

However, these things aren't supported by Affinity exports.

 

☛ 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

1 hour ago, walt.farrell said:

I seem to recall reading in these forums that the PDF specification does not support the Multiply blend mode, which probably requires rasterization (unless your export options don't allow it).

Multiply blend mode is permitted in a pdf, regardless whether vector or bitmap.

Serif uses PDFLib (if I recall), which can export using these blend modes (from the programming manual):

/* Records with all blend modes */ final blendmoderecord blendmodes[] = { new blendmoderecord("Normal", "no blending effect: foreground obscures background"), new blendmoderecord("Darken", "symmetric mode"), new blendmoderecord("Multiply", "symmetric mode"), new blendmoderecord("ColorBurn", ""), new blendmoderecord("Lighten", "symmetric mode"), new blendmoderecord("Screen", "symmetric mode"), new blendmoderecord("ColorDodge", ""), new blendmoderecord("HardLight", ""), new blendmoderecord("SoftLight", ""), new blendmoderecord("Overlay", ""), new blendmoderecord("Difference", "symmetric mode"), new blendmoderecord("Exclusion", "symmetric mode"), new blendmoderecord("Hue", ""), new blendmoderecord("Saturation", ""), new blendmoderecord("Color", ""), new blendmoderecord("Luminosity", "Like \"Color\", but with foreground and background exchanged") };

Some of which will require rasterization. 

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.