Advertise    Write for Us


Adobe Illustrator Tutorial: How to Create Web Interface Sliders Using VectorScribe

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

This tutorial is the next in the exclusive series covering the topic of user interface design in vector:

Why You Should Use Adobe Illustrator to Create User Interfaces


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 (View > Pixel Preview) and zoom in the artboard, so that the pixel grid is visible and its cells are large enough.

Turn on Snap to Pixel mode (View > Snap to Pixel), 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 Edit > Define Pattern… 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.

You can read full version this vector tutorial on

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: 2
0   Spam
1 Andrymas777   (2012 Jul 01 15:26)
Почти всё получилось! Объём , тень-красота. На Вашей платформе буду лепить своё, думаю стоки оценят.
С заработка приобрету плаги, что рекомендуете.Пока читаю уроки и завидую. Выкручиваюсь по старинке.
Спасибо за сайт, полезно иновичку и профи.

0   Spam
2 jaroslav   (2012 Jul 02 00:52)
И Вам спасибо. Насчет плагинов, советуйтесь перед покупкой.

Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Recent Consultations
Dynamic Sketch  Tool for Adobe Illustrator (Movies)
Revealing Vector Inking Methods in Adobe Illustrator
Create a Magical Vector Landscape in Adobe Illustrator
How to Apply a Duotone Effect to Vector Artwork in Adobe Illustrator
New Functions of Adobe Illustrator CC/17.1. New Pencil Tool