Tutorial Change the UI appearance

[linamus]

Ellow again, to my 3'rd tutorial.

What is this?
It's a guide how to change your warcraft UI tile appearance via photoshop, or any alternate program, such as Ulead or Gimp

Tools:

A photo editing program (I use PhotoShop) ((Program should save .tga files))
Wc3 Image Excractor II

Basic knowlegde of extracting/importing with .blp files, and working with photoshop-type programs

Getting Started​

Open Wc3 I.E II
Open war3.mqu with this program.
Use Search, and type "UI\Console\Human\HumanUITile0"
Take and Save ...01.blp ...02.blp ...03.blp and ...04.blp
Search again for "UI\Console\Human\HumanUITile-In"
Extract found result.

Photoshop'ing​

Open all four ...0#.blp UI tiles.

Spoiler

Using Magic Wand tool, or any other that can select areas, remove all black zones from all four pictures.

Spoiler

Now create an large new image, and drag all four edited ones there. Try to attach as eachother as much as possible. (don't delete used ones) It should look like this:

Spoiler

It is very ussefull if you would change every part's opacity differently, so you can see all edges where pictures connects

Let's Get To Work​

Find any picture you like, who would look good as new UI tile.
I will use this one:

Spoiler

Move this pic to your workstation, and try to attach so it with the UI tile.

Spoiler

I've flipped pic horizntal, and mathed Left, Right, and Bottom. (don't scrimp the Sky, it's still not as neccesary as bottom, so picture height is allmost pointless)



Choose Rectangular Markquee tool. Delinate the first UI tile, opacity difference will help you (chosen layer still is new picture):

Spoiler

Drag this cutout into HumanUITile-01. Change opacity, so you can clearly see both layers

Spoiler

Choose New picture layer. Now delete the sky, or whatever else who goes over Tile. Then delete Portrait mask, and Health/Mana bars.
If minimaps is neccesary, delete it also. I will keep new minimap picture, but will reduce it's opacity by 80% (for some reason setting below 80% won't show in-game) (choose rectangular minimap area, then "Layer Via Cut") Also I will keep command bar (that one next to minimap) covered with new picture.
Delete that original UI tile parts, who is over new picture. After all job's done, we have a part of new UI tile. Swith opacity to 100%, save as tga, open with Wc3 I.E II and save as .blp (keep same name so you won't get lost)
Open WE, open your map. Import your first UI tile. Path isn't neccesary. Go to Advanced -> Game Interface. Select new UI as "Image - Console Texture 1"

Save and go:

Spoiler

Continue same steps for other parts of UI tiles.

Spoiler

Spoiler

Now delete Portrait mask, mana/hp bars again. For that board where's unit's damage/armor/stats used to be, I'll change picture's opacity with 80%. (layer via cut)

Repeat saving/importing steps.

Here we go:

Spoiler

Repeat same steps for third and last UI tiles

Spoiler

Now one more part:


Pick HumanUITile-InventoryCover.blp [This is texture when no unit or unit withour inventory is selected]
Remove black parts.
Move it where your previous UI tiles + picture was. Attach it.

Spoiler

Sorry this picture messed up. I've moved InventoryCover, attached like it should be there, and selected proper image point with rectangular marquee tool

Select area, and move it to the origin. Delete areas, change opacity again, etc etc, repeat.

That's our UI without target:

Spoiler

Well, this is the end. I think I've explained too lame, and most of you didn't got it. And this UI tile I've made may not look good, couse it's just an example. Lemme show you which custom UI I've done with my tLoW:

Spoiler

Spoiler

___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

 

[Ghostwind]

I love you. But I find that it's better to make a UI out of borders etc. like the original Blizzard interfaces, because pictures tend to get cut off easily.

 

[Daskunk]

I was making a robot UI once, but becuas of my not-very-good photoshop thing, I never got it to be transeparent...

Anyways, this may be a helpfull tutorail for some people.

 

[Ravenore]

Maybe this sounds a bit dumb (I am new at this modding trend), but, do this change the whole interface if, for example, I play again the Human Campaing within the game? Or do only affects the custom maps to where I import these files?

If so, is it recomended to save a backup of the original files? I don't want to screw up my game if I do something wrong

 

[linamus]

It affects only the map you've imported files to. No backup is needed, only simple 'reset value'.
Welcome to TheHelper.







___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style
Ever saw person in Bnet who types "whosyourdaddy"? I saw, lucky me

 

[PurgeandFire]

Does the black portions have to be transparent? Because I have this wicked awesome UI I made and I need to use it for my map. And wc3camp is down so this is my lucky day.

And when I import it, it just shows black for half of the left portion, then nothing above that half.

Great tut though, I think I am just having troubles importing.

 

[linamus]

You need to remove black parts
If you want I can import UI tiles for ya






___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

 

[jonadrian619]

I've written a bigger tut about that one as well which was deleted w/ that damn HD failure in my laptop. I'll redo it but upload it to THW and modding hub, you uploaded it in TH.net and you were first. Anyways this tutorial will be helpful to those who want to make cool stuff w/ their mods and maps, +rep.

For the black parts you need to make an White alpha channel in the Channels window and pick out the black areas using any Lasso/magicwand tool then go to the alpha channel and fill it w/ color black. White alphas are visible and black is invisible. If those aren't removed you'll never see the graphics in-game.

Well this is a tutorial so you have to use [Tutorial] instead of [Skinning] (unless if it's allowed). If this might get approved then it could be moved to Game Interface or other categories.

I'm also good at graphics and interface modding (known by my Game Interface tutorials) Here's the UI I've created from scratch for my mod TSoT (WIP).

Thx guys!!:thup:

 

[linamus]

Deleting black parts works same as you more complicated way.
You UI reminds me Warcraft I ^^ gj
I think we should creat UI contest or something heh.


[wap]

 

[jonadrian619]

You UI reminds me Warcraft I

Actually it's a UI for a Dune RTS mod.

I think we should creat UI contest or something heh.

Might be possible...

Thanks..

 

[Daskunk]

I think we should creat UI contest or something heh.
[wap]

Probably only 3 people would join, or at least only that many people finish. Maybe only 2... Thats what im betting anyways, Not very many people skin here, much less whole UI's..

 

[linamus]

Totally yep. And that's sad


[wap]

 

[Ravenore]

It affects only the map you've imported files to. No backup is needed, only simple 'reset value'.
Welcome to TheHelper.
___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

So, if I do this:

What I pointed with the red arrow will not happen permanently on the game but it will happen temporally for the loaded map?

Sorry, I'm just too afraid of the ambiguous warning messages around the World Editor (and still I'm learning).

Thanks for the welcome

PS: What's that "reset value" anyway? A variable I must to put somewhere? :?

 

[linamus]

When you import UI files, you don't need to specify custom path.

Go to Game Interface, select Console texture, and select imported file as that one.

Reset value means setting UI back to normal it was before

And every import will affect only the map it was imported into

Happy Skinning





___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

 

[Romek]

You need those alpha channels to make parts of the skin visible/invisible.
Like the minimap for example. you're one would be confusing.

Also, You're skin is pretty rubbish, no offense
(I'm assuming the Second one is supposed to be good?)

Ohh... Thats awesome. You should submit that to TheHive/Wc3C/Here.
I'd probably use that

+Rep


Edit:
Also, You should show how to change the clock thing. your land of wanders has the human one.
And as for the alpha channels, See how you're land of wanders one cuts off the leaves in a straight shape?
Thats because of the alpha channels [again] They made the top of the skin into the human shape.

 

[linamus]

You need those alpha channels to make parts of the skin visible/invisible.
Like the minimap for example. you're one would be confusing.

Also, You're skin is pretty rubbish, no offense
(I'm assuming the Second one is supposed to be good?)



Ohh... Thats awesome. You should submit that to TheHive/Wc3C/Here.
I'd probably use that

+Rep


Edit:
Also, You should show how to change the clock thing. your land of wanders has the human one.
And as for the alpha channels, See how you're land of wanders one cuts off the leaves in a straight shape?
Thats because of the alpha channels [again] They made the top of the skin into the human shape.

So you don't like this tut?








___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

 

[Romek]

So you don't like this tut?








___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style

The Tut is OK. It's not very accurate though. It doesnt explain alpha channels. And you need them to make a good UI. It is the reason why your skin is quite flag with 'bumps' in regular places. Thats the human one.















_________
This is a random sig I felt like doing.

 

[linamus]

Allright


[wap]

 

[Ravenore]

Anyway, thanks to your insight I ran creative last night, and started to make my first provisional skin for my future fan-fictional campaign. Here the sample:
It is provisional and may be retconed until I get a better hook about how to make it better to the eye and friendly to the game

Still I need to test it today. The inventory layer is not shown, and I will also customize the sun-moon transition picture and the buttons for the Menu, Log, etc. Hell, I want to edit everything (just I'm worried to run out of Warcraft resources... then I guess I will need to create my own fresh ones by modelling and drawing by myself; thing I see pretty encouraging )

Best regards, and thanks again for the tut

 

[linamus]

That UI is fuckin' bets of awesome goddest omg perfectness omg lol...









___________________________

Best Ideas Comes When You're Not Thinking
-> The Land Of Wonders
-> Simple Equipment System TuT
-> Enhance Your Terraining
-> Change Warcraft UI Style
Ever saw person in Bnet who types "whosyourdaddy"? I saw, lucky me