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

Long shadow effect


Recommended Posts

Vic Asecas on our Facebook page asked about creating a long shadow, it would be good to have in future. Here's the example effect Vic wants to achieve:

 

10920950_10153475999751521_6233157141990

 

When I had a play I struggled to make it look as good, it seemed to me that the effect can be approximated with dark shapes and a gradient transparency, but the gradient has a straight profile perpendicular to the gradient path. In Illustrator, this effect can be achieved using blended copies of objects that go from e.g. 20% opacity down to 0% with a blend spacing of e.g. 1pt. Even with a long shadow this produces vector banding like the bad old days, so I'm sure there's a nicer way we could achieve it.

 

Mesh fills would be one possibility, obviously the Blend tool on the roadmap is another, but maybe a Long Shadow layer effect/tool is another possibility?

Twitter: @Writer_Dale
Affinity apps run on: Ryzen 5 3600, 32GB RAM, GTX1650 Super

Link to comment
Share on other sites

That's how I would do it as well MEB... I would use a black multiply fill around 10-15% opacity then apply a transparent gradient on it. That way if you change the blue to another colour the shadow still works. Once you create the shadow shape you can just duplicate it as many times as you need it and adjust as you go... you could also save it as a style to quickly apply it or use in other documents...

Link to comment
Share on other sites

It's certainly a good approximation Miguel with nice radial transparency, but for other shapes it would need a more complex solution provided by the maths of the Affinity guys rather than the hands of a designer.

Twitter: @Writer_Dale
Affinity apps run on: Ryzen 5 3600, 32GB RAM, GTX1650 Super

Link to comment
Share on other sites

  • Staff

Yes, I know what you mean Dale. There's no way to automatically create the shape of the shadow based on the source shape through styles. Only scripting or hard coding the effect would solve the geometry transformation issue. Nothing i can do there.

 

But there's other considerations in hard coding it on the app. This is a compound effect that only is being discussed here, because it's a trending effect. In two years it will become obslolete and nobody will be doing it anymore (aqua effects - just to pick a widely spreaded effect -, anyone remember those?). It's also too complex to be implemented as an FX (for the same reason: it will become dated) and because FX are meant to be basic building blocks (attributes) for other compound styles/effects, and not finished parametric effects themselves (i believe). Also a pre-coded effect like this is more adequate for a consumer level oriented software or as a plug-in than for a professional application, which can rely on scripting and/or actions to speed up the creation of effects like this.

 

The scripting support solution may solve those issues, but is almost useless for the majority of users. Most people buy Affinity to design, draw or ilustrate, not to code, which turns it into a niche solution. Regarding the actions, it's still may be tricky to implement those shape transformations with actions because some operations needed for this effect are performed at a node/path level, not at a shape level (stretch, scale, rotate etc), but i may be wrong here. That's why i want to take another look at this. What are those Photoshop actions doing regarding the shape transformation issue?

 

Would be interesting to know what others think about this too.

Link to comment
Share on other sites

It isn't me the consumer-level author guy asking for this feature, it seemed to come from a designer using Illustrator. This style requires the use of a competitor's product instead of AD, so I pass the request on for consideration, I do appreciate that it's not critically important.

 

There's a technical side that piqued my interest because the technique Illustrator designers are using now, making blended shapes, is a "sub optimal" way to achieve this effect :) so an alternative is worth considering for a moment. And besides, it could be used for more than this one effect, it could lend itself to some much nicer illustration styles.

 

We get requests for other kinds of shadows too, with shear, variable blur and variable opacity over distance, maybe this idea sits alongside them? How many of them will be plug-ins or scripting in future? That beats having no solution, but by the time we get there we could match the blended shape method anyway, which might be fine enough.

 

Maybe if our planned Blend shapes tool had a Gaussian Blur option that clipped within the shape extent, then no special feature, script, or plug-in is needed at all? 

Twitter: @Writer_Dale
Affinity apps run on: Ryzen 5 3600, 32GB RAM, GTX1650 Super

Link to comment
Share on other sites

  • Staff

I know it wasn't you Dale and i'm not using a consumer-level term here in a depreciative way. It's in the sense that it's a pre-build compound effect that you apply with one click (it's restrictive). But if an apllication consumer-level or not, speeds up or do something that helps achieve what you want, i'm all for it. 
 
I think it makes more sense your last suggestion to integrate all those attributes in a amplified shadow FX (shear, variable blur and variable opacity over distance,  shadow extension) than integrate it as a single compound effect.
 
The Blend tool is always welcome no matter what!

Link to comment
Share on other sites

  • 2 months later...

Hi Dale,

It's possible to construct these effects with the current tools (with smooth gradients). 

I gave it a shot (and will take another look later) but it seems feasible already. Here's what i have:

 

attachicon.giflong shadow_1.png

How did you make this? I currently make a bunch of shapes where I want to make the shadow, then combine them using the add tool, and then fill them with a gradient. On rounded rectangle shapes, getting the corner is SUPER annoying! This takes a long time and I want to know if there are other methods. Thanks.

Link to comment
Share on other sites

  • 3 months later...

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.