#0 - May 12, 2007, 9:17 a.m.
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. Oh and i also wish to give something back to community witch has given me so much <3
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 (Settings:http://koti.welho.com/mvuori/pics/Custom/Pictures/new_file.jpg & & http://koti.welho.com/mvuori/pics/Custom/Pictures/Transparent_BG.jpg) (we can call this one final UI) and color it full red. Then copy this layer to your “Canvas” on a new layer And place it to bottom left corner (http://koti.welho.com/mvuori/pics/Custom/Pictures/Layer_Copy.jpg). 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 (http://koti.welho.com/mvuori/pics/Custom/Pictures/Targa_32.jpg), 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 (http://koti.welho.com/mvuori/pics/Custom/Pictures/positioning.jpg), 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 (http://koti.welho.com/mvuori/pics/Custom/Pictures/eepanels1.jpg) Before you can apply custom textures to them (http://koti.welho.com/mvuori/pics/Custom/Pictures/eepanels2.jpg)
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:
http://wow-en.curse-gaming.com/
http://ui.worldofwar.net/
http://www.wowace.com
http://files.wowace.com
http://koti.welho.com/mvuori/pics/Custom/TextureTutorial.pdf
Photoshop tutorials:
http://www.good-tutorials.com/
http://www.tutorialized.com/tutorials/Photoshop/1
http://www.totaltutorials.com/
And remember to take your time to get familiar with different filters and their function.
Am i missing something? Got anwers that needs question... i mean, got Questions that needs answers? You are not quite clear on how to proceed at that one point? Don't be affraid to ask, i'll answer to my best knowledge.
SIncirely Demisirius
P.S Sorry for any typos, English isn't my native tongue and when looking at the images i added, take your time to read the name of the image in url box your browser.
*EDIT* Working as intended with eEpanels2
