Create a Flat Vector Illustration of Your Pets in Illustrator

Spread the love

Flat style designs continue to reign the creative world; this universal style dominates every aspect of design, from icons to character designs. This popular style also remains a trusty go-to when illustrating cats and dogs. The unique stylizations combined with simplistic yet exaggerated details give these animals a cutesy and cartoonish appearance that’s sure to bring a smile to your face.

Create a Flat Vector Illustration of Your Pets in Illustrator — Fun Vector Illustration

Read on to learn how to transform your furry friend into a whimsical vector illustration in just three simple steps.


Step 1: Start With an Existing Photo

Drawing your pet is difficult without a source image to work with. Find an image that features your pet face on, rather than at an odd angle, to help guide your design process. Take note of discernible features, facial shapes, eye colors, and fur markings to make your pet illustration unique.

You can either use the image as a guide to help you draw your pet representationally, or in my case, use it as a foundation for drawing a more toned-down version of the image. Your pet illustration doesn’t need to be absolutely perfect or picturesque; give it some character and own up to your style.

Create a Flat Vector Illustration of Your Pets in Illustrator — Start with a Photo

Now that you’ve found the ideal image, open up Adobe Illustrator and place the image onto your artboard with Shift + Command + P. Head over to the Layers panel and double-click “Layer 1,” then name the layer “Background” or “Image.” Click on the image layer and head over to the Transparency panel. Drop the Opacity to around 30% to let your image subtly show through. Lowering the opacity levels helps you to discern your image layer from your vector shapes.

Activate the lock icon next to the eye-shaped icon to lock the image layer; this prevents you from accidentally moving the background layer around when drawing out vector shapes.


Step 2: Build Out Shapes

Let’s get started on building out the features of your pet. Each feature will be created using Illustrator’s mighty Shapes and Pen tools. As you build out each shape, remember to create a new layer within the Layers menu; you can do this by clicking the folded square icon or by selecting the hamburger dropdown and choosing New Layer. Keeping each portion of your illustration separate helps you to keep your design organized and allows you to toggle the visibility of each layer with the eye icon.

Head and Ears

Start off by creating a shape for your pet’s head. The tool you use depends on your pet’s overall shape. Use the Rectangle Tool (M) for pets with more angular head shapes, or use the Ellipse Tool (L) if your pet has a more rounded head. Activate the tool, then click and drag across your image.

Create a Flat Vector Illustration of Your Pets in Illustrator

To manipulate the corners of your shape, activate the Direct Selection Tool (A) and click on a single anchor point. Move the point by toggling your arrow keys or by dragging with your cursor. To quickly round out those anchor points, individually select each point, then click and drag inwards when the circle icon is visible.

Now, let’s move onto the ears. With the Pen Tool (P) activated, draw out a triangle shape to mimic the ears. Introduce a curve to the triangle with the Anchor Point Tool (Shift + C). Hover over a straight line path and click and drag to adjust the bezier curves. You can also select an individual anchor point and toggle the bezier curve by holding down the Option key and pulling the bezier arms.

Create a Flat Vector Illustration of Your Pets in Illustrator — Build Your Shapes

Manipulate the corners with the Direct Selection Tool (A), then round them out if needed. To duplicate the ear shape to the other side of the head, hold down the Option key, drag across, and reflect with Object > Transform > Reflect. Click Vertical within the popup menu, then hit OK to return to the artboard. Manipulate the corners with the Direct Selection Tool (A), then round them out if needed.

If your pet has pointed ears that stand upright, like in a cat, utilize the Offset Path option (Object > Path > Offset Path) and set the Offset to a negative value in order to create the inner portions of the ear.

Eyes, Nose, and Mouth

Create a new layer once again, then begin drawing the eyes with the Ellipse Tool (L). To constrain proportions and keep the circle perfectly round, hold down the Shift key and drag across. Draw out a smaller circle to represent the eye’s reflection, then nudge it to fit against the eye circle. Select both circles with the Selection Tool (V) and duplicate with the Option key.

To be sure the eyes are placed in the center of your pet’s head, group both sets of eyes with Command + G, then utilize the Align features and align to the center of the artboard.

Create a Flat Vector Illustration of Your Pets in Illustrator — Use Align Feature

Once again, add another layer to contain both the nose and mouth shapes. Select the Ellipse Tool (L) and draw out two oval shapes in the center of the head. Overlap the two oval shapes to create the nose outline, then utilize the Unite shape mode in the Pathfinder menu. This handy command combines two or more separate shapes to form a more complex outline.

Create a Flat Vector Illustration of Your Pets in Illustrator — Unite Shape Mode

Beneath the nose shape, draw out a single curve to represent the mouth. Duplicate the curve by holding down the Option key and reflect the line path vertically. You can finish the mouth shape here or add some more features, such as a tongue or small teeth.


Step 3: Draw Out Fur Accents and Details

Now that you’ve got the foundation of your furry friend down, it’s time to start bringing in some color. Bring your background layer back up to full opacity in the Transparency panel, then place the illustration and the image side by side. Next click on a vector shape and sample the corresponding hue from your image with the Eyedropper Tool (I).

You can also have fun with your colors and experiment with a quirky color palette, such as any from these 101 free color combinations. Once sampled, the shape will revert to a fill instead of an outline. Rinse and repeat for the rest of the shapes; don’t worry about the fur markings quite yet.

Create a Flat Vector Illustration of Your Pets in Illustrator — Draw Accents and Details

To incorporate those unique markings on your pet, duplicate the head and ear shapes with the Option key and place the copied shapes directly on top of the original shapes. With the Eyedropper Tool (I), source a color (or colors) from the image. For the dog below, I chose to sample a medium orange hue from the lighter parts of its fur.

To create those unique markings, I prefer to utilize the Eraser Tool (Shift + E). Instead of tirelessly creating more shapes from scratch, you can simply erase away the portions that don’t make up those patches and patterns of fur. Select the shape you’d like to erase from, then activate the Eraser Tool and use the cursor to remove portions of the vector.

Adjust the size of the eraser tool as needed by toggling the [ and ] keys. With the Direct Selection Tool (A), click on the remaining shape you’d like to get rid of and then hit the Delete key. This eraser tool technique is much quicker than maneuvering bezier curves to create those patches of color; it also ensures that the colored portions correctly match up with the pet illustration, without leaving those unsightly gaps between layers.

Create a Flat Vector Illustration of Your Pets in Illustrator — Direct Selection Tool

Ta-da! You’ve just created your own vector version of your favorite furry friend. Try experimenting with different approaches to illustrating your pet to fine-tune your illustration style.

9 Comments on “Create a Flat Vector Illustration of Your Pets in Illustrator”

  1. Today, while I was at work, my cousin stole my iphone and tested to see if it can survive a 25 foot drop, just so she can be a youtube sensation. My iPad is now broken and she has 83 views. I know this is totally off topic but I had to share it with someone!

  2. keep up the fantastic work, I read few posts on this site and I think that your site is rattling interesting and has lots of fantastic information.

  3. You’ve made some decent points there. I checked on the net for more info about the issue and found most individuals will go along with your views on this web site.

  4. Good answers in return of this difficulty with real arguments and explaining everything about that.

  5. Hi, I do believe this is an excellent web site.
    I stumbledupon it 😉 I am going to come back once again since I saved as a favorite it.
    Money and freedom is the best way to change, may you be rich and continue to help other people.

  6. Greetings! Very useful advice in this particular post!
    It is the little changes which will make the most significant changes. Thanks a lot for sharing!

  7. We absolutely love your blog and find most of your post’s to be precisely what I’m looking for. Does one offer guest writers to write content available for you?
    I wouldn’t mind producing a post or elaborating on a lot of the subjects you write regarding here.
    Again, awesome site!

  8. This is my first time pay a quick visit at here and i am in fact impressed to read everthing at alone place.

  9. Hey there! Someone in my Facebook group shared this site with us so I came to check it out.
    I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Wonderful blog and terrific design.

Leave a Reply

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