[:1]Ok, so I used eePanels2 for my new UI (screenshot 1, screenshot 2) and feel confident writing up a little guide for those who are a bit confused by what to do with it.
This isn't a guide for the clueless. It's for people who know what eePanels does, how it works (in theory), and just need clarification on the steps to get it working.
There are four sections to this guide:
-Preparing yourself
-Drawing your art
-Making your texture files
-Placing your art in-game
It looks like a lot of reading at first, but it's honestly all pretty simple. Don't panic. Let's begin.
Section 1 - Preparing Yourself
The first thing you need to do before you open photoshop is get your UI setup in game minus the art. Position everything where you want it. A few pixels off isn't going to make your life hell, but the more accurate you are with placement, the easier your life will be with drawing the art. Know what you're trying to achieve with your art before you start placing things, then place them with the upcoming art in mind. Once everything is placed, snap a screenshot. Take multiple screenshots if you're using different panels in different states of your UI.
Before you exit the game, do one more thing (very important). If you have UI scaling turned on in your video options, you need to figure out the scale you're at. Blizzard didn't provide a number in the options, so we're going to use an eePanel to figure it out. Create a new eePanel and alter the following:
Background color: 100% alpha (and use a bright color like hot pink)
Background inset size: 0
Now grab a pen.
Drag your new panel to the top left corner of the screen, and position it so that the edges are perfectly flush against the top and left edges of your screen. Scale the panel using its handle at bottom right until the bottom and right edges are perfectly flush with their respective sides of your screen. The end result should be a panel that is exactly the size of your screen. Now right click on the panel and look at it's Width and Height settings. Round those numbers to the nearest pixel and write them down. This is your effective resolution, and you'll notice that it's higher than your screen resolution. Ok, you can delete that panel and exit WoW now.
Section 2 - Drawing Your Art
The following is instruction in photoshop. I assume you know how to use it, so I'm not going to describe every detail. If you're using something besides photoshop, I hope you're able to figure out the equivalent steps to take in whatever software you're using. And I shouldn't have to tell you to save often.
Open your screenshot(s) in photoshop. Select the entire canvas of the first one and copy the image. Hit File->New.... The width and height in the new document window should automatically be the width and height of your screenshot (and therefore screen resolution). Confirm the following settings:
Resolution: 72 pixels/in
Color Mode: RGB Color - 8 bit
Background Contents: Transparent
Now hit OK and paste your screenshot into the new document. Copy and paste all your screenshots into the same new document, then close all the original screenshot files.
This document is at your screen resolution, but you need to draw art at your effective resolution. So grab those numbers you wrote down and go to Image->Image Size... Make sure Resample Image is checked at the bottom, then change the Width in the first text box to the width you wrote down. The Height in the bow below it should automatically change to the height that you had written down. Hit OK.
Now I leave you alone for a bit. I can't guide you on how to draw art, but I'll just tell you there are no limits. Anything you draw can be imported into WoW. Just make sure you keep everything on separate layers; you'll need to show and hide different pieces in the next section. It will help you to know how frame strata works in WoW. So look it up or ask for more explanation if you don't. And SAVE OFTEN.
Section 3 - Making Your Texture Files
Your art is all done? Great. There better not be Hello Kitty in it.
You should know how each piece of your art will be separated onto their own panels. That's not something I can help you with unless we have a one on one discussion with some screenshots. And I hope I don't end up doing that with everyone who wanders through this thread. Basically, anything that will be show/hidden/moved/scaled should be on its own panel.
Your art needs to be broken up into targa files to be compatible with WoW (blp files work too, but that's an additional step, and useless). The targa files MUST be square with an edge size that is a power of 2. So the legal file dimensions are:
1x1, 2x2, 4x4, 8x8, 16x16, 32x32, 64x64, 128x128, 256x256, and 512x512
512x512 I believe is the largest, but there are rumors that 1024x1024 works. I've never tried it, but you can if you want. I'm sticking to 512.
So pick a piece that you want to start with, and hide ALL the other layers in the document, including your screenshots. You should just have the floating art piece on top of photoshop's transparency grid. Now select the whole canvas and hit Edit->Copy Merged. This will copy all visible pixels, so you don't have to flatten your panel's layers to copy them all together.
Hit File->New... and the width and height settings in the new document window will have cropped away all the transparent pixels that you copied from your working document. Adjust them to the next biggest legal targa size. So if your panel art is 103x94, make the new document 128x128. Again, 72 pixels/in, RGB - 8bit, and transparent background. Paste your art into the new document.
The most confusing and easy to screw up step follows; adding an alpha channel to the document. An alpha channel is essentially another paintable layer in photoshop. It uses the grayscale to control how transparent each pixel of the image is. If a pixel is black in the alpha channel, it will be completely transparent in the saved file. A white pixel in the alpha channel will be fully visible in the document. All the shades of gray in between go from 1-99% transparent. It's like putting tracing paper on top of a photo and coloring on the paper with a black pencil. Where you color solid (black) you can't see through the tracing paper any more. if you color lightly (gray) you can still somewhat see through. And if you don't color (white) you can still see through.
Hopefully you understand. So basically you need to make an alpha channel that exactly traces your art. Luckily it's really easy. Here are the exact steps (feel free to use the hotkeys when you know them):
1. In the Layers palette, highlight your art layer.
2. Go to Select->Load Selection...
3. The pulldown menu settings should be correct (the current document's name, and Layer 1 Transparency) Just check the Invert checkbox and hit OK.
4. Go to your Channels palette and hit the Create New Channel button at the bottom. Your document should turn completely white.
5. Whatever your preferred method, fill the selection with black (edit->fill, paint bucket, hotkey, whatever).
Now you'll basically see a negative outline of your art. Anything that was partially transparent should be gray. Turn on the visibility of the RGB channel at the top of the Channel palette, and your art will appear, surrounded by semi-transparent red. The red lets you know that part of the image will be transparent.
Now go back to your layers palette and create a new layer UNDER your art layer. You need to fill the new layer completely with an appropriate color. Generally when you save a targa it will flatten the art onto a white background. This has no effect on completely transparent or solid pixels, but anything that's partially transparent gets an ugly white glow. Your undercolor fill should closely match the value of any semitransparent pixels in your art. So if you've got a black dropshadow, make black your undercolor. If you've got bright pink clouds, use pink. If you have varied colors in your transparencies, you can use multiple colors on the underlayer. Just put the appropriate color behind the appropriate art color. And if you want a white glow, then don't even bother with the underlayer.
We're ready to save your panel texture! File->Save and in the Format pulldown, select Targa. Give the file an appropriate name and save it to your interface folder somewhere. I suggest putting all your textures in their own folder directly inside Addons. That way when you update your addons, it won't replace your texture files. In the targa dialog box that pops up, select 32 bits/pixel and leave the compress box unchecked. Now go back and repeat this section's process for each panel texture you want to make.
Section 4 - Placing Your Art In-Game
Here, I'm just going to get you to the point where you have panels on screen with textures in them. And I'll show you how to change the parent of the panel. Attaching scripts is a whole other guide that I'm not going to write.
First off, check Advanced Mode in the eePanels2 menu. Now we're going to adjust your global settings so that applying all your textures goes a little bit quicker. I seem to recall that the Global Settings option doesn't appear under the eePanels2 menu until you have one panel on screen. So make a new one from default settings, then go back to the eePanels2 menu and into Global Settings
1. Set the Width and Height both to 512.
2. Set the Border Color to 0% alpha
3. Set the Background Color to 0% alpha.
4. Set the Background Inset Size to 0.
5. Go to Background Texture->Background Texture Custom Texture and enter the path to the folder that contains your textures. Mine is Interface\Addons\uiTextures\
Now for each panel you'll just need to add the file name instead of the whole path.
Delete that temporary panel you made, and make New Panel->From Global Settings. You won't see anything happen since the global settings are completely transparent. But mouseover the center of your screen and the new panel will hilight. Right click on the panel and do the following:
1. In Background Texture->Background Texture Custom Texture, add the filename of the texture you want to import and hit enter. If all went smoothly, your texture should pop onto screen.
2. Unless you chose a 512x512 texture, it's going to look...big. Resize the Width and Height to the dimensions of the texture file you chose.
At this point, you've got a texture you can drag anywhere on your screen. Like I said, I'm not going to get into all the scripting you can add to the panels. So any dynamic actions you want will have to come from your own research. Feel free to discuss scripts in his thread though, as any solutions you find will only add to this guide. There are a bunch of options in the panel's menu to play with that affect your panel. Any specific confusion should just be asked in a reply. It's all pretty self explanatory.
The one thing I will mention is Parenting. Parenting lets you attach a panel to any frame in the game, so that the visibility and position of the panel are tied to the visibility and position of the frame. The default parent is UIParent, which is the game screen, so the panel will always be visible. To attach a panel to anything besides the default, you need to know the name of the frame you want to attach it to. To find that out, hover your mouse over any frame on screen and paste this into your chat box
/print GetMouseFocus():GetName()
In your General chat log a green frame name will be printed inside quotes. Remove the quotes and enter that value into Parent in the panel's menu. When you hit enter, your frame will snap to the size and location of the chosen parent frame. Odds are your custom art just got distorted by the previous action. Go to the panel's Width and Height settings. They've both changed to 100%. You can just change them back to their correct pixel values. Use the panel's Horizontal Position and Vertical Position settings to adjust where the panel is displayed relative to the parent frame. If you move the parent frame, the panel will always remain at that offset and move with it.
There you have it. That should have you well on your way to making your own custom-art UIs. As I've stated, make this thread a full eePanels2 discussion thread. Share UI's you've made with it, paste useful scripts, and ask about anything you're not clear on.|||Nice work, I'll sticky this for a while :) .|||This is awesome, exactly what I wanted to know.|||Thanks heaps for the excellent tutorial... Ive been an addon junkie since my first toon was about lvl 20, but now for the first time I have a TRUELY custom UI!
|||I've been informed that imported targas DON'T need to be squares, as long as each side is still a power of 2. So 256x128 files (and the like) are legal.|||Eljinar, looks like you got the hang of it. Glad I could help.
What's that compass direction addon at the bottom? Never seen that one before.|||Quote:
Eljinar, looks like you got the hang of it. Glad I could help.
What's that compass direction addon at the bottom? Never seen that one before.
Thats an old addon called '420Compass'... it hasnt been updated in a month of sundays, but still works just fine! If you cant find it anywhere, let me know... I think I have it hosted on our guild website.
Thanks again for the guide!|||1206. I have four 512x512 images and two 256x512. I did some math I though would be right to make the textures the size in game, I got this:
512 in game would be 596
256 in game would be 332
For some reason I'm still off by 50 pixels (the UI I'm remaking is Urk UI. My file for it looks like this).
Could someone explain to me what I did wrong?
|||Great Guide btw. I'm having problems during the Alpha step.
I create the Alpha layer and everything turns white (as supposed to).
Now am I supposed to fill everything around my art (the current selection) black? This is what I did and when I show the RBG my art appears and everything around it is transparent, no red. I tried loading it in game and I got a full white 512x512 and complete transparency where my art should be.
Help would be much appreciated. Thanks for the guide again btw.|||question... how do i link panals to objects in the game plz?
No comments:
Post a Comment