80sTherapy Posted September 30, 2023 Posted 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. Quote
Ron P. Posted September 30, 2023 Posted 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. Quote Affinity Photo 2.6..; Affinity Designer 2.6..; Affinity Publisher 2.6..; Affinity2 Beta versions. Affinity Photo,Designer 1.10.6.1605 Win11 Home Version:24H2, Build: 26100.1742: Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz, 3301 Mhz, 6 Core(s), 12 Logical Processor(s);32GB Ram, Nvidia GTX 3070, 3-Internal HDD (1 Crucial MX5000 1TB, 1-Crucial MX5000 500GB, 1-WD 1 TB), 4 External HDD; Wacom Intuos 3 PTZ-431W
thomaso Posted September 30, 2023 Posted 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. Quote • MacBookPro Retina 15" | macOS 10.14.6 | Eizo 27" | Affinity V1 • iPad 10.Gen. | iOS 18.5. | Affinity V2.6
80sTherapy Posted October 1, 2023 Author Posted 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! Quote
lepr Posted October 2, 2023 Posted October 2, 2023 An alternative version using Inner Shadow instead of Inner Glow because the latter lacks angle and offset controls. drop.afdesign firstdefence 1 Quote
lepr Posted December 10, 2023 Posted December 10, 2023 4 minutes ago, _考槃 said: 试着做了一下,希望对你有所帮助 4K专区 - 电脑壁纸-1.afphoto Looks OK, but you should be explaining how you created/painted the Pixel objects in you document. Quote
v_kyr Posted December 10, 2023 Posted December 10, 2023 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 Quote ☛ 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
Recommended Posts
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.