Eepanels2 Tutorial Using GIMP 2.0

[Elloria]

Hey guys! I created a small quick tutorial explaining how to create art in gimp and successfully bring it into wow for user interfaces. Any additions and suggestions are welcome. Its very basic. I do plan on doing more advanced tutorials in the future. Hope it helps you guys. Pictures included!

Elloria's Eepanels2 Tutorial
Using Gimp 2

By: Elloria

Introduction To start...I would like to state that this is my first real tutorial. Please let me know if there are any mistakes. I'm sure there are many ways to use eepanels2, and I'm sure there are several different ways to do things with eepanels2. This is just my interpretation.


So! You want to make a new creation you can call your own. Art in any UI can be a good thing, and it can be bad. With just a few tips the "bad" side can be avoided. If you follow this tutorial you should be able to create art to put ingame and make it look good.


Beginning with the most important part. GIMP 2.0! I love this program. Ive used Adobe photoshop for a while, but I could never really get "good" at it. Just too many steps for my dumb self to understand/remember. Gimp is a totally free program and does probably everything photoshop can do and more. You can get Gimp here at http://www.gimp.org/. The GIMP interface/workspace panel is easy to navigate and everything is self explanitory. You will see screenshots of hard to explain steps in this tutorial don't worry.


The Basics

Wow will only accept certain sizes of images. The two main ones that use when creating art are 256x256 and 512x512. These are the biggest sizes you can use, and have always worked well for me. It must be saved as a .tga file. This is the only image file that wow accepts and uses.

The great thing about gimp is that you do not have create an alpha channel and color stuff blah blah blah.( i really hate those steps) Gimp does all this work for you so you do not have to. Again its why I use gimp over photoshop.

The next part of your image is the background. When you create an image in gimp it MUST have a transparent background. Unless your art is one big square that covers the entire size of the image.



Creating The Art

Here is a screenie of a piece of art that has been edited in gimp and has a transparent background. It's size is 256x256.



Youll notice that the art isnt quite perfect. Sometimes its ok though. This piece of art here is actually part of a big piece. Once it is all put together you don't even notice the sharp edges and cut off leaves. But lets say you do have a piece of art that you need to clean up.



Here we have a vine. But it has a big black background that would show up in wow if we don't get rid of it. First thing I do when I run into a piece of art like this is to use my Fuzzy Select Tool. << Should look like this Icon here. There are settings that allow you to fine tune the tool. Best thing I can tell you is to fool around with these options and find out what works best for your piece of art. The Threshold will determine how much of the object you click on to highlight. I suggest when editing a detailed piece of art with a lot of cracks and crevases us put your threshhold down to 0. That way it doesnt cut out all the black and shadowy areas. It would be best for you to edit this yourself. So when you use this tool it should show the ANTS around the item youve clicked on.

Step one:(See picture below) For a background like this, instead of clicking on the vine lets click on the black area. Once you see the ants (refer to step one image) press control + X. This will cut out the black background.

Step two:(See picture below) Once that is done choose the Rectangle select tool. << Should look like this Icon here. Then just click anywhere in the checkered background area so the ants dissapear.

Step three: (See picture below)Then finally take you eraser tool << obvious :P Clean up the art. Be careful not to erase too much. Change the opacity of the eraser if you want to go lightly at first. Remember Control + Z is your friend. It goes back a step. That way if you mess up you can just start over easily. I recommend erasing small pieces at a time dont drag the eraser too much. That way if you mess up you dont have to start all the way at the beginning. Also the Blur tool is awesome to use << looks like a tear drop. This will soften edges and help blend colors and items together. Don't go too over board with this though. Or your image will look ...well....blurry lol.

Step One:

Step Two:


Step Three:


(See Next Post)

[Elloria]

Once you have cleaned up your art. Remember you can flip, color, texture, render, stretch, resize, highlight to your hearts content. Gimp does alot of very cool things. Take a look at the filters section for all kinds of lighting effects, border makers, logo makers, and lava textures.

When you want to save your art , save it as a .TGA file extension. This will allow wow to read it and show it ingame. Put this file into your Eepanels2 addon folder.




Congratulations you've just created a piece of art for Eepanels2 to use in world of warcraft! Now to put that into warcraft.


Implementing Your Created Art Panels Into Wow


So now that you have created your art work. Log into Wow. If you were logged into wow while making the art you MUST restart wow or the art work will not be available to you.

You may find that using Align and Fluid frames is easy and helpful. Fluid frames helps you identify what panel you have your mouse over. All you have to do is bind it to a key on your keyboard. Or if you dont want any extra addons you can use this /run ChatFrame1:AddMessage(GetMouseFocus():GetName()) in a macro. Will pretty much do what fluid frames does. But with fluid frames you can move things around that normally arent moveable. Align is a useful tool because it puts a grid on your screen so you can line things up properly.

So enough of the tool talk. Lets get to work. I use fubar so in some of these screenshots your going to see a drop down menu. You can do all of this from the eepanels2 minimap icon as well. I just prefer to have it on fubar.

First create a panel by using the drop down menu for eepanels2. Make sure your panels are unlocked so you can drag the panel around resize etc.







You can use either Default or Global settings. Either way you need to make sure there is no color in the background and make sure there is no border. Once youve created the panel click on that panel (should be in the middle of your screen) and go to Background texture>background custom texture. In that box should be Interface\. this is correct but you need to finish the file extension. It should look like this. Interface\addons\eepanels2\yourartname. You don't have to put the .tga at the end of the file name.





Finally resize your image. You can change the opacity of the texture if you want it to be transparent. Once you have done that, move the panel to where you want and lock it. Continue to do this with the rest of your interface, and you have a new interface in no time. Just takes lots of practice and good resources. I use the following websites on a daily basis for all things UI

Www.Wowinterface.com
Www.Curse.com
The world of warcraft UI and Macros forums

Thank you to the creators of Eepanels2. I hope this tutorial was clear enough on what to do , and how to do it. If you have any questions feel free to contact me via the wowinterface website. My name on there is Elloria. You can find all of my interfaces on there. This website has an extensive list of UIs. If you haven't been there then you should check it out!!

[Elloria]

Saved for added suggestions ETC

Let me know what you guys think.

[Seerah]

Cool, Elloria - I'll move this into the Tutorials forum.

Just fyi, the rules for WoW are that the dimensions of the texture must be a power of two, there must be an alpha layer, and it must be a tga or blp file. I thought that the size 1024 worked okay, but I have heard people say that it doesn't and that 512 is actually the max. But your vine graphic above could be 256x64.

[Elloria]

Doh I guess i could have posted this in the right forum! LOL thanks Seerah. 1024 does work. I just prefer to stick with 512x512 and 256x256. All of my images are normally around that size anyways. I will add that 1024 does work to the tutorial. And with gimp you don't have to worry about creating an alpha later it already does that for you by default.

Actually it seems we are wrong! 1024 does not work as a image size. The highest is 512. Just tested this in wow a few seconds ago.

[dragongirl411]

Thanks for the tutorial, Elloria!

Right now I'm using a free trial of Photoshop. But after it expires, I may give Gimp a try, especially if it saves me from having to create the alpha channel.

[fotard2002]

just wanted to know where i would be able to find some 2D images so i could try and fiddle around with them and see what i can come up with

[jonathon]

The interweb... search textures under images or game textures... there used to be a sweet site with a small database of files, but I think it has disappeared.