Tutorial Assets
- Vintage Spring Illustrations from The Vintage Remix on Etsy!
- PhotoDune Red flower clovers
- MagicPicker
1. Vintage Style Analysis: What Makes This Style Unique?
Imagine a client approaches you and says, "I'm looking for a vintage illustration for my product."
Next you think, "How do I create a vintage illustration?"
The best thing to do is to gather some reference images of vintage illustrations. If you're fortunate, your client may have sent you some images they like.
So, how do we analyse an image?
First let's take a look at an example of vintage illustration. This example is fairly typical of the look we are trying to create. Let's start with the basics: What does a vintage illustration typically depict?
From this example we have:
- a little girl
- a lamb
- some party decorations
- a simple background pattern
Note it's not always the content that defines the style, but in this case the themes are usually fairly similar:
- young girls and boys
- baby animals, e.g. ducklings, lambs, puppies, kittens
- toys
- flowers
Tones
Next let's look at the overall tone of the piece. In Adobe Photoshop I have brought up the levels on the reference image by pressing Control-L.
Looking at this graph we can see three arrows: black, grey and white. The peaks on the graph show the values, which in this case are mostly grey and whites—mostly mid tones. There are only a few highlights and shadows. This is great information when trying to recreate an authentic look.
To see the tones more accurately, I have desaturated the reference image by pressing Control-Shift-U. The darkest darks are around the pupils, eyelashes, the lamb's hooves and the little girl's hair. This is something to factor into your final image.
Colour
Looking at the colour image again, we can see that the colours are mostly pastels and high-saturation reds/pinks. Notice how blacks are not used as shadows, and in the lamb the shadows are blues and purples.
In the image below I have pixelated the triptych of vintage illustrations to clearly show their palettes, which we can see are all muted. When composing your palette for a vintage illustration, make sure you keep the colours soft.
Medium
The medium used in these seems to be watercolour, gouache and inks—traditional materials. These effects can be replicated digitally and traditionally, or alternatively use a mixture of the two with scanned custom textures.
Form and Scale
If we look at the children's anatomy, we see that they have large heads relative to their bodies. Large eyes are cute, which are emphasised to maximum effect. The heads are set with the features in the lower third of the face.
Relative Sizes
In the children's faces, the width of the eyes matches the width of the mouth, and the noses are small.
Roundness
These illustrations are made so cute by all the round shapes, soft forms and gentle curves. Large eyes and oversized heads are a feature found in the young of all animal species. Note how the features are in the lower third of head, with bow-shaped chins, large lips and rosy cheeks. Essential information to make our illustration cute and youthful!
Other factors that make this style so distinctive are:
Texture and Pattern
Note the worn edges, which add history to the piece. There are only a few patterns in the illustrations, such as dots and stripes. No complicated patterns like paisley.
Composition
Use of space in the composition favours the bottom of the piece, allowing a banner or text at the top.
Line
When line has been used, it is subtle—usually to define hard edges like the face and ear. Over the softest forms it's hardly seen in areas like fur, hair or feathers. This is a consideration for when you're creating your line art and how you will be rendering the piece.
If you're working traditionally, you may wish to keep the line very fine and add line in at the end of the piece with paint or ink. In our case Mary Winkler will be rendering this in Adobe Illustrator, so the lines I will be creating will be showing all the forms so that she can accurately define areas, and then add heavier line as needed.
2. Our Brief
So now that we've looked at how the artwork is made up, we need to look at what we are depicting. Our brief is:
- Hand lettering: SPRING HAS SPRUNG!
- Lamb
- Red Clover
- Girl
- Simple patterned background
So what can we take from our analysis to help us create vintage illustration-style line art? For this stage we can ignore the texture and colours, although if you were completing this illustration yourself this would be useful for future reference.
The line weight may be a consideration if you're going to use this line art as part of the finished image. In this case Mary is going to be rendering this image in Adobe Illustrator, so I can leave those choices to her.
We need to make sure we get the composition right, the soft forms and the proportions of the anatomy. This is what will sell the piece as vintage.
3. Thumbnails
Thumbnailing is a great way of getting ideas out quickly and making sure that the composition is readable. From what we learned from the above piece, we're working on a 2/3 character to 1/3 text and space ratio.
Step 1
I've set up a document with portrait rectangles. You can do this rough in your drawing software of choice or on paper. I draw out the document shapes first so that once I get a flow going I can just jump to the next rectangle and doodle another idea.
Step 2
Here I've roughed out our elements as per our brief. As you can see, they do not have to be accurate at all, but a rough idea of pose and content is a must.
From these I decide my two favourites are 5 and 6. On chatting with Mary, we decide to go with 5 as it's the most adorable!
Step 3
Next we scale the rough to the size of the illustration document by drawing a rectangular marquee around the selection, cutting the thumbnail out, pasting it on a New Layer and transforming it by pressing Control-T. Delete or hide the other thumbnails as desired.
Step 4
Here I've quickly placed in our text for the illustration "Spring has sprung!" in a standard font: Times. I've done this just to get an idea of where the writing will be—this is not an indicator of style for the final text.
Step 5
I've created a grey rectangle to make sure I don't go too close to the edge of the document. Also if you refer to the original vintage illustrations, they have a white border where some wear and texture can be shown, so it's good to keep that space free of details.
4. Drawing the Base Forms
Step 1
Reduce the opacity of the thumbnail illustration and break the face into thirds. Rough in the mouth in the bottom third, eyes in the middle, and eyebrows above that.
Step 2
Remembering our round forms from our illustration analysis, create two large ovals in the bottom third for cheeks and a small chin. At the top of the bottom third, add a button nose.
What makes these vintage children cute is the juxtaposition of the large and small. Small noses, big cheeks; big eyes, small ears. For the head, make it large in comparison to the rest of the features—there's that juxtaposition again! Think about babies: how big their eyes are and how big their heads are. As humans grow, our eyes don't change size, but the rest of our features fill out and there's less of a contrast in scale.
Step 3: The Body
To get the shape of the torso I have used an almost curved triangle shape. This also helps to plan out the body proportions for the child, as I want 1/3 to be upper body with 2/3 as the lower.
Step 4: Roughing in the Anatomy
I've roughed in the anatomy using squashed circles for body parts. I try to keep them to the 2:1 ratio, and so far she's starting to look like a chubby tot. Using circles to define form is an old technique, and if you'd like to know more on the subject I recommend looking at the books of Glenn Vilppu.
For the torso, draw a circle for the top 1/3 and a larger one for the bottom 2/3, and connect the two to create a bean shape.
Step 5: Roughing in the Lamb
Create the lamb with circles as before, using lines to simplify the legs and to make sure you have the pose right. Try to keep the lines loose and dynamic.
Step 6: Roughing in the Lamb's Legs
Draw ovals for the leg sections and hooves. Remember we don't want any hard edges, even in areas that seem fairly straight like the legs.
Step 7
Add a bow to the lamb, because lambs love bows. I've noticed that her hand position was a little strange, so I changed the finger placement. This is the time to make any amendments to the pose, as you won't lose much work. It's also a good time to experiment!
Step 8: Hair
Rough in the girl's hair—I've decided to go for high pigtails for added cuteness! Note how the pigtails are not tight against the head. Having them loose carries on the softness and flow of the line. Hopefully now our pic is looking warm and fuzzy, with a hint of nostalgia!
5. Rough Art: Girl
Step 1
Lower the opacity of the base shapes quickly by creating a New Layer (Control-Shift-N) which you fill with white, and then reducing the opacity. Think of it like tracing paper. We need more information for creating a clean line, so on a New Layer we rough in our anatomy and clothing.
Step 2
Quickly rough out the areas we want to have more detail in, including folds in the fabric, hair line, eyes, face, and hands. This should give us enough information to begin working on our clean line art.
6. Clean Line Art: Girl
Step 1
Group all your existing roughs by creating a Group by pressing the icon at the bottom of the Layers panel that looks like a folder. Create a New Layer (Control-Shift-N) over your base shapes and fill it with a blue. Next, right click on that layer and select Create Clipping Mask. This should turn everything in that folder blue. Change the Group opacity at the top of the Layers panel. This can make it easier to clean up with line art.
Then create a New Layer and start drawing in the line art. Start wherever you feel comfortable. I like starting with the eyes.
Step 2
Drawing curves smoothly can be tricky. If I were working traditionally I would be able to turn the sheet of paper so that my arm did the work in creating a curve. Thankfully rather than move our graphics tablet all over our desk or lap, we can turn the canvas! You can do this while holding R on your keyboard and turn the canvas by moving your mouse or stylus.
If you have a graphics tablet you can also set up a keyboard shortcut as a hotkey. I constantly rotate my canvas, which can help prevent any strains.
Step 3
Working round the form, draw in any areas where we need information refined. If you don't feel comfortable creating long lines exactly where you want them (I don't!), use short lines and gradually build it up; I've done this along the jaw line. Keep rotating your canvas to let your natural elbow compass motion do the work for you.
Step 4
Focusing on the face, I draw in the mouth and nose. Keep it round, keep it cute! No hard lines!
Step 5
Next we need to make her eyes supersweet like our girl with the lamb in the reference image. Give her big, fluttery eyelashes! Flip the document to make it easier to draw in the curves of the eyelashes. You can do this by going to Image > Image Rotation > Flip Canvas Horizontal
Step 6
Flipping the canvas back again, I draw in some eyebrows. However, I feel she looks too surprised, so using the Lasso Tool (L) I select them individually and move them down her face.
Step 7
I use Transform (T) to change the rotation. I do this for both eyebrows.
Step 8: Detailing
Keeping with the cutesy theme, I give her some adorable socks!
... and a bum flap for her romper suit.
Step 9
We're almost there with her line art. I add in details with little curls in her pigtails and some directional strands of hair. I'm loving how she's looking!
Step 10
We just have her hands to finish off. I like to think of fingers as if they're one thing and not made of joints, and then add joints in when I get the shape right. Hands are tricky so it's definitely a good thing to practice. Using the ovals method does make it a lot easier.
Next we move on to her cute friend!
7. Rough Detailing: Lamb
Step 1
Carry on the roundness by making the lamb's fleece up of a variety of circles and ovals. Create the ears by drawing a large oval with a small oval at the end, and then join them up in a bean shape.
Step 2
Carry on creating the fleece in this way, varying the sizes of the circles. Give the lamb big, gorgeous eyes and contrast this with a tiny nose.
Step 3
Here we have our roughed-out lamb ready to clean up. For added cuteness, complete the look with an oversized bow!
8. Clean Line Art: Lamb
Step 1
First I create a New Layer (Control-Shift-N) and draw in the bow line art. I do this on a separate layer, as I may want to tweak its position later.
Step 2
Next I Rotate the canvas by pressing and holding R, and I detail the fleece using as little line art as possible—periphery and some of the inner curls. Add some weight to the eyelashes of the lamb to draw the viewer's eye to the lamb's eye.
Step 3
Continue all over the lamb keeping the brush size consistent. As the line art for the lamb's leg overlaps the girl's sock, select the girl's line art and erase any overlap.
Step 4
Turn off the rough lamb layer to check everything is nice and clean.
Here's our girl and lamb line art completed! Next we move on to embellishing the illustrations with some springtime clover.
9. The Clover
Here we have an example of some red clover. I have chosen this for the piece as it's a glorious colour—perfect for the pastel hues we discussed earlier. It's also lamb-friendly! Without further ado, let's add some into our piece.
Step 1
Rough in flowers in the hand, and add flowers to the edge to frame the piece.
Step 2
On a New Layer, begin by drawing in the clover flowers. I have achieved this look by drawing small, narrow ovals around the form. Make sure they overlap.
Step 3
Add some stems through the girl's hand.
Step 4
Carry on drawing in the petals. This is a repetitive job, but it will pay off! Draw in some leaves, and if you're getting a little cross-eyed it can help to change the colour you're drawing in.
Step 5
Because this is a repetitive job, we can Copy (Control-C) and Paste (Control-V) the heads onto the other clumps of clover. Use Transform (Control-T) to rotate and scale the head.
Step 6
To prevent the flowers looking too similar, redraw the leaves.
Step 7
Continue to Copy, Paste and Transform the heads.
Step 8
Here I have changed one of the clover heads to blue to see what I am doing. I did this by selecting that head and pressing Control-U to bring up the Hue & Saturation dialogue, and then changing the slider to blue.
I drew in extra leaves, stems and base leaves. On the girl's line art I erased the areas that went behind the leaves.
Step 9
Repeat the process over by the lamb.
A composition tip is to point elements in the illustration to where you would like the attention to be, which is what I have done with the clover.
Step 10
Erase parts of the lamb's line art that go behind the flowers.
Step 11
Desaturate all the line art by pressing Control-Shift-U on all the line art layers.
10. Rough Text
Step 1
Using a basic font, Times, as a base, I begin sketching out the text. I want something to contrast with the roundness of our illustration, so I make sharp edges and points at the corners.
Step 2
Copy the first word, as it's fairly similar to "Sprung", by dragging the rough "Spring" design onto the New Layer icon at the bottom of the Layers panel. Next, using the Move Tool (V), drag the copy over the "Sprung" placeholder.
Step 3
Scale the second "Spring" by pressing Control-T to Transform. Next, using the Lasso Tool (L), select the "i" in the copied "Spring" and press Delete.
Step 4
Select the "n" using the LassoTool (L), and then Copy (Control-C) and Paste (Control-V). Next press Control-T to Transform and rotate the "n" 180° to make a "u".
Step 5
For that vintage feel, sketch in some asterisks. Next we need to clean up the line art for the text!
11. Clean Text
Step 1
Begin by reducing the opacity of the rough text. On a New Layer (Control-Shift-N) begin cleaning up the line art as we did with the illustration.
Step 2
For tricky curves such as with the "h" it can be helpful to Rotate the canvas. You can do this by pressing R on the keyboard and moving the canvas with your mouse or stylus.
Step 3
Carry on all over the letters and asterisks. Now that the line art is clean, we need to tidy up the spacing between the letters.
Step 4
Here I've selected the "i" with the Lasso Tool (L) and I have moved it across a little.
Step 5
Select the "n" and the "g" with the Lasso Tool (L) and press Control-T to Transform. Nudge the letters across by using the horizontal arrow keys on your keyboard.
Step 6
Now that everything is looking sweet, we need to check that the whole text is centred in the document. Create a New Guide in the centre of the document by going to View > New Guide. If you know the pixel width (2480px) of the document, then type in what half of that is (1240px). You can also just type in 50% and the guide will appear at the centre point.
Step 7
To make sure everything is sitting evenly, we need to centre the text. We can do this by selecting all the text layers by holding Shift while clicking on them, and then pressing Control-T to Transform.
There will be a crosshair in the middle of the Transform box. Align this with the vertical guide. This can be made easier by ensuring View > Snap to > Guides is selected. Press Enter to complete the move. Finally remove the guide by going to View > Clear Guides.
Awesome Work, You're Now Done!
Here we have our completed line art!
That's our vintage line art complete! You have learned how to analyse an artwork style and recreate it with your own twist, plus how to quickly create some flower line art.
Now that the line art is complete, I send it to Mary Winkler, who will show you how to create the final illustration in Adobe Illustrator using a limited pastel colour scheme with some distressed effects.
