1. Create the canvas
First of all we need to define our workspace, go to File>new and set up a document with the following properties: 924 px X 860 px, RGB color mode and 72 dpi. As you can see this work will be done for digital devices (screen resolution).
2. Customize the background.
Very simple, just select the rectangle tool and draw a dark background where our GUI elements will be resting. We choose a dark tone because the whole set it's going to be on the same tonal channel.
OK, now the have defined our background, it's time to truly start the tutorial.
3. Making the GUI keyboard
This is the easier element of the two that will be developing, first take a look at some keyboard references to define the graphic style to implement, then we can start with the technical part of the procedure. If we complete the first key, the rest will came out very quickly, start by zooming in to 575 , we will be working on a major scale to perceive all the details, now choose the rounded rectangle tool and trace the first key.
Simple thing to do, now look for the appearance panel at the Window menu, it's from here that we will do almost everything.
Once you have noticed the appearance, you will end making used to visit this contextual menu to work on your illustrations and well, for start, let's define our object's stroke, which must be white and 1 px strong.
Now reduce the opacity to 10 . just click on the arrow next to the word "stroke" to see the opacity manager.
Great, the next thing to do is adding an offset path to our object, look for the Fx button, then go to Path>offset path and making the proper adjustments.
With the stroke defined, we can proceed adding fills, you can do that from the white square button.
And now choose a gradient from the color swatches that will display when you click over the fill icon.
Adjust this gradient until it looks like the one on the following screenshot.
Good, next thing to do is reducing the opacity to 50 .
And now let's add an offset path effect.
Next fill, it's another black and white gradient.
The next fill is a radial highlight, this is how you need to do it:
You can hit the G key to see a more detailed version of the gradient position.
Add an offset path effect to the fill.
As you can see, we are not adding any new layers, we're doing everything from a single object, that's the cool thing about Appearance, let's now add a new fill.
An offset path is the next thing to do.
Almost there, let's add the next fill, this one is a radial gradient.
As usual, we now proceed adding an offset path.
Great job, now we just need to enter a letter, it could be any of the keyboard's symbols, select the text tool and enter the letter of your choice.
And after that, you will have to visit the appearance panel one more time.
Let's add a Drop Shadow effect to our letter.
Adjust the drop shadow properties according to the following screenshot:
Zoom out to 100 and take a look at how our first key looks like.
Let's zoom in again to add an additional detail to the key. Grab the pen tool and draw the following shape:
And now from the appearance panel let's start adding fills, first one is a solid color with a reduced opacity of 50 .
After this we add a second fill, but this one is a gradient unlike the previous one.
Use the pen tool to draw another shape in top of the previous one.
And we fill this one with another gradient.
Great, let's zoom out one more time to see how our key is finally looking.
Having this key, you can simply copy paste it (Ctrl + C, Ctrl + F) and change the character on each of the other keys, in just a few moments you will have all of these keys:
The other keys are not exactly duplicates, you need to distort them in order to do it right, to fulfill that purpose all you need to do is select them and enlarge them depending on the key.
We have made a lot of progress until this point, now we will explain to you how to make the additional details of the keyboard. Grab your pen tool and draw the following shape filled with white.
Using the pen tool, we now need to trace a cross in the middle of the shape and, after looking for the pathfinder tool, select both shapes and click in the second button of the menu.
And now the shape itself is ready, we just need to add a shadow effect before completing it.
The drop shadow effect can be added from the appearance panel, let's see what this is about.
Now an arrow, draw it and then copy paste it, reduce its size and apply the second button of the pathfinder on it, fill the object with white.
And finally we must add a drop shadow effect to our arrow.
Duplicate this arrow and place it on the right side of your keyboard, remember that there are two shift keys.
Using the same process of drawing a shape, then apply the pathfinder and finally add a drop shadow, you can make the next symbol.
For the next symbol, we're going to make a group, all you have to do is make all the objects (do not apply them drop shadow) and then select them and right click, then choose group, select the group and apply to it the drop shadow effect.
And the next item is the same process, group layers and apply the drop shadow.
Now we move to the space bar in order to add the next elements that, unlike the others, are not made with a drop shadow effect, just a couple of pixel blocks, the first one is white with a 75 opacity and the second is black.
And now simply select both squares and duplicate them. 3 times.
Let's zoom out to see how it looks like:
And now it's just add a few more of these Braille keyboard textures and our keyboard is done.
As you can see, making the keyboard was something actually quite easy and that delivered a great quality element, now it's time to move to the second GUI element of this set.
4. Illustrating the GUI volume/track control button
This second element has less items within it but at the same time is more complex. First of all you can hide the keyboard whilst we're making the second item to clean a little bit your workspace, now grab your pen tool and draw the two initial shapes, then intersect them as we did before on the keyboard using the pathfinder.
Go to the appearance window and add a new fill to our element, a gradient fill to be more specific, the gradient must be like this:
Great, now reduce the opacity of this object to 50 .
Now we start playing with light effects, let's trace the next shape with our pen tool.
And from the appearance window we add a gradient filling like the one we show you at next.
And reduce the opacity to 50 to complete this element.
The other 4 highlights have very similar properties, it will be easy for you to create them.
Good, now the next one.
And the final of these 4 highlights.
Next thing to do is start adding color, trace the next shape and fill it with a black and white gradient.
The following three objects are extremely thin, but don't confuse them as strokes, they're shapes, this is the first one:
Now the next one, it goes this way:
You know what comes next, another thin shape.
And the final part of this four set.
After completing this part we will start making the buttons, the first thing to do is grab the brush tool and trace the first button.
There we have it, now we need to start adjusting the fill and stroke properties of our button.
Go to the appearance window to start adding parameters, first is adding a drop shadow effect, you won't see it until you start adding fills.
Now for the first fill let's add a gradient.
Next fill is another gradient with some changes on its opacity values.
Now we need to add a radial gradient that goes like this:
Remember that you can adjust a gradient position by hitting the G key.
Now let's add an offset path effect to our fill.
And another gradient fill comes next.
This one also has an offset path implemented.
I know it seems like and excess of fills, but is this what gives it the quality to our design, let's add a new gradient fill.
And now we add the offset path to our fill.
This is the final filling before we complete the main shape of our button.
And of course that this fill has also an offset path effect.
And we are done with the first shape of the four that we need to make to create our buttons, the next ones are much easier to do, let's start from the left, copy paste the one that we just did (Ctrl + C, Ctrl + F) and then we only need to change one fill's parameters.
And up to the next one, repeat the copy paste process (Ctrl + C, Ctrl + F) and adjust the following fills:
Select the left button and copy paste it (Ctrl + C, Ctrl + F), then right click>transform>reflect>vertical.
Place it in front of the left shape and then making the following adjustments to its appearance:
And we are done with the four basic shapes where our buttons will be working, let's take a full look of it.
To add more details, let's trace the following shape filled with this gradient:
And in top of this shape, we need to place the following figure:
Copy paste this two objects and place them in top of every button, now our GUI looks like this:
The next thing that we are going to do is the button's arrows, for start let's create the following object:
And let's add an offset path effect:
Good, after completing this fill, we need to give some color to our arrow, maybe this gradient will work:
To finish this arrow, we need to add an inner glow effect.
Now copy paste the arrow (Ctrl + C, Ctrl + F) and move it above the original and we're done with this part of the design.
Then select both arrows and duplicate and place them in the proper way over each one of the remaining buttons, then access to the appearance panel and change the green gradient on the 3 arrow group duplicates to the following way:
Now we can zoom out and take a look at how our design is doing so far.
We need to know how the rollover action will look, and for that, we now must copy and paste the top button and start adjusting it, first of all make the following changes to the initial shape:
The next shape now goes like this:
On the rollover position we introduce an additional glow to the button, you can make the starting shape using the ellipse tool.
As for the arrows, we decided to add them an outer glow to highlight them, you need to add the effect to each arrow separately.
And now we can see how a button of our GUI set looks when rolling over it.
Great, the only thing that's left is the inner part of our controller, it requires a little bit of patience but the results definitely worth the while. This first shape is made out of two ellipses intersected using the pathfinder tool.
And fill with the following gradient:
Draw another ellipse and fill it with the next gradient:
You know that we always work from the appearance window, so now you can add a new gradient fill.
Good, now the last fill to complete this ellipse, it's identical to the one we just did, so just repeat it.
Another ellipse, this one is smaller and has this gradient fill:
Make an ellipse of the same size than the previous one and fill it with a gradient color and a 60 opacity.
So far it's looking great, just a few more details and we are finished.
Just keep adding ellipses and fill them with gradients with low opacity values.
The next ellipse has only a gradient fill, not changes regarding the opacity.
After this, we start working on the highlights, which are also ellipses.
Remember to hit the G key to adjust your gradient's position.
Come on friends, we're almost there, hurry up and draw the next ellipse, this is has a 100 opacity, so do not touch it.
One more highlight, you know what to do.
One final glow and we're only missing the OK text and some highlights, so go and select your ellipse tool.
The next shape needs to be traced using the pen tool.
And we keep adding details, we are almost getting to the end of this tutorial, the next shape is an ellipse that you need to rotate.
It's time for another intersection between two ellipse using the pathfinder tool.
Copy paste the shape (Ctrl + C, Ctrl + F) and reduce its size a little bit, then change its fill for the following gradient:
And we have reached the end, select the text tool and enter the name of your button.
Now go to the appearance panel and add to our text an inner glow effect.
And we are done, our GUI set is ready, look how the controller looks:
Now you know how to make a top quality GUI set such as the one we developed across this entire tutorial, it took us almost 200 images to guide you through the entire process but we know that you will have no problems following this tutorial, although if you have it you can always leave us a comment and we will be happy to assist you, coming soon more fabulous tutorials and articles only here, at Tutorialshock.
