Shadow shouldn't show through fill color at reduced opacity (zero fill opacity should 'knock out' shadow)
When the fill color opacity is lowered, the shadow should not show through.
The fill opacity is also affecting the shadow's opacity. These controls should be independent of each other.
I have attached a screen shots from xd that shows the issue and a screen shot from sketch that shows the desired result. The circle on both are filled with #ffffff at 50% opacity.
james guest
shared this idea
This is something we’d like to get more feedback on.
a) Some apps (such as Adobe Illustrator and InDesign) behave the way XD does now: reducing fill opacity (not overall object opacity) keeps the whole shadow visible but reduces its opacity in proportion with the fill color’s opacity. At zero fill opacity, the shadow is completely gone along with the fill (unless you have a border, in which case you have a thin ring-shaped shadow left).
b) Other apps (such as Photoshop or Sketch) behave differently: reducing fill opacity leaves the shadow’s opacity at full strength, but clips the shadow so you don’t see it through the translucent fill. At zero fill opacity, in the middle of the shape you can see what’s behind it completely unobscured, but outside the shape’s edges you still see the drop shadow at full strength.
Which one do people prefer? Do you need to have both options available?
30 comments
-
Otina Naipali
commented
I need B in 99% of my design styles!
-
Kristi Ince
commented
As typical UX applications behave like option B, that would be my preference. Oftentimes, I hack creating a specifically shaped drop-shadow with blurred edges by making a zero fill opacity shape I can then manipulate separately from the other visible objects.
Since I can control the opacity of the fill, border, and shadow at a "global" level for the object, option A can still be achieved with the existing functionality. So option B only adds additional options to our toolkit.
-
Robert Anderson
commented
option B is a must, but like others have said, if we could do both easily, even better
-
Sven
commented
@peter Option B.
-
Julius
commented
@peter Option B. You have more control over the overall situation since you can still use the overall transparency of the object to reduce the overall opacity.
-
Anonymous
commented
If I had to chose: option B. But having both would be really nice.
-
Anonymous
commented
Option B
-
Anonymous
commented
B
-
Henry
commented
Option B is my preference. You can recreate option A using option B if you want. Or add a per-shadow preference as suggested below so you can toggle the behaviour.
-
Ricardo Antonio Cabral
commented
I'd prefer if both options were possible, and a simple "Knock out" checkbox to switch the behaviour.
-
Farhood Kankash
commented
This kind of updates & fixes should be done earlier. Their necessity shouldn't be counted by votes here. This change makes the XD shadow becomes realistic to the industries standards. It must have done earlier. It's a shame that all designs done by XD can't look realistic in shadows cause of this & you that are counting votes to fix this, just shame.
-
Jarek commented
B all the way! As already mentioned, option B gives us an opportunity to recreate option A.
Pater Flynn - any updates on this feature?
-
Anonymous
commented
Option "b" is what I find myself most often trying to do.
-
Anon
commented
B please. B gives strictly more flexibility. With B, we can recreate A by changing the opacity of both fill and shadow. With A, we can't recreate B.
-
Farhood Kankash
commented
Come on! This is almost 2019! U haven't done anything about it? It's A SHAME!
-
Gonzalo
commented
B Please!
-
Dan
commented
I'd much prefer option B.
-
Farhood Kankash
commented
I prefer B! but if we could have both options would be nice!
-
David Gross
commented
Shadow should be independent of fill. They are separate attributes you can control. In fact, standard rows uses an interior shadow (at y=-1) as a divider between rows...XD cannot do this!!!
-
Lovechand Shrestha
commented
B