1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

TUTORIAL: How to Make your own Hero Icons

Discussion in 'The Tavern' started by Marshmalo, Dec 24, 2016.

  1. Marshmalo
    Offline

    Marshmalo Brigand Map Maker

    Messages:
    1,586
    Trophy Points:
    155
    TUTORIAL: How to Make your own Hero Icons
    By Marshmalo
    Includes Icon templates for quick and easy icon Creation

    Many map makers struggle to find apprepriate icons for their maps and don't realise how easy it is to create your own, this process can take just afew minutes and you don't need any artistic or crazy photoshop skills to do it!

    Here I will show you how you can make quick and easy icons for your favourite WC3 heroes using free programs.

    Required Programs:

    Warcraft 3 Viewer (For converting skins)
    http://www.hiveworkshop.com/threads/warcraft-iii-viewer.62878/#resource-66131

    GIMP: Image manipulation Program (Free alternative to Photoshop)
    https://www.gimp.org/downloads/

    Marshmalo's Icon Templates: See files attached to this post.

    BTNBlackTEMPLATE.PNG BTNBorderTEMPLATE.PNG BTNGreyTEMPLATE.PNG

    Step 1: Open Marshmalo;s Grey Template file within GIMP.
    Your screen should look like this:
    Scre 1.png

    Step 2: Google image search for an image you want to use. Right click on the image and click "copy"

    Scre 2.png

    Step 3 : Paste image into GIMP: Hold down ctrl+V on your keyboard. You'l notice we need to move and resize the image, so select the move tool within gimp:

    Scre 3.png
    Use this to centre the image within the square:

    Step 4: Now we need to resize our image so the head is completely within the box. Use the Scale tool as below:

    Scre 4.png
    You may need to use the move tool again to centre the image after rescaling.

    Step 5: Bacause we have reduced the size of our image, it may have gone blurry, so lets sharpen our image up by using the sharpen tool in Filters button at the top, then - Enhance - Sharpen Tool.

    Scre 5.png

    Step 6: WC3 art style usues high brightness and contrast, so lets bright our image up by using the Brightness tool. Go to Colors - Brightness and Contrast.

    Scre 6.png
    Slide the bars accross until you get the desired brightness and contrast, this will be different for every image so you decide when it looks good.
    Scre 7.png

    Step 7: Anchor the the layer down by going to Layers - Anchor Layer.

    Scre 8.png
    This will flatten the image for you.

    Step 8: Now open my border template file. Copy and pst this into your logo image. You will see this automatically creates the typical WC3 borders over your icon. Then anchor the layer again to flatten image: Layers - Anchor Layer.
    Scre 9.png
    Theres your new Icon! But we're not finished yet... now save your icon with BTN at the front example:
    BTNDwayneJohnson.TGA

    Remmeber to save as .TGA file. To do this you go to file - export (If you click file - save GIMP will try and save it as another file type, we dont want that!

    Step 9: We have our icon but all hero icons in WC3 must also have a disabled variant, this disabled icon displays when a hero dies. So lets quickly create this too. Open up my BTN Black Template file.
    Copy and paste this over your icon image, you will see it creates the black borders for you:
    Scre 10.png
    Now ancher this layer by going to Layers - Anchor layer like I showed you before.

    Step 10: We need to make the disabled variant much darker, so go to Brightness Contrast again like I showed you before, this time push the bright right down to the bottom so it looks dark:
    Scre 11.png
    This is our disabled Icon. Lets export this as an TGA just like before but this time we're going to put DISBTN in front of the file name. Example:
    DISBTNDwayneJohnson.TGA

    Step 11: Now we need to convert this into a BLP file. Warcraft uses BLP files as images, so les open up the warcraft Viewer.
    Once open go to Convert Files - BMP, TGA or JPG to BLP

    Scre 12.png
    Now nagivate to your TGA icon files and convert them. Warcraft Viewer will ask you what level of compression you want to convert your files to, just go with 70% if you not sure.
    Do not attempt to convert higher than 85%! This is very important!

    Step 12: You are now ready to import these icons into your map!
    If your not sure how to import icons into a map then remember to change the file path of the import. The enabled version of the icon (which is the first one I showed you) needs to have the following path at the front:
    ReplaceableTextures\CommandButtons\

    Example: ReplaceableTextures\CommandButtons\BTNDwayneJohnson.TGA

    The disabled variation needs to have the disabled path added in front:
    ReplaceableTextures\CommandButtonsDisabled\

    Example: ReplaceableTextures\CommandButtonsDisabled\DISBTNDwayneJohnson.TGA

    BTNDwaynJohnson.PNG
    There you go! You now have your new Icon imported into your map! I hope you found this tutorial useful and not too difficult.
    If you get stuck please post in this thread, not a PM, and I will try and get back to you.

    • Like Like x 9
    • Winner Winner x 1
  2. Krotos
    Offline

    Krotos The Lore Judge. Brigand Map Maker

    Messages:
    1,381
    Trophy Points:
    143
    • This This x 2
  3. Marshmalo
    Offline

    Marshmalo Brigand Map Maker

    Messages:
    1,586
    Trophy Points:
    155
    True but you'd still want to sharpen and enchance the image, if you find an image you like off google images its not so simple as just importing it to the button manager.

    But that sure is a useful took when combine with GIMP as its easier to convert files, I'll be using that in the future too :-)
  4. Yousef
    Offline

    Yousef Paladin of the Alliance Brigand Map Maker

    Messages:
    2,014
    Trophy Points:
    125
    So I just found this thread from googling how to make icons and I burst into laughing the second I saw Dwayne.
  5. RedPandaLT
    Offline

    RedPandaLT Brigand

    Messages:
    70
    Trophy Points:
    18
    Very important hero in the warcraft lore, dont you know?
    • This This x 1
  6. Manetho
    Offline

    Manetho Super Soldier Brigand

    Messages:
    3,935
    Trophy Points:
    166
    I loved him in the movie earthquakes vs helicopters
  7. Marshmalo
    Offline

    Marshmalo Brigand Map Maker

    Messages:
    1,586
    Trophy Points:
    155
    Dwayne Johnson is the greatest and most versatile actor that ever lived, I think I had just watched San Andreas before I made this :-)
  8. Manetho
    Offline

    Manetho Super Soldier Brigand

    Messages:
    3,935
    Trophy Points:
    166
    You mean helicopters vs earthquakes duh
  9. EmperorFawful
    Offline

    EmperorFawful Burn it! Website Admin

    Messages:
    3,995
    Trophy Points:
    153
    I want to do a map with Dwayne Johnson now.
    • This This x 1