
Transformers the movie is by far the best movie ever created this year. Here’s something for the transformers fans - Creating Transformers and autobots & decepticons icons in Photoshop.
Downloading Transformers Fonts
Before getting started into the design, I surf around The Internet looking for similar Transformers fonts. Here is the closest I can get. Download this font and have them installed first.
1. Writing Transformers and Racterized it

Create a new canvas at your preferred size; I’m using 420×250px. Fill it up with black background, write “Transformers” with SF TransRobotics font downloaded just now and centralized it.

Right click on the text layer and select Rasterized type
2. Creating Similarities

Highlight the bottom of "T" and "F" with Maquee Tool, hold Alt and keep pressing Arrow down to increase the length of both these alphabets.
3. Metal-rized the font
Right click on layer’s Blending Options, and adjust the following style.
Inner Glow
Bevel and Emboss
Color Overlay
Color code: #31464F
Gradiant Overlay
Color Stop 1: #000000, Location: 0%
Color Stop 2: #90999d, Location: 100%
Pattern Overlay
4. A little Glow

Hold Ctrl, left click on the Transformer text’s layer thumbnail to highlight the selection. Create a new layer, select G radiant Tool and draw across from left to right as illustrated in the image above. Change the blend mode to Overlay and adjust Opacity to 50%. Your final product will look something like this.

5. Autobots and Decepticons
SF TransRobotics font’s "<" and ">" draws the logo for Autobots and Decepticons. What you need to do is copy the layer style from "Transformers" and paste it on the logos layers.

Expand the layer, and click on the eye of Gradient Overlay once to hide it. Your final Autobot and Decepticons logo will look something like this.
|
Posted by hongkiat in Photoshop Tutorial, at 07.02.07 Tags: create, design, logo, photoshop, transformers, tutorial |
![]() |
Related Contents |
Sponsors |























Comments
July 2nd, 2007 at 9:35 pm
Wow, thanks for the tips.
comment
University Update - Transformers - Draw Transformers Autobots Decepticons in Photoshop
July 2nd, 2007 at 9:50 pm
[...] Link to Article transformers Draw Transformers Autobots Decepticons in Photoshop » Posted at [...]
comment
July 2nd, 2007 at 11:21 pm
Really thanks alot! :D
Argh, I LOVE PHOTOSHOP! :$
comment
University Update - Transformers - Draw Transformers in Photoshop
July 2nd, 2007 at 11:54 pm
[...] Link to Article transformers Draw Transformers in Photoshop » Posted at hongkiat.com on [...]
comment
July 3rd, 2007 at 12:40 pm
Autobots and Decepticons or Incepticons and Decepticons?
yepp.. great movie…
comment
July 3rd, 2007 at 12:45 pm
Pardon my ignorance miahahaha…. ignore above comment.
comment
Transformers Yazı Tipi ile Photoshop
July 3rd, 2007 at 8:10 pm
[...] İşletim sisteminize uygun yazı tipini indirdikten sonra şuradaki anlatımı indirerek veya buraya bakarak resimdeki gibi logolar yapabilirsiniz.etiketler: transformers, font, yazı tipi, photoshop, [...]
comment
July 5th, 2007 at 9:41 am
damn, i dident have the ’stuco’ tex. aww…
comment
July 7th, 2007 at 4:06 am
Great tuto man, greetings from Brazil… Really very good…
comment
July 7th, 2007 at 11:08 pm
Hey nice tutorial! For you transformers fans, here’s another tutorial shows how to recreate the transformer emblems.
http://www.pixelhivedesign.com/tutorials/Transformers+Logos+Transformed+Into+Vector+Shapes/
comment
July 7th, 2007 at 11:54 pm
twe4ked: i’ve provided the download link of that font up there.
comment
July 9th, 2007 at 4:55 am
ONLY THING THAT SUCKS ABOUT THIS TUTORIAL IS THAT U HAVE TO HAVE THAT PATTERN TO MAKE IT WORK.. OTHER WISE ITS IMPOSSIBLE.. IT WUD BE HELPFUL IF U POST A LINK TO WHERE TO GET THE PATTERN IF U DONT HAVE IT
comment
July 9th, 2007 at 5:01 am
joe: if you read the guide through enough (in Pattern Overlay section), you’ll notice this is actually a default pattern in photoshop. the name of the pattern is call stucco 2 btw.
comment
July 9th, 2007 at 5:19 am
i dont have stucco 2 on my photoshop(cs3) either. gonna see if i cant hunt it down on the net. thanks for tut though. seems promising if i can get that pattern.
comment
July 9th, 2007 at 5:41 am
found the textures that are supposed to come standard with ps, including the “stucco 2″ that we are looking for.
download it here:
http://rapidshare.com/files/41802921/Textures.rar.html
open the psd or jpg files and use EDIT>DEFINE PATTERN to add them to your list of patterns
comment
July 9th, 2007 at 12:56 pm
hey, great tut. I had one question though, I may have overlooked it by accident but I’ve looked through the tut several times, when on the pattern step what scale did you use on the stucco?
comment
July 10th, 2007 at 1:44 am
nice tutorial. thanks.
comment
July 10th, 2007 at 1:05 pm
I dont have the stucco 2 texture. T_T
comment
July 12th, 2007 at 8:32 am
Hi. This is a very nice tutorial but id like to know what if you dont have a photoshop. what other application can you use for this.
comment
July 22nd, 2007 at 8:40 pm
Tutorial file not found :(
I need vector Transformers logo.
comment
July 31st, 2007 at 6:32 pm
stucco 2 can be found in 22pixels flock. Great tutorial. ^_^
comment
August 1st, 2007 at 12:00 pm
What type of adobe photoshop should I use?
comment
August 8th, 2007 at 6:27 pm
Thank you
here is my Result
http://img264.imageshack.us/img264/9383/transformersol5.png
comment
August 30th, 2007 at 12:39 am
The Stucco 2 pattern in my Adobe Photoshop CS2 had to be added manually first. Its in the .PAT file called Texture Fill 2. This link will explain to you how to perform the necessary steps to enable/add the pattern.
http://www.heathrowe.com/tuts/patterns.asp
comment
September 5th, 2007 at 3:55 am
This is awesome, thanks. Transformers rule.
You’ve got some great tutorials on this site, keep it up!
comment
October 24th, 2007 at 8:10 pm
guys are you dumb ?????
the texture in question is in texture fill2 , DEAFULT present in photoshop, all you have to do it load it…. if you dont know there are other textures than the defualt few (build in)since photoshop 7 , you guys dont deserve to be on this page….
good job on the tutorial.. really helpful.. not to mention you can keep the text vector and edit it .. no need to rasterize it at alll
comment
November 11th, 2007 at 6:14 am
wonderfull Tutorial
comment
Disegnare un logo stile transformers con photoshop : sastgroup.com
November 24th, 2007 at 4:36 am
[...] web: http://www.hongkiat.com Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
comment
Textura a la Transformer « r4ymundo r4bago
November 26th, 2007 at 11:45 pm
[...] ENLACE AL TUTORIAL [...]
comment
May 8th, 2008 at 2:11 pm
Really Cool Tutorial Thanks !
comment
May 12th, 2008 at 6:32 pm
hey! this is totally rocking hot! =D thanks for creating this tutorial…
ha ha seems I’m obviously a late fan. Ü
comment
Leave a reply