In the following steps you will learn how to create a 3D cursor icon in Adobe Illustrator. For starters you will learn how to set up a simple grid and how to create your main shape using basic tools along with the Snap to Grid feature. Next, you’ll give it a 3D feel using the 3D Extrude & Bevel effect. Moving on you will learn how to add color, shading and highlights using the Appearance panel and some basic blending techniques. Finally, you will learn how to easily recolor your entire cursor using only one shape.
1. Create a New Document and Set Up a Grid
Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the width and height boxes, and then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.
Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 1 px, so simply go to Edit > Preferences > Guides > Grid, and enter 1 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid—it will make your work easier, and keep in mind that you can easily enable or disable it using the Control-“ keyboard shortcut.
You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.
2. Create the Arrow Shape
Step 1
Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke and then select the fill and set its color to R=209 G=211 B=212. Move to your artboard and simply create a 42 x 41 px rectangle—the Snap to Grid should make your work easier.
Make sure that this rectangle stays selected and go to Object > Path > Add Anchor Points. Switch to the Delete Anchor Point Tool (-) and simply click on the four anchor points highlighted in the first image to remove them. This should turn your rectangle into a triangle, as shown in the second image. Focus on the bottom side of your triangle and grab the Direct Selection Tool (A). Select the middle anchor point and drag it 6 px to the right. Once again, the grid and the Snap to Grid feature will come in handy.
Step 2
Make sure that your triangle stays selected, keep focusing on the bottom side, grab the Add Anchor Point Tool (+) and add a new anchor point as shown in the first image. Switch to the Direct Selection Tool (A), select the two anchor points highlighted in the second image, and simply drag them 6 px up. In the end things should look like in the third image.
Step 3
Using the Rectangle Tool (M), create a 12 x 22px shape and place it exactly as shown in the first image. Select this new rectangle along with the other shape, open the Pathfinder panel (Window > Pathfinder) and click the Unite button.
Step 4
Make sure that your shape is selected and go to Effect > 3D > Extrude & Bevel. Enter all the attributes shown in the following image, check the Draw Hidden Faces box, and then click OK.
Step 5
Reselect your shape and go to Object > Expand Appearance. Make sure that the resulting group is selected and simply hit Shift-Control-G twice to Ungroup it.
Using the Selection Tool (V) and the Shift button, select only the visible shapes (highlighted in the first image) and simply hit Control-G to Group them. Keep focusing on the Layers panel and turn off the visibility of your group so that you can have a look at the shapes that lie behind.
Get rid of those darker grey shapes and then select the remaining one and replace the existing fill color with a simple black (R=0 G=0 B=0). Once you’re done you can return to the Layers panel, turn back on the visibility for your group, and select and then Ungroup it using that same Shift-Control-G keyboard shortcut.
3. Add Color and Subtle Highlights
Step 1
Select the five shapes that make up the lateral sides of your cursor and make copies in front (Control-C > Control-F). Make sure that only these copies are selected, click the Unite button from the Pathfinder panel, and then hit the Control-8 keyboard shortcut to turn your selected shapes into a simple compound path. Make sure that your compound path is selected and simply replace the existing fill color with R=39 G=170 B=225.
Move to the Layers panel, select your black shape, make a copy in front (Control-C > Control-F) and bring it to front (Shift-Control-]). Make sure that this copy stays selected and focus on the Appearance panel. Remove the color from the fill and then focus on the stroke. Add R=247 G=148 B=30 for the color and increase the Weight to 2 px. With this orange path still selected, go to Object > Path > Outline Stroke.
Step 2
Reselect your blue compound path along with the orange shape and click the Intersect button from the Pathfinder panel. Make sure that the resulting group of shapes is selected and turn it into a new compound path using that same Control-8 keyboard shortcut.
Keep focusing on this orange path, grab the Delete Anchor Point Tool (-) and simply remove the six anchor points highlighted in the second image. In the end your orange compound path should look like in the third image.
Step 3
Make sure that your orange compound path is still selected and move to the Appearance panel. Replace the existing fill color with a simple black and then click that “Opacity” piece of text to open the Transparency fly-out panel. Lower the Opacity to 20% and change the Blending Mode to Soft Light.
Step 4
Select the five shapes that make up the lateral sides of your cursor one by one and simply replace the existing fill colors with the linear gradients indicated in the following image.
Step 5
Select the shape that makes up the top side of your cursor and simply replace the existing fill color with the linear gradient shown in the following image.
Step 6
Reselect the shape that makes up the top side of your cursor and focus on the Appearance panel.
Select the existing stroke, change its Blending Mode to Soft Light and add the linear gradient shown in the following image. Keep in mind that the blue numbers from the Gradient image stand for Location percentage while the yellow ones stand for Opacity percentage. Return to the Appearance panel and click that “Stroke” piece of text to open the Stroke fly-out menu. Make sure that the Weight is set at 1 px and then check the Rounded Join and the Align Stroke to Inside buttons.
4. Add a Subtle Contour Along the Edges of Your Shapes
Step 1
Reselect the six shapes that make up the visible sides of your cursor and duplicate them (Control-C > Control-F). Make sure that only these copies are selected, replace the existing fill attributes with two random shades of blue as shown in the second image, and don’t forget to remove the stroke used for the top shapes.
Step 2
Select the blue shape that makes up the top side of your cursor and make a copy in front (Control-C > Control-F). Select this copy along with the darker blue shape highlighted in the first image, and click the Minus Front button from the Pathfinder panel.
Step 3
Reselect all your blue shapes and focus on the Appearance panel. Remove the fill colors and then add a 1 px black stroke. Once you’re done, Group these shapes (Control-G).
Step 4
Make sure that your group is still selected and make a copy in front (Control-C > Control-F). Select this copy and click the Unite button from the Pathfinder panel. Focus on the resulting shape, set the fill color at white, get rid of that black stroke and then use the Delete Anchor Point Tool (-) to remove the anchor point highlighted in the second image. In the end things should look like in the third image.
Step 5
Reselect the white shape made in the previous step along with your only group, open the Transparency panel (Window > Transparency), and click the Make Mask button, and things should look like in the second image. Keep focusing on the Transparency panel, change the Blending Mode to Soft Light and lower the Opacity to 30%.
Step 6
Focus on the Layers panel, select the black shape that makes up the bottom side of your cursor, and move to the Appearance panel. Select the existing stroke, make it black, lower its Opacity to 5% and then open that Stroke fly-out panel. Make sure that the Weight is set at 1 px and then check the Round Join and Align Stroke to Outside buttons.
Step 7
Reselect the black shape that makes up the bottom side of your cursor, return to the Appearance panel, make sure that the entire path is selected (simply click the “Path” piece of text from the top side of your panel) and go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the top left window (in the following image), click OK and then add the other three Drop Shadow effects shown in the following image.
5. Add Shading and Recolor Your Cursor
Step 1
Reselect your masked group and make a copy in front (Control-C > Control-F). Make sure that it stays selected and click the Unite button from the Pathfinder panel. Now, you can use this new shape to easily recolor your entire cursor. Make sure that it stays selected and focus on the Appearance panel. Set the fill color at R=28 G=117 B=188 and then change the Blending Mode to Soft Light.
Step 2
Feel free to use a different blending mode for this shape that recolors your entire cursor.
Step 3
You can always adjust the Opacity percentage to increase/decrease the color intensity for the shape that adds color for your cursor.
Step 4
You can also try to combine two different blending modes.
Step 5
Finally, don’t hesitate to experiment with different colors.
Congratulations! You’re Done!
Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.
mgxdesignstudio 