View Single Post
09-20-08, 02:47 PM   #1
Elloria
An Onyxian Warder
 
Elloria's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2007
Posts: 358
Talking Eepanels2 Tutorial Using GIMP 2.0

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)

__________________

Last edited by Elloria : 09-27-08 at 01:42 AM.
  Reply With Quote