Advertisement

How to Create a Set of Toggle Buttons in Adobe Illustrator

by

In the following tutorial you will learn how to create a set of toggle buttons in Adobe Illustrator. We'll be using basic shapes and the Pathfinder panel to create this UI essential for anyones tool kit. Further more, you won't need the Pen Tool, so it's easy to follow along for beginners!


Step 1

Hit Command + N to create a new document. Enter 600 in the width box and height boxes 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 your click OK. Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid).

Next, you need a grid every 5px. Go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. Al these options will significantly increase your work speed.


Step 2

Using the Rectangle Tool (M), create a 215 by 255px shape, fill it with R=70 G=70 B=70 and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Object > Expand Appearance.


Step 3

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the shape made in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down using the down arrow from your keyboard. Reselect both copies, open the Pathfinder panel and click on the Minus Front button. Fill the resulting shape with R=20 G=20 B=20.


Step 4

Reselect the rounded rectangle made in the second step and focus on the Appearance panel. First, select the fill and go to Effect > Stylize > Inner Glow. Enter the data shown below, click OK then go to Effect > Stylize > Drop Shadow. Again, enter the data shown in the following image and click OK. Make sure that your shape is still selected, return to the Appearance panel and add a 5pt, black stroke. Select its, lower its Opacity to 5% and align it to inside. Keep focusing on the Appearance panel and add a second stroke for your shape using the Add New Stroke button. Select this new stroke, set its color at black, make it 2pt wide, lower its Opacity to 20% and align it to inside.


Step 5

Enable the Snap to Grid (View > Snap to Grid). For the following steps you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Using the Rectangle Tool (M), create a 64 by 28px shape, fill it with black, place it as shown in the following image and go to Effect > Stylize > Rounded Corners. Enter a 14px radius, click OK and go to Object > Expand Appearance.


Step 6

Using the Rectangle Tool (M), create a 36 by 24px shape, fill it with the linear gradient shown below and place it as shown in the following image. The white numbers from the gradient image stand for location percentage. Switch to the Ellipse Tool (L) and create a two, 24px circles. Fill both shapes with white and place them as shown in the second image.


Step 7

Reselect the three shapes made in the previous step and duplicate them (Control + C > Control + F). Select these copies and click on the Minus Front button from the Pathfinder panel. Move to the Layers panel, double click on the resulting shape and name it "Top".


Step 8

Reselect "Top" along with the right, white circle and duplicate them (Control + C > Control + F). Select the copy of the circle and move it 1px to the left using the left arrow from your keyboard. Reselect both copies and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below and change its Blending Mode to Soft Light. Again, the white numbers from the gradient image stand for location percentage while the yellow zeros stand for Opacity percentage.


Step 9

Reselect "Top" along with the left, white circle and duplicate them (Control + C > Control + F). Select the copy of the circle and move it 1px to the right using the right arrow from your keyboard. Reselect both copies and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below and change its Blending Mode to Soft Light.


Step 10

Reselect "Top" and make a copy in front (Control + C > Control + F). Using the Rectangle Tool (M), create a 20 by 4px shape and place it as shown in the second image. Select this new rectangle along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with white and lower its Opacity to 10%.


Step 11

Reselect "Top" and make a copy in front (Control + C > Control + F). Using the Rectangle Tool (M), create a 36 by 3px shape and place it as shown in the second image. Select this new rectangle along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 20%.


Step 12

Reselect the black rounded rectangle made in the fifth step and duplicate it (Control + C > Control + F). Select this new copy along with the two, white circle and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=45 G=45 B=45.


Step 13

Reselect the black rounded rectangle made in the fifth step and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.


Step 14

Using the Ellipse Tool (L), create a new 24px circle, fill it with the first linear gradient and place it as shown in the first image. Select this new shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the third image and lower its Opacity to 15%.


Step 15

Reselect the circle made in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the third image and lower its Opacity to 15%.


Step 16

Reselect the 24px circle and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the third image and lower its Opacity to 15%.


Step 17

Using the Rectangle Tool (M) and create two, 1 by 6px shapes, one black and the other white. Place them as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 0.5px radius, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown in the second image and click OK.


Step 18

Reselect the black rounded rectangle made in the previous step and go to Object > Expand Appearance. Turn the resulting group of shapes into a Compound Path (Object > Compound Path > Make), fill it with R=120 G=120 B=120 and change the Blending Mode to Multiply.


Step 19

Reselect the white rounded rectangle made in the seventeenth step and go to Object > Expand Appearance. Turn the resulting group of shapes into a Compound Path (Object > Compound Path > Make) and lower its Opacity to 13%.


Step 20

Reselect all the shapes created in the last six steps and Group them (Control + G). Select this new group and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. This will create a horizontally flipped copy of your group. Drag it to the right and place it as shown in the third image.


Step 21

Select all the shapes created in the last 15 steps (the shapes that make up the button) and group them (Control + G). Move to the Layers panel and name this new group "Button". Disable the Snap to Grid (View > Snap to Grid). With the Type Tool (T), add "ON" as shown in second image. Use the "Century Gothic" font with the style set at Bold and the size set at 12pt. Select this text, focus on the Appearance panel and add a new fill using the Add New Fill button. Select it, set its color at R=57 G=181 B=74 and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.


Step 22

Reselect your text and add a second fill. Select it, make sure that the color is set at R=57 G=181 B=74 and go to Effect > Stylize > Outer Glow. Enter the data shown below and click OK. Keep focusing on the Appearance panel and add a third fill. Select it, set its color at R=57 G=255 B=74 and go to Effect > Path > Offset Path. Enter a -0.6px Offset and click OK.


Step 23

Select all the shapes created so far and group them (Control + G). Make a copy of this new group and move it to the right as show in the second image. Focus on this new group and remove the text. Next, select the "Button" and move it 64px to the right. Focus on the Layers panel and drill down into your "Button" group. Select the bottom, black rounded rectangle and focus on the Appearance panel. Open the two Drop Shadow effects and inverse the X Offset (simply replace 1px with -1px).


Step 24

Keep focusing on the second group made in the previous step and add the "OFF". Set its color at R=20 G=20 B=20 and use the "Century Gothic" font with the style set at Bold and the size set at 12pt. Also, add the discrete Drop Shadow shown in the following image.


Step 25

Finally, here's how you can easily recolor your buttons. Reselect the main rounded rectangle (the one made in the second step), make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + [ ). Select this fresh copy, focus on the Appearance panel, remove the strokes and the effects then fill it with R=215 G=225 B=242 and change the Blending Mode to Color.

Or, you can use the same techniques but only for the button.


Conclusion

Now your work is done. Here is how it should look in a variety so color combinations.

Advertisement