Tutorial Change the UI appearance

linamus

I r bak!
Reaction score
57
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.

laah7xob81n111dyzkw.jpg

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

izfur0cx5r9auyv6pdx.jpg


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:

0irmqnc9d127vhc98guz.jpg

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:

8snxff4d09z35yv6kp.jpg



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

r4se4ek485fyoooh71f.jpg

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):

y9mv0wrrpzk4cxpttuy.jpg


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

bcqtl4zpaycaagc54mms.jpg

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:

c018lilb4gy8ysdwyik.jpg

Continue same steps for other parts of UI tiles.

r7nviqqpea3tlxwp0wfx.jpg

qfbbilksjatlip9i.jpg

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:

gd08kjo6cjj9aou5s81.jpg

Repeat same steps for third and last UI tiles

b6zcwadzcxmu7oio5jm.jpg

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.

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

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

That's our UI without target:
ymk837d4wqj5gn65gu6h.jpg



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:

mmon7m2rtpvrncycjgqv.jpg

46s7vf9skjbpm1aooupq.jpg







___________________________

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

Ghostwind

o________o
Reaction score
172
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

SC2 Forum MVP - TheSkunk #386
Reaction score
186
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. :)
 
R

Ravenore

Guest
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 :(
 

PurgeandFire

zxcvmkgdfg
Reaction score
509
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. :D

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.
 

jonadrian619

-___-
Reaction score
240
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).

TsoT_UI.jpg

Thx guys!!:thup:
 

linamus

I r bak!
Reaction score
57
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]
 

Daskunk

SC2 Forum MVP - TheSkunk #386
Reaction score
186
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.. :p
 
R

Ravenore

Guest
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:
question1hk0.jpg

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 :eek:

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

linamus

I r bak!
Reaction score
57
When you import UI files, you don't need to specify custom path.

logkaczvrk1tz1j5r53.jpg


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

Super Moderator
Reaction score
963
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 :D
(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 :p

+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

I r bak!
Reaction score
57
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 :D
(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 :p

+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

Super Moderator
Reaction score
963
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.
 
R

Ravenore

Guest
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 :D
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top