How to achieve colored low

[80sTherapy]

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.]

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.

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

 

[thomaso]

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]

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!

[lepr]

An alternative version using Inner Shadow instead of Inner Glow because the latter lacks angle and offset controls.

drop.afdesign

 

[_考槃]

试着做了一下，希望对你有所帮助

4K专区 - 电脑壁纸-1.afphoto

[lepr]

4 minutes ago, _考槃 said:

试着做了一下，希望对你有所帮助

4K专区 - 电脑壁纸-1.afphoto

 

Looks OK, but you should be explaining how you created/painted the Pixel objects in you document.

[v_kyr]

On 9/30/2023 at 4:54 PM, 80sTherapy said:

... used in macOS icon design

See also macOS related the right use of icon shapes here, namely a Squircle vs a Rounded-Rect ...

• Squircle_vs_rounded-rect-square.afdesign
• Squircle rounded square.svg
• Apple DEV Design - App Icon

[_考槃]