Learn how to create reflective and professional web icons using Adobe Illustrator with our guide. From creating the base shapes to adding reflections and final adjustments, our guide covers all the essential steps for creating web icons that add a modern and polished touch to your designs.
Step 1
Create a new document in RGB mode. Using the Rectangle tool or the Rounded Rectangle tool, draw a black square or rounded square (click-and-hold the Rectangle tool icon on the Toolbar to get more options). Hold Shift while ragging to draw a square.
Step 2
From the Rectangle tool choose the Star tool. Change the Fill at the bottom of the Toolbar to White and set the Stroke to None. Click and drag in the black square to draw a white star.
Step 3
Click on the Selection tool and hold the Option (PC: Alt). Then click and drag the star to duplicate it. With the Selection tool, click and hold the middle box at the top border of the star. Now drag it down so that it is upside down but about half
the size of the original star. Move it so its two points meet the points of the original star.
Step 4
Draw a rectangle over the new upside-down star using the Rectangle tool. Change the gradient to white and black, and move the middle slider to the left in the Gradient palette (Window>Gradient). Here I have set it to 15%. Change the
angle to 270° so the black is on bottom moving vertically to lighter shades.
Step 5
Choose both the rectangle and the upside-down star. One way to select them is to click and drag over the area with the Selection tool, and then Shift-click the black background to de-select it. In the Transparency palette (Window>Transparency), click the arrow to get the flyout menu. Click Make Opacity Mask.
Step 6
Try different shapes. Here I’ve drawn some shapes and grouped them (Object>Group) to create a few more examples.
