Customize/Make your own UI

[thegraynobleman]

Hi.

There really isn't any real need for a topic like this, but i am sure that there a re people out there who wish to skin their own textures to their UI, so i thought i give them a helping hand.

I won't be covering the whole creation of the visual part of UI, because explaining every single option, trick, hint when creating graphics with some software would extend this post 10 pages long. I expect you the reader, to know where to look for tutorials, and have some knowledge of your own software.

What you need

I'll cover few Addons witch i consider to be core add ons when creating the visual UI, Since these Addons are the ones that has most impact on the cosmetics of you UI. Rest of the Add ons comes through a need for a some particular functionality, and little to none effect on the looks of the final product.

EePanels. The most important of them all. This is the one you'll be texturing later on. It is important to remember that all texture files you create, must be in resolution where height and width are equivalent to Power of 2(i.e 16*16, 32*32, and must be saved in 32-bit uncompressed Targa format(*.tga) . Also you can use alpha channels with Targa.

Bartender/Bongos/Trinitybars etc.. Any kind of Addons that allows you to move and modify your actionbars. cyCircled to texture to texture your buttons on your actionbar (Not mandatory)

Simpleminimap/Squeenix etc... Addon that gives your minimap some modification Options and disconnects it from default location giving you the opportunity relocate it.

Chatmod. Not mandatory, but has some nice features that gives you some liberties when creating an UI

Photoshop/Paint shop pro Corel Draw etc.. Some graphic creation software.

Step 1. Preparation

First thing that i do when i decide that i need a new looking UI, is that i goto wow, hide old UI only actionbars and minimap visible, and take a screen shot. I also take another screen shot with nothing on it.

After this i goto PS (I'm covering this in Photoshop POV since that is what i have), open up both of the screen shots i took earlier, and cut out actonbars and minimap from the 1st screenie and paste them to 2nd on new layers. Why? So that ill be able to move them around when i start designing.

Now, we have our “canvas” ready, and there's only two more things that needs to be done before the artistic creation of UI Can be begin. First of all create new image file size 512*512 8-bit color depth and 72dpi select default Background to transparent and color it full red. Then copy this layer to your “Canvas” on a new layer And place it to bottom left corner. Color the 512*512 image to Green, copy to “Canvas” and place next the red at the bottom.

Repeat this Process (with new color every time ofc) until you have whole bottom covered with clearly different color boxes and make sure they don't overlap each others and that there's no gaps between the boxes. (It takes total of 3 boxes at 1280*1024 resolution).Using 512*512 Resolution is good thing since that size covers most of the image, and you won't need to chop your up coming UI into million pieces. Hide the layers. We just don't need them at the moment.

Step2. Theme and Creation

To this one, i don't have any single answers, it is pretty much up to you what kind of looks you are after. I Can only suggest you to get inspiration and ideas from other UI's (But do not copy them), Images, Nature etc etc... Also if you are not quite sure what to do, Just play around with you graphic software until you come a cross something that looks nice.

After you've come up with some nice theme you wish to apply, you just need to start sketching hard. Remember those actionbars and minimap we pasted on our canvas prior to start? Here's where they'll carry their weight. Designing and giving you some rough idea where you wish everything to be gets a lot easier now, when you can decide that “I want my minimap to be here” or “I think ill have one Actionbar here, one over there” etc etc.

step 3. Finalization

Now that you have your UI done on the canvas, you still need it to be displayed properly in game. For this to happen, there's some steps we need to take.

**If you have zillion Layers, it would be wise to Merge them all into one layer only if you are to have same tranparency value on all of them. Will save tons of trouble later**

1st is to create an alpha channel for our UI to Filter out background of the UI, and you can also give nice translucent look to some parts of you UI. Alpha Channels works like this. Black(TV* 0) means not visible, white(TV* 100) means fully visible and gray scale anything in between. In Photoshop, easiest way to achieve this, is to CTRL+Click on the layer thumbnail to select all, click the channels tab next to layers tab, creating a new channel (Alpha1 by default. No need to change this) and floodfill selection either by the tool or using shortcut ALT+delete to fill with foreground color. And remember that TV on part your image does not affect the final transparency of your UI, only TV of Alpha channel has effect.

*TV = Transparency Value

Now comes the annoying part, Chopping up our UI. If you still remember the 512*512 sized Layers we created and hid, now it's time to make them visible again, and move them to bottom,well under UI layer is enough.
------------------------------------------------------------------------------------------------------------------------
Use “select all” on the 1st layer of 512*512 (I prefer Bottom left to be 1st middle one 2nd ect). At this point you should have Selection marquee rounding the layer, switch layer NOT THE SELECTION to the layer you have your UI and hit CTRL+C. Switch to Final UI Image we created at the beginning and Paste that part of you UI there, and remove any excess layers until you only have the 1st part you your UI on. Now switch “Canvas” and goto channels tab and copy that same part from Alpha1 channel. Swap back to Final UI image, click Channels tab, paste, and you should have your UI's transparency values from “Canvas” at Final UI image.



Before copying next one, we need to algin the 1st part of UI with the Alpha channel. Easiest way to do this is to create new layer, copy the alpha channel to that layer and move it under the UI. Now nudge the UI part down until you don't see any white lines behind it, Delete the layer leaving only the UI layer. After this Save as -> Select eePanels folder from you interface\AddOns folder and name it. Any name will do, as long as you remember witch part of your UI it is. Names such as “left.tga” or “First.tga” are pretty good since these names are easy to remember and you'll know better where to place that later.
----------------------------------------------------------------------------------------------------------------------
Repeat everything between the lines until you have covered whole UI.

Now that you have your UI chopped up, saved in targa format in proper resolution, it is time to go in game and get them visible there.

After you have successfully logged in and entered the world, open up you eePanels menu, and goto global settings. First set the Background color's transparency to 0%, next select border textre to “none”, set width and height to 512 and hit enter.

Now create new panel from global settings, move your mouse over to 1. > and you should have panel popping up witch has same options as global settings panel+ few more. Now goto Background texture and enter this line: \\Interface\\AddOns\\eePanels\\<name of your 1st texture file>.tga. If everything went right, you should see your 1st part of your UI In the middle of screen. After this Name the panel, and move it to place using vertical and horizontal Position, and repeat again until you have all your textures visible and aligned. Remember that when you are aligning the parst of your UI, it's the eePanel's top left corner witch is anchored, menaning that if you try 0 on Vertical and horizontal aligment, you won't be seeing your panel and when you change the size of your panel, it expands down and right.

*In Latest eePanels, you first need to check Advanced Mode Before you can apply custom textures to them.

After this place you minimap, actionbars and chatboxes to their designated places and take a moment to Congratulate your self on job well done.



Links:

World of Warcraft AddOns Downloads Forums News Blogs Guides Videos Screenshots | World of Warcraft @ Curse.com
WoWUI @ IncGamers - World of Warcraft Mods, Addons, and More!
Main Page - WowAce Wiki
World of Warcraft Addons - WowAce.com
http://koti.welho.com/mvuori/pics/Cu...reTutorial.pdf

Photoshop tutorials:

Good-Tutorials / Photoshop Tutorials + Flash Tutorials
Adobe Photoshop Tutorials - Tutorialized
Photoshop Tutorials - 3D Studio Max, Maya, Lightwave, Bryce and Cinema 4D Tutorials


And remember to take your time to get familiar with different filters and their functions.

[theawpspy]

me no like wall of text death

[Quale]

..nvm site is masked, can't link it here

[Imbecill]

It was nice but alot of reading

[Bahamu]

..or you can just download highly configurable mods like I do!

[Krillere]

Come on. Rep him, he did a damn good job!

[dffrntdnl]

May I also recommend the GIMP? it's a free image manipulation software (Intended for Linux users, but has a Win32 port as well) that is definitely as powerful as photoshop!

[thegraynobleman]

Sorry for the wall of text guys =P

It can be difficult but amazingly rewarding to do your own addon templates and such.