Transformers Logos Transformed Into Vector Shapes
Category: Adobe Photoshop Tutorials
Category: Adobe Photoshop Tutorials
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.
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)
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...
There now we have an excellent guide for the transformation. It will make the rest of our job easier.
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, , and zoom in to make it even easier to see the outline and trace it with the Pen Tool.
Select the 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.
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.
Click on point 1 again and the shape will close and automatically complete the curve.
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.
Now change the Pen Tool's properties to "Subtract from shape area"
Simply click once on each of the triangle's points
Finish the subtraction by on the starting point.
Bam!, the forehead is done.
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".
I'm pretty sure you understand building process but here is the guide for the upper left side.
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, , and select the problem point and adjust it. Remember to switch back to the Pen Tool afterwards.
Switch to Addition mode and add the lower left transformer cheek.
Now that we have one complete transformer side, I'll show you how to duplicate it.
New Tool! Select the 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.
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.
Looking good! The rest are easy solid shapes.
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.
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.
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.
Touch Screen Kiosk
32" Touch Screen Kiosk featuring the hall of fame inductees of La Salle University.
"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.
Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.
I would be happy to speak with anyone who is thinking of working with Max. "