Create a Glossy Help Icon In Illustrator
I’ve always been a fan of beautifully designed icons. They can really spice up any web design and add that extra touch of detail. Not only do they look cool – they also play a leading role in terms of UX. Many common functionalities of websites have been given their unique, recognizable visual counterpart over time.
In today’s tutorial we’ll design a modern help & support icon. The life belt is a popular choice for this duty. Let’s get straight to it.
The Final Icon
Creating The Life Belt
Launch Illustrator and open a new document with a size of 800px by 600px. Grab the circle tool, click somewhere on the stage and enter 400px for both width and height in the upcoming window. Center the circle horizontally and vertically via the Align window. Create another circle with a size of 250px on top of the first circle.
Select both circles and click the Minus Front button within the Pathfinder window to combine the two shapes to a ring. Remove any stroke and pick a fill color somewhere between red and orange. You’ll be able to change this color later on if required.
To add some depth and 3D-ish effect, go to Effect->Stylize->Inner Glow… and set the blending Mode to Color Burn, the opacity to 100% and the blur size to 18px. Add a drop shadow as well to let the ring pop out. Adjust the settings to suit your taste.
To add some glossy highlights to the ring, draw a white circle on top of it. Holding the shift key while dragging ensures, that the width and height are equal. Set the opacity to 50% so that you can see through it for better orientation. Make sure, the new circle is aligned in the center of the stage. Hit cmd+c and cmd+f to paste a copy of the white circle on top and move it down right with the cursor keys. Holding shift can again help you to reach the right position faster.
Select the two white circles and hit Minus Front from the Pathfinder window again. This will leave you with a nice, glossy highlight in the upper left part of the life belt.
Repeat the last step a few times to add more glossiness. You might want to vary the opacity of the highlights a little bit to give it a more realistic look.
Select all of your highlighting shapes and hit cmd+g to group them. Add a Gaussian blur of 2px to this group to smooth the edges.
Next, we will add the four white parts to the life belt. They should get a little thinner on the inner side of the ring. Start with white rectangle centered above the ring (mine was 120px wide). Go to Object->Path->Add Anchor Points to divide each side of the rectangle in its middle. Move the vertices in the center closer together using the Direct Selection Tool and the cursor keys.
Paste a copy of the white shape on top and rotate it by 90°. The shift key is your friend once again here. Now select both of the white shapes and unite them to a single object.
To get rid of the spare areas, create a copy of the ring object, select the copied ring and the white shape and click on the Intersect button from the Pathfinder window. This will leave you with the required parts.
Hit shift+cmd+g to ungroup the four pieces and cmd+8 to make a compound path. This is crucial for the next step you’re about to take. Apply a nice radial gradient to the object that spans over all the fours shapes. Without the compound path, each shape would get its own gradient now, which is not desired in this case. In the Layers window move this group below the highlights to let them reflect on it too.
Those white/grey parts seem somewhat flat now. A subtle Outer Glow lets them stand out much better and adds a lot of depth to the allover design. We’ll add a clipping mask later on to hide the unnecessary glowing.
Looks quite pleasant already. Let’s add the hangers (is that the correct term?) for the ropes we want to pull afterwards. Start with a little rectangle at the top. Go to Effects->Warp->Arc… and bend the rectangle slightly.
To apply the warp effect to the path, go to Object->Expand Appearance. Move copies of this shape to the remaining three spots and rotate them accordingly. Just as you did before, select all four of them and make a compound path. Now you can apply another radial gradient to the grouped object.
Select all the white/grey objects and rotate the selection a little bit. This randomness will add another more realistic touch.
Adding The Rope
In last week’s tutorial I showed you how to create a rope brush in Illustrator. Draw paths from one hanger to the next and apply this rope brush to them. Arrange the layer order to place some ropes behind the life belt and adjust the stroke width to fit.
Adding a shadow to the ropes will help them stand out a lot. One might go with a simple drop shadow for this, but I like having more control here. So let’s draw another path behind the first piece of the rope using the same brush and stroke width as before. Vary the distance of the two paths to achieve a cool 3D effect in the next few steps.
Of course, we need this shadow to be black now. Select the path and go to Object->Expand Appearance. Click the Unite button from the Pathfinder window to merge the pieces to a single shape and set its color to black.
Set the opacity of the shadow to 30% and apply a Gaussian Blur filter of 2px.
Some parts of the shadow and its blur might appear outside of the ring object now. This is where clipping masks come in handy. Select the red/orange ring and hit cmd+c followed by cmd+f to paste a copy of it in front. Move the new layer above the shadow, select both the copied ring and the shadow, then go to Object->Clipping Mask->Make (or simply hit cmd+7).
This restricts the shadow to the area of the ring. Repeat these steps for the other pieces of the rope that are in front of the ring. Use the Eydropper Tool to copy the settings for opacity and blur.
You don’t need to create clipping masks for each part though, since you can simply throw the other shadow shapes into the existing clipped group. Once you’re at it, throw the group of the white stripes into the same clipping group as well to stop its outer glow from leaving the ring.
The shadow of the rope’s pieces, that are placed behind the ring, don’t belong into this group. Move those shadows to the very back.
The hangers still look a little flat now. They need to throw a slight shadow on the ropes. One way to do it, is to apply an outer glow and use a Clipping Mask like we’ve done before.
Draw two circles and use the Minus Front button again to create a ring that covers the hangers.
Select the new ring and the hangers group and hit cmd+7 to make a Clipping Mask. Now the outer glowing is restricted the rope.
And there you go with your ready-to-use help and support icon. Save it as a PNG file in the dimensions needed and add it to your next web design project.
The Final Help Icon
Did you enjoy reading this post? If so, please leave a reply and help me spread the word by sharing this tutorial.