1. The mythological era has spawned some interesting characters around. Check them out and be sure to vote for them in the 30th Poll of the Texturing Contest.
    Dismiss Notice
  2. The 20th iteration of the Terraining Contest is upon us! Join and create exquisite Water Structures for it.
    Dismiss Notice
  3. Hivers united and created a bunch of 2v2 melee maps. Vote for the best in our Melee Mapping Contest #4 - Poll!
    Dismiss Notice
  4. Check out the Staff job openings thread.
    Dismiss Notice

Button Manager Tutorial (Custom Icons)

Discussion in '2D Art Tutorials' started by sentrywiz, Sep 27, 2014.

  1. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16


    Button Manager Tutorial



    This tutorial is meant to ease and improve making icons to use in your WC3 maps.
    Instead of manually shrinking images, making them into .blp through other programs,
    this program does all that for you. Let's get started then:

    Download :fp: http://www.hiveworkshop.com/forums/tools-560/button-manager-v1-8-2-a-116280/

    Let's take some WoW icons from Wowhead. You can pick whatever, I just picked these three:

    [​IMG] [​IMG] [​IMG]

    So what do we do with them? First download them to a folder, name the folder whatever, I named mine icons_bla:

    save1.jpg

    Next create 4 other folders for our active, passive, passive disabled and active disabled icons.
    Note that you can create more, for toggle, toggle disabled and the other smaller icons.
    This program has you covered!

    save2.jpg

    Now that we have our folders (note, you can name them whatever
    I just like to name them like that for clarity) let's open our program:

    program1.jpg

    Under the program's icon wizard, you have two empty text boxes
    that need the 2 path files: one for where the images are and the
    other for where should the output icons go to. You can put all
    in the same folder, but it will get messy real fast. This way you
    can do it without falling into the mud.

    So first, get your path file directory. You can do this by clicking at
    the top of the folder's location:

    getpath.jpg

    And then copy your path file:

    path.jpg

    Now that we have our path file, insert it into the two empty text boxes.
    In the second one, which is our output path, also add "FolderName".
    Since our folder name is "Act" we add "Act".
    Or if this is too complex for you, click the button next to the textbox
    and locate the folder manually. Then from the list of options, select
    "Button" for our active icons and click proceed.

    program2.jpg

    And there. Our 3 icons have been converted into .blp and made
    into active icons. Now we do the same thing 3 more times, only
    we change the folder name and the type of icon we want. For
    passive we click Passive, for disabled we click Disabled and for
    passive disabled we click Disabled Passive and click the button.

    program3.jpg

    program4.jpg

    program5.jpg

    And now we have our icons. That's it. Let's import them now.
    Open warcraft editor (I hope I don't have to show you how to do
    that through an image) and click on the Import button.

    Here is the most boring process of them all: adding all the icons
    through the import button. You can hotkey this by clicking CTRL + I
    and then navigating to each folder and importing the icons. Let's
    assume you're done, your screen should look like this:

    import1.jpg

    Now I am gonna give you the gold formula for icon naming. No, seriously
    you will need this everytime you want to add icons to your map. So
    either paste these into notepad and save it where you can easily get it.

    ReplaceableTextures\CommandButtons\
    This is for your active icons.

    ReplaceableTextures\PassiveButtons\
    This is for your passive icons.

    ReplaceableTextures\CommandButtonsDisabled\
    This is for both active disabled and passive disabled icons.

    So we need these to replace the "war3mapImported" of each icon
    with the name representing the icon type. So just change all the icon
    names by looking at the names above and replacing the standard
    warcraft import name with it. Like this:

    Copy the "ReplaceableTextures\CommandButtons\" and then highlight
    the "war3mapImported" and hit CTRL + V or paste. And done. Now do
    it for every icon.

    import2.jpg

    import3.jpg

    Whew! When you're done save your map to finalize your new icons.
    Now you can add them to abilities, like this:

    final.jpg

    And that concludes our tutorial. Of course, there are other features in the settings menu of the button manager.
    You might find them useful, so tinker with it on your own.

    program settings.jpg

    Thanks for reading! Hope you learned how easy it is to make WC3 custom icons.

     
    Last edited: Jun 21, 2015
  2. deathismyfriend

    deathismyfriend

    Joined:
    Oct 24, 2012
    Messages:
    6,532
    Resources:
    14
    Spells:
    12
    Tutorials:
    2
    Resources:
    14
    You should structure this tutorial better. Put it in sections. All the huge green text is horrible for reading.
     
  3. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16
    I disagree, the green color is great for reading because the background is dark.

    EDIT: Changed light green for gold, and this one I like even more!

    Plus, I don't have just a huge chunk of text, there are images for nearly every step.

    If you follow the tutorial from top to bottom, there's no way you can get lost or confused.

    I could add sections, but how do I do that?
     
  4. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,419
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Nice tutorial (I just realized none of the other icon tutorials use ButtonManager). But I would rename it to "Batch Icon Conversion" or something along those lines ("Button Manager Tutorial"? "Converting Images to Icons"?). Also, I would remove the italics since italics is usually used for emphasis. If it is applied to the whole tutorial, then it is useless.
     
  5. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16
    I agree on all things.

    Italics removed. Renamed. I re-wrote some of it to make it clearer. Change colors as well.
     
  6. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,419
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Looks better, and is almost on its way to approval. Why the larger font though? Keep it at the standard font size--if people need bigger text then they'll have "cmd/ctrl +" in their browser.
     
  7. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16
    Just so that it highlights those three lines.

    Whenever I come back to wc3 mapping, and I forget the lines I google my own tutorial, scroll down and copy-paste those lines. So it worked for me in that regard. That's why I think they should be a little bigger and in different color.
     
  8. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,419
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    It's fine to have those paths as a bigger font and color since that is for emphasis. I was referring to the text in the rest of the tutorial. It is all size 4.
     
  9. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16
    Oh lol. Okay, is size 3 what you're wanting?
     
  10. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,419
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Just use no sizing, a.k.a size 2.

    Size 1
    Size 2
    Regular text
    Size 3
    Size 4

    But you can feel free to leave headers and emphasized text as larger sizes. Sorry, I know these things are sort of trivial.
     
  11. sentrywiz

    sentrywiz

    Joined:
    Feb 10, 2009
    Messages:
    1,873
    Resources:
    16
    Maps:
    10
    Tutorials:
    6
    Resources:
    16
    Its ok. It looks better with the changes (to my preference)

    Edited!
     
  12. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,419
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Great! Approved.