Get ready for Spirit Day! Today's the day when millions of people go purple to show their support for LGBTQ youth against bullying. We’re proud to stand together with GLAAD and celebrate this day by wearing purple and creating this set of flat purple icons, representing strength, courage, love and support! Follow this article and learn how to use simple shapes, warp effects and various functions of the Pathfinder panel to design these icons dedicated to Spirit Day.
As the world goes purple, showing support and assistance, be sure to check out Envato Market for more purple icons that may inspire you! Let’s start!
1. How to Create a Banner Icon
Step 1
Take the Rectangle Tool (M), hold Shift and make a 65 x 65 px rectangle. Fill it with bright purple color.
Step 2
Copy (Control-C) the square and Paste in Back (Control-B).
Move the bottom copy down and to the right, using the arrow keys on your keyboard while holding Shift. Fill it with linear gradient of darker-purple tints. Use the Gradient Tool (G) to place the gradient horizontally from left to right.
Keeping the shape selected, go to Object > Path > Add Anchor Points to add an anchor point in the middle of each edge.
Step 3
Take the Direct Selection Tool (A) and drag the anchor point on the right edge to the left.
Step 4
Create a narrow rectangle filled with dark-purple linear gradient and place it between the two squares, making it fit the space. The Smart Guides (View > Smart Guides) will help you to position the rectangle, making it stick to the right place.
Use the Delete Anchor Point Tool (-) to remove the bottom right anchor point, turning the shape into a triangle to form the folding of the flag.
Use the Rectangle Tool (M) to make a narrow 5 x 110 px rectangle for the flagpole. Fill it with light-purple linear gradient.
Take the Ellipse Tool (L) and create a 12 x 12 px circle on top of the flagpole.
Step 5
Let’s add a heart symbol to our flag. Make a 25 x 25 px circle of light-purple color. Hold Alt-Shift and drag the shape to the right, creating an overlapping copy.
Unite the copies in the Pathfinder and use the Delete Anchor Points Tool (-) to remove the middle anchor point in the bottom, making the bottom edge flat.
Step 6
Use the Add Anchor Point Tool (+) to place a new point in the middle of the bottom edge and then remove two points at both sides of it (marked in the screenshot below). Now that our object is beginning to take the form of a heart, let’s further modify it.
Use the Direct Selection Tool (A) to drag the bottom anchor point down. Then drag the bottom handles of the side anchor points down to make the shape more rounded.
The Guide will help to make the length of the handles equal. Turn on the Rulers (Control-R) and drag the horizontal guideline from the upper Ruler. You can then select and delete it or View > Guides > Clear Guides when you don't need it anymore.
Step 7
Position the heart over the center of the flag.
Step 8
Now let’s create a bright icon base. Take the Polygon Tool and single-click anywhere on the Artboard to open a pop-up Polygon window. Set the number of Sides to 3 and create a 25 x 100 px triangle. You can adjust the size of the shape either from the control panel on top or from the Transform panel (Window > Transform).
Double-click the Reflect Tool (O), select the Horizontal Axis and clickCopy to create an upside-down triangle. Move the copy down, making the tips of the triangle stick to each other.
Step 9
Group (Control-G) both triangles and double-click the Rotate Tool (R) and set the Angle value to 30 degrees. Click Copy to create a rotated group of triangles and press Control-D multiple times to create more copies, making a circle of rays.
Step 10
Use the Rounded Rectangle Tool to make a 140 x 140 px yellow rectangle for the icon base. Adjust the Corner Radius, using the Transform panel, setting it to about 33 px.
Place the circle of rays between the flag and the icon base.
Step 11
Copy (Control-C) the icon's base and Paste in Front (Control-F).
Bring the shape to Front (Shift-Control-]). Finally, select all the objects, right mouse click and Make Clipping Mask.
And that’s how our icon looks now! Everything is hidden inside the Clipping Mask and still editable if you double-click it.
2. How to Create a Megaphone Icon
Step 1
Use the Rounded Rectangle Tool to make a 10 x 33 px shape with fully rounded corners.
Switch to the Rectangle Tool (M) and make an 83 x 65 px shape, filled with dark-purple linear gradient.
Attach one shape to another and let’s Align them. Select both shapes and click the large rectangle once more to make it a Key Object (you will see a thicker selection). Head to the Align panel and click Vertical Align Center.
Step 2
Select the bottom left anchor point of the larger rectangle with the Direct Selection Tool (A) and hit Enter to open the Move window. Set the Vertical value to -20 px and the Horizontal to 0 px. Click OK to move the point 20 px up.
Repeat the same for the upper left anchor point, moving it in the opposite direction, thus making the left side of the shape narrow.
Step 3
Let’s add a lightning bolt emblem to our loudspeaker. Make a 10 x 45 px rectangle and use the Line Segment Tool (\) to add two horizontal lines across the rectangle. Select all three elements and Divide them in the Pathfinder panel.
Now that our rectangle is split into three parts, let’s use the Move function to move the middle section 5 px to the right and the bottom section 10 px to the right, making them look like stairs.
Step 4
Move the bottom and middle pieces up a bit to make all three elements overlap (use either the Up Arrow key or the Move function).
Double-click the Shear Tool and set the Shear Angle to 25 degrees, making our object skewed a bit.
Unite all the pieces in the Pathfinder, merging them into a single shape.
Step 5
Arm yourself with the Delete Anchor Point Tool (-) and remove the bottom right anchor point to make the tip of the lightning bolt sharp and pointed.
We can also make our shape more refined and dynamic by moving some of the points closer to each other. You can see these points marked in the screenshot below.
Step 6
Rotate the lightning bolt and position it over the megaphone to make the shapes fit each other.
Add one more detail to our loudspeaker by creating a 25 x 25 px circle on the right side of the loudspeaker. Apply a dark-purple linear gradient and Send the circle to Back (Shift-Control-[), beneath the loudspeaker.
Step 7
Let’s make the handle of the loudspeaker. Start by making a 35 x 25 px rectangle. Duplicate (Control-C > Control-F) it and shrink the top copy down to 23 x 15 px.
Step 8
Select both shapes and apply the Minus Front function of the Pathfinder to cut out the shape.
Switch to the Direct Selection Tool (A) and use the Live Corners feature to make the corners rounded by pulling the circle markers to the center. You can adjust the Corner Radius from the control panel on top, setting it to 3 px.
Step 9
Attach the handle to the loudspeaker and use the icon base from our first icon to give it a finished look.
And there we have it—our second icon is ready! Let’s move on!
3. How to Create a Ribbon Icon
Step 1
Grab the Rectangle Tool (M) and make a 55 x 20 px rectangle with dark-purple linear fill. Go to Effect > Warp > Arch and move the Horizontal Bend slider to 60%, setting the Vertical Distortion to 10%.
Go to Object> Expand Appearance to apply the effect.
Step 2
Make an 115 x 20 px rectangle of a flat light-purple color. Apply Effect > Warp > Arch with -40% Horizontal Bend value. Set the Horizontal Distortion to 15%, making the shape a bit wider from the right side.
Finally, Object > Expand Appearance to apply the effect.
Step 3
Rotate the light-purple part of the ribbon and attach it to the right side of the arched element. Select its top right anchor point with the Direct Selection Tool (A) and pull the circle marker to make the corner fully rounded.
Step 4
Use the Reflect Tool (O) to create a mirrored copy, placing it on the opposite side of the ribbon. Send the copy Backward (Control-[) and fill it with linear gradient, making it darker in the center in order to create the illusion of a shadow from the top ribbon.
Step 5
Place the ribbon on a bright yellow icon-base—and there we have it! Let’s move on to our last icon.
4. How to Create a Clenched Fist Icon
Step 1
Let’s depict a clenched fist, starting from the fingers. Use the Rounded Rectangle Tool to create the four fingers, varying the height of the shapes, as shown below. Keep the Corner Radius of each shape at 6 px and fill the shapes with a gentle linear gradient, slightly darker at the bottom.
Step 2
Now we’ll make a palm from a 70 x 60 px rectangle. Move its top anchor points closer to each other, making them stick to the edges of the fingers.
Step 3
Let’s make the rectangle look more like a real palm. Use the Add Anchor Point Tool (+) to create two points at the bottom edge of the shape. Then select the top left and top right anchor points and drag them up.
Step 4
Continue working with those anchor points that we’ve dragged up and use the Live Corners to make the edges of the palm smooth and rounded.
Step 5
Copy one of the fingers that we’ve created and place it over the rest of the fingers, forming a thumb. Use the Transform panel to make the bottom left corner of the shape square by setting its Corner Radius to 0 px.
Duplicate the shape once again and rotate the shape, combining the parts of the thumb.
Step 6
Use the Ellipse Tool (L) to create a light-purple ellipse, making it overlap the palm, as shown below.
Select both the ellipse and the palm. Take the Shape Builder Tool (Shift-M), hold Alt and click that piece of the ellipse outside the palm we want to delete. Done! Now it fits the palm perfectly.
Step 7
Use the Rectangle Tool (M) to make a 37 x 55 px rectangle for the forearm. Move the top anchor points, making them stick to the bottom edge of the palm.
Adjust the color, making the top of the forearm blend nicely with the light-purple part of the palm.
Step 8
Use the same yellow base from our previous icons to finish up the fist icon.
Step 9
Now we can place the icons on a dark-purple background and create subtle shadows. To do so, Copy the flat yellow elements and Paste them in Back (Control-C > Control-B). Move the copies down and to the right and change their color to dark purple.
Our Spirit Day Icons Are Ready!
This is all for this tutorial! We can continue adding details and turn our set of icons into a fancy poster by adding text to it to make the composition look more balanced and complete.
I hope you’ve enjoyed following this tutorial and will give your support by wearing something purple. Be sure to check our more Spirit Day tutorials on Envato Tuts+.
Have fun!
