#0 - Feb. 6, 2008, 6:59 p.m.
I do not know if this is a repost but ohwell here you go i loved this guide my UI is now very cool =]
PS: Cant remember where i got it from. was on my computer.
Hi there! I would like to start off by saying that it took me awhile to figure this stuff out myself, and that I am pretty noob at Photoshop. That being said, if I can do you it you can too. All it takes is patience, and maybe alittle bit of photoshop knowledge. The main mod used is EEpanels, and is very handy when making eye catching User Interfaces. It can used for making a simple gradient or a more advanced looking border! This tutorial will show you how to add brushes, make a border in Photoshop, use an alpha channel, and then how to add that art ingame. At the end of this guide you will find sample UnitFrame borders.
Materials Needed-
* eepanels http://files.wowace.com/eePanels/eePanels.zip (It should be the second to last link on that page.)
* Photoshop
* Any Unit frames of your choice! I use X_perl
* The macro /print GetMouseFocus():GetName() Put that on the action bar and keybind it. Hover your mouse over something on your ui and hit the keybind. In your chat log will show what the name of the Parent is (this will be explained later in the guide)
Optional Materials-
* Wowace Updater http://www.wowace.com/wiki/WowAceUpdater (You need to use IE7 to DL this/ or if your a serious Firefox Fanboy you can use this add-on for Firefox https://addons.mozilla.org/en-US/firefox/addon/1608 )
Table of Contents
1.0 - Photoshop skills
1.1 - Adding brushes
1.2 - Getting that creative side out
1.3 - Make an Alpha Channel
1.4 - Save and Save as
2.0 - In Game
2.1 - Get to know eepanels
2.2 - Making Panels with Global Settings
2.3 - Docking to a parent
2.4 - Getting those settings exactly how you want them
Lets get started
1.0 - Photoshopskills
1.1 - Adding Brushes
First, go to your favorite artsy site to dl some photoshop brushes. My favorite is Deviantart.com. They have a large selection of brushes users have made and uploaded.
For this tutorial I will use asunderstock's brush sets-
* Grunge Grit 2 - Borders by ~AsunderStock on deviantART
Grunge Grit 2 - Borders by ~AsunderStock on deviantART
To install these, save them to anywhere you like, then open photoshop. Click on the brushes tab, then click the little button next to the word "Brushes". It somewhat resembles the ">". Then click load brushes and navigate to the place where you saved the brushes file.
Here is a pic of what it looks like when clicking load brushes:
http://i122.photobucket.com/albums/o244/Pensharpener/photoshoppic1.jpg
1.2 - Getting that creative side out
Now that you have your brushes we can get started on making some crazy unique stuff.
Lets Make a nice Unit Frame Border shall we?
Click on File>New
And make your new canvas with these settings:
* Width: 512
* Height: 512
* Resolution: 72
* Color Mode: RBG Color
* Background Contents: Transparent
Should look like this:
http://i122.photobucket.com/albums/o244/Pensharpener/photoshoppic2.jpg
Hit ok. Now maximize the canvas. (Makes it easier imo lol)
Click on the Brush tool icon. Now go over to your Brushes tab and scroll all the way to end of the list. Now click on the Brush labeled "1287" It looks like Flames, kinda, that are going upward NOT to the left/right/down. (If it is different for someone else please tell me. And if anyone has an idea on a name that is constant with the brushes please tell me. Thank you)
Then add it on about the 3/4ths mark on the page like so:
http://i122.photobucket.com/albums/o244/Pensharpener/TopBorderforUF.jpg
Now add sides and a bottom to that and make it look like so (You don't have to make it look like mine, but for purpose of this guide I suggest you do. It helps when trying to follow along.) :
http://i122.photobucket.com/albums/o244/Pensharpener/AlmostFinishedborderforUF.jpg
Once that is finished add anything you think may add to it but not make it too cluttered
After that use the eraser tool to add finishing touches to your border for your UF (I used the 85 point eraser size for this because it was just to the outer edges of the border.Just do single clicks with this tool. Do NOT drag the eraser tool. Imo its looks ugly when you do lol.) This is what mine looks like now:
http://i122.photobucket.com/albums/o244/Pensharpener/EraserChangestoUF.jpg
Then use the blur tool to smooth the edges like so:
1.3 Make an Alpha Channel
An Alpha channel is a type of layer that adds a red kind of tint to the canvas. This red tint is showing you what will be transparent, so you need to erase the red tint to show whats underneath. This will allow you to make the unused areas of the canvas transparent so you do not have a box looking thing. ( that probably made no sense but trust me this is a needed step.)
Lets make that Alpha Channel now.
Bring up your Channels toolbox, looks like this:
http://i122.photobucket.com/albums/o244/Pensharpener/Channeltool.jpg
Then add a new channel:
http://i122.photobucket.com/albums/o244/Pensharpener/Newchannel.jpg
With these settings:
http://i122.photobucket.com/albums/o244/Pensharpener/Addingalphachannel.jpg
Click ok. Now the canvas has gone black, Don't freak out this is normal. Just click the little box next to the channel named RGB, this will make the Red, Green, and Blue channels visible. And should look like this:
http://i122.photobucket.com/albums/o244/Pensharpener/Makingothersuffvisable.jpg
Now start erasing the Red tint until the Border is showing through. As you get closer to the outside of the border use a smaller eraser point. This will reduce the amount of the white fill showing through. This is an example of what mine looks like:
http://i122.photobucket.com/albums/o244/Pensharpener/FinishedwithPhotoshop.jpg
1.4 Save and Save as
Save it anywhere as a .psd file. Then "Save As" in your eepanels folder in the wow addons folder as a .tga file, with the name "UnitFrames" (without quotation marks), and save it as a 32 bit.
This is the end of the Photoshop Part of the tutorial. Now onto The ingame Part!
