Regional FlagGuide : Textures in WoW without Photoshop.Source
avatar
Xenoronin
Target Source
#0 - 2007/11/05 10:50:42 PM
Ever wanted to create a UI with some artwork in it, but felt held back by the fact that you don't have photoshop? This is a guide which will help you overcome that unfortunate setback by showing you step by step, how to create the artwork on a free photoshop alternative called GIMP.

Photoshop Guide (needs update but still usable)
http://forums.wow-europe.com/thread.html?topicId=286940116&sid=1

Downloads

    GIMP - http://www.gimp.org/
    kgPanels - http://wow.curse.com/downloads/wow-addons/details/kg-panels.aspx

Artwork

    Some sites to get your pictures from.
    Google Images - http://images.google.com/
    Deviant Art - http://www.deviantart.com/ Get Artist’s permission first, unless the pic states it can be used.

    There are two options for getting the art.
  • Use a Brush. (Search GIMP Brushes on Deviant Art to find out what I mean.
  • Use some artwork and crop it out for use in WoW.

    I will be using the second option throughout this guide. More specifically I will be using this tribal artwork by Diabloman101. Used with permission.
    http://img136.imageshack.us/my.php?image=deviantartkc5.jpg

Editing the Artwork for WoW

    You now should have kgPanels installed into the Interface folder in WoW, GIMP installed and your artwork selected.

    1. Open GIMP, click new and a dialogue box will open.
    2. All Pictures being imported into the game need to be in a certain size. “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) .” GIMP has no option to select 32-bit .tga but seems to have this by default but all that is needed right now is the image size.
    3. I find 256*256, 128*256, 512*512 etc. the best sizes for the images.
    4. Go into the advanced options part of the box.
    5. Select Fill With: Transparency, I am quite sure this turns on alpha channels by default.
    6. Colour space : RGB colour
    7. Leave the resolution alone, unless it shows something different than 72ppi(pixels per inch). http://img136.imageshack.us/my.php?image=newimageha5.jpg
    8. Click ok, a new panel shows up with hopefully a grey chequered background, and paste/import/open your picture file into the picture box.
    9. Scale your image to the size you selected. With Keep Aspect ticked unless you want to widen or elongate the image while scaling.
    10. Once it is scaled, if you got the image by copy and paste, now is a good time to anchor the floating pasted layer to the background. The little Anchor button on the layer dialogue box.
    11. Make sure your “Layers, channels, paths” dialogue box is showing (if not then go to the GIMP panel and then, File, Dialogues, Create new dock and it should be there. See if the Alpha channel is there. If not then you didn’t start correctly.
    12. Your picture’s background colour should be completely white or have none if possible.
    13. To get rid of the white background go to Layer, Transparency, Colour to Alpha. A better option is to simply get the eraser tool and delete all the unwanted art/colour. If you use the Colour to Alpha method and the artwork becomes transparent, select the background using a select tool before using Colour to Alpha.
    http://img136.imageshack.us/my.php?image=gimpbc2.jpg
    14. Clean up anything you see wrong if you want.
    15. Save the Picture as firstattempt, with the .tga extension and into the kgPanels folder in your AddOns folder. http://img136.imageshack.us/my.php?image=savingjh3.jpg
    16. A box will show up asking if you want to RLE compress and origin to left. Untick both these boxes.

Importing Artwork into WoW

    1. Type “/kgpanels config” into the chat to bring up the kgpanels dialog box.
    2. General Options > Layouts. Create a new layout of any name and activate it.
    3. Art Library > Backgrounds. Add a new piece of art under any name and using this link path. “\\Interface\\AddOns\\kgPanels\\firstattempt.tga”
    4. Active Panels > Create New Panel. Create a new panel of any name.
    5. Under Texture Options, set border to none and select your artwork from the Backgrounds dropdown menu.
    6. Switch back to the main options for the panel and set colour to white and alpha to full.
    7. Everything having gone right, you should now have a panel which is just the artwork and nothing else. You can now resize and position to your liking.

    8. If you notice a white outline this is because of blurring by the artist. This means that a black diagonal line will have loads of grey and light grey in order to make it look smooth.
    9. To remove this exit WoW, go back to gimp and reload your image.
    10. Now zoom in to 400%. You will see the grey. Click the Colour Selection tool. Click the grey and if there is more then hold shift and click to add more to the selection, ctrl and click to remove from selection.
    11. The choice is yours as to whether to colour it the same as the image or a different colour for a nice outline.
    12. Save and reload WoW

Troubleshooting

    1. Download Irfranviewer from this link http://www.irfanview.com/
    2. If the image is completely black or has a black background while viewing them in the above program then your alpha channels are to blame.
    3. Revise stage 13 from the guide, it is underlined.
    4. If the background is white then you should be ok and your work in KgPanels is to blame.
    5. Make sure that you are not mistaking a very small image for it not being there, resize your panel before you place the link to the custom texture in it.
    6. I'll repeat the size issue as it is the most looked over problem. "All Pictures being imported into the game need to be in a certain size. “must be in resolution where height and width are equivalent to Power of 2(i.e 16*16, 32*32)" 512*512, 256*256, 128*128, or combinations of these are the most popular 512*256, etc.

    If anyone info or pictures are needed please do not hesitate to ask.

Thanks

    Artwork - http://diabloman101.deviantart.com/
    The Interface Community at large :D

avatar
Blue Poster
Target Source
#4 - 2007/11/06 04:20:17 PM
Nice :-)

Added this to the compilation sticky:
http://forums.wow-europe.com/thread.html?topicId=304192506