How to Create a Set of Retro Icon Illustrations in Adobe Illustrator

April 25, 2019

How to Create a Set of Retro Icon Illustrations in Adobe Illustrator

Getting Started

In this tutorial, I will be walking you through the process of creating a retro food truck illustration in Adobe Illustrator and using that style to build a full cohesive collection.

To replicate this look I’m using RetroSupply’s VectorTone Swatches as well as The Dead Pen vector brushes, and the Authentic Screen Printer's Toolkit.    


Research + Sketching Concepts

This project originally started as a set of Austin-themed stickers for iOS Messenger. Austin has a lot of love for mid-century design and I wanted to reflect that style and capture the retro-western aesthetic of the city. I did some online research for inspiration in images of retro signage, MCM architecture, and 1960’s cartoons. I knew I wanted to focus on distorted proportions, bold textures, and bright colors.



After making a basic plan for the icon style I started sketching up ideas. I do pretty rough, freeform sketches on paper and then focus on iteration and perfection in Illustrator.  


Vectorizing

I usually take a photo of my sketchbook with my phone and trace it in illustrator. To do this, first, create a new Illustrator project and set the height and width to 816 pixels and the color mode to RGB. Move your sketchbook photo into Illustrator and center the sketch over the artboard. I typically set the opacity of the original to 50% and lock it, then use a red stroke on my lines to see how they compare to the original.

I always trace with the Pen tool (P). Using the pen tool can be difficult when you first start, but it’s a really powerful tool once mastered. Luckily, the food truck illustration is mostly straight lines. I personally use my sketch as a rough guide and try to improve on the design as I build the vector. Once the whole illustration is vectorized, I delete the original sketch and start experimenting with the design.


Experimenting and Refining

I always duplicate my artwork before making changes by dragging with the Selection tool (V) and pressing Alt. Creating a new version for each set of changes makes it easy to backtrack and combine the best elements of the different iterations. During this process, I also experiment with adding details like the sign on the side of the truck.

When I feel good about the basic shape and outline, it’s time to start playing with fills and strokes. The color palette for this project was inspired by the bold, slightly muted colors of faded signs and retro print materials.

A good trick for keeping the whole collection cohesive is to settle on a limited color palette for everything. I decided on a 5-color palette and added it to my Illustrator swatches so I wouldn’t be tempted to stray too much. Once you’re happy with the colors, it’s time to give it texture and depth.


Retro Time Machine

First I choose where I want to add shadows to the illustration. In this case, I wanted to add something to the blank yellow area below the window, so I created a shape with the Pen tool that outlines that part of the truck. Then I load the VectorTone Swatches by opening the Swatch dropdown and selecting “Open Swatch Library” then “User Defined” then “Vectortone Swatches”. Once those are loaded in the Swatches window you can select the right halftone fill for your illustration.

I also experimented with stroke textures. The Dead Pen is a great tool for replicating this kind of rough, bleeding edge look. You can load and select art brushes in the Brushes window by selecting “Open Swatch Library” then “User Defined” then locating your brushes.

To replicate the faux registration error, I duplicated the background and truck shapes and changed the stroke and fill color both to white. Then I moved the white shapes horizontally and vertically by -9 pixels to offset them from the original.

Finally, to add a little grit to the background shape I used textures from the Authentic Screen Printer's Toolkit. I simply pasted it behind the truck, changed the color to white and the opacity to 50%. I also masked the speckle texture and the faux registration error using the blue background shape.


Building a Full Set

From this point, it gets easier and easier to replicate this look. You can save these shape styles and apply them to any new vectors you create. As my collection of Austin-themed stickers grew, I also started to view them together on one artboard. This lets me see how the collection worked as a whole and make sure that things like weight, texture, and amount of detail all felt balanced. Once you’re happy with each individual illustration and the entire collection together, you’re done!


My favorite thing about projects like this is that I can really get into a groove as I build the complete set. This sticker pack consisted of 24+ illustrations and animations, but illustrating in this style felt effortless by the time they were ready to release. Creating a cohesive collection of icons or illustrations is a great way to improve your skills in vector illustration of any style. I hope you enjoy it as much as I do!      


About Autumn

Autumn is a freelance graphic designer and illustrator living in Austin, TX. You can connect with her and see more of her work on her portfolio site and Instagram.





Leave a comment

Comments will be approved before showing up.


Also in Tutorials

How to Make Illustrator Brushes
How to Make Adobe Illustrator Brushes

September 09, 2019 1 Comment

Creating your own Adobe Illustrator brushes is a great way to add your own distinct feel to your work. Here's a step-by-step guide to making your own Illustrator brushes.

View full article →

How to Create Botanical Lettering in Adobe Illustrator
How to Create Botanical Lettering in Adobe Illustrator

August 29, 2019

In this tutorial, we're going to learn how to create a botanical lettering illustration in Adobe Illustrator (and have Illustrator do most of the work for you). This tutorial includes finding inspiration, constructing letters and script lettering, and adding botanical elements to your vector art including branches and leaves.

View full article →

The Ultimate Guide to Mastering Procreate Brushes
The Ultimate Guide to Mastering Procreate Brushes

August 29, 2019

Learn how to Master your Procreate Brushes to customize them for your needs with these 7 helpful tweaks. Change the size limits, shape, tilt and taper settings as well as create your very own blender brush! 

View full article →