SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Design Your Own Valentine’s Day Heraldry Illustration

February 14, 2010 by Matt Ward 9 Comments

Happy Valentine’s Day! In celebration of the day of love (even corporate, over-sentimentalized love) here is an Adobe Illustrator tutorial in which we are going to look at how you can create your own Valentine’s Day heraldry Illustration.

Of course, if you’re not interested in the whole Valentine’s Day thing, that’s okay too. The techniques we are going to be learning here don’t necessarily have to be applied to just a mushy, sentimental illustration. You could easily take pretty much everything that I am going to outline below and use it create your own heraldry illustration with a completely different theme (Saint Patrick’s Day is coming up too!).

I should probably also note that this particular tutorial does require a certain degree of competence with pencil and paper, since several of our elements will start with some basic hand drawing. Now, let’s get started!

Step 1

Before undertaking any kind of illustration, it’s always a good idea to get out the old sketch book and pencil and just start drawing. This can really help to formulate your ideas, and inspire your imagination. In this instance, I already had a pretty clear idea of what I wanted to do, so my sketch was really, really basic with virtually no detail (you can also see a bit of my eventual wing drawing showing through on the scan; also, I apologize for the mis-spelling of “happy”).

original sketch

This drawing basically just outlines the general composition that I am looking to achieve for this illustration. I can promise you that the final image is actually going to look quite different than this (just skip to the bottom of the article for proof)! Still, it provides me with a basic reference and helps get what’s in my head out on paper. I also made a list of the five basic elements that will compose this illustration, these being a prominent heart, a star-burst to go behind the heart, a pair of heraldic unicorns, some wings and a banner for some text (though we won’t actually put any text in).

If you’re coming at an illustration project with a completely blank slate though, this sketching step can be even more critical. This is where you can really just let your imagination run wild, and experiment with all sort of different concepts and ideas. You might also want to consult some heraldry resources, just to get some inspiration.

Step 2

Now it’s time to open up Illustrator. Let’s start by creating a new document, with dimensions of 800 x 800 pixels. Also, since we already know the various elements that we will be working with for this project, let’s go ahead and set the document up with several layers to accomodate for the various elements. Create the layers in the following order: Banner, Unicorns, Heart, Wings, Star-Burst and Background. This will allow us to turn certain elements on and off as we need (or don’t need) them. Your layers palette should now look something like this:

screenshot

Step 3

Now, let’s create a simple background for our illustration. Select the Background layer and the Rectangle Tool. Draw a box to the exact dimensions of the artboard and fill it with a grey, radial gradient, like so:

screenshot

Now, hide the Background layer for the moment. We will be turning it on and off throughout this tutorial, so it’s important to get it done now.

Step 4

Let’s start by creating our heart. Often, heraldic illustrations contain some form of shield, usually with a pattern or design on it. For our purposes, we will use a bright pink heart as our “shield”. Creating a heart in Illustrator is a really simple process when using the Pen Tool. So, select the Heart layer from the layers palette and choose the Pen Tool from the toolbox. Now, draw a hear- like arc similar to this:

screenshot

If you start from the top and draw downwards, hold the Alt key and single click bottom-most anchor to transform it into a corner. Then, still using the Pen Tool, draw a line staight up to the first point to complete the shape.

screenshot

Now we have a nice half-heart. Increase the size of it a bit and select the Smooth Tool, which you can use to fix up the curve of the heart. I adjusted mine to look like this.

screenshot

At this point, I usually take the two right-most anchors and make sure that they have the exact same X coordinate. This will help to create a nice, straight vertical line, which will be important for what we’re going to do next. Duplicate the half heart, then reflect it vertically. Adjust the positioning of this reflected element that it completes the heart shape, like so:

screenshot

Select both of the halves, then open the Pathfinder palette and choose the Combine option to fuse the two halves into one. We now have one complete heart!

screenshot

Step 5

With our completed heart shape now in place, it’s time to make it look a bit more interesting. Let’s start by turning the background back on an selecting a nice pink gradient for our heart. Have the gradient move from a darker rose colour at the bottom left of the heart to a brighter fuchsia towards the top right.

screenshot

Duplicate the heart and set the fill colour of this new shape to a much lighter colour of pink.

screenshot

Next, use the Elipse tool to create a circle. Set the fill to a radial black and white, with the white in the middle. Position the circle over the top righthand portion of the heart, like so:

screenshot

Select both the circle and the lighter pink heart. Open the Transparency palette, click the drop down menu and select the Make Opacity Mask option. This will turn our lighter pink heart into a soft lighting effect.

screenshot

Finally, we want to add just a little bit more depth to the heart. With the our lighing effect still selected, choose Effect » Stylize » Inner Glow from the menu. Set the blending mode to multiply and select a dark, dark pink colour. Leave the opacity at 75%, increase the Blur to 26px and make sure that Edge is selected.

screenshot

Step 6

In this step we are going to add a simple metalic looking border around the heart, to help it look a bit more like an actual shield. First, duplicate the original heart shape, remove the fill and move it to the front of all the other elements on the Heart layer. Next, set the stroke colour to a medium grey and the stroke width to 3. Also, change the stroke alignment to the inside of the shape.

screenshot

You will find that the stroke kind of cuts off at the inner point of the “bump” of the heart. To fix this, we are simply going to expand the stroke by selecting it and choosing Object » Expand Apperance from the menu. This will change the stroke into an actual filled object. Then, just zoom in to the flat part of the “stroke” and use the Pencil and Smooth tools to transform it into a point that matches the shape of the heart itself. We will now refer to this as the inner stroke.

Now, duplicate the original heart again, and set this duplicate behind the original in the Layers palette. Set the stroke colour to a lighter grey, the stroke weight to 20px and the stroke alignment to outside.

screenshot

Now we have the oppsite problem that we had with the inner stroke, with the bottom point of the heart. Let’s fix it again. Expand the appearance, but this time just use the direct selection tools to drag the anchors into a basic point position. If necessary, you can also use the Smooth tool to soften the edges a bit.

screenshot

This will be called our outer stroke. We’re almost done here. Now, select the outer stroke and fill it with a gradient of various greys.Then, select the inner stroke and apply the exact same gradient as you did to the outer stroke, except this time you will need to set the angle to 180°, essentially flipping the gradient. The two gradients will contrast nicely against each other, creating a nice bevelled effect.

screenshot

You will probably want to play with the settings of the gradients in order to get the shading to properly reflect the curves of the heart itself. You may also want to add a few more lighting effects to really help bring out the look of the “metal” border.

Step 7

Now that are finished with the heart, we are going to create our star-burst element, so go ahead and hide the heart layer and reveal the Star-burst layer. This is actually a really easy effect to achieve, and basically just involves a bit of simple math.

First, select the star tool and click anywhere on the artboard, this will bring up a dialogue box. Set Radius 1 to 300 and Radius 2 to 10. Set the number of Points to 8. Press OK to create the star and set the fill colour to white. Select it and use the alignment tools to center the star (vertically and horizontally) on the artboard.

screenshot

Now, repeat this process again, adjusting Radius 1 down to 250. Once you’ve centered the star, rotate it by 22.5° to create something like this:

screenshot

Repeat the process a third time, adjusting Radius 1 down to 200 and the number of points up to 16. Center the resulting star again and rotate it by 11.25°.

screenshot

With all three star elements selected, either group them all together or click the combine button in the Pathfinder palette (it’s really up to you). Now, reveal the heart layer again. I found that the star burst was a little small compared to the heart, so I increased the size by about 115%, and brought it a little bit north of center, so that more of the star-burst showed above the heart itself.

screenshot

Step 8

The next thing that we are going to tackle in our illustration is the two unicorns rearing (in classical heraldic fashion) on either side of the heart. Really, we only need one unicorn, we which we can just replicate. It’s now time to turn back to our pencil and sketchbook. I’m not all that great at whipping up animal anatomy from scratch, so I used a couple of images of horses in heraldry as reference for my hand drawing.

screenshot

Both of these images came from www.fleurdelis.com. I used some concepts from both of them and fused them together with my own ideas to create this basic sketch.

screenshot

You’ll have to forgive the quality here. When I draw I do tend to really smudge the graphite with my hand, and the fact that I did this all with a cheap mechanical pencil only made it worse. Fortunately it’s no big deal, since we will be vectorizing this one for use in our illustration. Let’s start by scanning in the unicorn and opening it up in Illustrator.

Next, use the pen tool to trace the outlines of the unicorn. I would suggest setting the stroke colour to white, so that it will contrast well against the scanned image. Once you’ve completed the full outline, you can then just flip the fill and outline colours to make the entire unicorn white.

screenshot

There are a couple of cut out areas in the original drawing, such as the eye and a simplified strand in the tail. To get these, hide the vector unicorn that we just created and trace these additional parts on their own. Fill them with white and the unicorn with black, to create the proper contrast. Now select the simplified strand and the unicorn body and press the Minus Front button in the Pathfinder palette. This cut the shape right out of the unicorn itself. Repeat the exact same process with the eye.

screenshot

Step 9

Now that we have our unicorn, turn all of the layers back on. Resize the unicorn a bit and position it to the right of our heart.

screenshot

Next, change the fill colour to a medium grey-to-white gradient. The grey I chose was about 65% black. Then, set the stroke colour to a medium grey, with a thickness of just 1px. We’re also going to apply just the faintest of drop shadows here for a bit of extra depth. With the unicorn select, choose Effect » Stylize » Drop Shadow from the menu. Set the opacity down to 40%, the X Offset to -4, the Y Offset to 4 and the blur to 8.

screenshot

This will give a really nice, faint drop shadow like this:

screenshot

Now, duplicate the unicorn and reflect it vertically. Holding the Shift key, move the unicorn to the left of the heart, lining it up the same approximate position as it’s counterpart. I used the part of the mane that is just touching the edge of the heart as a reference.

screenshot

Step 10

If you look at the concept sketch that I did for this illustration, you will see that the original idea for the wings was to have them stretch out in the classic “spread eagle” like formation. When searching for some inspiration for the actual design of the wings, however, I came across this image of an angelic statue over at stock.xchng:

screenshot

I was really inspired by the shape of the wings in this one, which are significantly different from the shape that I had originally envisioned. As a result, when I went back to the sketchbook again, the wing that I actually designed ended up having a vastly different shape than my original concept sketch.

screenshot

Regardless, the next step is to place the scanned pencil drawing into the Wings layer. In keeping with the feel of the heart, starbust and unicorns so far, we are going to concentrate more on the shapes in the wing rather than on the line work (even though I really like the line work too). To start, just trace the shape of the bottom most feather and apply a basic pink gradient to it, along with a medium pink stroke.

screenshot

Slowly, start to build the wing by overlapping the feathers in a manner that mimics the implied depth of the drawing. Here we have the wing about half finished.

screenshot

After completing all of the shapes, here is the final wing.

screenshot

Notice that we are using the darker part of the gradient to create the illusion of shadow, which helps give the various feathers a nice degree of depth and keeps the shapes separate. To achieve this effect, you will probably need to go in and manually adjust the gradient angle on each feather.
Once we are completely finished, group all the feathers together and reveal the other elements. Because we have been working on the Wings layer it will automatically fall behind the heart and our unicorns, which is exactly what we want. Now, simply move, resize and rotate the wing so that it ends up being positioned like this:

screenshot

Then, of course, the next step is to duplicate the wing group, reflect it vertically and position it on the right side of the illustration, in perfect symmetry.

screenshot

Step 11

The last element that we need to create is the banner. We can do this easily enough with the Pen Tool. Start selecting the Banner layer in the Layers palette and drawing the main shape of the banner. Don’t worry about being perfectly symmetrical right now.

screenshot

As you can see, my banner is certainly not symmetrical at all. Fortunately, we can deal with this easily enough. Use the Rectangle tool and draw a square over the right portion of the banner shape.

screenshot

Select both the banner and the rectangle and press the Minus Front button in the pathfinder palette, effectively cutting away everything that was beneath the rectangle!

screenshot

Next, repeat the same process that we used when creating the original heart. Duplicate the half-banner, reflect it horizontally, and line it up with the other half. Select both halves and press the Combine button in the pathfinder palette.

screenshot

Now, there is a slight indent in the middle of the resulting banner. To get rid of this, select the Delete Anchor Point tool (located beneath the Pen tool) and simply delete the middle anchor. This will cause the “bump” to dissapear, leaving a nice smooth curve. Next, fill the banner with a balanced blue gradient. Make it lightest in the middle, and then darker at the sides, to help simulate a shading effect.

screenshot

Notice that the gradient is more severe as we get closer to the edge. This helps to create a more authentic curve effect for the banner.

With this front part of the banner finished, go ahead and draw in the shapes for the rest of the banner. You can be as simple or as complex as you want here. I chose to go with a relatively simple design, with just two quick folds on each side.

screenshot

Again, I used the same colour of gradient to create the necessary shading, just adjusting the gradient angle as required to get the proper effect.

screenshot

Finally, replicate these parts on the other side of the banner to complete the design of this element!

Conclusion

The last thing that we want to do, of course, is turn all of the other elements back on! When we do, we should get a finished illustration that looks like this:

screenshot

And that’s it! You could probably go in and tweek a few things here or there, such as adding a few more lighting effects. You could also add some text onto the banner or some other design element floating over the heart (crowns are a popular choice in heraldry). Still, this will form the basis of a pretty cool Valentine’s Day heraldry design!

Get the AI File

Well I hope you enjoyed this tutorial. As always, the original source file is also available for download. You can also consider this as a freebie too! Download it to either function as a companion document to this tutorial, or as an element to use in your designs!

Either way, please enjoy responsibly.

Download the ZIP file here (16.6MB) (downloaded [download#10#hits] times already!)

Filed Under: Illustrator, Tutorial

Comments

  1. Xydexx says

    February 14, 2010 at 1:11 pm

    Wow, very nice work! I’m only a beginner at Adobe Illustrator, but I’m trying to learn more. I’ll have to try some of these tips and see what I can come up with. Thanks so much for the tutorial!

    Also, yay for unicorns! -:)

  2. Richie says

    February 14, 2010 at 1:12 pm

    Excellent. There are so many things to learn here. The result looks dashing. Good Work, Matt

  3. bono calacal says

    February 16, 2010 at 7:51 am

    Very very cool. I like it! Thanks for sharing!

  4. Benjamin Rama says

    February 19, 2010 at 9:52 am

    nicely done Matt , I got here from your site which is excellent too , ill keep an eye out for your new stuff .

  5. adri_rory says

    February 23, 2010 at 7:12 am

    Really nice Matt !

  6. Gotem says

    June 29, 2010 at 3:32 am

    Its nice clear and simply. Thank you for sharing it.
    Gotem.cz

  7. Anonymous says

    January 20, 2011 at 7:20 am

    I chose to go with a relatively simple construction, with only two folds quickly on each side.

  8. söve says

    April 13, 2011 at 7:36 am

    very very cool.Thank u for posting.

  9. Srdjan says

    May 4, 2011 at 10:10 am

    I’m very pleased that I can introduce and share, on my opinion, very useful authentic “Realistic Pencil Portraits mastery”home video course,how to in shortest possible time, strictly described, step by step, gain unique knowledge about realistic pencil portrait drawing, on the other hand how to become real drawing master.realistic pencil drawing tips & lessons

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022