Tutorial: Create your own gradient panels!

Ok, it feels like I've explained how to do the popular faded panels a thousand times, so I thought what the heck, might as well do a tutorial. Please excuse me if it's already been made.

The panels I'm talking about are these: http://ww2.beffo.se/upload/pic~/img974/Exempel.PNG

"OMG AWESOME! HOW DO I DO THEM??!?!"

You follow these steps. :-)

1) You will need to get a AddOn called eePanels, if you haven't already. Download it from http://www.wowace.com/files
Extract it and place the folder in your WoW Directory/Interface/AddOns.

2) If you have FuBar, the AddOn should now pop up there. If not, it should be on your minimap. If it isn't, simply type "/eepanels minimapattach" to put it there. Now right click it.

3) The first thing you want to do is to activate "Advanced Mode", and de-activate "Lock Panels".
http://ww2.beffo.se/upload/pic~/img088/Lock.PNG

4) Now go into New Panel > From Default Settings. From Global Settings works as well, but I'd recommend you to use Default Settings.
http://ww2.beffo.se/upload/pic~/img078/NewPanel.PNG

5) Congratulations! You have now made your first eePanel. It should be in the middle of your screen as a little black window with a white border. Not so sexy, eh? Don't worry, we'll fix it. First off go into Panel Settings > 1 (if you haven't already created some panels) > Name and rename the panel to something nifty. You don't HAVE to do this but I recommend it since it'll be very hard to know which panel that is which when you have many.
http://ww2.beffo.se/upload/pic~/img422/BlackFade.PNG

6) Okay, let's get rid of that border. Go to the panel's settings and click Border Color. Pull the alpha level (the one to the far right) to 0%.
http://ww2.beffo.se/upload/pic~/img701/Opacity.PNG

7) Now go into the panel's settings > Background Color Style > Gradient. Your panel should now have a fade. If you want to change the fade to vertical, simply go to the panel's settings > Background Gradient Orientation and change it to the opposite. If you want to change the direction switch the Background and Gradient color with eachother.
http://ww2.beffo.se/upload/pic~/img792/Gradient.PNG

8) If you want the colors a bit sharper, you can go into the panel's settings > Background Color and raise the alpha.

9) Now it's time to give this black fade a colorish edge. Create another panel and rename it to something nifty. Pull the border alpha to 0%. Do the same thing as with the previous panel, create the same gradient but this time with a color of your choice.

10) If you haven't unchecked "Lock Panels", you need to do it now. Move the new colored panel on top of the black one. Resize the panel so that it's a bit higher than the black one.
http://ww2.beffo.se/upload/pic~/img703/LevelError.PNG

11) Oh noes! The green panel is on top of the black one! Don't worry. Go to the first panel's settings > Level > Raise it. 1 should be enough.
http://ww2.beffo.se/upload/pic~/img522/Level.PNG

12) Success! You can now move the two panels to wherever you want them and then lock the eePanels again.
http://ww2.beffo.se/upload/pic~/img304/Done.PNG


If you're not happy with how the panel turned out, you can customize it a bit by changing the two panel's alpha, colors, try making the black panel wider etc. You can also create another black panel with a solid color and place it to the far left and then place the gradient to the right of it. There is loads of possibilities! :-)
---

!!! NEW !!!

THIS IS THE SECOND WAY TO CREATE THESE FRAMES.

The result is a bit different: http://ww2.beffo.se/upload/pic~/img814/result.PNG

In this tutorial I assume that you already know some about Eepanels. If not, read the previous tutorial first.


1. Do the first three step in the previous guide if you haven't already. If you have Eepanels2, "Lock frames" is found in Global settings.

2. Create a new panel from default settings.
http://ww2.beffo.se/upload/pic~/img078/NewPanel.PNG

3. Go to the border's color settings and turn the opacity down to 0%.

3. Go to the panels settings -> height. I recommend you to fill in either "9" or "10" for the height. Both of them works fine, but if you go under 9 the panel will disappear. In this tutorial I'll be using 9.

4. Now go to background color and select the color you want for the border. Also change the opacity if you want to, however it's most common not to. After you've done so, change the background color style to "Gradient".
http://ww2.beffo.se/upload/pic~/img792/Gradient.PNG

5. This is what your panel should look like: http://ww2.beffo.se/upload/pic~/img570/gradientresult.PNG
If it doesn't, make sure that the opacity on the background gradient color is on 0%. If you want the gradient to go on the opposite way, simply change so that the background color opacity is on 0% and then fill your color onto the background gradient color instead (just don't forget to turn the opacity up again!)

6. After you've done this, create another panel. Rename it if you want to. Also resize it. Give it whatever height you want, but the width should be slightly wider than the previous panel you made. Turn the border opacity to 0% and the background color to black, with whatever opacity you want (70% or so is quite common). Then turn gradient on and it should be all set. Otherwise, read 5 again to solve your problem.

7. Now just create another one of the border panels. Do this by following steps 2-5.

8. Now you just need to place the panels where you want them, and in the order of the picture I posted before: http://ww2.beffo.se/upload/pic~/img814/result.PNG

9. Turn up "Level" for both border edges to 1 or so. You might not notice any difference, but it's still good to do it. http://ww2.beffo.se/upload/pic~/img522/Level.PNG

All done! Enjoy! :)

In the next update I'll go through how to anchor all these frames so that they are easier to move around.