Advertise    Write for Us

Vectorboom

Adobe Illustrator Tutorial: How to Create UI Toggle Switches

posted by: Iaroslav Lazunov, in Illustrator Tutorials / Web Design/ Comments: 1
Final Image Preview

This Adobe Illustrator tutorial is the last in the exclusive series covering the topic of user interface design in vector.

In this tutorial we will learn how to create complex shapes using VectorScribe, DrawScribe and SubScribe plugins within Adobe Illustrator quickly. These are available as full 14 day trial downloads. By the way, the SubScribe plugin is free to all DrawScribe, VectorScribe and Phantasm CS v2 customers!

We will also view the process of coloring vector images where we use simple gradient fills and different blending modes. Most of modern interfaces are very similar to each other. Let’s try our best and make something original.

Step 1

Let’s start with the creation of the basic shapes of the switch. We will be using the Dynamic Shapes Tool, part of the VectorScribe Studio plugin, for these purposes. This tool will allow us to control the shapes dynamically in the process of their creation. Open the Dynamic Shapes Tool panel (Window > Dynamic Shapes panel). Choose the Dynamic Polygon, set the number of sides. Now take the Dynamic Shapes Tool and create a hexagon.

Copy the created shape and paste it in front (Cmd / Ctrl + C; Cmd / Ctrl + F), then choose the Dynamic Circle in the Dynamic Shapes panel.

Step 2

Increase the diameter of the circle by changing its size in the toolbar or by dragging one of the corner points of the shape.

Copy the circle and paste it in front, switch to Dynamic Rectangle in the Dynamic Shapes panel.

Grab one of the corner points, then holding down the Cmd / Ctrl, change the proportion of the rectangle.

Step 3

Using the Pen Tool (P) or InkScribe Tool (DrawScribe plugin), create new points in the centers of the sides of the rectangle. Using the arrow keys move them at the same distance from the center of the rectangle.

Select the resultant shape and the circle, and then click on the Unite button in the Pathfinder panel.

You can read full version this vector tutorial on AstuteGraphics.com

Follow us if you want to be the first to know about the latest Adobe Illustrator tutorials and articles. Vectorboom team works for you!

Total comments: 1
1 OberstDackel  
Absolutely superb tutorial. I learned so much. Very handy. Enormous thanks.

Recent Consultations
Summer Fest Sale starts NOW!
How to Create Vector Denim Texture in Adobe Illustrator
How to Obtain the Right Color in Adobe Illustrator
New beta release of VectorScribe plug-in is available
Free vector - ice cream cone