Vectortuts+

Create a Summer Inspired Stroke Art Typography Piece using Sketch

Chris Carey — Thu, 20 Jun 2013 12:42:09 +0000

In this tutorial I will show you how to create a trendy typography piece using only strokes and flat colors. We will be using an Adobe Illustrator alternative called Sketch available as a free trial (or paid) by the good folks at Bohemian Coding. With the announcement that Adobe will be discontinuing Fireworks, this is a very vector capable piece of software with a unique set of features and tools that would make an excellent alternative.

With this tutorial I will try to use as many basic tools and features as possible so you can better acquaint yourself with this (possibly) new software. Once you get used to the program you will probably find there are easier/faster ways to achieve the same functions.

Also, in case you want to follow along in Illustrator or your favorite vector program feel free to do so. These steps can easily be interchanged with tools from other programs so long as you have a basic understanding of the tool names and what they do. I hope you’ve brought your suntan lotion, it’s gonna be a scorcher.

1. Set Up Your Document

To begin, let’s launch Sketch and set up our artboard. If you have never used this application before, take a minute to get acclimated to your new surroundings. Tools and features are laid out quite differently from Adobe Illustrator and there are no floating panels and windows. Everything is available in and around the main artboard. The main difference you will notice is that the Layers panel is to the left of the artboard while the tools are along the top and adjust features for the various tools are to the right.

Step 1

Once you’ve got your bearings, begin by clicking on the Artboard icon at the top of the app window. With that option selected, click and drag on the artboard space in the center. of the app to create a shape. You can physically draw out the shape to the correct size or, what I find easiest, is to create a simple square then, using the Inspector panel on the right, type in the exact measurements manually. For this project our artboard will be 1300 x 600 px. Feel free to leave the artboard name as the default or you can double click the artboard name in the Layers panel on the left to adjust it to your liking.

Step 2

Since our finished piece will be fairly modular let’s make things easier on ourselves and enable the grid so we can work more efficiently. Select the View icon (located next to the Artboard icon at the top of the app window) and select Grid Settings… then enter the settings seen below. Then click the View icon again and ensure that Show Grid is enabled.

Step 3

We will be using and reusing the same few tools over and over again for this project so let’s make them easily accessible. Right click on the Toolbar or visit View > Customize Toolbar… and let’s add some tools to this area. Our basics are already there, but we’ll be using the Scissors tool quite a bit so let’s drag this to a comfortable location on the toolbar for future reference. If you see any other tools that you feel will help your proficiency feel free to add them now.

Step 4

Because our final piece is really only 3 colors., and has a flat design let’s go ahead and fill in the background of our artboard. To do so, click the Shape icon at the top, left of the app window and select the Rectangle (R) tool. Click and drag out a shape that encompasses the entire artboard. By default grid snapping is enabled so this should be an easy task. With your rectangle shape created navigate to the Inspector panel locate on the far right of the app remove the border by deselecting the check-box and adjust the fill to a orange-y pink color as outlined below. Once completely, right click on the layer and choose Lock Layer so we don’t accidentally select it later on.

2. Custom Text: “Summer”

Step 1

With our document set up and ready to go we’ll now create our custom text for our piece. Let’s zoom in a bit so we can see what we’re doing, then click the Shape icon at the top, left of the app window and select the Rounded (U) tool and create a rounded rectangle that is 40×50 px. Remove the Fill color completely in the Inspector panel to the right and adjust the Border to the Center, the size should be 5px and pick a lighter cream color as outlined below. Be sure to also adjust the Ends and Joins to be rounded (the middle option).

Step 2

Another feature you may find a bit strange is that once your shape is drawn you are automatically switched to your select tool. There is no need to switch back and forth in order to select a shape or move it. Coming from Illustrator this takes some getting used to as your first instinct it so press the “V” key in order to enable the “Selection” tool but pressing “V” here will enable the Vector tool and throw you off your game. Once you get used to it this becomes a time saver in the long run. So, now that our rounded rectangle is drawn click-drag while holding the Alt key to create a duplicate of this shape and place it directly beneath the first one so the top of the new shape and the bottom of the old one meet.

Step 3

Now Shift-click both shapes and choose Union from the top of the app window. And with this new shape still selected go to Edit > Paths > Scissors or select it from the toolbar up top since we added it there earlier. Now, if you hover over a segment of the shape it will highlight that path in blue and if you click on that highlight it will cut out that highlighted area. So, for the top shape hover over the bottom right curve and click to remove it. Also, click the shorter straight path directly above that on the right side. We’re making an “S” shape so to the same thing on the opposite side of the bottom shape.

After the shape is complete, navigate to the Inspector panel and adjust the position options as outlines below.

Step 4

Now that we have the basics let’s duplicate the above process to create the other letters to form our first word “Summer”. Keep in mind we want our lower case letters to be half the height of the capitol “S”.

For the “u” let’s create another rounded rectangle as before then remove the top curve. Be sure to add some space between the two letters. For all of my letters I’ll be using 10px spacing between each, this should give you an unoccupied grid line between each letter. Making the shape 40×50 px you’ll notice that once the top curve is removed that the “u” is no longer half the height. So, while the shape is selected, click the Edit button from the tool menu at the top and click on one of the open points. Then, shift + click on the other open point. You should notice a darker ring around the point marker appear. Now, while holding shift, click and drag one of the open points up to it meets the “S” half way. Now to finish off the “u” I would tell you to use the Line tool but this operates a bit differently from the other shape tools. The snapping for this line tool works based on the width of the border currently enabled so the border will fit snuggly inside the pixel grid making crisp lines. However, since our border isn’t an even number this line tool won’t help in this case. What we’ll need to do is select the Rectangle (R) tool and create a square on the right most edge of our “u” shape then remove the 3 edge paths we don’t need. you can now group the line and “u” shape together by going to Arrange > Group Layers menu.

Step 5

Continue this process until you have finished the other letters in the word. I found it easiest, once the “u” was completed to just copy those objects and duplicate them then rotate them to make the 2 “m’s”. If you have the “u” selected Click-drag while holding the Alt key to duplicate and move at the same time. Now, if you hold down the Command key and place your cursor over one of the corners of the bounding box it will switch to the rotate tool and you can rotate it 180º, or you can use the Rotate in the Inspector panel to type it in manually. Once rotated though, you will need to realign the shape with the grid as it will be slightly off center. Now select the looped shaped and Click-drag while holding the Alt key to duplicate it and finish your “m” shape. Now duplicate the whole “m” shape and we can move on.

Step 6

The “e” requires a little extra work. Create another rounded rectangle that is 40 x 50 px. Now enable the Scissors tool and remove the right most straight edge.

Switch to the Edit tool and if you hover your cursor over the bottom right curve the tool will have a “+” if you’ve directly over the path. Click where the path intersects with the grid 3 squares down to add a point. Now switch back to the Scissors tool and remove the upper part of that path.

Enable the Rectangle (R) tool and create a rectangle that is 40 x 10 px. Then with the Scissors tool remove the top and left side of the rectangle to complete our “e”.

Step 7

To create the “r”, simply duplicate the “m” shape and remove the extra looped shape that makes it an “m” instead of an “n”. Now with the Scissors tool remove the far right path.

3. Custom Text: “Lovin’”

Step 1

Once you have all the letters for “Summer” completed we’ll start the word “Lovin’” using the same techniques with a few extras we’ve not seen yet.

To begin, select the Rectangle (R) tool and create a rectangle that is 40 x 100 px. Now select the Edit tool and click on the lower left anchor point. With that selected a new set of options should appear below the toolbar. Select the last option available in that list and round that corner to 20px. Now with the Scissors tool click to remove the top and right most paths to form our capitol “L”.

Step 2

The letter “o” is fairly self explanatory so I’ll skip that. Just be sure it is the same size as your other shapes (40 x 50 px). Let’s move on to the “v”. This one is fairly easy as well. Select the Triangle tool from the list of shape options and create a triangle that is 40 x 50 px then rotate it 180º. Now with the Scissors tool remove the top most path.

Step 3

To create the “i” select the Rectangle (R) tool and create a rectangle that is 50px high, the width doesn’t matter, just make sure the left most side is lined up correct with the previous letter. Now with the Scissors tool remove the top, right, and bottom paths. Repeat this process the point over the “i”, making it 10px high.

Step 4

For the “n” you can simply copy one of the “m’s” from our previous word and remove one of the extra looped shapes. Now finally create the apostrophe, by duplicate the steps for dot on the “i”, only this time make it 15px high.

Step 5

Lastly, make sure the work is positioned correctly. Highlight all the letters and Group them together. Then, with the group still selected navigate to the Inspector panel and adjust the position as outlined below.

4. Custom text: “Happened So Fast’”

Step 1

Pick a new spot on the artboard and let’s begin creating our final sentence. This text is much smaller than our previous text so we’ll be using a smaller Border. When creating this text keep in mind that your Border should be set to 4px, the rounded Ends and Joins will stay the same, so will the color

Select the Rectangle (R) tool and create a rectangle that is 15 x 30 px then remove the top and bottom path using the Scissors tool. Create another rectangle so that one of the ends of the rectangle intersects the exact middle of our “H” shape, then remove the ends that are not needed. Now Group them together.

Step 2

To create the “a” begin by selecting the Oval (O) tool and creating an exact circle that is 15 x 15 px. Now switch to the Rectangle (R) tool and create a rectangle to the far right of the circle and remove the unnecessary ends. The width doesn’t matter, but it should be the same 15px height as the circle shape. You can now Group them together.

Step 3

For our two “p’s” let’s duplicate the “a” shape by Click-dragging while holding the Alt key. Now rotate it 180º and make sure it’s lined up with our grid. Inside the group folder select the straight path and click on the bottom most point and drag it down until it is 30px long. Now select the group folder and duplicate it and put it into its proper place.

Step 4

To create the “e” create another perfect circle that is 15 x 15 px and select the Edit tool. Position the cursor so it is about a quarter of the way between the right and bottom points then click to create a new point. Switch to the Scissors tool and click to remove the top quarter of the new point we just created. Now create a rectangle as we’ve done previously and remove the sides that are not needed and Group the shapes together. Be careful to like up the rectangle path with the open path so there is a nice enough gap to make the “e” shape.

Step 5

Since we’ve already created an “n” I won’t explain how to do that again. Just make sure that if you are copying your previous shape that you shrink it to the proper size and that the border is set to 4px. Since we also have an “e” created we can also just copy that over and place it into the correct position. To finish of this word copy one of the “p’s” then rotate it 180º and put it into position.

Step 6

To create our “S” we’ll follow the same rules as we did before, only we’ll use two 15 x 15 px perfect circles instead of the rounded rectangle. When creating this new letter keep in mind that it is the start of a new word so it should be farther apart than the individual letters. I’ll put start this new letter 30px away from the “d” in the last word (5 unoccupied gridlines between words).

Step 7

The “o” in “So” is fairly obvious so I’ll skip that and move on the “F”. We’ll make this letter similar to how we made the “H” only we’ll remove the right and bottom paths. Then we’ll make a rectangle in the middle of the shape but only make it 10px wide instead of 15.

Step 8

Since we’ve already made an “a” we’ll just copy that and place it into the correct position. Pay attention to proper kerning here. I have left 10px between the shorter bottom-middle line in the “F” rather than the top line like all the other letters. Let’s move on to the “s”. Create another perfect circle then remove the bottom right and top left paths with the Scissors tool. Now switch to the Edit tool and click on the bottom most point to select it then while holding shift position your cursor over the top most point and click to make a path. Select the oval layer from the panel to the left and then rotate the shape 45º to create the “s”.

Step 9

Let’s create the “t”. With the Rectangle tool make a rectangle that is 25px high then remove the unnecessary sides. Create another rectangle that is 10px wide and align it with the top of the lowercase letters then remove the unnecessary sides.

Step 10

Finally, Group the words together and Position the group as outlined below.

And with that our text is done. Let’s move on to the embellishments.

5. Create a Palmtree

Step 1

We’ll start by creating our tree trunk. To begin we’ll use the Vector (V) tool to draw a curved shape. I’ve tried to make it as easy as possible so all the handles of the points will click into one of the grid corners. Please use the image below as a guide when creating your own. When we have the shape created use the Scissors tool remove the upper and lower most curved paths. We’ll now change the Border color to a deeper tanned red color with a size of 5px, then adjust the placement of the shape as seen below.

Step 2

Let’s add some separations to the trunk. With the Vector tool enabled create 6 curved separations climbing up the trunk shape about 20px apart. You’ll notice as you duplicate and position these segments that Sketch will automatically display guides to show you how far about the items are from one another. It’s okay to let these separations overlap some as it gives it a bit of character.

Step 3

Moving on we’ll create some coconuts. Enable the Oval (O) and create 3 perfect circles that are 20×20 px. We’ll stroke it with the same deeper tanned red color at 5px but we’ll re-enable the Fill and fill it with the creamy color from our text.

Step 4

Now we’ll work on the palm fronds. Select the Oval (O) and create an oval that is 115 x 50 px Keep the dark tan color and fill the shape with our background color This will help us when we layer the shapes later on. Now select the Rectangle (R) tool and create a rectangle that covers the bottom half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool.

Step 5

With the Vector (V) tool create 3 triangle shapes that will act as notches cut from the frond. You may need to zoom in to get a nicer edge. Once all 3 triangle shapes are created visit the Layer panel again and select all 3 triangles and the half oval shape then in the top Tool bar select the Subtract tool. If you’re not happy with the notches that were cut by your shapes you can click the arrow icon next to layer name to adjust them manually. Sketch has nondestructive ‘combine’ options which is pretty snazzy. When you’re happy with the placement of the notches return to the top Tool bar and choose Flatten to set the subtractions permanently.

Step 6

Let’s drag this frond into place, then we’ll need to duplicate this shape, rotate, and flip it a few time until we have 5 in total. Feel free to lay them out as you wish, just keep in mind that you don’t want to obscure the text and we will need to work around them later with other elements. I create two on the left and duplicate one and rotate it 45º and shrink the width to 105px then duplicate them both and flip them horizontally and line them up so their tips are touch each other from the opposite side. Then the top one I rotate at -45º and shrink the width to 93px.

Step 7

To finish it off we’ll add a border at the very bottom of the trunk to cut it off neatly. Create a rectangle that is 90px wide then remove the unneeded paths with the Scissors tool.

6. Create a Parasol

Step 1

To create our parasol we’ll need to select the Oval (O) tool and make a perfect circle that is 110 x 110 px. Now select the Rectangle (R) tool and create a rectangle that covers the bottom half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool then choose Flatten to set the subtractions permanently.

Step 2

Now enable the Triangle tool and create a triangle that is 90 x 55 px and center. it inside the half circle. Navigate to the Layers panel and rearrange the order of the half circle and the triangle so the half circle is on top.

Step 3

Select the Rectangle (R) tool and create a rectangle that is at least 120px high and center. one edge in the half circle. Now using the Scissors tool, click to remove the unnecessary paths. Then rearrange the layer order again so this straight line is on the bottom.

Step 4

Finally Group the parasol shapes together and rotate it -45º and position it as outlined below.

7. Create the Birds

Step 1

These birds are easy as pie. All we need to do is create a circle, duplicate it then remove the bottom halves, rotate them and duplicate. To begin, select the Oval (O) tool and make a perfect circle that is 50 x 50 px. Enable the Scissors tool and remove the bottom two paths so you’re left with a half circle. Now Click-drag while holding the Alt key to create a duplicate of this shape and place it right next to the other so the paths touch.

Step 2

You can now duplicate these shapes and rotate them and vary the size of each. Our goal is to have 3 of these birds so let’s do that now. You can use my size, rotation, and positions outlined below.

8. Surfboard

Step 1

Let’s create our board shape. Select the Vector (V) tool and create the shape seen below. I’ve highlighted the points and handles for you so you can follow along. When first clicking and dragging your handles will be identical but once you have the shape created you can adjust the handle lengths individually by select the Edit tool and click on a point then select the handle you want to edit and drag it separately.

Step 2

Duplicate this large board shape and shrink it down to 15 x 30 px and center. it in the big board shape and at the bottom. We’ll also remove the Border and set the fill to the border color

Step 3

Select the Vector (V) tool and create the zig-zag shape seen below. Set the Ends and Joins to be square and the width to 40px and change it to our cream color

Step 4

With the zigzag shape created rotate it 45º. Now navigate to the layers panel and right click on it then choose Use as Mask. This unfortunately doesn’t include the border width so we’ll have to duplicate the board shape and place it on top of the zigzag shape in the layers panel.

Step 5

To finish up, create a rectangle that is 100px wide and remove the paths that you don’t need. When you’ve got that done group all the shapes together and position it as seen in the screenshot below.

9. Create the Sunglasses

Step 1

Let’s make some cool aviator type shades. Select the Oval (O) tool and create a perfect circle that is 70 x 70 px. Now switch to the Edit tool and select the right most point and drag it over 10px, then up 10px as well. If you have the point selecting you can hold Shift then press the right arrow then the up arrow on the keyboard to make this precise. With this point still selected, hold Alt then drag the bottom handle down 10px as well. Now select the bottom most point and move it over 5px, you can use the arrow keys for this as well.

Step 2

Exit edit mode and with the shape selected Duplicate it and visit Edit > Transform > Flip Horizontal then place it 20px away from the other lens shape.

Step 3

Let’s add some highlights doodads to the lenses. Select the Rectangle (R) tool and create a rectangle that is 20px wide and tall enough to fit across the lens. Then create another one that is 8px wide and place it 5px to the left of the wider piece. We’ll fill this with our cream color as well.

Step 4

Group the highlights together then rotate them -45º and line it up inside the lens shape in a position that suits your fancy. Once you have a position you like Click-drag while holding the Alt to duplicate the highlight and place it over the other lens as well.

Step 5

Navigate to the layers panel and rearrange the highlights layers so they are over the corresponding lens shape layers. Now Right click on the lens layer and choose Use as Mask. Unfortunately this affects all layers above it so we will need to right click on the other lens shape layer and choose Ignore Underlying Mask. You’ll notice the dots that appear next to the layer name will disappear indicating the mask is no longer affecting it. Now Right click on the other lens layer and choose Use as Mask.

Step 6

Duplicate the two lens shapes and place them above the others so the border is above the highlights. Then remove the border from the bottom lens shape and instead fill it with the solid darker tanned color

Step 7

To finish it off let’s create our nose piece. Enable the Oval (O) tool and create an oval that is 30 x 25 px and center. it between the two lens shapes. Then add a border of 8px with out darker tanned color Now switch to the Scissors tool and remove the bottom two paths that are not needed.

Step 8

Finally, duplicate this nose piece and drop the border width to 4px. Nudge this thinner nose piece down a 10px. You can now group together all of the elements that make up the shades and adjust the positioning as seen in the screenshot below.

10. Create an Ice Cream Lolly

Step 1

To begin our ice-cream bar, enable the Rounded (U) rectangle tool and create a rectangle that is 85 x 60 px. Enable the Edit tool then click the points on the far left to highlight them then reduce the radius to 0px from the top bar.

Step 2

To create the stick, repeat the above process only this time our rectangle will be 45 x 20 px and we’ll flatten the right edge where the stick meets the ice-cream. We’ll also fill the shape with our cream color Then, using the Vector (V) tool, click to create some swirls in the stick to represent wood grain.

Step 3

Let’s add some dripping action to the ice-cream bar now. To do this we’ll use the Rounded (U) rectangle tool and create some pill shapes and some circles then remove the unneeded paths.

Our first circle will be 10 x 10 px. The pill shape next to it will be 15 x 35 px. Duplicate the 10 x 10 px circle and move it over to the right then nudge it down. Finally create a pill shape that is 15 x 20 px.

Now enable the Scissors tool and remove the unneeded paths. Then enable Edit and adjust the points of the different shapes so that their ends meet.

Step 4

Group all of the ice-cream bar elements together then position it as seen in the screenshot below.

11. Create a Sailboat

Step 1

To create our sailboat, enable the Oval (O) tool and create an oval that is 80 x 40 px. Now select the Rectangle (R) tool and create a rectangle that covers the top half of the oval. Navigate to the Layer panel and select both the Oval and the Rectangle layers then in the top Tool bar select the Subtract tool, then Flatten.

Step 2

Duplicate this half circle shape and line it up with the other then fill it with the deeper tanned color and remove the border.

Step 3

With the Rectangle (R) tool, create a cream filled rectangle and rotate it -45º and position it over the back 3rd of the boat shape. Now select the boat shape layer that is filled completely from the layers panel and right click on it then choose Use as Mask. Then drag the boat shape layer that is only the border and place it above the other boat elements.

Step 4

Now let’s create the sails. Choose the Triangle tool and create a triangle that is 25 x 35 px. Now enable the Edit tool and click the top most point and drag it to the right to make a “right angle” triangle.

Step 5

Duplicate the above process only this time make the triangle 45 x 65 px and make the straight angle on the opposite side so the straight lines line up.

Step 6

Group all of the boat elements together then position it as seen in the screenshot below.

12. Create the Waves

Step 1

Now we’ll make the water our sailboat is sitting in. Select the Oval tool and create a perfect circle that is 40 x 40 px and position it as outlined below.

Step 2

Duplicate this circle 15 more times and place them end to end from left to right. Navigate to the Layers panel and select all of these circles at once then choose Union from the top Tool bar.

Step 3

Finally, enable the Scissors tool and remove the paths that are overlapping our other objects. Some whole circles may need to be removed completely.

13. Create the Sun

Step 1

No beach scene would be complete without the sun so let’s make that now. Enable the Oval tool and create a perfect circle that is 160 x 160 px

Step 2

Now create two more circles centered inside this large red circle, these will be our cream color One will be 140 x 140 px with a dashed border of 14. The second will be 120 x 120 px with a dash of 13 and the gap set to 12.

Step 3

Grab the Rectangle (R) tool and create a square that take up the bottom left quarter of the circle. Select Edit and select the bottom right point and while holding Shift on the keyboard press the right arrow 8 times to nudge it over 80px. Now duplicate this shape twice so you should have 3 of the same shape sitting one on top of the other.

Step 4

Now click one of the angles box shapes and one of the circles then choose Subtract. Then with the Scissors tool remove the two straight paths that are not needed. Do this for all 3 circles.

Step 5

We’ll now create the suns rays. To begin create a rectangle that is 50px high and line up one of the edges with the center. of the sun circle. Then remove the unneeded edges with the Scissors tool.

Step 6

With that line selected navigate to Edit > Paths > Rotate Copies and change the number to 7. This will make a star-burst pattern with a handle in the middle. Click and drag that handle down until it is in the middle of the sun circles.

Step 7

Repeat the above steps to create smaller rays. These rays will be 30px high. Once you’ve created the star-burst pattern rotate the smaller group of rays 22.5º.

Step 8

Now navigate to the Layers panel and click the arrow next to the layers with the sun rays in it and remove the paths that intersect with the text.

14. Clouds

Step 1

We’re on the home stretch. Our main elements are done and all that’s left is to fill up the empty space. For this I’m going to create some linear cloud shapes using the Rounded (U) rectangle tool then remove the unnecessary parts with the Scissors tool. If you remember how we made the drips for our ice-cream bar earlier on this is the same process only we’re working horizontally instead of vertically. Feel free to put as many or as little a you like. I just wanted to fill up the empty space as much as I could. I even added the background fill color to a few of them and layered it over the elements like on the surfboard just to add a little something extra.

Step 2

Lastly I added some embellishments to the “Happened So Fast” text at the bottom. I felt it was somewhat empty down there and wanted to try and evoke a sense of “speed” with the angled lines.

Awesome Work! You’re Now Done.

The tutorial may be over, but summer has only just begun! I hope I was able to show you a new vector tool to consider for the future. Feel free play around with Sketch a bit more and get acclimated. There are some great CSS export features included for you web design aficionados that I highly recommend you check out. Whether you followed along with Sketch, or decided to stick with your vector editor of choice I hope you enjoyed it.

Make Collaboration Easier With Track Changes in Adobe InDesign

Martin Perhiniak — Wed, 19 Jun 2013 11:55:38 +0000

Track changes is a great feature in Adobe InDesign for collaborative text editing. By setting up different users and enabling Track Changes you can keep track of all text editing in your document and you can easily easily decide at any point either to accept or reject the changes.

How to Draw Complex Folds and Ruffles in Fabric and Clothing

Dean Carianas-Mannar — Tue, 18 Jun 2013 12:09:38 +0000

Generally speaking, intricate designs all start with very simple shapes and are easy to create once you know how, but unless you know where to begin, it can prove to be challenging. This tutorial guides you through fabric movement and folds, continuing on to creating a few simple features of more intricate clothing design, which can then be used alongside each other to build up to a higher level of drawing clothing. This tutorial builds on the knowledge gained from my previous clothing tutorial, which was aimed at beginners.

1. Fabric Movement

Example 1

When it comes to drawing fabric and clothing, the first thing you’ll need to consider is fabric movement, and how it will fall over the curves of your character’s figure. Before you start drawing any clothing, take a look at fabric around you – your own clothing, for example – and how that works and where it folds, and why. Below are a few examples, using my trusty green curtain, of how fabric folds, and the different shapes it makes, and where the light falls in ‘normal’ lighting.

The first example is of the curtain just being a curtain, and it falls and folds vertically, the folds created by the bunching at the top. This example is useful should you wish to consider drawing long flowing skirts, dresses or cloaks.

Example 2

The fabric here is folded to fall in various directions, showing a great example of how lighting works with the various shadows and highlights within the shapes. These folds are more likely to be seen in an unmade bed than clothing, but could easily be incorporated into a more intricate design, such as a fantasy gown or wedding dress.

Example 3

This twisted ‘rose’ of fabric makes for a good general reference as it has all-sorts of shapes within it, twisting around to the middle. This fabric shape as a whole is most likely to be found as a design itself, sewn into, or on something, like a prom dress.

Example 4

Tightly bunched fabric like the top of a curtain is great to show an elastic seam, such as a skirt with an elasticated waist, or to show fabric gathered using, as an example, a thin piece of ribbon, which could be used in many places on clothing designs, such as sleeves.

2. Start With Basic Shapes

Step 1

When drawing clothing, its best to start with the basic shapes and the anatomy of the design, as this will give you something to build on. To make sure your basic shape is symmetrical, you can draw half, duplicate and then flip it horizontally to create the other half. Even if your planned design isn’t symmetrical, it’s a good idea to start this way as you’ll know everything will be level and in the right place before you begin.

You can download the basic dress shape below from the source files to use throughout this tutorial, in both PSD vector format and JPEG format.

3. Drawing Ruffles and Frills

Step 1

Before adding to the basic shape, you’ll need to know how to draw the additions that you may want to use in the design, starting with ruffles and frills. First, draw a curved line.

Step 2

Underneath your line, and following its curve, add a wiggly line with similar shape to the one shown below.

Step 3

Add further lines to act as the fabric that forms the ruffles pointing upwards.

Step 4

Using straight connecting lines from the points of the lower ruffles toward the original curved line completes the frill look.

Step 5

Erase any superfluous lines, such as those areas in the original curve which overlap the ‘tops’ of the ruffles.

Step 6

Below are examples of other ideas and ruffle shapes for you to consider.

4. Drawing Buttons

Step 1

Buttons can come in all shapes and sizes, but they all follow the same sort of idea when it comes to drawing them. Start by drawing your button shape, in this case, a circle.

Step 2

Many buttons have small holes in, which is how they are sewn on to the garment. Some buttons have instead a small loops at the back to attach them, it depends on the style of the button. Drawing a vertical line like the one shown below gives the impression of the cotton between two of the small holes on the button, holding it in place. Experiment with different styles of buttons, and consider how they’re attached to the clothing.

Step 3

Add a second line, as shown below, for the other side. Unless your button design only features two holes (and therefore one piece of cotton to hold it in place, in the center) then you will need to do the same to the other side. You can duplicate your previous layer and move the duplication over to ensure they are the same.

Step 4

Here another part of a circle has been added to the outside of the original button shape. This gives a 3D effect to the drawing, which is important to remember as buttons are not flat, they are 3-dimensional objects! You can change the placement of this rim around the edge to give different suggested viewing angles, and the placement here is for a frontal view.

5. Drawing Puff-Shoulder Sleeves

Step 1

Start by drawing a lemon shape similar to the one in the example below.

Step 2

Add a base to it, which is the arm-hole of the sleeve.

Step 3

Add a few creases, remembering to consider the direction and shape of the fabric.

6. Drawing a Large Prom-Style Skirt

Step 1

When drawing a skirt, the waistband is a good place to start. I’ve chosen to draw a thick waistband, which covers the whole space from the waist to just under the bust. When it comes to considering different waistband styles and how to draw them, looking at photos of wedding dresses will often show the widest range of ideas, and due to the fabric generally being white, all the folds are very easy to see.

Step 2

Draw out the shape for the main body of the skirt.

Step 3

Add your fabric folds.

7. Put it all Together!

Step 1

You can then put all these different ideas together to create all sorts of different styles and designs. You could draw anything from beautiful and posh ball gowns, or smart and fashionable jackets, to an embellished olden day Victorian Maid style outfit as I have done, shown below.

8. Add Shade Using Multiply

Step 1

I’ve discussed other methods of adding color and shade in other tutorials I’ve written, so this section covers adding shade using the Multiply Layer Style, which is a fairly popular way of shading. I’m using grays for my shading, but experimenting with different colors will give different results when you come to add the base colors below, so try a few different colors to discover the result you’re looking for. You’ll need to choose a dark-medium tone, and add shade only to the very darkest parts, as shown on the neck ruffle below. Place your shading layers inside a Group Folder, and set the whole folder to ‘Multiply‘ in the Layer Styles tab.

Step 2

This is how the full design looks with the darkest shading layers added.

Step 3

Next, choose a lighter tone to add the secondary shading. These layers will need to be added in another Group Folder, underneath the one for your darker shading. Again, set the folder to Multiply. Add this layer of shading as the mid-tones, so you’ll need to leave the lightest parts unshaded, but shade the rest.

Step 4

Here is the full design with the secondary shading.

9. Give it Some Color!

Step 1

By using the Multiply method of shading, you can now add any colors underneath the shading layers, and the shading will be easily visible above, even if you were to use the same colors for the base color as you did for the shade. The example below shows how the different base colors react differently to the Multiply shading.

Step 2

The example below shows the full Victorian-style maid outfit fully colored, with lilac and white embellishments.

Step 3

By using this method of shading, it is easy to change the colors and therefore change the design and feel of the garment. Using this method of shading is useful when dealing with gradients, as shown, as the shading color will follow the base color.

Step 4

Now you can experiment with different views and styles to come up with more fun and interesting clothing designs, and by using the Multiply method of shading, you can test the different colors for the shade to discover interesting results.

Now Your Know How to Draw Fabric Folds!

Clothing design is something where a lot of fun can be had, so give in to your imagination and enjoy the process! Don’t forget to consider the movement of the fabric and where folds will fall, and remember that using real life references will be the most reliable resource when learning to draw clothing. As usual, please do show me anything you make which is inspired by this tutorial, I’d love to see.

New from Envato: Microlancer, a Design and Illustration Services Marketplace

Skellie — Mon, 17 Jun 2013 17:24:56 +0000

Envato (the people behind Vectortuts+) have recently launched a new service, currently in beta, called Microlancer. It’s a place where people can sell their creative services, or get creative work done.

The difference between Microlancer and other freelance job sites is that every Microlancer service is sold at a fixed price. Services are also generally smaller jobs that take less than a day to complete. The end goal is that selling or buying design or illustration services on Microlancer feels a little like selling or buying items in an online store: fast, easy, and affordable.

What does Microlancer mean for you?

If you currently do design or illustration work for clients, Microlancer may be an excellent new source of jobs and income for you. You can choose the services you want to provide (for example, Caricatures, or Lettering & Calligraphy, or Twitter Background Design) and choose the price you want to charge. The service is offered on your terms: you choose how quickly you’ll get it done, and how many revisions will be included in the price. There’s no limit to the number of services you can offer, as long as you have the skills and time to complete each one.

If you’re a designer, artist or illustrator looking for an affordable place to get extra work done, Microlancer is perfect for outsourcing. You know how much each job will cost to get done, what the turnaround time will be, and can freely browse visual examples of previous work to make sure the quality is up to your standards.

The best way to learn more is to explore Microlancer or read about becoming a service provider.

What makes Microlancer special

Despite the stereotypes, freelancers and clients work together well most of the time. On the rare occasion that things do go south, it can be an extremely frustrating experience for both the freelancer and the client. Disagreements quickly degenerate into an unwinnable battle. One of the goals of Microlancer is to make sure this never occurs. Every single transaction is covered by a fair dispute resolution process which ensures that every Microlancer user, whether a buyer or a service provider, will be protected from bad treatment or bad work. Disputes are adjudicated by smart, fair and well-trained staff who will work to resolve things amicably wherever possible.

Because Microlancer collects payment upfront and then holds it until the job is complete, service providers are guaranteed to be paid if they meet the terms they’ve laid out for their work and complete it to a high quality standard. Additionally, because payment is held until jobs are successfully completed, buyers are able to receive a full refund if the service provider doesn’t yield the quality or timeliness of work they promise.

Microlancer aims to make nasty disagreements about payment a thing of the past for both freelancers and clients. Sometimes, parts of freelancing seem broken. We want to fix them.

It’s easy to find what you’re looking for

Looking for the perfect freelancer to do exactly the work you need done can be an extremely time-consuming challenge. We often end up settling for freelancers who aren’t quite the perfect fit, simply because we don’t have time to look any further.

Microlancer uses search, descriptively named categories and visual previews of work to make it extremely simple to find exactly what you’re looking for.

More of what you love

Any creative professional knows that for every hour spent in Illustrator, another hour is spent answering emails, pitching for jobs, updating your portfolio or giving quotes for jobs that never materialize.

One simple mantra we have at Microlancer is: more time spent doing what you love. We use our marketing and advertising techniques to bring buyers to you, so all you need to focus on is doing good quality creative work. Every service listing you create is constantly being viewed and considered by prospective buyers. Every day, thousands of prospective buyers visit the site.

Learn more about how to become a service provider on Microlancer.

What’s next?

Microlancer is currently in beta and, to start with, is focusing exclusively on design, illustration and artistic services. Next, we’ll be opening up HTML & CSS services for both purchase and sale. If you like to code as well as design, or need awesome HTML & CSS to go along with your design work, stay tuned for news on this. The best way to keep up to date with new features, categories and developments is to like Microlancer on Facebook or get updates on Twitter.

If you haven’t already, take 2 minutes to check out Microlancer, the newest service by Envato.

How to Create an Aerial View Illustration of a Car in Adobe Illustrator

Julie Felton — Mon, 17 Jun 2013 12:16:48 +0000

In this tutorial, I will show you how to create an aerial view of a car using Adobe Illustrator. The nice part about illustrating it from this angle is that you only have to draw half of the car! As reference, I am using a photograph I took of a diecast model MINI.

1. Place the Reference Photo

Create a New document and File > Place the reference photo onto the artboard.

Title the first layer "reference". Double-click the "reference" layer to bring up the Layer Options dialogue box. To lock the layer and keep it safe from stray mouse or pen clicks, tick the box next to Lock. Then, tick Dim Images to 50%, or any other percentage that suits you.

Create another layer above the locked "reference" layer. This will be the illustration layer. Title it "Awesome Illustration" A little self-praise before you begin never hurts!

2. Create a Dividing Line

Create a vertical line down the center of the car photo. Then, go to View > Guides > Make Guides. Be sure to lock the guide View > Guides > Lock Guides.

3. Trace Outer Edge of Car

Using the Pen Tool (P), outline the outer edge of the car’s body. Don’t worry about the headlight, door handles, or other parts that are attached to the body of the car. Also, it is only necessary to outline half of it since we will flip the completed outline later.

4. Outline Window

Using the Pen Tool (P), outline the outer edge of the window.

5. Add Window Details

It’s difficult to see on this reference photo, but since I have the actual car right beside me, I know that there are panels that divide the windows. Using the Pen Tool (P) again, draw lines for the window divider panels. These lines need to overlap the window outline. It is not necessary to draw each panel as a shape.

6. Complete Window Details

Select the two window outlines with the Direct Selection Tool (A). Then, Copy and Paste In Front to create a duplicate set of lines. Select the window and panel outlines. In the Pathfinder panel, select the symbol for Divide. The window panels are now separate objects. Before you deselect anything, give the objects a stroke that matches the others. I like to do this using the Eyedropper Tool (I). With the objects highlighted, simply click on a stroked line and the highlighted objects will take on the same characteristics as the object you sampled.

7. Delete Unnecessary Shapes

The divide tool created shapes for both the windows and the panels. Select the extra shapes with the Direct Selection Tool (A) and delete them. They are the shapes shown in blue below. The windows will be created with the original window outlines. This way, it will be one large shape rather than several small shapes. The panels will rest on top of the window shape and will give a much cleaner look to the illustration. I prefer to layer objects this way rather than trying to perfectly butt them up against each other. Also, it’s much easier to adjust one large shape than several small shapes.

8. Add Gas Cap

This detail is easy! It is nothing more than an oval created with the Ellipse Tool (L). Using the Gradient Tool (G), give it a linear fill that starts with 10% black and ends with 50% black.

9. Create Door Handle

Use the Pen Tool (P) to create the door handle as well as the concave area behind it. Fill the handle with the same linear fill as the gas cap. With the door handle selected, click on the gas cap with the Eyedropper Tool (I) and the handle will fill with the same gradient. If needed, adjust the direction of the gradient so the 50% black is on the left and the 10% black is on the right.

Since red is my favorite color, we’re going to make the car red! That means the shadowed areas, such as the concave area behind the handle, need to be a darker shade of that red. Here, I’ve used C=35, M=100, Y=100, K=50.

10. Add the Bonnet Stripe

What’s a MINI without a bonnet stripe? Boring! Draw the bonnet stripe so the it overlaps the seam where the part of the hood nearest the window opens. You will modify this in a future step.

11. Create the Hood Vent

With the Rounded Rectangle Tool, create a rectangle the width and length of the vents. Fill with black. Go to Effect > Warp > Arc and give it a horizontal bend that matches the edge of the window. I used 8%. Then, go to Object > Expand Appearance. Use the Rotate Tool (R) to align it with the arc of the window.

12. Add a Highlight to the Hood

Create a shape like the one shown below and give it a gradient that starts with C=17, M=100, Y=100, K=7 (which is the base color of the car) and ends with C=35, M=100, Y=100, K=50 (the shadow color). Adjust the angle of the gradient until you are satisfied with its position.

13. Create a Headlight

The headlight is nothing more than two ovals filled with gradients. Create the first oval over the outer rim of the headlight on the reference photo. Fill it with a gradient that goes from 40% black to 10% black. Copy the oval and Paste In Front. Use the Scale Tool (S) to reduce it to the size of the actual headlight. Change the gradient values to 15% black and 0% black. Adjust the direction of the gradients as needed.

14. Add a Bumper

This time, you’re going to draw the entire bumper rather than just half of it. Doing it this way is easier and will save time down the road. With the Rounded Rectangle Tool, create a rectangle the width and length of the bumper. Go to Effect > Warp > Arc and give it a horizontal bend that matches the front bend of the hood. I used 11%. Then, go to Object > Expand Appearance. Fill with a gradient that goes from 10% black to 30% black.

15. Add Seams

Draw the hood, door and hatchback seams. I’ve shown them here in blue.

16. Create a Side Mirror

Trace the mirror and mirror arm. Fill each shape with a gradient that goes from 40% black to 10% black. Adjust the gradient direction as necessary.

17. Add the Fender Trim

Draw the two pieces of fender trim and fill each shape with black.

18. Flip It!

Select All (Control-A). Hold down the Shift key and deselect the gas cap and bumper with the Direct Selection Tool (A). Copy and Paste in Front. Select the Reflect Tool (O), place the cross hairs over the blue guideline, hold down the Alt key and click on the guideline. When the Reflect panel comes up, choose Vertical. You know have a whole automobile.

19. Join the Two Halves

Starting from the front of the hood, work your way down the guideline and join the halves by connecting the end points of each half.

20. Color it Red

Add a little color! Fill the body of the car with a gradient that starts with C=17, M=100, Y=100, K=7 (which is the base color of the car) and ends with C=35, M=100, Y=100, K=50 (the shadow color).

21. Color the Windows

Select the window panel trim pieces and fill them with black. Next, select the outside edge of the window and fill it with a gradient that goes from C=100, M=50, Y=10, K=40 to C=100, M=75, Y=50, K=75.

22. Add Grays

Select the bonnet stripe and roof. Using the Eyedropper Tool (I), click on the gray gradient on the mirror and sample it. Adjust the direction of the gradients until you are satisfied with the look.

23. Trim Out the Windows

Select the outside edge of the window shape, Copy and then Paste in Front. Give it a stroke of 3 points. Go to Object > Expand to create a compound path. Fill with the same gradient as on the roof.

24. Finish the Seams

Select the body seams. Give them a Stroke Weight of 0.75 points. Go to Object > Expand. Fill the expanded lines with the red shadow color, C=35, M=100, Y=100, K=50. Adjust the expanded seam lines and make them flush with the edge of the car. Now, select the seam on the roof. Give it a Stroke Weight of 0.75 and make it black. Then, go to Object > Expand.

25. Add a Roof Graphic!

No MINI is complete without a spiffy roof graphic. How about a target? To do this, create a circle using the Ellipse Tool (L). With the circle selected, go to Object > Path > Offset Path. Enter 0.25 inches in the Offset box. Click OK. With the new circle selected, go to Object > Path > Offset Path and enter 0.25 inches again. Repeat this process two more times until you have five circles.

26. Color the Roof Graphic

Place the target on the roof and size to fit. Fill the first, third and fifth circles with the same red blend as the body of the car. Fill the second and fourth circles with the same blend as the roof. To ensure that the roof blend and target blend match, run the blend to from one end of the roof to the other. You can also select the gray circles and the roof and adjust the blend at the same time.

27. Create a Background

Draw a box and position it under the car. Add the color of your choice. In this example, I used a blend that went from C=100, M=50, Y=10, K=40 to C=100, M=40, Y=0, K=0.

28. Add Depth

To give the illustration a bit more depth, add a Drop Shadow to the car. Select the car and Group (Control-G) it. Go to Effect > Stylize > Drop Shadow and enter values to get the effect you desire. I set my drop shadow at 90% Opacity and entered 0.07 inches in the Blur field.

Time to Motor!

Congratulations! You now have your very own vector MINI. If you want to step it up a notch, add a few more accessories, experiment with different colors, or create more gradients and highlights. Have fun!

Congratulations Sharon, You’re Officially Devious!

Ian Yates — Fri, 14 Jun 2013 10:29:03 +0000

If there’s one thing our beloved Vectortuts+ editor does well (aside from tweaking bézier handles), it’s taking part in the community. This month, the vector community has recognised her talents, awarding her a massive slap on the back in the form of the deviantART Deviousness Award!

The Deviousness Award is an accolade which is traditionally handed out on the 1st of every month to one truly outstanding deviant.

Head on over to deviantART now, check out more of what she does, and say hi!

And here’s a cat gif – because if ever Sharon gets hold of you on Skype, this is what you can expect.

How to Draw and Vector a Kawaii Vampire Chibi in Illustrator

Mary Winkler — Thu, 13 Jun 2013 17:09:09 +0000

Let’s get cute! In this tutorial you’ll learn how to build a chibi character from scratch using the Shape Builder Tool (Shift-M), Pen Tool (P), transparent gradients, and more in Adobe Illustrator! The idea of a chibi character is to diminish the overall form, making it cute, big-eyed, and pretty simplistic. Let’s get to it!

1. Form the Head

Step 1

Much like Voltron, we’ll start by forming the head. Draw a circle with the Ellipse Tool (L). You’ll want to hold down Shift to keep it from getting squashed. This circle is a simple line at 1pt Stroke Weight.

Step 2

Use the Paintbrush Tool (B) to draw two curved lines bisecting the circle. These will help you define the angle of the head and placement of facial features. In this case, the head will be at a 3/4 view (or thereabouts).

2. Draw the Face

Step 1

These blue lines drawn with the Paintbrush Tool (B) are for the base sketch of the face. So no worries if you want to doodle it out a bit or make several changes. Draw a large, almond-shaped eye. This one has two parts: a top arc and a bottom arc.

Step 2

Continue with the other eye. This one will be rounder, shorter, and smaller, as it’s on the other side of the face – so viewed at a tighter angle. The point of the horizontal line on the face is for eye placement. While I made adjustments in the picture below, the line itself should help indicate the place where the corners of the eyes rest.

Step 3

This step begins the shape of the jaw. Chibi faces have pretty funky jaw lines. They tend to jut out in such a way that’s more expressive than “correct” in terms of anatomy. Check out the image below for the angle of the jawline. I began the first line at the temple and ended the second line at the point of the chin, which is also where the vertical line drawn ends.

Step 4

Only one line is needed for the other side of the jaw. Since this side of the face is most viewable, a simple curve is necessary to define the edge of the head. The line travels from the chin’s point to the back of the jaw, where the ear begins.

Step 5

This chibi design skips the nose. The rule with anime-style drawings tends to be the smaller the nose, the cuter the character. Since chibi characters are pretty extreme in their design, a complete lack of a nose seems up to par. I switched colors so the mouth shape would be easily viewable. This mouth is open, with a tiny fang showing. It’s basically a disjointed capital D.

Step 6

Add simple curved lines to indicate the eyes’ irises and eyebrows. Your basic face shapes are now complete.

3. Create the Jawline

Step 1

So we’ve already sketched out our jawline, but now we need to create the final version of it. With the Selection Tool (V), select the facial features and cross lines (everything except for the brown head circle) and Group (Control-G) it together. Lock these shapes in the Layers panel.

Step 2

Using the Pen Tool (P) with the same brown color and Stroke Weight as the head circle, trace the blue jawline.

Step 3

Continue tracing the jawline and close the shape. Make sure the curve of the circle leads right into the newly drawn lower portion of the head. I reduced the transparency of the facial features sketch for easier visibility.

Step 4

Select both of the brown line shapes. Using the Shape Builder Tool (Shift-M), click on the circle and drag it through the three intersecting shapes.

Step 5

This has united the circle and the jaw shape into one adorable little head.

4. Draw the Chibi’s Body

Step 1

Let’s give this little cutie a body. Using the Paintbrush Tool (B) Draw a line with a slight curve from the head (a bit past the chin) down as far as you feel the torso should extend.

Step 2

These two lines, each curved toward one another, indicate the placement of the shoulders and the hips. The end of the line between them now indicates the bottom of the pelvis of the character.

Step 3

I’ve drawn a line far more curved than the others about midway between the shoulder line and the hip line. This indicates the end of the ribcage. The little lines on the hip line indicate the hip sockets and start of the legs.

Step 4

Two shapes have been drawn to indicate the shoulder sockets/beginning of the arms as well as two lines for the little chibi character’s legs. They’re slightly bowed in, have no knees or ankles, and are about the same length as the entire torso. This is done to keep them simple and maintain cuteness.

Step 5

Finally, I’ve added lines to indicate the arms (notice the lack of elbows) and two short lines to indicate the hands. This particular style lends itself to simple, mitten-like hands, versus more complex shapes.

5. Add Clothing to the Torso

Step 1

This little character is wearing a sailor-inspired school uniform, so a good place to start on the shirt is the collar. Using the Pen Tool (P), set the stroke to a dark blue. Outlines like these will remain in the image. Draw two curved shapes for the collar (it’s wide and tapers in by the knot). The knot itself is comprised of two overlapping shapes.

Step 2

Add two tails to your collar. These shapes each have five anchor points and connect behind the knot shape.

Step 3

Using the same brown from the face, draw a shape for the neck from the shoulders up to past the chin.

Step 4

For the shirt itself I chose a much lighter blue than the collar. Using the body sketch as a guide, draw the shirt down to the top of the hip socket lines. Consider where the fabric drapes or folds in your drawing.

Step 5

Complete your shape. Here’s the outlines of the shirt, sans arms.

Step 6

The arm pieces of the shirt are drawn in the same light blue. Seen below, I experimented with puffy sleeves and folds before deciding on a later, final version.

6. Add Clothes to the Legs

Step 1

For the skirt I used the same dark blue as the shirt’s collar. The skirt is pleated, so it comes in at sharp angles along a curve. I drew it with the Pen Tool (P).

Step 2

Finish off the skirt shape and make sure to join your ending anchor points. The skirt kicks up in the back and slopes down in the front.

Step 3

In the event you had wondered, the guidelines previously drawn were Grouped (Control-G) and hidden in the Layers panel for the sake of this tutorial. Using the leg lines from the body lines drawn before, I’ve formed a simple little leg and foot shape. It has no knee or ankle, the foot is stubby and small, and it curves inward. Either draw the other leg, or Copy (Control-C) and Paste (Control-V) this one and flip it over a vertical axis.

Step 4

The little mitten hand previously mentioned has been drawn now. This hand is drawn from the side and tilted upward at the wrist. It’s also small and mostly featureless, as most limbs of chibi characters are.

Step 5

In the image below you’ll notice all of the body parts have now been drawn. The guidelines are still hidden for easy viewing. The leg pieces are behind the skirt. The hands and arms are behind the skirt, legs, and collar pieces. The head has been set before all of the body pieces. Finally, the shirt piece is beneath the collar, beneath the skirt, but above the arm of the viewer’s left side.

7. Define the Facial Features

Step 1

For the sake of clarity in this section, I’ve hidden the body pieces and made the face sketch visible again. With the Pen Tool (P) I’ve carefully drawn the top arc of the eye.

Step 2

Doubling back on the arc shape, I’ve added a point that will form eyelash details.

Step 3

Another has been added. This look is similar to retro styled makeup rather than being a drawing containing individual lashes. Clear, graphic indications of details are better in such a design than realistic detailed work.

Step 4

Close the shape and switch from a stroked line to a fill. This brown is much darker than the body outline color. The top of the eye is complete.

Step 5

Here’s a closer view of the eye shape detail. I’ve added a curved shape for the bottom of the eye. No eyelash details will be added and it will not intersect the inside corner (on the left) of the top shape.

Step 6

A thin shape has been added for the eyelid crease as well as a simple swooped shape for the eye brow. How arched or detailed the eyebrow gets is entirely up to you.

Step 7

Repeat the eye drawing process on the other side. As this is a 3/4 viewing angle, simply Copying (Control-C) and Pasting (Control-V) will not work in this case. Follow the light blue sketch lines and you’ll have the correct eye shape.

Step 8

Using a light brown, trace the mouth shape from the sketch. This shape is also just a fill versus stroked line.

8. Create the Chibi’s Hairstyle

Step 1

Before we get too entrenched in facial details, we’ll focus on the basic hair shapes. I’ve hidden everything except for the head shape for this section. Using the same color as the head, I’ve begun to outline the shape of the hair from the crown of the head to the edge of the bangs.

Step 2

The bangs are choppy rather than smooth in this case. Follow along going up and down like a curved wave pattern. Note how the curve of the bangs go left until they reach the center of the face; then they curve to the right. I made some of the facial features visible again so there’s a good reference point for drawing the hair.

Step 3

Continue until you reach the side of the hair. The anchor point where this shape currently ends will be the beginning of the character’s pigtail.

Step 4

See how it indents on the right side? That is where the pigtail will be set. The indent on the top of the head indicated the beginning of the bangs. The hair, overall, has a lot of volume to create a perky look for the character.

Step 5

Using the Pencil Tool (N) I’ve drawn a cute little pigtail on the right side of the design. When using this tool, remember to close your shape by joining the anchor points (Control-J).

Step 6

Draw another fluffy little bit of hair for the pigtail on the other side of the head. This one is slightly obscured be the side of the face.

Step 7

An additional bit of hair, beneath the main hair piece, has been added to obscure the other side of the face.

Step 8

Select all of your newly drawn hair pieces and Group (Control-G) them together.

9. Coloring the Hair

Step 1

Select your hair group and set the fill color to a bright pink. Some adjustments to the hair pieces will have to be made so no gaps appear between them.

Step 2

I’ve moved the pigtail on this side inward, ever so slightly, and added two stroked lines to show hair leading into the elastic band.

Step 3

Additional lines have been added to the indent where the back of the hair meets the front.

Step 4

Finally, the additional forelock was moved upward to close the gap. Add a fill color to the head shape with whatever skin tone you’d like for your character.

10. Coloring the Clothes and Body

Step 1

Add colors of your choosing to the clothing shapes. Simply select each shape and choose a color for the fill. Since this is supposed to be a school uniform, the shirt’s sailor collar and the skirt match.

Step 2

Let’s focus on the legs. I’ve added the same fill color from the face to them and for the sake of this section placed them above the skirt in the Layers panel.

Step 3

When forming the socks, don’t worry about the shape aside from the top curve. Select both shapes with the Selection Tool (V) and using the Shape Builder Tool (Shift-M), select the shape outside of the intersection between the leg and sock.

Step 4

Deselect the leg and sock, select only the outside shape (it’s separate now) and delete it. your little character should have a sock that conforms perfectly to the shape of its leg. Repeat on the other side.

11. Give Your Chibi Shoes

Step 1

Using the same dark brown from the eye shapes, trace the outline of the foot with the Pen Tool (P). Unlike the sock, the shoe shape will extend beyond the main leg a bit, but not by much. The top is straight across.

Step 2

Draw a small window in the shoe shape and select both of these shapes.

Step 3

In Pathfinder, hit Minus Front to delete the small window shape from the shoe shape.

Step 4

Using the Ellipse Tool (L), draw a small yellow circle for the buckle or button of the shoe.

12. Face Details

Step 1

Add almond-shaped whites of the eyes, dark brown for the inside of the mouth, and a little triangle for the character’s tiny fang.

Step 2

The mouth has two more pieces to it: another little fang and a little pink tongue. Both of these shapes will be placed below the mouth line work and above the dark brown shape the colors the inside of the mouth.

Step 3

I drew large dark, dark brown shapes following the sketch lines for the eyes in order to create the base for the iris. We’ll detail them shortly.

Step 4

For a splash of color, try drawing a smaller shape within the iris base. I chose a bright teal color for her eyes.

Step 5

She’ll need some pupils. Two of them, in fact. You can either freehand them with the Pen Tool (P) or Copy (Control-C) and Paste (Control-V) the teal iris bits and resize them so they carry an identical contour.

Step 6

In this case I went for the Copy and Paste route and adjusted the overall shapes to meet my needs once in place. All of the eye bits are set below the eye’s line work and above the base of the face.

Step 7

Flat colors are now all set and completed. I’m not entirely sure I dig this color scheme and really think there’s something major missing in terms of accessories for this little fanged cutie-pie.

13. Add her Cute Chibi Wings

Step 1

The wings are going to hang in mid-air and be near the shoulders. Start with a line that curves up from the shoulder towards the hair or head.

Step 2

Bring that line across in a straight line and start to make your way back to the starting anchor with sever scalloped lines.

Step 3

There’s four scallops total in the finished wing. Repeat these steps on the other side.

Step 4

So I switched up the color scheme a bit. Instead of teal, the eyes are purple. The same purple has been used for the skirt and shirt color while a very dark purple is used for the outlines. A very light purple is used for the outline of the shirt and socks now. For a tiny vampire school girl, this color scheme is far more effective. It’s darker than the other one but still bright. Purples, dark browns, pinks, and reds immediately convey the idea of “Hey! I’m a scary cute vampire!” without resorting to using black.

14. Add Depth to the Hair

Step 1

Let’s get back some more more detail on the hair. This time around we’re focusing on some basic shadows in the hair. Starting with the pigtail on the left side, I’ve drawn a shape that defines the inner curve of the pigtail, shows which side is facing towards the head, and has choppy lines showing the style of hair. The color is the same as the hair outline.

Step 2

Select the hair shadow and the pigtail. Using the Shape Builder Tool (Shift-M) select the shadow shape outside of the pigtail boundaries.

Step 3

Deselect the shapes and you’ll find when you select that outside shape again it’s separate from the shadow. Delete it.

Step 4

Reduce the Opacity of the shadow shape as you see fit. Continue with other portions of the hair. The next shadow helps define the chunks of hair pulled into the pigtail.

Step 5

The third shadow shape shows the separation of hair from the crown of the head between the bulk of it and the bangs.

Step 6

Finally, add a shadow to the forelock beneath the bangs.

15. Add Detailing the Eyes

Step 1

Let’s add some more detail to the eyes. Starting with the now purple irises, apply a linear gradient similar to the one in the photo. It goes from the dark brown of the pupil to the base purple color to a purple that’s slightly lighter. Set it at a 21 degree angle so the darkest parts are on the edges of the iris and the lightest are in the center.

Step 2

Repeat for the other eye. The angle of the gradient will be different than the other eye.

Step 3

Draw a shape that overlaps half of the eye. We’re adding some depth to the feature. Although this character is a stylized cartoon, adding shadows allows certain features to pop out from the picture plane. Such big eyes need to stand out from the rest of a very brightly colored design.

Step 4

Apply a gradient to this shape going from the very dark brown of the pupil to the same brown set at 0% opacity. For this eye I set the angle of the linear gradient to 49 degrees. In addition to this step, I’ve also added two small circles with the Ellipse Tool (L) in a light creamy yellow. Repeat for the other eye.

16. Detailing the Face

Step 1

It’s true: we’re not yet done with this pretty little face. I’ve broken down the steps into such stages so it doesn’t become an overwhelming endeavor. Really, many of them can be done quickly, all at once. Although no nose is drawn, I wanted to indicate some depth in that general area. By drawing a large wobbly shape set below the facial features with a radial gradient and the following settings below, you get a shadow shape that shows an indentation of the chibi character’s face. It’s sort of like indicating a little ledge, similar to what a molded plastic doll would have instead of a proper nose.

Step 2

Once again, using the Gradient Tool (G) and the Pen Tool (P) I drew a shape to show the fullness of the bottom lip. No top lip will be drawn, as it’d cause the mouth to be too large of a feature and age the character a bit. The gradient goes from a rosy peach color to the base skin color set to 0% Opacity and a 78 degree angle. this will be set behind the other mouth components.

Step 3

A light cream transparent teardrop shape was added to the bottom lip to show some highlight/shine.

Step 4

Any cutie-pie chibi worth its salt should have rosy cheeks. Similar to the process of creating the little nose ledge shape, a large blob shape can be drawn with the Pencil Tool (N) and a radial gradient applied with the Gradient Tool (G).

Step 5

Repeat the simple little cheek process on the other side and set both of them beneath the eye components.

Step 6

A couple tiny circles were added as highlights on the cheeks. Following that, an arching curve has been added with a gradient going from the same skin shadow color used on the nose area. The gradient is linear and goes from the base skin color set to 0% Opacity to the shadow color. Adjust the angle as you see fit so the shadow is between the skin tone.

Step 7

Repeat the eye crease shadows on the other side as well as the little cheek highlights.

Step 8

Another eye detail that can be added is a shape similar to the one below. It’ll be set underneath the pupil but above the iris components and has six to seven anchor points.

17. Add Shading to the Body

Step 1

I’ve hidden the hair in order to better showcase the strange large shape I quickly drew with the Pencil Tool (N). The gradient is the same as the one applied to the eyelid crease. The goal of this one, however, is to let the shadow color start at the top of the head (where it will be hidden by the hair) to the middle of the eyes. Set this behind the facial features.

Step 2

Repeat the gradient above for the neck.

Step 3

Set it behind the head.

18. Add Detailing to the Clothing

Step 1

The first set to detailing the shirt is to add shadows on the sleeves. Two shapes were made here with a linear gradient going from the light purple used as an outline to the white of the shirt itself (set to 0% Opacity again). The Opacity of the shape overall was reduced in the Transparency panel. One shadow should show the relationship between light and the inside of the sleeve meeting the body as well as the collar casting a shadow onto the sleeve itself. The other shadow shows the outer edge of the sleeve and the indent of the puff shape.

Step 2

A shadow shape was added underneath the collar’s knot tails and collar itself. The shadow is darkest nearest to the collar and lightens up the closer it gets to the skirt.

Step 3

Speaking of the skirt, let’s define those pleats with some simple gradient shapes. Each shape is a rectangle set to fit the folds of the skirt created earlier. The linear gradients are darkest near the bottom edge of the skirt and lighten up to the base color at the top. Set the base color to 0% Opacity in the gradient shapes and reduce Opacity as needed.

Step 4

Four curved rectangles were drawn to show the stripes on the collar. Initially, I wanted to use white to match the shirt itself, but it was too stark against the bright purple.

Step 5

Instead a Grey purple color was chosen so some detail would be seen but it wouldn’t dominate the design. An additional shadow shape, the same gradient color as the skirt’s pleats, has been added to show the shadows being cast from the chibi character’s giant head on to the shirt’s collar.

Step 6

I added two stripes of bright purple to the socks, mimicking athletic wear, and the same gradient color from the neck shadow to the legs.

Step 7

The socks are not yet complete without shadows showing the shape of the leg (rounded, cylindrical). Use the same shadow gradient from the sleeves to complete the socks.

Step 8

And finally, add stripes to the collar knot’s tails as well as two shadow shapes that shows how the tails have form and can fold in on themselves.

19. Add Detailing to the Wings

Step 1

For the shadows on the batwings, three trapezoids and one triangle have been drawn with the Pen Tool (P) and a linear gradient applied.

Step 2

Select the gradient shapes. Using the Shape Builder Tool (Shift-M) select and drag across all four of them.

Step 3

With the Shape Builder Tool (Shift-M), select the bits of the shadow gradients that fall outside of the wing. Deselect and pick up the Selection Tool (V) so you can easily delete those superfluous pieces.

20. Create Highlighting in the Hair

Step 1

The final step on the hair is adding some shiny, shiny highlights. The gradient is the same creamy yellow color from the eye’s highlights and goes to the bright pink base of the hair itself. Create a swooping shape that extends from the left side (of the image) to the right.

Step 2

Add a similar shape to the pigtail on the right side of the image. The gradient goes in the opposite direction as the last one.

Step 3

To finish off the hair highlights, add a sprinkling of little creamy yellow circles with the Ellipse Tool (L).

21. Adding a Pattern to the skirt

Step 1

In order to make this little vampire schoolgirl hit the mark, she needs a patterned skirt. Start with diagonal stripes in hot pink going from the left corner of the skirt to the right.

Step 2

Unite the shapes with the Shape Builder Tool (shift-M).

Step 3

Delete the portion of the stripes that extend beyond the confines of the skirt by selecting both the stripes and the skirt with the Selection Tool (V), selecting the outer bits with the Shape Builder Tool (Shift-M), deselecting the skirt and inner stripes with the Selection Tool (V), and deleting those outer pieces.

Step 4

Move the stripe shapes below the gradient pleats. You can leave the pattern as a diagonal gradient or add more striped to create a plaid pattern.

22. Add an Outline to the Chibi

Step 1

Group (Control-G) together the entire chibi character. Copy (Control-C) and Paste (Control-V) it onto the picture plane.

Step 2

Color the entire thing the very dark brown used for the little shoes.

Step 3

Unite the entire shape in Pathfinder and make sure there aren’t any anchor points that jut out at odd angles. This could be caused by a shape not having been closed previously in the creation of your character.

Step 4

Add a six or eight point Stroke Weight to the shape and set it behind the main chibi character. Align the two elements so you have a clean graphic outline around your little vampire.

23. Add a Quick Background

Step 1

To start, I’ve added a Radial gradient as a shadow beneath the character. It goes from dark brown at 100% to 0% Opacity and is a 36.98% of a circle.

Step 2

Add a large creamy yellow rectangle behind the character with the Rectangle Tool (M) or the Rounded Rectangle Tool if you want to get fancy.

Step 3

Using the Line Segment Tool (\), Draw a series of horizontal lines going across the yellow background. In this image, one is spaced high at the top, another low at the bottom, and several are in the middle. I did this to draw them out quickly. Next, Align them to the middle of the background and hit the option to distribute them evenly in the Align panel.

Step 4

Finally, add a small darker yellow rectangle to the bottom of the background to indicate the “floor” of the piece.

Awesome Job! You’re Now Finished!

Your cute chibi vampire character is now complete. An additional white outline was added to the character to break her away from the background a bit more. Using these techniques you could design an entire school class of supernatural students and crazy cute characters.

Create a Set of Coffee and Tea Icons in Adobe Illustrator – Tuts+ Premium

Andrei Marius — Thu, 13 Jun 2013 12:55:49 +0000

In this Tuts+ Premium tutorial, you will learn the step by step process of creating a set of coffee and tea icons, in Adobe Illustrator. If you are looking to take your skills to the next level then Log in or Join Now to get started!

View the Tutorial

Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.

What’s New With Adobe InDesign CC: QR Code Generator

Martin Perhiniak — Wed, 12 Jun 2013 12:11:17 +0000

QR (Quick Response) codes are everywhere nowadays and thanks to a new feature in Adobe InDesign CC now it is easier than ever to create you own unique QR code for your documents and products. From this video you can learn all the different types of information you can set for the QR code like URL, plain text, text message, e-mail and business card. You will also see an example how to incorporate a QR code in your design in a way that it really becomes part of the design.

Create a Futuristic Robot Helmet in a Line Art Style in Adobe Illustrator

Aditya Permadi — Tue, 11 Jun 2013 12:24:35 +0000

In this tutorial I will show you how to create a detailed robot head in Adobe Illustrator. The tools that I will be used in this tutorial include: the Pen Tool (P), Ellipse Tool (L), Rounded Rectangle Tool and Eyedropper Tool (I). I will also using Pathfinder panel and Outline Stroke options in the process. Patience is needed when creating such a detailed illustration. So let’s begin!

1. Prepare the Basic Sketch

Step 1

Create a New Document (Control + N), name it "Robotic Head". Set the artboard size to 600px x 700px and Color Mode CMYK at 72dpi. All we need is a basic sketch in this first step. So we can start by creating a new layer, name it "Basic Sketch".

Step 2

Draw a rough sketch of robot head with Blob Brush Tool (Shift + B). In this case, I will recommend you to do it with a graphic tablet as it will feel more organic to you. But if you don’t have one, you can simply draw on paper and scan the result.

Step 3

After finished, set its Opacity to 33% and Lock this "Basic Sketch" layer. This sketch will not interfere with the next process. Create New Layer which you can name it "Lines" or something up to you.

2. Create the Line Art of Section on Top of the Head

Step 1

From this section I will transform it from rough sketch to clean vector lines. Hit the Pen Tool (P), set the Stroke to a 4pt Weight and begin drawing a closed path that’s following the top head panel section. I’m creating a symmetrical design, so that means I’ll only need to create half of it.

When the half part is completed, duplicate it by select the object then drag to the left by holding Shift + Alt.

This duplicated object has to be reflected by Right-clicking, then select Transform > Reflect. The dialogue box will be appeared. Check Vertical option then click OK.

Set their position so that both objects are sticking each other. Open the Pathfinder panel (Shift + Control + F9) and choose Unite to merge them.

Step 2

I’m going to continue to create the front camera element. Create a closed path just like the image below. If you create a shape which goes beyond another, don’t worry as you can use the Pathfinder panel to clean your edges up.

Here’s a quick explanation :

Copy (Control + C) the top head element and Paste in Front (Control + F).
Select this copied part alongside the front camera part.
Click Intersect on Pathfinder panel to remove the overlapping camera part.

Using this method will help you to create a path that looks neat and not deviate to each other.

Copy and Paste in Front the previous result of camera panel. Resize it by holding Control + Shift + Alt, so it should be a smaller piece inside. Set it’s Stroke Weight to 3pt.

Create the left and right panel to give details of the angled corners on the top head element. Arrange them behind the front camera element. Make them all white fill, so you can see the true position of each part. Draw the camera circle also by using Ellipse Tool (L).

Step 3

I’m sure now you can do the rest of the top head parts. The picture below shows that I’ve done with the horn, cranium, forehead and a head bulge.

All parts are made with closed paths and stacking on each other. Look at the basic sketch as a reference.

Make copy for all of them and drag to the right. Unite them one by one for the parts which are the same.

Give little details on the horn that could be air filter. I made this one by using the Ellipse Tool (L). Group (Control + G) them and make a copy of them for the right horn.

3. Work on the Bottom Section of the Helmet

Step 1

Let’s continue to the lower parts of the helmet. In this section, I will improvise the eye design since I think that the original sketch doesn’t look as good to me. Just hit the Pen Tool (P) again and make the half shape of the robot eye. Reflect and Unite them when done.

When it’s done, select this part and Right-click your mouse, choose Arrange > Send to Back.

Step 2

Go to the bottom level and add the base mouth cover part.

Draw a panel line on it, set the Stroke Weight to 3pt. This panel line is also an improvement, since it doesn’t fit for me in the basic sketch.

To give more details, I’ve added a pair of vertical panel lines. It looks better for now.

4. Create the Air Filter Parts

Step 1

In this step, we’re going to focus only to create the air filter parts, so you can hide all the completed parts from the previous steps for a while. Let’s continue using the Pen Tool (P) to make filter box as referenced from basic sketch.

By adding more paths inside, the air filter is finally got more depth with the angled corners.

Create a fin to complete this part. Hold Alt + Shift to duplicate it straight to the bottom. Do this twice, so we have three fins in order to fill the vacuum space. Arrange each fin part to their right position. Select one fin and tap Control + [ to send it backward once.

Step 2

Put this completed air filter part to the left side of the mouth cover as shown in the image below. Make copy of a completed air filter part and drag it to the right side of the robot head. Group (Control + G) both of these parts.

Step 3

Add a pair of connectors behind each air filters.

Complete this step by adding a little flat detail behind the connectors.

So far this is what you’ll get, but I think it’s not enough. We need to create more panel lines and dimensions on this robot head and see if that really works. This is just the beginning, so let’s continue.

5. Add Detailing Elements

Step 1

I have added thicker lines and shapes around the helmet to add extra depth. I also change the visor color to solid black and create some panel lines to add further dimension.

Try to give some panel lines to the other parts. Use the "Intersect" technique to make each panel looks neat, just in case that you want to create closed path instead of open path for these panel lines. Set the Stroke Weight to 2pt as this is a smaller detailing line and not to be confused with the more chunky outline of the helmet.

I continue adding details and angled panels through out the helmet.

The image below is the end result. You can see that I’ve added more panel lines on the top head. I’ve also modified the camera dimension.

Step 2

Small details are great for adding those finishing touches to a design. You can apply some shapes in whatever parts that you need. Use the Rounded Rectangle Tool to create bulge parts or maybe just relying on the Pen Tool (P) to make details on the head. Don’t forget to Group each pair of them.

Step 3

The robot head now looks great with the refined detailing. More panel lines that have been added into it will give a strong impression of metal plates.

Just a few things that need to be done on the mouth cover part. I think we can make it better by modifying this part where it still looks deserted.

Zoom to the left side of the mouth cover. Create one new panel that protrudes into the mouth cover shape.

Make a copy for the right one also and Group them.

Use the Rounded Rectangle Tool to make a hole of the mouth cover. Duplicate it so we have three holes and place them in the middle of it.

Add more panel lines here to complete the details. You can draw an open path for this panel line, but don’t forget eliminate the Fill Color by tapping (/) on your keyboard.

Manipulate the lower section of panel by stacking black objects. Done for the mouth parts.

5. Add a Reflection on the Visor

Step 1

We can use Rectangle Tool (M) to create a reflection effect to the visor. Simply make two vertical rectangles just like the image below. Change their slope by select both the objects and then use the Free Transform Tool (E). Click on the top middle objects node and hold Shift + Alt, drag the node to the right.

Step 2

Move them to the right side of the eye. We have to erase the half part of this reflection effect. To do so, Copy the visor and Paste in Front (Control + F) of them. Select both the visor and reflection effect and Right-click > Make Clipping Mask. You’ll see that the reflection effect is now limited by the eye field. Cut (Control + X) the effect and Paste in Front of the visor.

The result :

6. Refine the Line Art

Step 1

Almost complete. You’d better check each pair of objects. Make sure that each twin objects on the left and right are in group. Select the whole image and open the Align panel (Shift + F7), change to Align To Selection mode and hit Horizontal Align Center to make all those paired objects exactly in centered position to each other.

Step 2

This is the finishing step of line art. I just want to add more details for a better composition, also correcting some object appearances.

Step 3

When it’s done, we need to transform all the outlines to objects by selecting the whole image and then click menu Object > Path > Outline Stroke.

Step 4

Keep selecting the whole images. Open Pathfinder panel and click the Trim option from it. This is to clean up the mess. I usually do this to eliminate all the overlapped and unused objects behind the parts, so it wouldn’t distract the coloring process in the future.

7. Color Your Design

Step 1

Before we start the coloring process, it would be better that we select all the same black color and Unite them all.

Step 2

This is the color set that will be applied to the helmet. There are four gray colors here for the head plates, and one yellow/green color for the small parts.

Step 3

Begin coloring process. Use this set to give the plates colors. You can do it quickly by select some of parts first then you click Eyedropper Tool (I) or alternatively you could use the Live Paint Bucket (K). Choose one from the color set and the color will be automatically applied to the selected objects.

Step 4

Complete them. The source of the light will be in front of the objects, so the lighter gray color had the most applied in the front side of the head. Any other parts behind must be darker, including the panel folds. Keep the reflection effect in white and give the small details a yellow/green color. This simple color set would make it looks unique and harmonious with the lines. Add also a background with a black fill.

Step 5

Make an extra colored outline behind the head by select the whole parts and then Copy and Paste In Back (Control + B). Unite these copied parts and give it Stroke Weight of 9pt. Convert this stroke to object by using Outline Stroke command and give the yellow/green color to it.

Congratulations! You’re Done!

Your design is finally complete. It’s always good to check some small errors and correcting them before sharing your work. I hope you enjoy the entire process and feeling good with the final result. Keep learning more to work up your skills and keep pushing yourself.