KGPanels Artwork Photoshop Tutorial

All right, before you decide to make kgpanels artwork yourself, there are certain things that you have to know about kgpanels itself. Most importantly, any kgpanels graphic file must be saved as targa file (tga) and can only be saved in specific pixel sizes. Namely, it must be powers of 2 - so 2, 4, 8, 16, 32, 64, 128, 256 or 512 in width and height. You cannot exceed 512 pixels on either width or height of your image, but you can drag the layer in game to suit your needs.

You can however freely choose the size on either side - ie it doesn't have to match - as long as you stick to powers of two.

Now, it's time to introduce you to a very convenient photoshop tool - brushes. Brushes are going to be your main source for blending amazing backgrounds together. You can either make your own, which would be enough content to fill yet another tutorial, or get them online. Places such as deviantart are a good source for brush sets. Download whichever you like and put them in the brushes folder (path depends on your photoshop version and OS, mine is C:\Program Files (x86)\AdobePhotoshopCS4\Data\PhotoshopCS4\AppData\ Adobe Photoshop CS4\Presets\Brushes).

Once you find and install some sets you like, it's time to get started. Always restart Photoshop after installing new brushes to have them show up. So, open a new file, choose the size based on the aforementioned rules and what dimensions you want your piece to fit and make sure your color swatches have the default colors selected (black and white).

http://www.tankspot.com/aliena/kgtut/ps1.jpg

Having the background layer selected, go to Filter > Render > Clouds and hit Control + F until you have a more or less even layer of clouds without black or white dominant.

http://www.tankspot.com/aliena/kgtut/ps2.jpg

http://www.tankspot.com/aliena/kgtut/ps3.jpg

Create a new layer and change its blending mode to "Overlay".

http://www.tankspot.com/aliena/kgtut/ps4.jpg

Then select your brush tool, click on the arrow next to the brush, then click on the arrow on the window that opens up and your brush list will extend.

http://www.tankspot.com/aliena/kgtut/ps5.jpg

Select a set of decently sized brushes that make for a good background effect and start applying them. Alternate between black and white foreground color as you do so.

http://www.tankspot.com/aliena/kgtut/ps6.jpg

When you're happy with the look of the layer, make another layer on top of it and repeat the process.

http://www.tankspot.com/aliena/kgtut/ps8.jpg

Apply as many brushes as you like, but make sure to create new layers with blending mode set to overlay as you go.

http://www.tankspot.com/aliena/kgtut/ps9.jpg

Once you have a background you're satisfied with, you should apply some more specific brushes to give your layout a sort of theme. Or alternatively, if you want to keep it a mute background, apply scanlines or something of the sort to dim it down.

http://www.tankspot.com/aliena/kgtut/ps10.jpg

Once you're happy with the overall feel of the piece, it's time to apply colors! Go back to your very first layer, the cloud one, hit Control + B and adjust the sliders until you come up with a color you're comfortable with.

http://www.tankspot.com/aliena/kgtut/ps11.jpg
http://www.tankspot.com/aliena/kgtut/ps12.jpg

Repeat this step with every layer until you're happy with the outcome.

http://www.tankspot.com/aliena/kgtut/ps13.jpg
http://www.tankspot.com/aliena/kgtut/ps14.jpg

When you're done, you can add a border if you wish, by making a new layer, choosing the rectangular marquee tool, selecting the entire piece, right-clicking it and picking "stroke". Width should be 1-3 pixels and color neutral. Black or white or grey are usually best.

http://www.tankspot.com/aliena/kgtut/ps15.jpg

If you're a little photoshop-savvy you can at this point apply further techniques and blending modes such as blurring or sharpening parts of your image or applying design tricks to make the image look more functional.

Cheers, stole all mine till now.

Hi , thanks for this awesome guide :) , i dident know anything about photoshop before this but now i tried it and its realy fun :p , gonna get KGpanels now and set my new pics up ingame :P

A nice guide, did a little mock up piece and Imported it into wow, now I'm searching around for the right brush set to use :)

Great guide, however I am having some problems with kg panels. (have searched and couldn't find any other threads, sorry if i am in the wrong thread)

First of all, I have made a 512x512 .tga image and tried to import it into kg panels. (Made in Adobe Photoshop CS4 Extended)

I have it in the //interface//addons//textures// directory, saved as a .tga file (32 bit).

When I load it into kg panels, no preview shows up.

Thanks :)

Hi, Sorry if I´m out of lines by posting this, but I wanted to share a site I thought was great to get existing brushes etc from :) http://www.brusheezy.com

Hope it`s useful in any way

Cheers for the headsup on that site thedafmb, found a few sets to use :)

Very nice guide, for those who have access to Photoshop it will be great help
and I believe it should be possible to use this guide with gimp too.

But there is one thing i would like to add.
Instead of clicking the arrow next to brush I prefer to hit F5 as it opens the Brush options (at least this is the Hotkey in CS3). There we have the possibility to modify the chosen brush further and there are also tiny pictures for each brush which give an rough idea how this particular brush will look like, which is more and more usefull the more brushes one adds

holy crap load of brushes batman...

gonna bookmark this for other purposes. hard to find a good tutorial for such design techniques.

I used to be heavy into photoshop when i was younger. Not so much these days, i guess old tricks die hard.

I never thought to make my own kgpanels art until now. Thanks for posting the guide!

Another great place to find brushes is: QBrushes - Quality Brushes for Photoshop

Awesome guide! I have one question that maybe someone can help me out with. All the steps work great for me but when I select each layer I create and push Control + B to set the color balance, nothing happens. It will only set the color balance for the first layer (the clouds one).

I'm sure I'm doing something really silly... but I am no means a Photoshop expert... or even novice. :)

i made an image and did everything i was suppose to but when i got to import it in the game the game freezes up and gives me an error.. anyone know why?

Edit: Nevermind I got it, I had to make it 128x128 for some reason that isnt too big of a file.. but the only thing now is that the bg is all white and when i swith it to mod it takes the white bg away but makes the image look dark and not bright colors.

this is what it looks like

http://i47.tinypic.com/154d9hy.png

and

http://i45.tinypic.com/2q38b5u.png

First off, great movie guide. I made this today intending on putting a few in my UI
http://i962.photobucket.com/albums/a...g?t=1263830635
But its cut off becuase of the size, how do I line up multiple panels so that they're fluent?

You should be able to do that in kgpanels, if I get you right. If you go to the folder in game and go to active panels, you can select the one you want to resize, unlock the frame and do it like that, should be quite clear once you're in the add on options thingy. Hope that helps :D

thanks for the reply but what I was asking about was lining up the panels in photoshop to create a background that went over multiple panels, but I figured that out.

I do have a new question tho, how can I make the background of a tga file transparent? its turing up white in-game (if you know please explain it as simply as possible since I'm new to photoshop.

Quote:

---

Originally Posted by Krehinth

I do have a new question tho, how can I make the background of a tga file transparent? its turing up white in-game (if you know please explain it as simply as possible since I'm new to photoshop.

---

It really depends on which version of Photoshop you're using. Some versions can handle saving transparencies, while others cannot. Speaking from experience, CS3 cannot. You can download a free application very similar to Photoshop, called GIMP. All you would need to do is create all of your artwork in Photoshop, save it as a .png, open that .png in GIMP, and save as a .tga. Make sure you uncheck the "RLE compression" box before saving. Your other option is to find a version of Photoshop that can save .tga transparencies. =)

Quote:

---

Originally Posted by Aliena

You cannot exceed 512 pixels on either width or height of your image, but you can drag the layer in game to suit your needs.

---

I have found that 512x512 is not the maximum image size. It seems to me that the maximum width the image can be is 1024. I've tried 1152, 1280, and 1408, but kgPanels won't load the image. I haven't, however, tried those numbers in height.

I am also a little weary of image sizes in multiples of 2 and only use multiples of 8, hence why 32, 64, 128, 256, 512, 1024 work best.

If you're loading images into kgPanels and they're not loading, my guess would be you're using the wrong image sizes. You should be sticking strictly to the numbers mentioned above. Even though its posted on the wowace kgPanels tutorial, stay away from numbers not divisible by 8.

Hey Raiths,

Not sure if you've worked out your problem yet, but thought i'd try and help out.

For starters, it should be \\interface\\addons\\textures\\"Flename".tga (Note the back slashes, not forward.)

Also, I was having a few problems aswell, which led me here. Had the right size, right format etc, but kgpanels wouldn't load my pic. Then I realised that you don't need to put the entire file path into kg panels (eg C:\Public\WoW...etc), you only need to start from the folder inside the wow directory that you have everything in (see above) Thought I'd share my nubness in case anyone else is doing the same thing :P

Quote:

---

Originally Posted by Byzanthium

It really depends on which version of Photoshop you're using. Some versions can handle saving transparencies, while others cannot. Speaking from experience, CS3 cannot. You can download a free application very similar to Photoshop, called GIMP. All you would need to do is create all of your artwork in Photoshop, save it as a .png, open that .png in GIMP, and save as a .tga. Make sure you uncheck the "RLE compression" box before saving. Your other option is to find a version of Photoshop that can save .tga transparencies. =)

---

Any version of photoshop can save tga transparency however it is done with alpha channels unlike .png's. To create an alpha channel you go to the channels window (usually grouped with the layers window) and create a new channel. This will be used to determine the transparency of the tga, white being visible, and black being transparent. (if i remember correctly) The quickest way then to apply transparency is control click your layer to select it, and then change to the alpha channel and use the paint bucket to fill the selected area in white.

In Krehinth's case, considering he just has a one layer image, the way to go would be to copy that image (considering its already black and white) to the alpha channel and Invert it.


Oh and when saving with alpha transparency you want to save as 32-bit (8 bit's per channel) nearly forgot that part.

I like the tutorial so far, but none of the image links work for me except the original poster's signature. What am I doing wrong?