visitor stats

Draw Transformers in Photoshop

transformers

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.

Download tutorial

Posted by hongkiat in Photoshop Tutorial, at 07.02.07

Tags: , , , , ,

Related Contents

Sponsors

Comments

  2. 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

  3. aLExpikachU

    July 2nd, 2007 at 11:21 pm

    Really thanks alot! :D

    Argh, I LOVE PHOTOSHOP! :$

    comment

  4. 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

  5. shutterspeaks

    July 3rd, 2007 at 12:40 pm

    Autobots and Decepticons or Incepticons and Decepticons?

    yepp.. great movie…

    comment

  6. shutterspeaks

    July 3rd, 2007 at 12:45 pm

    Pardon my ignorance miahahaha…. ignore above comment.

    comment

  7. 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

  8. twe4ked

    July 5th, 2007 at 9:41 am

    damn, i dident have the ’stuco’ tex. aww…

    comment

  9. Dagmesh

    July 7th, 2007 at 4:06 am

    Great tuto man, greetings from Brazil… Really very good…

    comment

  10. Transformers Emblems in Photoshop

    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

  11. hongkiat

    July 7th, 2007 at 11:54 pm

    twe4ked: i’ve provided the download link of that font up there.

    comment

  12. joe

    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

  13. hongkiat

    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

  14. ericdee

    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

  15. ericdee

    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

  16. bigdogg

    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

  18. siong1987

    July 10th, 2007 at 1:05 pm

    I dont have the stucco 2 texture. T_T

    comment

  19. Projectmaker

    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

  20. GDie

    July 22nd, 2007 at 8:40 pm

    Tutorial file not found :(
    I need vector Transformers logo.

    comment

  21. kILLIN

    July 31st, 2007 at 6:32 pm

    stucco 2 can be found in 22pixels flock. Great tutorial. ^_^

    comment

  22. T-rex

    August 1st, 2007 at 12:00 pm

    What type of adobe photoshop should I use?

    comment

  24. Random

    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

  25. Pixel x Pixel

    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

  26. rohonnag

    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

  28. 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

  30. Johnson

    May 8th, 2008 at 2:11 pm

    Really Cool Tutorial Thanks !

    comment

  31. maryranz

    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