Full Icon Tutorial (Reforged) + ¨tool¨

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
fade-seperator-png.362941


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.


fade-seperator-png.362941


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.


fade-seperator-png.362941


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.


fade-seperator-png.362941


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)

fade-seperator-png.362941


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, ATTReplaceableTextures\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!



fade-seperator-png.362941


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]
 

Attachments

  • Icon Template - Reforged.psd
    737.1 KB · Views: 289
  • Photoshop DDS Plugin x32.zip
    13.9 MB · Views: 148
  • Photoshop DDS Plugin x64.zip
    15.2 MB · Views: 383
  • scorescreen-hero.png
    scorescreen-hero.png
    16.1 KB · Views: 383
Last edited:
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?
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
 
Level 2
Joined
May 4, 2017
Messages
4
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).
 

Attachments

  • SSHBTNAzureDragonJudicator.dds
    5.5 KB · Views: 51
  • scorescreen-hero-dreadlord.dds
    5.5 KB · Views: 44
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:
View attachment 350410

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).
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.
 
Level 8
Joined
Mar 17, 2016
Messages
132
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:
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


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


Well, have you found how to make custom score screen icons (SSC) work in Reforged?
Added score-screen file!
 
Last edited:
So is 256x256 the new resolution for Reforged icons?
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.
 
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.

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.
 
Where is the link for the tool?
I can't see it.
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
 
Great tutorial! Love the layout and thanks for going into detail on the differences between classic and reforged icons. Approved!

One tiny technicality:
Also noteworthy is that .dds is much smaller in file-size than the abomination called .blp

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
 
Can anyone show me an example between a DDS icon and a BLP Icon both in ingame sizes ? (aka 64x64)
DXT1 at 2.8KB
DXT5 at 5.5KB (slightly better quality)
BLP at 14.1KB (created via WarCraft 3 Viewer from original image)
 

Attachments

  • DTX1.dds
    2.8 KB · Views: 34
  • DXT5.dds
    5.5 KB · Views: 53
  • BLP.blp
    14.1 KB · Views: 40
Level 12
Joined
Nov 12, 2016
Messages
639
DXT1 at 2.8KB
DXT5 at 5.5KB (slightly better quality)
BLP at 14.1KB (created via WarCraft 3 Viewer from original image)

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

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!


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.
 
Mind making the Gimp tutorial?
Are the icon borders available?

My icon borders also work for GIMP since it's a .psd file.

Export as DDS, remember to generate mipmaps and save as BC1 / DXT1
I'd say just switch to Photoshop, there are ways to not go broke doing so, just ask the one legged, one eyed man with a parrot on his shoulder.
 
Level 6
Joined
Jul 20, 2018
Messages
134
Do we have a button maker yet for reforged?
I started to develop such one last year, but now I abandon this project, may return later.

Basically, the app works: you can add your own borders, apply them and save as .dds (you need to type extension manually). But there is no binary file in the repo and no proper documentation (only demos in course files which can help you in understanding). Also mass button application is not implemented as well as a lot of other features I wanted to add.

If you are interested, I think, I can compile the project and attach binary file.
 
Level 2
Joined
Mar 28, 2008
Messages
14
If we followed all these instructions and the icon still won't show, what could be the problem? I'm trying to use this one:

Lich King (Reforged resolution)

My only guess is that it has something to do with the fact that it hasn't been approved yet. This is also the first time I've tried to import and use .DDS in World Editor.
 
Level 6
Joined
Jul 20, 2018
Messages
134
Importing
Well, this is not correct at all. All prefixes expept DIS are useless. And only DIS icons must be imported in ReplaceableTextures\CommandButtonsDisabled. It is a shame to see that such outdated info was written in 2020.

If you have active, passive, autocast icons for the same spell, you can create and import only one DIS icon for them all. Let the spell have name Ashes.
So, you import:
active icon by path literally-any-path\Aches.dds
passive icon by path any-other-path\Aches.dds
autocast icon by path another-path\Aches.dds
Now you need to import DIS icon by path ReplaceableTextures\CommandButtonsDisabled\DISAshes.dds

This is it. Now three different icons use only one DIS icon.

This way also allow to use only one DIS icon for all icons. You can import icons via next pattern any-path\real-icon-name\Icon.dds. Then ReplaceableTextures\CommandButtonsDisabled\DISIcon.dds will be used for all icons imported via described method.

Now with increased map size this makes little sense, but even the original guide of year 2007 did not describe this. This is very unfortunate, because the method I described was found in 2005.

I use such structure in one my map.
1626466754011.png

1626466787790.png
 
Level 2
Joined
Jun 4, 2013
Messages
22

@Moonman Thanks but how do we create the "DISabled" filter? It's been mentioned all along but never explained, we didn't have this problem before with "Button Manager", I would've expected you to put a layer on purpose among the other examples but it seems you didn't. Or did I miss something? :confused:

 

@Moonman Thanks but how do we create the "DISabled" filter? It's been mentioned all along but never explained, we didn't have this problem before with "Button Manager", I would've expected you to put a layer on purpose among the other examples but it seems you didn't. Or did I miss something? :confused:

The DIS is a whole group not just a layer, I'm very sure that it's included.
 
Level 2
Joined
Jun 4, 2013
Messages
22
The DIS is a whole group not just a layer, I'm very sure that it's included.

My bad, I figured it out, sorry :) But maybe adding just a screen of this step with an annotation would be nice for the following ones who like me would be a bit confused.
 
Last edited:
Top