How to achieve colored low

80sTherapy · September 30, 2023

Hello,

Feel free to move this thread is this isn't the right subforum. I just dabble with icon design here and there, learning new things as I along. I am trying to understand what is the best to achieve colored glows often used in macOS icon design.

I am attaching the icon for the app Waterminder. The water drop has a light blue hue and inter low effect similar to the one used in the FaceTime and Messages app icons.

Could anyone explain a good way to achieve a similar effect or point me toward an online tutoriel?

Thanks in advance.

Ron P. · September 30, 2023

I used AP, but I think you should be able to do it in AD too. It's not difficult, just break it down to shapes.

Transparent document.
Rounded Rectangle (shape).
Tear Drop Shape. To get it to match the tear drop, I had to convert to curves and play with the curve nodes/handles.
With that you're about 80% there. Just need to apply some color.
Since you have (and I grabbed your image), just use it as a layer to grab the colors.
The Tear Drop uses a Radial Gradient, Light Blue to White.
The Rounded Rectangle uses a Linear Gradient. A darker blue to a lighter blue at the top.
To make the Tear Drop stand out, just play with the Outer Glow and Shadow layer effects.

thomaso · September 30, 2023

Alternatively to a gradient as fill colour for the drop you can apply a solid, white fill + the layer effect "Inner Glow". It gets placed at the drop's edge and doesn't require a specific definition and positioning like a gradient. But, also different to a gradient, a layer effect will always cause rasterisation on export.

80sTherapy · October 1, 2023

Thank you both for the suggestions. Those are the tools I was pretty much using, so glad I was in the right direction. Good to know about layer effects causing rasterization. Learned something new!