Cheers, stole all mine till now.
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).
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.
Create a new layer and change its blending mode to "Overlay".
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.
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.
When you're happy with the look of the layer, make another layer on top of it and repeat the process.
Apply as many brushes as you like, but make sure to create new layers with blending mode set to overlay as you go.
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.
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.
Repeat this step with every layer until you're happy with the outcome.
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.
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 , gonna get KGpanels now and set my new pics up ingame :P
Last edited by WAckoo; 01-01-2010 at 07:58 PM.
Given an infinite universe and infinite time, all things will happen. That means that every event is inevitable, including those that are impossible.
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.
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.
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
Last edited by Drudie; 01-14-2010 at 11:28 PM.
First off, great movie guide. I made this today intending on putting a few in my UI
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
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.
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.Originally Posted by Aliena
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.
Last edited by Byzanthium; 01-22-2010 at 01:02 PM. Reason: Fixed grammar and typing errors.
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
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.
Last edited by skipgamer; 02-01-2010 at 01:05 AM.
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?