Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Vector slider control with illustrator

Comments and suggestions in here

What’s up guys?. I hope you’re doing fine because we are about to start a new tutorial. In this opportunity we are going to show how to create a complete GUI set slider using Adobe Illustrator. For those who are not familiar with the GUI term, it goes after the words Graphical User Interface and as its name suggests it, is a type of user interface item that allows people to interact with programs in more ways than typing, it uses images rather than text commands. A GUI displays graphical icons and visual indicators to completely represent the information and actions that are available to the user. These actions are usually performed by a directly manipulation of the graphical elements. After this short introduction, let me tell you that through all this article we will be practicing the graphic styles option. Now its time to start this tutorial.

1. Take a look at some GUI examples

As we said before, its useful to look at some references before you start designing; the web is full of GUY examples, so feel free to take some time to check out.

GUI01

2. Place your ideas on paper

No matter how far technology has gone, the best way to draw some quick sketches will always be through paper and pencil. There are no intermediaries between your brain, your eyes and your hands.

GUI02

3. Create your canvas

OK, in this tutorial we will create a little GUI set, which in the future can be extended a lot, so we should start with a big canvas, go to File>New and assign it a 1586 px X 1340 px measures, RGB color mode and 72 dpi, this last two are screen parameters.

GUI05

GUI03

4. Our first shape

Its time to start drawing the first symbol of our GUI set. Select the pen tool and draw a large hexagonal figure. Remember that by holding Shift you can create straight paths and by clicking over an anchor point you can make straight turns

GUI04

GUI06

5. Using the Graphic Styles

The graphic styles vignette is one of the most practical tools that Illustrator has to offer. You can generate quite complex shapes without using layer after layer. To create a graphic style, go to Window>Graphic Styles and verify the option is checked, then go to Window>Appearance and activate it.

GUI08

GUI09

This is how both windows look like.

GUI10

Select the path we just did and then click on New Graphic Style.

GUI11

Lets start playing with our new style, make sure that both the path and the graphic style are selected, then go to Appearance and click on the Add New Stroke button.

GUI12

Adjust its values to white and 1 pt stroke weight.

GUI13

By doing this we’ve just added a stroke to our shape. Now lets add it some effects, click over add a new effect and select path>offset path.

GUI39

GUI52

Adjust the effect values to offset>2 px, joins>meter and miter limit>4. At the stroke vignette change the opacity to 10 %. You can display the stroke or fill options by clicking over the gray arrow left to the words “stroke” or “fill”.

GUI53

Now our path is being seen as follow.

GUI14

Next a fill, click over the Add New Fill button.

GUI15

Go to Window>Gradient if you’re not seeing this window, ‘cause we will need it to edit the fill we’ve just entered, if you want, place it next to the appearance window to find everything quicker.

GUI16

First choose a white color at the left side and a black color to the right side, remember you can change the color by double clicking over the house-like button.

GUI18

GUI19

Then modify the black color properties to the following: Type>linear, angle>-180 and opacity>75 %.

GUI17

The white color should have the following values: Type>linear, angle>-180 and opacity>50 %.

GUI20

Now display the fill vignette and add a Offset path effect, leave the values as we did with the last shape, finally, change the opacity of the fill to 50 %.

GUI54

The symbol must be looking at the moment like this:

GUI21

So far this is has been easy, at this rhythm we will finish it in a blink. Now click on Add a New Fill.

GUI24

Change both colors to black and click on the center of the bar to add a new color, then change it to dark gray. The properties of the three colors will be the same: Type>linear, angle>0 and opacity>100 %.

GUI22

Then you need to add an offset path, leave the parameters as usual but the opacity must remain in default.

GUI55

This a repetition process that at the end will provide us some great results, so keep it up and lets add a new fill.

GUI24

If you’re seeing three colors below the gradient bar, clear the one in the middle by holding click and dragging it down. Change the left color to white and the right to black, adjust the black parameters to type>linear, angle>-180 and opacity>75 %.

GUI56

As we did with the first fill, these two had the same values, check that the white parameters are set to type>linear, angle>-180 and opacity>50 %. This fill has no effects and a default opacity.

GUI23

One more time, but this fill is special, because its designed specifically to be a glow.

GUI24

Switch both extremes to white and adjust the parameters (be careful with this values) to type>radial, angle>-119 and the aspect radio to 132.54 %. Then add a new offset path effect and adjust the parameters to offset>-1 px, joins>miter and miter limit>4, leave the left color marker’s opacity unchanged and the right one to 0, finally, press G to change the gradient’s position and place it at the top right corner. If you did it right, our shape must be looking like this.

GUI57

GUI25

The next fill goes black at the right side and dark gray to the left one, leave the values in type>linear, angle>0 and opacity>100%. Next we show you some print screen images so you can check out.

GUI24

GUI26

Add it an offset path effect with the parameters offset>-2 px, joins>miter and miter limit>4. Leave the opacity default.

GUI58

For the next fill, switch both color extremes to white and adjust its values to type>radial, angle>90 and aspect radio>132.54. Give the right color a 0% opacity and the left one a 50%.

GUI24

GUI27

This one also needs the offset path effect, so select it and adjust its values to offset>-4 px, joins>miter, miter limit>4 and a default opacity.

GUI59

OK, the final fill, we are flying!!!. This one is a little bit more complex than the others, but that’s not a problem for us. Leave both the left and the right black and then add next to each icon another black one. Leave the values in type>linear and angle>89.9. Leave the opacity of the extreme colors in 40 % and the inside ones in 0 %.

GUI28

Now lets add offset path with its values adjusted to offset>-4 px, joins>miter, miter limit>4 and a default opacity.

GUI60

Go to Stylize>Inner Glow.

GUI40

Adjust this effect values to mode>multiply, opacity>20 %, blur>6 px and edge. This will finish the basic shape. Although is kind of a long process, the result makes it worth.

GUI61

We have completed our first shape made exclusively with graphic styles. Now every time we need to apply the same style to a shape, we just go to the graphic styles panel and select our style.

6. Some extra details

The next thing to do is to add a couple of glows. We are adding this glows apart because we need it to be very small and precise.

Using the pen tool, draw something like this.

GUI04

GUI29

Let’s go back to the graphic styles window and add a new one.

GUI11

Now go to appearance and if you see the previous values we left, simply select each style and then click over the trash can icon to delete it.

GUI30

This shape is very simple, it only requires one graphic style element. Select Add a New Fill and then leave both extreme colors in white.

GUI24

Now adjust the fill values to type>radial, angle>-33 and aspect radio to 100 %. The left color must have a 100 % opacity and the right one 0 %.

GUI31

We need a glow in front to complete the volume. Select the one we just did and copy it (Ctrl + C), then paste it in front (Ctrl + F) and go to Object>transform>reflect and choose vertical, Finally, place it right in front of the original glow.

GUI32

GUI33

Now we must adjust the shape parameters, go to appearance and change the angle in the gradient vignette to 135.

GUI34

Our figure will be so far looking like this:

GUI35

The next step is a subtle shape to generate volume. Use your pen tool to draw it and then go to graphic styles, add a new one and clear everything.

GUI04

GUI36

GUI11

GUI30

Now the graphic styles. Add a new fill and adjust the two colors to white, type>radial, angle>0 and aspect radio>100 %. Give 100 % opacity to the left one and 0 % to the right.

GUI24

GUI37

Now display the fill menu by clicking over the gray arrow, then change the opacity to multiply and check the clip fill.

GUI38

Its time to add some effects, keep the fill selected and click on the add new effect button.

GUI39

Go to Stylize>Inner Glow.

GUI40

Adjust its values to mode>multiply, opacity>75 %, blur>5 px, edge.

GUI41

Draw a new path above the one we just did, then add a graphic style and adjust its parameters to opacity>50 % and add a new fill.

GUI24

Keep the two colors in white and adjust the left one opacity to 75 % and the right to 0 %, adjust the type to radial, the angle to –91 and the aspect radio to 100 %.

GUI42

Now copy the penultimate shape we drew and rotate it 180 degrees, then place it on top of the bar.

GUI43

As you have seen, we are making every single piece using the graphic styles, because is an organize and effective way to do things in Illustrator. The next shape follows the same parameter. Draw it with the pen tool and then add it a new graphic style. Although is a thin figure, its a contour shape, not a stroke.

GUI04

GUI45

GUI11

OK this one has a unbalanced gradient. At the left side choose white with 100 % opacity, at the right side select also white with 29 % opacity and next to it another color marker, also white but with 0 % opacity. Everything must be in type>radial, angle>162 and aspect radio>100 %.

GUI44

The next figure is similar, copy paste the last shape we did (Ctrl + C, Ctrl + F), then reflect it vertically and place it in front of the original.

GUI32

GUI33

GUI46

Go to the appearance vignette and adjust the gradient properties to 3 colors (all white), type radial, angle>82.6 and aspect radio>100 %. From left to right assign the following opacity values: 75 %, 0 % and 30 %.

GUI47

We now continue with a black stroke in the middle to keep generating volume vibes. Draw a straight vertical shape. If you want we can select the black stroke through the graphic styles, but lets do it by clicking over the left icon at the bottom of the tool bar.

GUI48

The next thing to do is the lines across the bar that emulates the volume control. We just need to make one and then copy and paste a lot. Simply draw a horizontal black line using the pen tool. Then copy and paste it below and change the stroke color to gray. Next select both lines and right click to display a menu, select Group to join them.

GUI04

GUI49

GUI50

Now its copy after copy (Ctrl +C), paste after paste (Ctrl + F). Be careful with the position of each group so it won’t look disorganized; at the end you will be getting something like this.

GUI51

I guess you are starting to get bored by seeing black and gray gradients only, so lets add some color. Grab the pen tool and make a curved square.

GUI04

GUI62

Now the graphic styles. Add a new fill and leave the two gradient extremes white. The left white must have a 100  % opacity and the right one a 0 %. Also adjust the type to radial, angle>0 and aspect radio>166.2 %.

GUI63

As we’ve been doing, let’s add an offset path effect with the following values: offset>1 px, joins>miter, miter limit>4. Leave the opacity on default.

GUI64

And here comes the color. Add a new fill and adjust the gradient to four key points, each one with a different green tone that we show you below. Leave the type>radial, angle>0, aspect radio>100 % and all the opacity levels to 100 %.

GUI65

GUI66

GUI67

GUI68

Leave the opacity on default and proceed adding an inner glow with the following values: Mode>multiply, opacity>75 %, blur>2 px and edge.

GUI69

After zooming out, our little color object will be looking like this.

GUI70

7. The control button

OK guys, so far we have made a lot of usage to the graphic styles option, leaving us to the currently result. Now that we are getting closer to the end I suggest you to go for a cup of coffee or hot chocolate.

Using our beloved pen tool, lets draw the button’s shape. You can do it as you prefer to, you can do it as you wish, we made a hexagonal figure.

GUI71

Is time to apply what we have learned throughout this tutorial. Pick the new graphic style button and in the appearance box, clear all the items.

GUI11

GUI72

With our appearance box empty, its time to start working. Let’s add the first fill. Adjust the gradient parameters to black at both sides and one key color at the middle with a dark gray on it. Adjust the type to linear, angle>-90 and all three opacities in 100 %.

GUI24

GUI73

To give some volume to our button, lets go to the effects button and then click on stylize>drop shadow.

GUI74

Adjust the drop shadow options to mode>multiply, opacity>75 %, X offset>0 px, Y offset>2 px, blur>3 px and color black. Remember to leave the opacity default.GUI75

Don’t give up my young Padawan, we are getting closer. Insert one more fill and leave the left color key in white with 50 % opacity and change the right one to 75 % opacity black. Leave the type linear and the angle in 90.

GUI76

The next fill will help us developing our button’s volume. The gradient will be white at both extremes and with the following properties: Type>radial, angle>-126, aspect radio>100 % and 100 % opacity to the left and 0 % to the right.

GUI77

Now we need the offset path. Add it through the new effect button and adjust its values to offset>-1 px, joins>miter and miter limit>4.  Leave on default the opacity.

GUI39

GUI78

The next fill will place the main color of our button. The color keys of the gradient will be two scales of gray and the values are type>linear, angle>-90 and 100 % opacity in both extremes.

GUI24

GUI79

GUI80

Enter the offset path effect and adjust its values to offset>-2 px, joins>miter and miter limit>4, also keep the opacity default.

GUI81

Another fill. Switch the two the gradient elements to white, leave the left one with a 50 % of opacity and the right with 0 %. Regarding the parameters, choose type>radial, angle>0 and aspect radio>100 %.

GUI82

We continue using the offset path effect, this time adjust the parameters to offset>-4 px, joins>miter and miter limit>4, as usual, leave in default the opacity.

GUI83

OK guys, for the last fill of this shape, place 4 color key points over the gradient bar, all black. The two on the extremes with a 30 % opacity and the ones in the middle 0 %. The type should be linear and the angle 0.

GUI84

Now the offset path, adjust its values in offset>-4 px, joins>miter and miter limit>4, as usual, leave in default the opacity.

GUI85

Then Inner Glow, the values for this effect will be the following: Mode>multiply, opacity>20 %, blur>6 px and edge.

GUI86

Now some shapes at the point of the figure. Select the pen tool and draw as it shows next.

GUI87

This one needs also the graphic styles, add a new fill with default opacity and adjust the gradient to a 60 % opacity black to the right and a 0 % black at the middle, clear the key color of the left side. Also make sure that its type>radial, angle>0 and aspect radio>100 %.

GUI88

Now copy this shape and place it on top of the button (Ctrl + C, Ctrl + F), then rotate it 180 degrees.

GUI89

Lets add a thing glow at one side of the button, using the pen tool draw the following figure:

GUI04

GUI90

Now add it a fill with default opacity and enter the following values to the gradient options: Type>radial, angle>38, aspect radio>100 %, 100 % opacity white to the left and 0 % white to the right.

GUI91

Copy paste the shape we just did (Ctrl + C, Ctrl + F), reflect it vertically and place it in front of the original.

GUI32

GUI33

GUI92

Another tiny glow, we are almost there. Draw it with your pen tool.

GUI93

Go to graphic styles and add it a new fill. First clear all the items if there are any. The parameters must be: Type>radial, angle>26, aspect radio>100 % and white keys at both sides, the left one with a 100 % opacity and the right one with a 0 %.

GUI94

OK, after all this long process, one last thing, the final glow. It will cover the upper side of the button; you can draw it with the pen tool.

GUI04

GUI95

One more time, go to graphic styles, select one, clear everything and add a new fill.

GUI72

GUI24

The gradient properties of this fill will be type>radial, angle>90, aspect radio>100 %, a 100% opacity white to the left and 0 % white to the right.

GUI96

OK, I think we are done. It has been a nice journey through almost a hundred images and some of the coolest tools that Illustrator has to offer, we will continue bringing you new articles, countdowns and tutorials, take care.

GUI97


12 Responses to “Vector slider control with illustrator”

  1. It’s great how you guys manage to create such a complex element using a single layer, nice tuto.

  2. Hermit1986
    July 28th

    woo!! what a great tips!

  3. tutor
    July 28th

    Thanks guys for your comments, we expect you find all of our articles quite useful ;)…

  4. Nice Trick .. i like it ..

  5. I was seiroulsy at DefCon 5 until I saw this post.

  6. [...] 157. Create a High Quality GUI Button Slider in Illustrator [...]

  7. [...] 157. Create a High Quality GUI Button Slider in Illustrator [...]

  8. RT @WebDesignShock: Vector slider control with illustrator http://t.co/v17vNj0t #design #useful

  9. .. beautiful result and cool in-depth tutorial in Illustrator ~ Vector slider control http://t.co/KzJurQNi #illustrator

Leave a Reply

Comments

*