+ Reply to Thread
Results 1 to 20 of 20

Thread: KGPanels Artwork Photoshop Tutorial

  1. #1
    Join Date
    Aug 2009
    Location
    Tacoma, WA
    Posts
    722

    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).



    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.


  2. #2
    Cheers, stole all mine till now.
    The Ashbringer...

  3. #3
    Join Date
    Nov 2009
    Location
    sweden
    Posts
    10
    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 06: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.

  4. #4
    Join Date
    Mar 2009
    Posts
    47
    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

  5. #5
    Join Date
    Dec 2009
    Posts
    15

    Need some help with kgpanels..

    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

  6. #6
    Join Date
    Jan 2010
    Posts
    2
    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

  7. #7
    Join Date
    Mar 2009
    Posts
    47
    Cheers for the headsup on that site thedafmb, found a few sets to use

  8. #8
    Join Date
    Oct 2009
    Posts
    3
    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

  9. #9
    Join Date
    Dec 2008
    Posts
    293
    holy crap load of brushes batman...

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

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

  11. #11
    Join Date
    Jan 2010
    Location
    Philadelphia
    Posts
    146
    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

  12. #12
    Join Date
    Jan 2010
    Posts
    2
    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.

  13. #13
    Join Date
    Dec 2009
    Posts
    1
    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



    and

    Last edited by Drudie; 01-14-2010 at 10:28 PM.

  14. #14
    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?

  15. #15
    Join Date
    Jan 2010
    Posts
    2
    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

  16. #16
    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.

  17. #17
    Join Date
    Jan 2010
    Posts
    1

    Correction

    Quote Originally Posted by Krehinth View Post
    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.
    Last edited by Byzanthium; 01-22-2010 at 12:02 PM. Reason: Fixed grammar and typing errors.

  18. #18
    Join Date
    Jan 2010
    Posts
    1
    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

  19. #19
    Join Date
    Jan 2010
    Posts
    6
    Quote Originally Posted by Byzanthium View Post
    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.
    Last edited by skipgamer; 02-01-2010 at 12:05 AM.

  20. #20
    Join Date
    Mar 2010
    Posts
    1
    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?

+ Reply to Thread

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts