Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Happy Illustration for a Magazine Article Design

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Being able to show a potential client what you can do is great, but you need to demonstrate to them how your work can be used on a commercial level. In today's tutorial I'm going to show you how to create a happy, dancing girl illustration and then incorporate it into a magazine style article design.

I'm going to be using stock purchased from the new Envato marketplace PhotoDune and modifying it through to vectoring our dancing girl. We'll make her a bit more glamorous along the way and then onto adding her into a magazine layout.

You can find the images I've used in this tutorial from here and here.


Step 1

I'm going to be using two stock images. I wanted a full body reference, however the one I chose had the model not looking at the camera. So from the same set of photo stock, I picked another image, which I am going to use Photoshop to modify.

Using the Lasso Tool (L) with a 5px Feather, I drew around the head area. When moving a face and neck to another image, remember to select around the chest area. This is because of how the neck muscles behave.


Once selected, I Copy (Command + C) and Paste (Command + V) the head onto my full body stock image.



Step 2

Using the Move Tool (V), I rotate and rescale the head to fit the body.


To test whether you've positioned and scaled it correctly, you can drop the Opacity of the layer to compare where the forehead and chin are on the underlying image. This will give you a good reference point to decide whether you've made the head too large or too small.



Step 3

Take note of elements from the reference image that seem a bit off, for instance if you look at the straps for the dress there seems to be something not correct there. On further inspection, the strap on the right is distorted more than it should, so when it comes to vectoring this I'm going to modify it.

Elements such as skin tone (it slightly differs in the face and body), can be easily resolved in the vectoring stage.


Crop the image (C) and then Save for Web & Devices with about an 800px width.



Step 4

Create a New document in Illustrator and then File > Place the stock image on the canvas. Rename the layer folder to "Reference" and lock the folder.

Create a New Layer and rename it to "BG". Use the Rectangle Tool (M) to draw a white filled rectangle over the canvas and reduce the Opacity to 30%. Once done, lock the folder.

Create a New Layer and rename it to "Bases".



Step 5

Using the Pen Tool (P) begin drawing the skin base for the model. I've used a skin tone color of C=10, M=35, Y=45, K=0. I've also made each of the shapes into a Compound Path (Command + 8). As you can see from the bases the distortion of the strap is even more obvious.



Step 6

Draw the base for the dress using a light gray (C=0, M=0, Y=0, K=20).

Using the bases as a guide, I'm going to begin to modify the strap so it looks less odd. I do this by adding shapes onto the chest area and then using Pathfinder > Unite to combine them with the skin base.




Then I modify the handle bars to smooth out the curves around the neckline of the dress on the dress base.



Step 7

Create a New Layer and rename it "Shading".

I'm going to begin the first skin shading shapes. I duplicate the skin base from the "Bases" layer folder and use it as a guide. From this, I will Pathfinder > Minus areas of light from it and then I will be left with the darker areas of the skin.


These shapes will have a fill color of C=20, M=50, Y=60, K=0, with a Blending Mode of Multiply and Opacity 5%. The reason why I use such low opacities is that it will create a smoother transition in color on the skin (or other areas for that matter).

Once done, Group all of these shapes (Command + G).



Step 8

I'm going to build on the skin shading by adding shapes with more orange tones. This will help emphasis a tan which is often people associate with being on holiday/relaxed/happy. These shapes will have a fill color of C=20, M=70, Y=75, K=5, and set to Blending Mode Multiply with Opacity 5%. Once done, Group them (Command + G).




Step 9

Within the "Bases" layer folder, Create a New Sublayer twice and rename them "Dress" and "Skin". Move the appropriate shapes to those folders. Then duplicate the skin base and use this to create a Clipping Mask (Command + 7) with the skin shading groups as shown.



Step 10

Now to add further darker areas on the skin. These areas will not be as large as the previous areas and mainly are places in areas of the darkest shadow. These have a fill color of C=35, M=80, Y=80, K=50, with a Blending Mode of Multiply and Opacity 5%.

Once done, Group the shapes (Command + G) and then drag and drop it into the Clipping Mask group.





Step 11

I'm going to start adding the highlights to the skin. To give a smooth appearance, I'll be using a transparent radial gradient using a lighter skin tone (C=5, M=15, Y=20, K=0). These shapes will be set to Blending Mode Screen and Opacity 20%. Again, Group (Command + G) the shapes and place them in the Clipping Mask group when complete.




Step 12

Using the darkest skin tone, I'm going to add some transparent radial gradients to the skin to give a smoother shadow. These shapes will be set to Blending Mode Multiply and Opacity 10% to 15%, then Group (Command + G) and place them in the Clipping Mask group.




Step 13

Now to add the most bright highlights to the skin. This is mainly where there are joints or larger fleshier areas that stick out more. I'll use the lightest transparent radial gradient for this, set to Blending Mode Screen and Opacity 20%.

In addition, I'm going to use the same lightest skin color to add the nails to the model. These will be set to Blending Mode Screen and Opacity 50%. Once done, Group (Command + G) them all up and drag and drop them into the Clipping Mask group.




Step 14

As the skin isn't all one color, I'm going to add pink tones to the cheeks and to the elbows. To do this, create a transparent radial gradient with a bold pink/magenta shade (C=10, M=100, Y=50, K=0) and use the Ellipse Tool (L) to add circles to the areas you wish to have a blush. Set these to Blending Mode Hard Light and Opacity 15%.

As before, once done place in the Clipping Mask group.



Step 15

Rename the "Shading" layer now to "Face" and within Create New Sublayers for "Eyes" and "Lips".

Using the same pink transparent radial gradient, create three shapes for the entire mouth area and the top and bottom lips within the "Lips" folder. Then set these to Blending Mode Multiply and Opacity 20%.



Step 16

Using the darkest skin tone, build up the area within the mouth set to Blending Mode Multiply and Opacity 15%.



Step 17

I'm going to start building up the shading around the lips and inside the mouth; including the gums area. This is with a most dusky pink (C=30, M=80, Y=60, K=15) set to Blending Mode Color Burn and Opacity 15%.



Step 18

Now to work on the teeth. Remember that teeth aren't white, despite what Hollywood would lead us to believe. I'm going to use the lightest skin tone in a transparent radial gradient. First to draw the entire set of teeth:



This shape, as well as shapes for the individual teeth will be set to Blending Mode Lighten and Opacity 50%.


Then add further shapes to the front of the teeth with the gradient source towards the bottom of the teeth. These will be set to Blending Mode Screen with Opacity 50%.



Step 19

I'm going to add more of a pink shade to the lips. To do this subtly without modifying the underlying shapes I'm going to draw shapes over the top lip and gums, as well as the bottom lip. This is with the dusky pink shade set to Blending Mode Hard Light and Opacity 30%.



Step 20

Now to darken the lips more, I'm going to use the dusky pink set to Blending Mode Multiply and Opacity 20%. I'm going to move these shapes underneath the teeth, as I don't wish to darken them.



Step 21

Now to begin work on the eyes. I'll be creating these within the "Eyes" layer folder. Again, the eyeballs aren't pure white, so I'm going to use the lightest skin tone for the eyeballs. These shapes will be set to Blending Mode Screen and Opacity 50%.



Step 22

Using the Ellipse Tool (L) to create two even circles for each eye. Then duplicate and resize them slightly. The fill colors will be a dark blue (C=100, M=100, Y=25, K=25) set to Opacity 50%.


Duplicate the largest circles for each eye and use a duplicate of the largest shape for the eyeball, apply Pathfinder > Intersect to create a shape to use for a Clipping Mask for each pupil.




Step 23

Use the Ellipse Tool (L) to create a pupil for each eye with the same dark blue fill. Set this to Blending Mode Multiply, Opacity 50%. Duplicate the circle and resize it slightly smaller. Change the Opacity to 100%.



Step 24

Duplicate the smaller circle for the iris and apply an inverted transparent radial gradient with the dark blue. Set this to Blending Mode Multiply and Opacity 70%.


Now duplicate the circle again and add a transparent radial gradient with an aquamarine shade (C=80, M=10, Y=45, K=0) set to Blending Mode Screen and Opacity 70%.



Step 25

Now to build up the lash lines around the eye. I'm going to use a dark brown shade (C=50, M=70, Y=80, K=70) set to Blending Mode Multiply and Opacity 25%.




Step 26

I'm going to be using one of my Width Profile 1 art brush, which you can create from this tutorial.

Use the darkest skin tone color (C=35, M=80, Y=80, K=50) set to Blending Mode Multiply and Opacity 20%. Use the Paintbrush Tool (B) to draw the eyebrows, set to a Stroke Weight of 0.5pt. Overlapping the strokes will create darker areas and make it look more realistic.



Step 27

Use the same settings apart from the different Opacity of 50%, to draw in the eyelashes.



Step 28

Back into the "Bases" > "Skin" folder, I'm going to use the Width Profile 1 brush further and add some line art to the illustration. This is going to be very subtle, but it will help define areas of the body and face. I'll use the same dark skin tone color used for the eyebrows/eyelashes and set to Blending Mode Multiply, with Opacity 20%.



Step 29

I'm going to begin shading the dress. The process is very similar to the skin shading, just with different colors of course. So first I'm going to duplicate the dress base and then remove the lighter areas from the dress using Pathfinder > Minus Front. I'm going to keep the same gray (C=0, M=0, Y=0, K=20) and set the Blending Mode to Multiply, with Opacity 10%.

Then once done, Group the shapes (Command + G).




Step 30

I want to add a slight iridescent look to the dress, so I'm going to mix different colors into the shading of the dress. First I'm going to add some green tones (C=80, M=10, Y=45, K=0) set to Blending Mode Multiply, Opacity 5%.



Then use these shapes in a Group (Command + G) and create a Clipping Mask (Command + 7).



Step 31

Now I'm going to add darker shapes of purple (C=75, M=100, Y=0, K=0) to the dress set to Blending Mode Color Burn, Opacity 5%. Once done, Group them (Command + G) and add to the Clipping Mask group.



Step 32

Then add further purple shapes to darken the creases and edges of the dress, set to Blending Mode Multiply, with Opacity 15%.



Step 33

Create a yellow transparent radial gradient and use this to add highlighted areas to the dress. I'm going to set these shapes to Blending Mode Screen, Opacity 35%. Then Group them (Command + G) and add them to the Clipping Mask group.




Step 34

I'm going to add a glitter/sequin effect on the dress. The main thing to remember about this type of effect is that the sparkles will be different colors. Sequins are at different angles so they pick of light from different places. There are of course some areas where you can predict where the sequins will pick up light... and shadow!

To create the sequins I'm going to use the Blob Brush Tool (Shift + B). Double-click on the tool in the toolbar to get the options screen. The main thing I want to select is the "Pressure" option, as shown below. This is so you can vary the size of the sequins.


First I'm going to add highlighted sequins. I'm using a dark brown fill color (C=35, M=80, Y=80, K=50) for this. The initial sequins (as shown on the left below) will be spread over the areas of highlight and some into the darker areas. This will be with a Blending Mode of Screen and Opacity 50%. Now to add some much brighter sparkles with Blending Mode Screen and Opacity 100%.


The next sequins will be much darker. These will help bring out the contrast in the sequins. These are focused mainly in the areas where shadow is cast and within areas where there are creases. This will be with a fill color of gray (C=0, M=0, Y=0, K=20) and the first set will be Blending Mode Multiply and Opacity 10%. Then for the darkest sequins they will be set to Blending Mode Multiply and Opacity 80%.



Step 35

To add a further iridescent quality to the dress, I'm going to add some transparent radial gradients to add more subtle color. This can also be used to emphasize the contrast in the shading. I'm going to use duplicated dress base shapes for this.

The first gradients are inverted green gradients (C=80, M=10, Y=45, K=0). The first is set to Blending Mode Hard Light, Opacity 20%. The second is set to Blending Mode Color Burn, Opacity 10%. Keep these two shapes on top of the shading layers, but below the sequins.


I'm going to use the pink transparent radial gradient, which was used for the cheek blush into the dress now; however, these will be just on top of the base of the dress and below all other shading layers. Both shapes are set to Blending Mode Hard Light and Opacity 15%.



Step 36

Create a New Layer above the "Face" layer folder and rename it "Hair". Create a New Layer below the "Base" layer folder and rename that "Hair Back".

Using the reference image as a guide, use the Pen Tool (P) to draw a rough shape to where the boundary of the hair will be on the scalp. This is so you know when you come to draw the hair base in the next step, you know you must cover this area in order for it to be realistically placed. I'm going to give our model a light brown hair color; however, to build on top of it I'm going to use a darker base. This will be C=50, M=70, Y=80, K=70.



Step 37

I'm going to use the Blob Brush Tool (Shift + B) again, this time to draw out the hair base. I find using this tool is organic, which is perfect for flowing hair. I want to exaggerate the movement of the model, so I'm going to have her style sweeping to the side. I'm going to add this to the "Hair Back" layer folder.


Then using the Eraser Tool (Shift + E) to remove the parts I feel don't fit.



Step 38

I'm going to be using one of my Width Profile 4 art brush which you can create from this tutorial for the next step.

As hair isn't "chunky" at the ends, I'm going to add fly away hair strands on top of the "Hair Back" base using the Paintbrush Tool (B). These strands will be set to Stroke Weight 4pt.


Now add strands to the base in the "Hair" layer folder. I've decided I don't like the ear area of the illustration, so hair is a great way to hide these elements!



Step 39

I'm going to start building up the strands of hair. I'll be using my Width Profile 1 art brush for the strands. These are a Stroke Weight of 0.5pt with the same brown used for the bases. They are set to Blending Mode Screen, Opacity 50%. I tend to do the initial strands with the Pen Tool (P) and then further strands are done with the Paintbrush Tool (B).




Step 40

The next strands are with a Stroke Weight of 2pt and the same Blending Mode of Screen, Opacity 50%.



Step 41

These strands help to add shadow into the hair and also bring out the reddish tones of the brown. They have a Stroke Weight of 1pt set to Blending Mode Color Burn and Opacity 30%. Notice in the screenshot how I've focused the "Hair Back" strands mainly towards the top/root of the hair.



Step 42

Now to add further highlights into the hair. This time I'm going to be using a lighter brown (C=25, M=40, Y=65, K=0) set to Blending Mode Screen and Opacity 50%. These strands will have a Stroke Weight of 1pt.



Step 43

I'm going to screenshot the vector I have in Illustrator and then Paste (Command + V) it onto a canvas in Photoshop. Using the Eyedropper Tool (I) I'm going to grab a color, which is on the outside edge of the base that has had strands overlapped onto it. Now I'm going to add this color to my palette in Illustrator and use it to draw strands around the outside of the hair base. This is to show more individual hairs coming away from the base.



Step 44

Using this same color, I'm going to create a transparent radial gradient. Using this with the Ellipse Tool (L), I'm going to use it to create a deeper shadow in the "Hair Back" layer folder. This is to show the shadow cast from the back of the hair and under the arm area. These will be set to Blending Mode Multiply and Opacity 100%.



Step 45

Create a New Layer above the "Base" layer folder and rename it "Shoes". I'm not so keen on the shoes of the reference so I'm going to create my own pumps. I'll use the same gray as the dress and for the heel/platform use a darker gray (C=0, M=0, Y=0, K=40).



Step 46

As I won't be following the reference image, I'm going to need to know where the shadow and highlight areas will be on the shoes. As the light source appears to be coming in from the right, this needs to be reflected in the shoes. The main areas of light will be towards the back of the heel and the front of the foot to the right hand side. There will be shadow towards the middle, or appear to be shadow as this will help emphasize the curve of the foot.



Step 47

The shading of the shoes will be similar to the dress, in that I'm wanting to give an iridescent quality to the shoes. First I'm going to add shapes with the same gray as the base to the shoe, set to Blending Mode Multiply, Opacity 20%.


These will then be Grouped (Command + G) and then create a Clipping Mask (Command + 7).



Step 48

As before, add the green shapes set to Blending Mode Multiply, Opacity 10%:


Then the dark blue set to Blending Mode Color Burn, Opacity 10%:


And the highlights with a transparent yellow radial gradient set to Blending Mode Screen, Opacity 50%.



Step 49

As I feel I've got enough green tones in the shoes, I'm going to add in the pink gradient, set to Blending Mode Hard Light and Opacity 30%.



Step 50

Use the same process and settings from the sequins on the dress to add sparkle to the shoes:




Step 51

Duplicate the bases for the platform and the heel, then apply a black and white linear gradient to it, set to Blending Mode Normal and Opacity 50%.



Step 52

Now that my girl is finished, I want to put her into an article layout. The first thing I want to do is find out the dimensions of the standard magazine... this is about 8.25 inches by 10.5 inches. So go into the Artboard Tool (Shift + O) and type these values in along the top. As you can see when it's based in points, it's a tiny board!


So what you want to do is hold down Alt + Shift and drag out the corners. This is so it maintains the width and height ratio and will keep the format you want.



Step 53

Now that I have my artboard set, I'm going to use the Rectangle Tool (M) to draw one of the columns for where the text will be. Then I'll duplicate it and move it along side it so I now have two columns. The fill color is irrelevant as these are just the boundaries for where the text will be added.



Step 54

With the Pen Tool (P), I'm going to draw in a shape which is parallel to the body of the girl, so the illustration will fit in with the article.


Then use Pathfinder > Unite to add it to the rectangle. I've also shifted the rectangles slightly so they look of similar width.



Step 55

I'm going to the use the famous Latin dummy text "Lorem Ipsum" for the content in this mock article, which you can find by checking out this generator.

In the Text Tool options in the Toolbar, hold click to get the drop down and you should get the Area Type Tool. Click into one of the columns and paste the relevant text within. I'm going to be using the below settings for the type. Gill Sans MT is a default font with Adobe programs so you won't need to purchase it online.




Step 56

I'm now going to add a soft linear gradient in the background, which goes from blue (0% opacity), green (75% opacity), yellow (100% Opacity) to yellow (0% opacity) within a rectangle behind the text.



Step 57

Create a New Layer on top of all the other layers and rename it "Headline". This is where I'm going to put the title of the article, which will be "Healthier & Happier".

I've used the default font of Myraid Pro, then Object > Expanded it. The text on top has the same green used in the dress and shoes and then I've used a yellow shape in the duplicated text behind set to Blending Mode Screen. This is so it's easier to read against the hair.




Step 58

I've decided to add a further headline to the layout using the script font "Baroque Script" with the same green shade. This is then set to Blending Mode Color Burn and Opacity 100%.



Step 59

I've added a dark blue Stroke to the shapes for the green letters. Again this is to help it stand out further.



Step 60

Using the pink transparent radial gradient and with the Ellipse Tool (L), I've added subtle highlights into the gradient. These shapes are set to Blending Mode Screen and Opacity 50%. This is to help break down the gradient.



Step 61

After reviewing the overall layout, I've decided to break up the text more as I feel it's too heavy. So I've altered the Font Size and the Leading as shown below:



Conclusion

If you're creating illustrations to show a client, one of the biggest pieces of advice I've been given is that clients don't know what they want. You need to show them what you can do and how they can use it. So creating a mock magazine illustration and showing a potential client how your work can work for them may help you land that client! This is true with other aspects as well, but that's for another tutorial!


Advertisement