1. Find your way through the deepest dungeon in the 18th Mini Mapping Contest Poll.
    Dismiss Notice
  2. A brave new world lies beyond the seven seas. Join the 34th Modeling Contest today!
    Dismiss Notice
  3. Check out the Staff job openings thread.
    Dismiss Notice
Dismiss Notice
Hive 3 Remoosed BETA - NOW LIVE. Go check it out at BETA Hive Workshop! Post your feedback in this new forum BETA Feedback.
Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

Full Icon Tutorial (Reforged) + ¨tool¨

Discussion in '2D Art Tutorials' started by Moonman, Feb 21, 2020.

  1. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    Introduction

    As with many things, Reforged has changed some aspects of icons, so an updated guide is necessary.
    I'd like this guide to be useful for both veteran and new icon-creators alike. Provided are .psd template
    files with all icon borders as well as a .dds plugin for Photoshop. Additionally I will explain how icons are
    to be saved and imported properly for Reforged (which does differentiate quite a lot compared to Classic).

    The correct saving technique has been reviewed and will work for items as well as all graphics settings.

    1. Icon Types
    2. What has Changed?
    3. Getting Ready
    4. Making the Icon
    5. Importing
    [​IMG]

    Icon Types

    If you're really new to WC3 the TLDR is:
    Icons are the buttons for all sorts of things in game, some of them can be pressed, such as abilities or
    actions like attacking or moving via console. Others might be passive (non-clickable) abilities. And then
    there are the attribute icons for attack-type, hero-stats etc.
    Lastly it is important to note that some icons appear disabled when the game is stopped, what actually
    happens is that they get replaced by a DIS version of themselves... but let's just show it all instead:


    btnbearform.png
    disbtnbearform.png
    BTN is a standard icon with a grey border, it's used for active abilities, units,
    actions and research. It requires a disabled version to work properly.




    DISBTN is the disabled version of BTN. Icons appear disabled when the game
    is paused, or it required a research/unit dependency.




    __________________________________________________________________________________

    pasbtnevasion.png
    disbtnevasion.png
    PAS is a passive ability icon that requires no interaction (clicking), example
    would be dodge. It also requires a disabled version to work properly.




    DISPAS is the disabled version of PAS.





    __________________________________________________________________________________

    btnbloodluston.png
    disbtnbloodluston.png
    ATC stands for Auto-Cast, it's used for icons such as Bloodlust. It also requires a
    disabled version to work properly.




    DISATC is the disabled version of ATC.





    __________________________________________________________________________________

    infocard-necromancer.png
    UPG is an icon for upgradable attack/defence-type and caster unit upgrades,
    such as this example with Necromancer training. It has NO disabled version.




    __________________________________________________________________________________

    infocard-neutral-attack-chaos.png
    ATT is used for attack/defence without upgrades and hero attributes (Intelligence,
    Strength, Agility). It also has NO disabled version.


    [​IMG]

    What has Changed?

    First of all, Reforged icons (except scorescreen) are now at 256x256 resolution, which is great news,
    since you no longer need to be making pixel-art! Of course they won't be showing at this resolution for
    2k users, but will keep scaling up to 4k.

    Another good bit of news is their new format, which is a .dds file. Using the attached .dds plugin for
    Photoshop you simply have to save it, instead of needing to convert and what not. Also noteworthy is
    that .dds has a superior compression to that abomination called .blp, so despite the icons having 16
    times the detai... ehm pixels, their file-size will be only about 42 KB.
    (Same applies to skins, but that another topic...)

    They need to be saved in a particular way for them to work on items and all graphics settings, that will
    be further explained in the Making the Icon section. World Editor doesn't fully support .dds, which is
    the format that Blizzard actually uses, so you'll have to manually copy the icon's path in the Object-
    Editor... sigh Reforged fun things.

    Finally SSC or mini icons for end screen no longer exist in Reforged.

    That's pretty much it when it comes to changes. There still is an alpha channel for UPG, ATT and score-
    screen. And all the things for importing are the same as they were before.


    [​IMG]

    Getting Ready

    Before we start, make sure you have Photoshop (yes it's free, you know how and where...).
    If you simply refuse to use it, I'm sure there might be a working .dds plugin for other options, but I
    cannot assure that it will get the job done, so your choice.

    If you have Photoshop, download one of the two .dds plugins attached below, and follow this guide:


    Now that you have a .dds plugin, download my Icon Template - Reforged and scorescreen-hero
    .psd files, and we can get started!

    And lastly, get CascView so you can extract WC3 files and icons you might want to edit.


    [​IMG]

    Making the Icon

    I can't teach you how to draw here, I myself didn't bring my tablet when I moved, so I'm just editing
    existing icons for now. However I can show how to make your art/edit into working icons for Reforged!


    Icon Template - Edit.png
    I made a quick edit combining Devotion Aura and Demolish let's call it: Shield Breaker





    __________________________________________________________________________________

    Icon Tutorial Layers.PNG
    In the template you'll find these icon border layers on the right side. So if you want your
    icon to be a BTN type, just enable the corresponding border layer.

    (Oh, and don't forget that BTN, PAS and ATC will need their DIS variants)


    __________________________________________________________________________________

    Icon Tutorial Save 1.PNG
    BTN, PAS, ATC and their DIS variants are saved without an alpha channel, so pick the
    highlighted option. I'm naming my saved icon like this: BTNShieldBreaker.dds
    And when I made it's disabled variant like this: DISBTNShieldBreaker.dds
    (BTN, PAS and ATC must have the same core names (grey marked) as their DIS variants)
    __________________________________________________________________________________

    Icon Tutorial Resize.PNG
    Let's say you also want to make an ATT type icon. For that you first need to make the
    icon a bit smaller so it looks better in the ATT border.

    (Good idea to copy the icon's layer so you have both... if you ever wanted to edit it later)


    __________________________________________________________________________________

    Icon Tutorial Channels.PNG
    Before you save the ATT or UPG icon, go to Channels and make sure the corresponding
    Alpha Channel is on top of the other.

    (They don't actually need to be ticked, just on top of the other Alpha Channel)


    __________________________________________________________________________________

    Icon Tutorial Save 2.PNG
    ATT and UPG are both saved WITH an alpha channel, so pick this highlighted option.
    I'll naming my saved ATT icon like this: ATTShieldBreaker.dds

    (Same applies to saving of Scorescreen of course)

    [​IMG]

    Importing

    Finally got to the last part! Now the only thing remaining is importing the icon to World Editor and using
    it for something.


    Icon Tutorial Import.PNG
    First of all go to Asset Manager and click Import File (Ctrl+I) and get your icons. Your
    icons will have this path: war3mapImported/... replaced it with a corresponding one
    from the table below:
    BTN, ATC, UPG, ATT ReplaceableTextures\CommandButtons
    PAS ReplaceableTextures\PassiveButtons
    DIS of any type ReplaceableTextures\CommandButtonsDisabled

    __________________________________________________________________________________

    Icon Tutorial Path.PNG
    Once you renamed the path correctly, go to Object Editor and insert the FULL path into
    ¨Custom¨ section of ability, unit or whatever... and that's it, you're done!



    [​IMG]

    I would also like to pay respects to the original Icons tutorial, where I learns much of the things
    mentioned here: Complete Icon Tutorial - All About Icons

    UPDATE: Corrected Scorescreen's name and path to the one Hive uses as SSC.
    This is a text in tutorial only update, the layers
    uploaded are still correct![/stable]
     

    Attached Files:

    Last edited: Sep 30, 2020
  2. DAYDAY

    DAYDAY

    Joined:
    Mar 2, 2020
    Messages:
    26
    Resources:
    0
    Resources:
    0
    Thank you 5/5. Aside question, is there a WOW icons package that can be found on the internet with HD .DDS format for WC3 Reforged?
     
  3. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    No thank you!

    Sorry I initially misread the message. No there's no 256x256 WoW icon pack. Some people made a few HDish icons but that's it.

    I have started making some WoW themes ones, check them out in the icons section. If you have a request I might be able to do it... maybe :D
     
  4. denis318

    denis318

    Joined:
    May 4, 2017
    Messages:
    4
    Resources:
    1
    Maps:
    1
    Resources:
    1
    Well, have you found how to make custom score screen icons (SSC) work in Reforged?
    Personally, I tried to view war3.w3mod:ui\glues\scorescreen\scorescreen-hero-dreadlord.dds from CascView in DXTViewer, it shown me that it's format is DXT5 with 7 mipmaps. So I tried to convert PNG to DDS using Photoshop, with DXT5 format with mipmaps (Michell filter) with same alpha channel as scorescreen-hero-dreadlord.dds (I copy-pasted it), but it still doesn't work in-game, I mean the icon is just blank like that:
    upload_2020-3-25_21-14-57.png

    So it's not working. I tried same with DXT1 and DXT1A, it' still blank even without alpha channel.
    I attach below original file from CascView and my modified one (that icon wasn't made by me though).
     

    Attached Files:

  5. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    Score screen is only the part after the game is over, right?
    Have honestly thought nobody cares about this one.

    Guess I'll have to take a look at this one, ty for pointing out.
     
  6. bruunk

    bruunk

    Joined:
    Mar 17, 2016
    Messages:
    131
    Resources:
    0
    Resources:
    0
    Incredibly useful and well presented tutorial. Thanks, Moonman!


    Edit: anyone know why the icons won't show up in "Import" once in the map's import manager? I have downloaded custom icons from hive and those show up, so why not the self-made ones?


    Edit #2: Every time that I try to save an Icon without mipmaps it somehow completely screws everything up- so much that I almost had a heart attack when I saw that randomly things were reverting from custom to vanilla (eg. a spell based off Infernal actually called down an infernal and had a 180 second cooldown, when its supposed to have a 5 sec one - and randomly my custom heroes had tech tree dependencies again such as keep & castle, starting from the hero with a custom portrait and below for whatever reason). If anyone else experiences this, the fix is simple just save with mipmaps even if it's not intended to be used as an item.
     
    Last edited: Apr 24, 2020
  7. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    UPDATE:
    Save your icons the same way as before, but with Mipmap ticket on.
    This will allow for the icon to be properly used for items.
    You see, once the non-Mipmap icon is dragged it has a distorted texture.

    Without Mipmap: With Mipmap:
    Non-Mipmap.PNG With Mipmap.PNG


    Yes I am aware of this issue, that's because the icons are saved as .dds and not the old .blp.
    Quite annoying if dealing with something as 100 icons, like I have with my upcoming project...
    You'll just have to implement the icon via copy-paste of the full path every time you import it.

    Funny enough if you browse the Blizzard icons with CascView, they already are .dds so why doesn't World Editor recognise this format?

    Blizzard dds.PNG


    Added score-screen file!
     
    Last edited: Apr 23, 2020
  8. Footman16

    Footman16

    Joined:
    Jul 14, 2012
    Messages:
    2,184
    Resources:
    9
    Packs:
    1
    Maps:
    7
    Reforged HD Models:
    1
    Resources:
    9
    So is 256x256 the new resolution for Reforged icons?
     
  9. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    Absolutely.
    I'm assuming this is for 4k users, but on my 2.5k monitor it already looks pretty crisp.

    For icon artists this is obviously a good thing, since much more detailed icons can be drawn...
    Although currently I'm doing more of a recolouring and composing thing, since I don't have my tablet with me.
     
  10. Footman16

    Footman16

    Joined:
    Jul 14, 2012
    Messages:
    2,184
    Resources:
    9
    Packs:
    1
    Maps:
    7
    Reforged HD Models:
    1
    Resources:
    9
    That's good, just need people to start creating more icons for Reforged since the old ones do not look good at all in Reforged.
     
  11. Gino

    Gino

    Joined:
    Apr 13, 2020
    Messages:
    5
    Resources:
    0
    Resources:
    0
    Where is the link for the tool?
    I can't see it.
     
  12. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    Alright, the tutorial has been rewritten, to make it a bit more digestible.
    Please download the new Templates, and follow the saving instructions of THIS tutorial, while disregarding the old ones I made.

    Have fun making icons! :D
     
  13. Gino

    Gino

    Joined:
    Apr 13, 2020
    Messages:
    5
    Resources:
    0
    Resources:
    0
    That's fantastic, thanks a bunch!
     
  14. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,430
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Great tutorial! Love the layout and thanks for going into detail on the differences between classic and reforged icons. Approved!

    One tiny technicality:
    BLP can get a lot smaller than DDS if you use JPEG-BLP with a really high compression ratio! It starts to look like garbage... but it is technically lower file size. But DDS is really well optimized for how graphics engines work today--so it loads a lot faster and usually looks a lot better than BLP! Some nice information in this link:
    Texture Compression
     
  15. Storm Knight

    Storm Knight

    Joined:
    Nov 12, 2016
    Messages:
    545
    Resources:
    0
    Resources:
    0
    Can anyone show me an example between a DDS icon and a BLP Icon both in ingame sizes ? (aka 64x64)
     
  16. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11
    DXT1 at 2.8KB
    DXT5 at 5.5KB (slightly better quality)
    BLP at 14.1KB (created via WarCraft 3 Viewer from original image)
     

    Attached Files:

  17. Storm Knight

    Storm Knight

    Joined:
    Nov 12, 2016
    Messages:
    545
    Resources:
    0
    Resources:
    0
    Hmm2.PNG

    I'm kind of failing to see any major differences. I know some maps need these new icons because they actually use it in full 256x256 glory but i wanted to see if it was justified for me to switch over from .blp for 64x64 regular ingame icon sizes.

    Though i did not go to view these ingame in Reforged. so maybe that's where they shine. or a better example.
     
  18. MageMarauder

    MageMarauder

    Joined:
    Apr 10, 2011
    Messages:
    51
    Resources:
    0
    Resources:
    0
    Do we have a button maker yet for reforged? I just want to plop an icon into a tool and it spit out the different borders for me =) Thanks if anyone knows!
     
  19. Symphoneum

    Symphoneum

    Joined:
    Aug 14, 2020
    Messages:
    41
    Resources:
    1
    Reforged HD Models:
    1
    Resources:
    1
    You can also do this with GIMP. It will open the photoshop file and doesn't need the .dds plugin because it supports .dds natively.

    @Moonman thank you for making this tutorial, it will be very helpful!
     
  20. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    315
    Resources:
    11
    Maps:
    3
    Reforged HD Models:
    2
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    11

    Yes, both GIMP and Photoshop will act as an icon maker.
    Check the guide and you'll see it's basically a plug and play.
    It is up to you if you want to try editing or making an icon art yourself. A good starter would be using official Blizzard art either from WoW or Hearthstone.
    I wouldn't post anything unedited to Hive, but you are absolutely free to use it for your maps of course.