Create a Retro Robot using the Perspective Grid in Illustrator

by Dustin Lee April 21, 2016 6 Comments

Create a Retro Robot using the Perspective Grid in Illustrator

Note from Dustin at RetroSupply: I met Jordan Wong over appetizers and secret handshakes at WMC Fest in 2015 (dude's got a killer Tie Fighter docking hand shake). Jordan's personality has a warm mix of philosophy and humor and I immediately liked the dude.

It wasn't until later that I realized he was an AMAZING illustrator. Jordan has some serious chops – here's proof. So when Jordan sent me some illustration work he created using a FizzleStock image as a base I knew he needed to share it with the world.

In this tutorial Jordan is going to share some of his super-useful illustration tips (plus, you learn how to make an epic robot!)

I'll let Jordan take it from here... Enjoy!

Let's get started!

Hi everyone, thanks for stopping by and taking the time to check out the collaboration I did with RetroSupply.

This all started when Fizzlestock was first released, back in December of 2015. I was browsing their collection and was drawn to the house illustrations. Now, if you know me and my work, I tend to add robots in everything. This case was no different.

However, this illustration is not just simply about sticking a robot in the background. There are some fun underlying themes and ideas, cultural juxtapositions playing with a distorted sense of time. Fizzlestock’s collection of classic American advertising illustrations embodies the past and showcases a vintage aesthetic.

Retro house and family

Combine that with something like a robot, a representation of the future, and the result is pretty peculiar. Especially when the robot looks to be of Japanese design. (As a kid, I absolutely loved Gundam, Transformers and all other Japanese robots, so that explains that.)

Now there is a blend of cultures occurring in this fictional setting: an all-American newlywed couple admiring their recently purchased home...and complimentary giant Japanese robot.

Okay, enough talking about the concept and using artsy-fartsy-smartsy words like “juxtaposition.” So what was my process? Well here is a quick run-through.



Because a robot has a geometric form, I wanted to make sure that it fit with the perspective of scene, which is strongly implied by the angle the house is viewed at. Illustrator’s Perspective Grid (View > Perspective Grid > Show Grid) is a very helpful tool for this. 


Perspective grid with retro clip art

By using the nodes to adjust the horizon line and vanishing points, I matched the perspective of grid to that of the house, specifically the roof and chimney.

From there, two more grids were drawn on top, adhering to the newly adjusted perspective grid. These will be used as reference for the sketch.



Retro robot illustration sketch
As I mentioned before, I love how robots are depicted in Japanese pop-culture, especially in the Gundam and Transformer series.

However, I did not want to go overboard with detail. An overly-futuristic robot with too many mechanical complexities would not fit with the classic American illustrational style of the Fizzlestock house illustration. I wanted my contribution to be of a similar look, ensuring that the whole depiction was cohesive.

Again, notice how my sketch fits within the perspective grid that I set up beforehand.



Converting pencil sketch to vector

The pencil sketch is scanned in - resolution does not really matter since all of the linework will be re-done in Illustrator. In Photoshop, the hue of the image is set to colorized and adjusted to a light cyan.



Using vector brushes in Illustrator

The edited scan is then opened in Illustrator, where the linework is reworked. I used RetroSupply’s VectorHero Ink Pen Illustrator Kit, choosing brushes that I felt best matched the quality of the linework in the Fizzlestock house illustration.

I should note that I once again created a perspective grid specific to the scene and used it to keep my illustration in perspective. You can actually see it faintly displayed as the orange and blue grid.

Retro robot vector illustration

Ta-da! Linework complete!


Adding texture to retro illustration

Now for some final finesse: add a nice texture on top and a witty little phrase (“home sweet home”) at the bottom. Instead of a signature, since this is a collaboration, I plopped the two logos down in the corner.

Adding texture to vector illustration

Detail shot.

Detailed retro robot vector illustration

Done-zos! Originally I had the background set to a golden hue, but as you can see, I decided to go with more of a silver look.

AstroBoy retro inspiration

Gigantor retro illustration inspiration

A bit of a homage to the old days of Astro Boy and Gigantor.

Jordan Wong with retro robot illustration and screen print

Looking to have this on you wall? Grab a two-color screen print (16” x 20”) at my online store. (Shout out to Clockwise for doing a great job on these prints!)

Thanks for reading! Now get out there and draw some robots!

About the Author

Jordan Wong (dba Wongface) is a graphic designer, illustrator and artist residing in Cleveland, Ohio. He specializes in illustrative work and is inspired by empowering narratives, humor and quirkiness. From art exhibitions, design contracts, and teaching in Pittsburgh (his hometown) to his time at Go Media and designing the sixth Weapons of Mass Creation Fest, he continues to create imagery that informs, inspires and delights.

Dustin Lee
Dustin Lee


6 Responses

Suzanne at RetroSupply
Suzanne at RetroSupply

June 30, 2017

Thank you so much for the great tip Klaas!

Craig those are some killer shirts! I’m glad we could help you master the perspective tool for that t-shirt!

Craig Moodie
Craig Moodie

May 10, 2016

I enjoy playing with perspective with some of our boys t-shirt designs too. Check out some of our robot designs if you have a moment and let us know your thoughts. Thanks.

Klaas De Loose
Klaas De Loose

April 26, 2016

Cool! I would rasterize the vectorised robot and “image trace” it again with the “silhouette” function to match the original image. The original image has no sharp corners where lines meet. The tracing process will simulate this effect.


April 22, 2016

Love this! My son will flip when he sees this! Thanks for sharing.


April 22, 2016

Cool demo! Would love to see more about your inking process.

Simon H.
Simon H.

April 22, 2016

Looking good folks!

Leave a comment

Also in RetroSupply Blog

How We Created a 1950s Inspired Jingle for the Woodland Wonderland Brush & Tutorial Pack
How We Created a 1950s Inspired Jingle for the Woodland Wonderland Brush & Tutorial Pack

by Dustin Lee July 25, 2020 4 Comments

This jingle just goes to show what kind of neat stuff you can do with the brushes, tutorials and a little help from your friends! Here's how we did it...

View full article →

60 Free Retro and Vintage Fonts
60 Best Free Retro and Vintage Fonts

by Dustin Lee July 01, 2020 46 Comments

Quickly find the perfect typeface for your designs with our epic collection of high-quality, free retro and vintage fonts. There’s something for every project...

View full article →

10 Must-Read Retro Graphic Design and Illustration Books
10 Must-Read Retro Graphic Design and Illustration Books

by Dustin Lee June 17, 2020 4 Comments

In this article, we've included the best retro books on graphic design and illustration. Whether you're looking to brush up on your typography skills or create more authentic retro illustrations.

View full article →