Duplicate a vintage drawing style to create a spring illustration in adobe photoshop

GFX9.COM share Duplicate a vintage drawing style to create a spring illustration in adobe photoshop, you can download now.



Final product image
What You'll Be Creating

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? 

Illustration Reference - The Vintage Remix

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

Illustration Reference - The Vintage Remix - Set

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.

Levels

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.

Greyscale Vintage Reference 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. 

Illustration Reference - The Vintage Remix 2

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.

Palette demonstration - Pixelated

Palette Demonstration

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. 

Eye Placement

Relative Sizes

In the children's faces, the width of the eyes matches the width of the mouth, and the noses are small.

Relative Sizes - Facial Features

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!

Round Shapes

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. 

Blank Thumbnails

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.

Illustration Thumbnails

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.

Selected and Enlarged Thumbnail

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.

Enlarged Thumbnail with Placeholder 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.

Artwork Boundary

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.

Face Layout with Thirds Knowledge

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. 

Round Face Shapes

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.

Body Thirds

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.

Anatomy Roughed with Circles

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.

Lamb Pose Rough

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.

Rough Leg Anatomy

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!

Lambs Bow and Hand Edit

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!

Hair - Pigtails

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. 

Add White Layer Over All Rough Layers

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.

Rough in Girls Hands

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.

Clean Line Art - Start

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.

Line art - Cheeks

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.

Line art - Hair

Step 4

Focusing on the face, I draw in the mouth and nose. Keep it round, keep it cute! No hard lines!

Face Details

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

Lips and Eyes Line Art

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.

Eyebrows

Step 7 

I use Transform (T) to change the rotation. I do this for both eyebrows.

Eyebrows - Edit

Step 8: Detailing

Keeping with the cutesy theme, I give her some adorable socks!

Sock Detailing

... and a bum flap for her romper suit.

Bum Flap Detailing

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!

Hair detailing - Pigtails

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.

Rough in Lambs Fleece - Face

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.

Rough in Lambs Fleece - Body plus Features

Step 3

Here we have our roughed-out lamb ready to clean up. For added cuteness, complete the look with an oversized bow!

Lamb Rough Shapes

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. 

Bow - Clean Line Art

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.

Inking the Lamb - Rotating Canvas

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.

Clean Lamb Line Art

Here's our girl and lamb line art completed! Next we move on to embellishing the illustrations with some springtime clover.

Girl and Lamb Clean Line Art

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.

Photodune - Red Flower Clovers

Step 1

Rough in flowers in the hand, and add flowers to the edge to frame the piece.

Rough Clovers

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.

Clover Line - Begin

Step 3

Add some stems through the girl's hand.

Clover Stems

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.

Clover Heads

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.

Transform Copied Clover Head

Step 6

To prevent the flowers looking too similar, redraw the leaves.

Clover New Leaves

Step 7

Continue to Copy, Paste and Transform the heads. 

Copy Paste Clover 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.

Clover - Little Girl Side - Complete

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. 

Clover Clean Art - Lamb

Step 10

Erase parts of the lamb's line art that go behind the flowers.

Clover Clean Art - Lamb - Masked Hooves

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.

Spring Rough Design

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.

Spring Text Copy

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.

Delete Letter I

Step 4

Select the "n" using the Lasso Tool (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".

Make the U

Step 5 

For that vintage feel, sketch in some asterisks. Next we need to clean up the line art for the text!

Rough Text Design

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.

Asterisk

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. 

Rotate Canvas to Aid Line Drawing

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.

Clean Line Art

Step 4

Here I've selected the "i" with the Lasso Tool (L) and I have moved it across a little.

Spring - i

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.

Spring Arrange N and G

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. 

New Guide Dialogue

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.

Centre Hand Drawn Text

Awesome Work, You're Now Done!

Here we have our completed line art!

Completed Clean 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.





Similar content