How to Create Web Interface Sliders Using Adobe Illustrator
This tutorial is the next in the exclusive series covering the topic of user interface design in vector.
Today we will learn how to create a web interface slider which will represent a fully dynamic interface element. In other words, you will be able to change its appearance in a few seconds resulting in new design variation. Yes — today we will create a slider-transformer, with the help of Illustrator’s Appearance panel and the VectorScribe plugin…
Step 1
Start creating a pixel background. These backgrounds provide with a good texture for interfaces. In order for the objects to be accurately placed in the pixel grid, go to the Pixel Preview mode and zoom in the artboard, so that the pixel grid is visible and its cells are large enough.
Turn on Snap to Pixel mode , take the Rectangle Tool (M) and create two squares 2 by 2 px in size, so that they are exactly located in the cell of the pixel grid.
Now create two more squares and fill them with a lighter shade of gray color.
Step 2
Select all the squares and go to and save a new pattern in the Swatches panel.
Create a rectangle whose size corresponds with the size of the background, and apply the created pattern.
Step 3
Proceed to the creation of a slider. The shape of a slider is a Rounded Rectangle. There are several ways to create an object of this shape. Let’s take a look at the advantages and disadvantages of each of them.
We can create a Rounded Rectangle with the help of the Round Rectangle Tool. We can control the rounding corner radius in the process of its creation using the arrow keys.
We can also enter the necessary parameters in the dialog window of the tool by clicking on the artboard.
However, after the creation of the shape you won’t be able to control the rounding radius. This means that if you change the size of the Round Rectangle, the rounding will get distorted.
I do not think this is the best way to create these shapes.
We can round the corners of a rectangle with the help of the Round Corners effect
In this case, you can always change the rounding radius by opening a dialog window of the effect in the Appearance panel.
Changing the sizes of the shape does not distort the rounding.
This is a fairly easy method as you can quickly edit the shape and create complex graphic styles that contain Round Corners effect. The disadvantages of this method are the inability to apply different rounding radii to different corners and the fact that in the case with complex shapes the effect does not just round the corners but distorts its shape.
A more flexible tool for creating shapes with rounded corners is the Dynamic Shapes Tool, part of theVectorScribe Studio plugin. When applying this tool you have the ability to control all the parameters of the shape from the panel.
Note: if you attempt to apply the Align to Pixel Grid tick option found in the Transform panel on dynamic shape and corner elements, the dynamic nature will be lost. Therefore it’s best to avoid for these object types.
In addition, you can control the rounding radius by dragging the corner points.
If you need to use different rounding radii to different corners, then use the Dynamic Corners Tool, again part of the VectorScribe Studio plugin.
To create a Round Rectangle I used the Dynamic Shapes Tool.
Fill the shape with dark gray color.
Step 4
To create light and shadow, we will be using the Appearance panel . Duplicate the fill, and fill the bottom one with another shade of gray.
Now, keeping the object and fill selected, go to and set the vertical offset value.
Set the Screen Blending mode in the Appearance panel for this fill.
Step 5
Add a new fill in the Appearance panel. Apply a linear gradient that includes white and gray colors, and set the Multiply Blending mode .
Set a black stroke for the object.
Now, the object looks like this…
Step 6
Create another Rounded Rectangle with a black fill with the help of the Dynamic Shapes Tool.
Using the Appearance panel’s live effect technique, transform the shape to the one shown in the picture below.
Create the active part of the slider also with the help of the Appearance panel. All the applied fills are shown in the picture below.
I created a new pattern for the bottom fill, which is exactly the same as the one created in the first step, except for that two of its squares have lighter fill.
Step 7
Proceed to the creation of the slider’s handle. Its fill should represent a conic gradient. You can read detailed instructions on how to create such fill by clicking on the following link.
Let’s create the shape of the handle with the help of the Dynamic Shapes Tool. This will allow us to quickly change the shape by making sliders of different types.
Step 8
Select the object and the dynamic shape with a conic fill, then go to
As a result, we have a Clipping Mask which represents a dynamic object. Now, any changes in the Dynamic Shapes panel will immediately change the shape of the slider’s handle.
Step 9
Create the drop shadow from the handle using an ellipse which is filled with an elliptical gradient from gray to white color. Apply the Multiply Blending mode to the ellipse.
Readjusting the dynamic shapes of the slider’s handles and changing the gradient fill of the active part of the slider in the Appearance panel, I quickly got these collection of sliders.
Download the dynamic user interface original artwork
Click here for the Illustrator CS3/CS4 version…
Click here for the Illustrator CS5 version…
About the author
My name is Iaroslav Lazunov, I am a graphic designer from Zhytomyr, Ukraine. I am glad that I finally found the job in my life that I can share my knowledge and experiments with you in my tutorials.
Follow me on Twitter, Facebook or visit my blog Vectorboom.