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.
Related Contents |
Sponsors |
|
|
|
|
Posted by hongkiat in Photoshop Tutorials , at 07.02.07
Tags: create, design, logo, photoshop, transformers, tutorial |
|
Comments
Sankaranand July 2nd, 2007
Wow, thanks for the tips.
ReplyaLExpikachU July 2nd, 2007
Really thanks alot! :D
Argh, I LOVE PHOTOSHOP! :$
Replyshutterspeaks July 3rd, 2007
Autobots and Decepticons or Incepticons and Decepticons?
yepp.. great movie…
Replyshutterspeaks July 3rd, 2007
Pardon my ignorance miahahaha…. ignore above comment.
Replytwe4ked July 5th, 2007
damn, i dident have the ’stuco’ tex. aww…
ReplyDagmesh July 7th, 2007
Great tuto man, greetings from Brazil… Really very good…
ReplyTransformers Emblems in Photoshop July 7th, 2007
Hey nice tutorial! For you transformers fans, here’s another tutorial shows how to recreate the transformer emblems.
Replyhttp://www.pixelhivedesign.com/tutorials/Transformers+Logos+Transformed+Into+Vector+Shapes/
hongkiat July 7th, 2007
twe4ked: i’ve provided the download link of that font up there.
Replyjoe July 9th, 2007
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
Replyhongkiat July 9th, 2007
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.
Replyericdee July 9th, 2007
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.
Replyericdee July 9th, 2007
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
Replybigdogg July 9th, 2007
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?
Replynemupa July 10th, 2007
nice tutorial. thanks.
Replysiong1987 July 10th, 2007
I dont have the stucco 2 texture. T_T
ReplyProjectmaker July 12th, 2007
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.
ReplyGDie July 22nd, 2007
Tutorial file not found :(
ReplyI need vector Transformers logo.
kILLIN July 31st, 2007
stucco 2 can be found in 22pixels flock. Great tutorial. ^_^
ReplyT-rex August 1st, 2007
What type of adobe photoshop should I use?
ReplyFares August 8th, 2007
Thank you
here is my Result
http://img264.imageshack.us/img264/9383/transformersol5.png
ReplyRandom August 30th, 2007
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.
Replyhttp://www.heathrowe.com/tuts/patterns.asp
Pixel x Pixel September 5th, 2007
This is awesome, thanks. Transformers rule.
You’ve got some great tutorials on this site, keep it up!
Replyrohonnag October 24th, 2007
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
ReplyPhotoshop Video Tutorials November 11th, 2007
wonderfull Tutorial
ReplyJohnson May 8th, 2008
Really Cool Tutorial Thanks !
Replymaryranz May 12th, 2008
hey! this is totally rocking hot! =D thanks for creating this tutorial…
ha ha seems I’m obviously a late fan. Ü
Replydgs August 21st, 2008
My favorite megaupload search engine is megauploadfiles.com it’s the most powerful an easy to use. megauploadfiles.com has incredible speed of searching rapidshare links in the internet.
ReplyBlog Tactic September 11th, 2008
woit, could you do one for the CicakMan … kekekeke
Replyyannick October 7th, 2008
i need the draw for transfomer industrie
ReplyLida Dai Dai Hua Jiao Nang Seo Yarışması December 17th, 2008
Woww very good effect. Thank you.
Replytransformer January 30th, 2009
was searching on the “transformer”, saw your “transformer photoshop information”, great, very useful
Replya June 30th, 2009
@ 12
http://rapidshare.com/files/41802921/Textures.rar.html
STUCCO 2 here is different with pattern in cs 4…
ReplyPrime July 2nd, 2009
Great tutorial, but my stupid computer (which is a mac)’s photoshop cs3 does NOT let me use the Marquee tool… i pushed what you said but it just separated the selected part of the letter. whatdo i do?
Replyijonk August 1st, 2009
hi there! this is the best tut, i do like to inform u all that didn’t know how to find the photoshop pattern stucco 2, u can find it by open texture fill 2, and browse the pattern. u will find it. just try to find one by one. good luck
Replyhypotheek rente September 16th, 2009
I still remember those transformers. fantastic
Replyabby October 10th, 2009
Nice work Hongkiat!……..and its rasterize!
ReplyPSD October 30th, 2009
JUST GIVE US THE FUCKING PSD FILE!!!
ReplyTrackbacks