As we are looking to add new Guides, this is a repost of my original UI guide that was posted on World of War.net. As time permits, I will add more based around Warlocks and so forth.Stigg asked many moons ago on a different forum and I'm utterly powerless to resist his requests bar one. (I'm NOT transferring to Kalecgos :wink:) The starting point is to visualize the concept. Putting my characters underneath a glass dome with a more minimalistic approach to the textures seemed kinda cool, so I went with that.

Because of the amount of time I've spent playing with this layout I know my character and party unit frames will go in the top left, my combat oriented section goes top right with chat and minimap in bottom left and bottom right respectively.

The first step is to pick all the mods you need to make the non-textured portion of the interface work. Note though, Tanitha did NOT follow that maxim when creating this interface. My original intent was to use PitBull and Bartender, but after the first incarnation was done I discovered this would not quite work.

For this interface I used:

• Dant's ZmobDB models for the units.
• Trinity Bars for the buttons and bars. (Not used originally)
• PitBull for the unit frame data
• FuBar for my bars at the top and the bottom
• eePanels for the textures

Get the layout and location of things right in the first place. Make sure it works for you in the game and this means testing your hotkeys, making sure you can click the buttons when you're feeling lazy and that things aren't too hard to reach. Yes, this does mean you have to go hunting for a Gnome to punt around or some innocent Night Elf Hunter just ambling along with their pet and smelling the daisies, but their corpses are contributing to the greater good. If they only knew they'd be thanking you for allowing them to participate in this noble endeavor.

Once you have the basic look create a new Photoshop document and make it the same size as your screen resolution. Create your first layer as the screenshot you just took of your in-game interface. Wait? Yes, I'm sure I told you to take a screenshot before you exit World of Warcraft. You must have missed reading that bit.

Disclaimer: I know nothing about Photoshop. Gormash has sent me lovely tutorials which I read, but they all made a swoosh sound and messed up my hair.

For your next trick you need to find some textures to use. It helps if you've thought about a general theme for what you want. My unreavealed source for filters is here. You have a bucketload of options there. Now comes the difficult bit, creating the look you want. The biggest trick I've learned is the proper use of selections and very, very deep zooming when editing or erasing. To make things easier, I will explain how I made those round, transparent sections. Then you can take it from there and let your creativity roam free.

First, the texture I wanted to use was this one. So load that image into Photoshop (I'm using version 6) and go to Edit -> Define Pattern. Give it a simple and easy to remember name. Now you have a pattern you can use to fill areas. We're going to be using different layers, because that makes editing separate pieces a lot easier and neater and we'll be adding layers to sets so completed UI elements can be moved as a collection. So, on the Layer toolbar click the button that looks like a Folder to create a layer set and then create a layer within that layer set. Remember to give them smart and useable names. Our first layer is the "Unit Frame" layer.

So, select that layer before picking up the Selection tool and drawing a circle. Once you've got a circle, pick the Paint Bucket tool and from the menu change it to "Pattern" rather than "Foreground". Select your just created pattern and fill the selection area. Now you have a very rough textured circle and it looks a bit blech. We really want to funkify it and with only negligible artistic talent I've found that playing around with Filters makes it a lot easier.

So, right click on the "Unit Frame" layer and pick Blending Options. Begin by selecting Stroke right at the bottom and adding a 2 pixel wide black stroke around your circle. That gives it a clear, defined look. Because we want this to look 3d, we add a simple bevel to it. So pick Bevel and Emboss and play around with the settings there until you find a look that pleases you. I went with "Inner Bevel", "Smooth", 100% deep going up with a size of 0px and a soften of 3px. My original image was a little dark and I was looking for something a bit smoother, so I added an Inner Glow with a Screen blend mode, 75% opacity and a Steel Bar gradient. The basic idea is to play around with those settings until you find something that works well for you.

So now we have a pretty looking blob on the screen. But we actually want to see through this thing, so - let's cut a hole in it. I would challenge you to drawing a circle exactly 15 pixels within the border of that one you just drew, but I suspect a few of you are just as insane as I am and would manage this without any problems. Instead, the cheater's way is to manipulate your selection. Click Selection -> Modify -> Contract and contract the selection by 15px. Then press the big and scary Delete button on your keyboard. Because you have your blending already setup, it should automatically adjust and add the shadows / bevels / whatever else for you. A neat trick for this is to fill a large area and to use the eraser to "draw" your interface element. It's quite fun and looks good, a bit like stirring the sauce through spaghetti.

Add the Paladin effect next by creating a glass bubble. We need a new layer so go ahead and create one for "Unit Frame Glass" and drag it underneath the "Unit Frame" one. (We want the frame to overlap a bit, so go ahead and modify the selection again - this time expanding it by 5px. We're working with layers so you shouldn't hurt your original frame by doing any of this. Providing you have the right layer selected. And if you don't, well - Alt-Z for stepping back into history is your friend :grin: Change your Paint Bucket tool into a Gradient tool and pick a nice looking gradient. I used the default "Matte Sphere" one, but several in their default list looks sexy. Now drag the gradient in your selection from where your light source is coming to where it is going. It will apply the gradient in that direction going from the leftmost colour to the rightmost colour. Doesn't matter if you overshoot a little, your selection will protect you from colouring outside the lines. You should have something that looks vaguely like this now.

The last step is very easy. Simply select the blending option for this layer and set the transparency lower. I put mine to 55% for the Unit Frames and 25% for the minimap. You can go into the Filters -> Rendering menu to add lens flares if you like. They feel a bit tacky, but I love them on the glass. And there you go - you now have a Photoshop image that represents your interface.

Now go away and create your interface in Photoshop. In the next blog post I'll tell you how to save, export and get these textures into World of Warcraft. You are now stuck with a beautiful picture in Photoshop and have no idea what to do with it? Welcome to my world for the first few interfaces I dabbled with. This is where eePanels becomes a must. So download and install that and we'll go from there. I'm currently at work, so forgive me if I get things wrong a bit but you'll just have to wing it off my rather vague and incoherent instructions.

The first important thing to remember is that World of Warcraft will only load 32-bit .TGA files with a proper alpha channel that is sized into a power of 2 dimension. (E.g. 32x32, 64x64, 128x32, etc.) To make my life easier I create a series of guide rulers across the Photoshop image, each 256x256px and cut from there. We're going to do this now. So, drag your guides into place or use the menu to create them with pinpoint accuracy. Make sure View -> Snap is on and begin selecting each block in turn, creating a new file and pasting that chunk into it. I choose "friendly" names like A1, A2 through to D5 for my interface grid. Be aware though that Photoshop thinks it's clever and will adjust the image size to discard transparent pieces so you might end up with an image that is 256x197 or something weird like that. Make sure that they follow proper sizing - 256x256, etc. Once you have a group of little files that contain your main layout we begin the tedious process of converting them into .TGA files and adding alpha channels.

Now alpha channels had me very, very confused in the beginning. That is what tells World of Warcraft which bits of your texture is transparent and for an alpha channel the blacker it is the more transparent it becomes. White is opague. But I was struggling so badly with the creation of this that I worked myself into a ritual of Create Alpha Channel, Create Alpha Channel, Delete Alpha Channel, Paste, Create Alpha Channel, Delete because I was convinced that sequence was making things work. It didn't. The trick is far simpler. On your layer pane, select the entire image. Copy that and switch to the Channels tab. Make sure that your background colour is black and click the Create new Channel button. It looks a bit like a turned up corner sheet of paper. You should now be the proud owner of a horrific looking black screen.

Paste your image into that AND DO NOT DESELECT anything. Make sure your background colour is black and press Ctrl-Shift-I to invert the selection. This should select the entire transparent portion for you. Now press DELETE on the keyboard. Partially transparent sections should show up in a variety of grays. Invert your selection again (Ctrl-Shift-I) and flip your background colour to WHITE. Press DELETE once more. You should have seen the changes as illustrated above. If it looks roughly like that, congratulations, you have a proper Alpha channel. Now you can save the file again and save a copy as a 32-bit .TGA file. Again, if you've managed this - you rock! I struggled my little butt off on this one and might still be doing it wrong for all I know. But this works for me.

Next step is to get them into the game itself, so copy them to a friendly folder. When eePanels looks for images it looks from your World of Warcraft installation folder so the deeper you make it the more you will have to type. Of course, if you're anal about organizational like me, you put it in G:\Games\World of Warcraft\Interface\Addons\eePanels\Images\. Either way, dump all those .TGA files you are going to need somewhere. There are a few things you need to know about the way panels are organised.

They have multiple layers, just like that Photoshop image. It goes from "Background" (Where we are putting most of our textures) through "Low", "Medium", "High", "Dialog" and "Tooltip". Secondly, if you go into Video or Interface options you will find a UI Scale option. This determines how much your pixel conversion is going to be off. I've not yet had the patience to work out what this translation formula is, so I end up guessing what the panel sizes and positions must be. This is a bit of trial and error. But now you want to basically:

• Create a new panel based on default settings
• Set it's height and width
• Set it's position
• Set it's background texture to your image, using a path relative to your installation (E.g. Interface\Addons\eePanels\Images\a1.tga in my case)
• Set it's background blend mode to Blend or Add (I can't remember which one, I think it's Blend or Add)
• Set it's strata to Background
• Repeat this for each texture element you have

This is the most frustrating bit, because it is largely trial and error. My recommendation is that you do one row and one column first, so you can get the right sizes. Then you can just copy those values for all the other images. Now if you have a fixed layout, like mine, this is easy enough. I've not yet done a dynamic one that shows / hides panels so you will need to work out how to handle that all by yourself or wait for me to implement the party frames and target frame (That horned thing you saw in the previous post) so I can tell you how it works.

And that is it, in a nutshell. I ended up with something like:

and even now the desire to tinker and change it just that little bit more is still there. It's a never ending evolution once you begin mucking around with this. Have fun and let me see what you come up with please!