Back to home

Thursday, March 19, 2009

The art of the UI

How to make your own user interface look like something completely different by using eepanels.

This is not the expected post about the different addons I am using. This post is about one of them, name eepanels.

Basically eepanels adds square pictures (tga files) to your interface. For some parts of the file the seethrough has been set to 100% so you just see the normal game.

The first interface I did with this:

I thought it would be fun to have gaps in my UI. Well I can advice you, don't! The text is often unreadable. A unicolor background (dark) is best. For this design I took a picture of lightning, added some effects in photoshop and cut it out.
Note I was resto at that point.

The second design.

I got myself a logitech G11 keyboard. If you ever need a new keyboard. Get one of those as well! (Link to logitech). That resulted in me wanting to have a visual representation of the 18 extra keys to the left. So I did that. I used some screenshots I made for this. Me in breaform and a huge barely visable closeup of flightform in the center. Didn't really like the colors and I wanted to use redesign my UI with having myself and my target in the center to the bottom. So I made a frotsmourne/WotLK themed UI as you can see below.

This is the first version. I edited it all a little bit later, like the chat font. For this I drew the stalactites with my bamboo and added some shade effect to them. The snow is also some photoshop effects layers thing.

At this point I found myself wanting more buttons. I was short on bars (2 bars for caster form, 2 for bear and 2 for cat) leaves you with only 4 more bars to use. Since I wanted 3 different sets of buttons to the right it required stance bar, and 2 extra bars. I had button paging (ctr) on the center bottom left bar. So that was my last bar.
I really wanted to use my F1 to F12 buttons to set general (also not often used) spells in. I dont use F1 to F12 for anything so why not utilize that?

by that time I was pointed at Macaroon. It is a great, or rather was. The thing it does, it allows you to make a large number of bars having x columns and y rows, or even in circle form (around a round map for instance. You can drag icons in it and instead of a real button it creates a macro, but it works exactly like a button even with keybinding. You have to look at how to use it because instead of a macro the button can also represent an original button. Anyway with some tinkering you will find it out.
This lead to the following UI initially. Every button was macaroon.

The design isn't that great, I just didnt feel like investing a lot of time in it.
However, don't use macaroon for everything. If you jump on a vehicle macaroon will stick there. You won;t be able to use the vehicle. So the main bar(s) 1-12 (in my case "1-6/alt1 - alt6"-bar and the "7-=/alt7 - alt="-bars). should still be bartender.
The rest can be macaroon, no problem... wait yes problem.
When I want from 3.0.2 to 3.0.8 it crashed. Aparently I had to backup something in the WTF folder before installing. To repair it i had to edit the addon;s code but it was way to irritating to me. Not that I am too stupid, I just thought this was bloody idiotic. So instead of trying to repair I hoped for a new version. I eventually gave up. In 3.1 I might try and install it again. Hopefully it works.
So I replaced all with normal barender again which lead to the current UI as seenbelow.

Now you might be wanting to use eepanels yourself but have no idea how to do that. Here is a manual I used. Enjoy!


  1. A lot of those UIs are really pleasing to look at. Nice =)

  2. /agree Karthis

    I've been frustrated with the default user interface more and more lately, and will definitely look into this, though Miss Manners swears by Grid. We'll see.

  3. Yes I love my widescreen!
    And I am female now? Why not mister manners?. Well I at first did not like grid at all. But with some addons to grid it is mega useful and way better then others (imo). I'll make a post on all my addons first and then later one more on grid if you'd like ;)