Vector Slider Control With Illustrator | Bypeople

Vector Slider Control With Illustrator

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

Related Deals

Related Posts