Adobe Illustrator, TutorialsAndrei Ștefan • March 02, 2015 • 0 Comments

If you’re into smartwatches, now this is the tutorial for you. With the use of some basic shapes and some tricks here and there I will guide you step by step so that in the end you will have created a stunning moto360 smartch with a little added Soundcloud flavor to make it whole.

So let’s get starting!

Step 1: setting up our document

As always, the first thing we need to do is make sure our document is set up right. So, assuming you’re already running Illustrator, create a new document (ctrl + N or File>New…) with the following settings.

• number of artboards: 1;
• width: 800px;
• height: 1400px;
• units: pixels (as the illustration will be mainly used on digital devices);

And from the Advanced tab

• color mode: RGB (color mode for screen use);
• raster effects: Screen (72 ppi);
• align new objects to pixel grid: checked (as we want everything to be pixel sharp).

Step 2: the layering process

Once we’ve created our new document, the first thing we need to do is create a number of individual layers so that we can work on different parts of the illustration without having to worry about affecting others nearby.

From the Layers Panel, create 7 layers and name them as follows.

1. background;
2. watch shadow;
3. moto360 watch;
4. cover pic;
5. soundwaves;
6. app buttons;
7. screen details.

Quick tip: I suggest locking all the layers except the one you are currently working on so that you won’t accidentally end up with some pieces of the artwork on another layer and find out about them later when you want to edit them.

Step 3: building the smartch

Assuming you’re done setting up the basics of our document, it’s time to actually start building stuff, and populate our cozy Artboard.

The watch band

The first thing that we’re going to create is the leather band. Make sure you’re on the moto360 watch layer and using the Rounded Rectangle Tool create a 104 x 978px object with a 24px corner radius. Use #595959 to change its color to a darker grey, so that it will start showing a leather like finish.

As we need to the top section to be completely flat (without any rounded corners) we will grab the Direct Selection Tool (A) drag and select the top center anchor points (highlighted with green) and then hit Del to erase them. As soon as you’ve deleted them, make sure you close the shape by uniting the remaining anchors using the Join function (ctrl + J).

Next let’s position the object. Using the Transform Panel, select the object and input the following coordinates:

• x: 400px;
• y: 763 px

Using the same trick with the Transform Panel, position the object on top of the wrist band using these coordinates:

• x: 400px;
  y: 866px.

Change its color to a lighter gray (#727272) and position it using the following values.

• x: 400px;
• y: 460px.

Once you’ve positioned the band, it’s time to start adding some details. As the default bands that ship with the moto360 have punctured holes, we need to make sure our design incorporates them too.

Grab the Rounded Rectangle Tool again, and draw a white 20 x 10px shape with a corner radius of 2px.

Using the same trick with the Transform Panel, position the object on top of the wrist band using these coordinates:

• x: 400px;
• y:

We now have our base hole, but we need about 12 of them. To do so, first enter Pixel Preview Mode (alt + ctrl + Y or View>Pixel Preview) so that you can easily begin the duplicating process. Select the created puncture shape and while holding down alt + shift, drag it about 10px towards the bottom of our Artboard. Repeat the process 10 times using ctrl + D (duplicate function). Now, select both the watch band and the holes (ctrl + A) and using the Pathfinder Minus Front function subtract the smaller objects from the bigger one.

We can now add some small highlights to the holes. Double click on the band object to enter Isolation Mode and select one of the puncture shapes by clicking on the outline of the shape (not the inside of it as it has none).

Now simply copy (ctrl + C), and paste the object on top of the band (ctrl + F) once you’ve made sure you’re out of Isolation Mode (esc key).

As you might have noticed, the pasted object is now colored the same as the one underneath. Change this by coloring it white, and then, after entering Pixel Preview Mode duplicate it (ctrl + C > ctrl + F) and move the top object (I’ve colored it slightly darker so you can understand) towards the bottom by 4px.

Select the object underneath the recently moved one, right click>Arrange>Bring to Front.

With both of them selected, use the Minus Front option in Pathfinder so that you end up exactly with the smaller highlight portion that we need.

Exit Pixel Preview Mode (alt + ctrl + Y) and then change the blending mode of the object to Overlay and make sure to lower its opacity to 40%.

Using the same little duplicate trick (ctrl + D) we used for the puncture holes, select the highlight and add 11 more to each puncture of the wrist band making sure to group them afterwards (ctrl + G).

While we’re still at this stage of the illustration, we can add a small shadow to the bottom section of the band. Simply copy (ctrl + C) the band, paste it on top (ctrl + F), then move it about 6px downwards. Paste another instance of the object on top of the moved one, and using the Minus Front function delete the top section.

Change the new object’s color to black, and set its blending mode to Darken and its opacity to 30%.

The loop holder

It’s now time to move towards the other end of the wrist band, and create the little loop holder section and then the buckle.

Using the Rounded Rectangle Tool create a 112 x 40px object with a 2px corner radius. Change its color to a lighter gray (#727272) and position it using the following values.

• x: 400px;
• y:

Add some details to the holder by creating a highlight section and a shadow.

For the highlight, simply duplicate the object, move it 6px down paste another instance on top and then use the Minus Front as we did before. Change the shape’s color to white, the blending mode to Overlay and lastly the Opacity to 20%.

For the shadow section, create a 104 x 13px rectangle and position it just under the loop holder. In order to quicken things up, use the Eyedropper Tool (I) to copy the blending mode and opacity straight from the bottom section of the wristband which we created a few moments ago.

Make sure to select all the components of the loop holder and the group them by using ctrl + G.

Duplicate the group (ctrl + C > ctrl + F) and then with both it and the band selected, click on the band to make it the Key Object to which we will align to and use the Align Panel to position the group just at the top section of the band.

The buckle

In order to create the buckle, we will use a couple of objects and modify them as we go. Using the now all familiar Rounded Rectangle Tool create a 132 x 89px shape with a 14px corner radius. Make sure to send it to the back using the right click>Arrange>Send to back function.

Color it using #AAAAAA and then using the Direct Selection Tool (A) select the center-bottom anchor points (highlighted with green) and delete them (Del). With the shape still selected, press ctrl + J to unite the remaining bottom anchor points (highlighted with yellow).

Next create a 112 x 53px rectangle, bottom-center align it and then cut it out using Minus Front so that you get the object on the right.

To create the rounded corner bottom sections of the buckle’s left and right walls, simply create a 10 x 12px rounded rectangle with a corner radius of 3px.

Then, using the Direct Selection Tool (A), delete the top 4 anchor points (highlighted with green), uniting (ctrl + J) the remaining bottom ones (highlighted with yellow).

After that, align the modified shape to the bottom left side of the buckle, create a duplicate and align this one to the right side.

Make sure to change their color to #AAAAAA, and then with both them and the buckle selected use the Unite function in Pathfinder to create one single object.

We now need to add the tongue. To do so, create a 16 x 55px rounded rectangle with a corner radius of 3px. As we did before, repeat the process of deleting the bottom anchor points, uniting the remaining ones.

Because the color is identical to the one of the buckle, we need to add a top section under the tongue so that it will make it distinguishable.

Again, using the Rounded Rectangle Tool create a darker (#999999) 20 x 13px object that has a corner radius of 3px. Delete the bottom anchor points, unite the remaining ones, and then vertically align it to the buckle, positioning at the bottom of the top section. Make sure the tongue is on top of the darker section by bringing it to the front using the Arrange function.

To finish up the buckle, simply add some highlights and shadows as in the image bellow, using the same techniques used for the loop holder.

As you can see, our watch band is taking shape, but it doesn’t have that leather feeling were going for. So, to correct this, we will need to add some textures. First, select the base form of the band, copy and place it on top and then go to Effect>Texture>Grain.

Change the Intensity to 41, set the Contrast on 0 and make sure the Grain Type is Sprinkles.

Next, make sure to change the Overlay mode to Hard Light and to lower the opacity to 70%.

Select both the grainy texture and the watch band and send them To the back using the Align function.

Now we have a little problem that might not be visible until we zoom in.

As you can see, the texture is actually going outside of the band’s surface, which is something we don’t want it to do. A simple solution to this (and any similar texture problems) is to copy the object underneath, paste it on top of the texture, and with both of them selected create a clipping mask (right click>Make clipping mask).

Apply similar textures to the loop holder, and top section of the wristband (following the exact same process) until you have something like this.

The watch

Up until now, we’ve dangled with all the composing elements of the wristband, but from now one, all our focus will be on the actual watch itself. We will remain on the same moto360 watch layer and build on top of the objects we have so far.

The first thing we need to create is a base form for our little gadget.

Using the Ellipse Tool (L) create a 220 x 220px circle and color it using #111111. Position the object using the bellow coordinates:

• x: 400px;
• y: 660px.

Next, create another 200 x 200px circle, which will act as a screen, color it using a slightly lighter grey (#212121) and then vertically and horizontally align it to the shape we created before it.

Add a warm highlight on top of the base large form by duplicating it, deleting the bottom anchor point and uniting the remaining ones. Change its color to #2E2E2E and make sure to position it underneath the screen.

As the Moto360 is one of the smartwaches which actually have a physical button, we need to make sure that ours has one too.

Using the Rectangle Tool (M), create a 6 x 26px shape, color it using a darker shade (#0D0D0D) and then position it under the watch itself, using these coordinates to lock it in place:

• x: 511px;
• y: 660px.

Add another 4 x 22px rectangle, which will act as the pushing button, and color it using #575757. Horizontally align it with the previous object created, and make sure to position it on the right side.

Add a slight shadow, by duplicating both of the button parts, uniting them and then deleting half of the shape using a rectangle.

Change the resulting shape’s Blending Mode to Darken, lower its opacity to 40% and make sure to group it with the other 2 objects (select them>ctrl +G) and send them to the back of the watch (right click>Arrange>Send to Back).

At this point, all we need to do is add a shadow underneath the bottom side of the watch to give it more dimensionality.

To do so, copy the base form of the watch (the largest circle), paste it in front of everything else, and then move it about 14px downwards. Change the blending mode to Darken and set the opacity to 30%, after which simply copy the shadow into the clipping mask created for the band’s texture.