Transformers Logos Transformed Into Vector Shapes

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 06/27/2007
Views: 683,270

Transformers Logos Transformed Into Vector Shapes

The goal is to recreate the new Transformers Movie Logos into highly customizable vector objects. Once you have the vector edition you can apply custom styles to create your own personalized versions. You'll learn about essential Pen Tool methods that can be reused in your future projects. I will be demonstrating the conversion on the Autobots Logo but the same techniques can be applied to the Decepticons Logo. Both are provided. I personally can't wait to see the movie, so here is something to help pass the time. Enjoy.

The transformers logo is a registered trademark of Hasbro. This tutorial is for educational purposes, do not use the logo for commercial purposes.

Custom Transformers Logos

Resources Needed

You'll need a decent version of the Autobots or Decepticons Logo. I found them for you, choose your side:

Step 1 : Preparation & Document Setup

Open Adobe Photoshop and load the raster logo of your choice. If your new to the pen tool, I suggest using the Autobots logo.
File > Open... > (autobots_logo.jpg OR decepticons_logo.jpg)


Step 2 : Preparing For Transformation

The roughed up metal versions of the transformers logos are cool for the movie but not ideal for the transformation technique. What we want is a clear guide to follow when we create our vector version. So let's use the Trace Contour Filter to get a contour guide to trace.
Filters > Stylize > Trace Contour...

Trace Contour

There now we have an excellent guide for the transformation. It will make the rest of our job easier.

Autobots Contour

Step 3 : Start the Transformation Process

Now it is a matter of using the pen tool and a few simple techniques to recreate the logo. Before diving in, let's look at the overall task. I can see we'll be able to save time by creating one side of the face and then duplicating and flipping it for the other side. So there's about 6 simple shapes we need to create. We'll build up the logo piece by piece. Let's start with the forehead.

Throughout the project use the Zoom Tool, Zoom Tool, and zoom in to make it even easier to see the outline and trace it with the Pen Tool.

Select the Pen Tool, Pen Tool, and choose a foreground color other than white.

Using the reference diagram below, start at point 1 and click once at point and stop before point 6. The basic idea is to pinpoint the corners as you click.

1 through 5

Point 6 requires us to create a curve, click in the middle of the forehead curve and drag to the left. Release when the vector curve matches the contour reference.

Curve point 6

Click on point 1 again and the shape will close and automatically complete the curve.

Complete Shape

Step 4: Subtracting Shapes

Before we move on to add additional sections of the logo, we will learn how to subtract the triangle from the forehead shape.

Since we can no longer see the triangle because our shape is covering it, let's reduce the opacity of the layer to 50% in the layers panel.

Reduce Opacity

Now change the Pen Tool's properties to "Subtract from shape area"

Transform Subtract

Simply click once on each of the triangle's points

Triangle Points

Finish the subtraction by on the starting point.
Bam!, the forehead is done.

Subtract Complete

Step 5: Adding Additional Shapes

Now we continue to build up the logo by building shapes next to the lonely forehead. Let's go with the left side so that I can show you how to duplicate shapes to save time.

Change your Pen Tool's settings to "Add to shape area".

Add to shape area

I'm pretty sure you understand building process but here is the guide for the upper left side.

Upper Transformer Helmet

Switch back to Subtraction mode and remove the two diagnal bars. If you need to adjust individual points, complete the shape first then switch to the Direct Selection Tool, Direct Selection Tool, and select the problem point and adjust it. Remember to switch back to the Pen Tool afterwards.

Finished Transformer Cheek

Switch to Addition mode and add the lower left transformer cheek.

Lower Transformer Cheek

Now that we have one complete transformer side, I'll show you how to duplicate it.

Flash Den

Step 6: Duplicating Similar Shapes to Save Time

New Tool! Select the Path Selection Tool, Path Selection Tool, and hold down shift while clicking on the four shapes that make up the left side of the transformer logo. Two of the shapes are the subtracted diagonal bars.

Select Transformer

To duplicate the shapes, hold down Alt/Cmd and click and drag the selected shapes to the right. Release somewhere on the right side of the face.

Now flip the shapes horizontally
Edit > Transform > Flip Horizontal

Drag the flipped shapes into position.

Right Transformer Side

Looking good! The rest are easy solid shapes.

Step 7: Finish the Transformer

You should have the skills now to add the remaining shapes, just make sure your in Addition mode and then add the nose and two mouth peices.

After your done, you won't need the raster guide anymore. Delete it to leave the single vector transformer layer in all its glory.

Remember to put the opacity back up to 100% once your finished with the logo.

Complete Transformers Logo

Transformers Logos Transformed Into Vector Shapes
Concluding Statements

You now have a vector transformer logo that you can resize and style to your robotic hearts content. I'd love to see what you ended up for a final project, send me a link if get around to it. Until the next time... Transformers. More than meets the eye.

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Transformers Logos Transformed Into Vector Shapes" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Print & Graphic Design : Menu & Marketing Cherries Cafe

Menu & Marketing
Internet Night Cafe

Web Development : Educating Maine Invasive Aquatic Plants

Educating Maine
Online Lab / Quiz


"Working with Max was easy and fun. He understood the feel and look I wanted my site to have. Max is easy to communicate with and very available, always returning emails and answering all of my questions promptly. He also had great suggestions when I had questions about website and business etiquette. In addition to his programming abilities, Max has a great way with people. He has set me up to manage my website easily. I am left feeling confident and proud of my new site."

- Megan Jean Morris, Professional Fine Artist, Farmington, Maine
View More Testimonials

More Tutorials!