In game screen art

[MetalFan666]

Hello All,

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/o...toshoppic1.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/o...toshoppic2.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/o...orderforUF.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/o...orderforUF.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/o...hangestoUF.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/o...hanneltool.jpg

Then add a new channel:

http://i122.photobucket.com/albums/o...Newchannel.jpg

With these settings:

http://i122.photobucket.com/albums/o...phachannel.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/o...uffvisable.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/o...hPhotoshop.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!

2.0 - In Game

2.1 Get to know eepanels

http://i122.photobucket.com/albums/o...panelscopy.jpg

1. Lock Panel-This locks all panels so they can not be moved. This is Usually only used when you do not have a Parent to dock it to. Which is rare.
2. Advanced Mode-Keep this checked at all times. This allows custom borders to be imported and allows you to change settings within custom settings.
3. New Panel- This creates a new panel. When creating a new panel you have 2 choices, Create a Panel with Default Settings or Create a Panel with Global Settings. For this Tutorial we will use Global Settings.
4. Global Settings- This appears when you make a new panel. It allows you to set global settings accross all the Global Panels. This helps when setting transparencies as it will set all global panels with the same transparencies.
5. Panel Settings- This will also appear when you make a new panel. This is where you will be allowed to change the panel name/size/position/dock settings/add our custom art.
6. Reset- This will completely reset the addon Deleting any and all settings you had.
7. Hide MiniMap Icon- This hides the MiniMap icon. Very usefull if you have a clutered MiniMap. To bring it back after using this option type /eepanels hide.
8. Profile- this allows you to change profiles and add new ones so you can have different UIs on Different characters/copy a profile to a different Character.
9. Enabled- If you dont have this checked, then the addon isnt on.

2.2 Making Panels with Global Settings

This step is very simple. Click on New Panel > Global settings. As shown here:

http://i122.photobucket.com/albums/o...ganewpanel.jpg


Now to change the Global settings. Click on Global settings > Border color. Set the Opacy to 0% (the slide bar on the right of the toobar that pops up).
Next do the same with Global Settings > Background Color.

http://i122.photobucket.com/albums/o...alSettings.jpg


Dont forget to name it!

http://i122.photobucket.com/albums/o...ngthepanel.jpg


2.3 Adding The texture

This is also very simple once you get the hang of it.
First lets add our custom texture. If you followed the first part of the guide you would have saved our art with the name "UnitFrame" In Interface\Addons\eepanels. So in the Panel Settings Dropdown Box, hover the mouse over "Background Texture > Custom Texture".

http://i122.photobucket.com/albums/o...tomTexture.jpg


Now type in the textbox this string of text. Interface\Addons\eepanels\UnitFrames.tga and then hit enter.

Now you should have something that looks like this:

http://i122.photobucket.com/albums/o...uchedPanel.jpg


(mine looks abit different than the one we made above, for the file got deleted somehow...)

2.4 Docking to a Parent

This means that when we dock it to a frame, if the frame moves so will the panel. This is very usefull for making borders on the Unit Frame, as those are easy to move, and its easier to move if you have the panels docked so you dont have to go back into settings and change the placement. It also allows it to flow better with the UF.

Ok to do this add this macro to your Action Bars and Keybind it.
Code:

/print GetMouseFocus():GetName()

This macro will allow you to mouse over any frame and find the name of it. EX: I mouse over the Player frame of XPerl and hit the macro keybind. In the chatlog it says the words XPerl_Player. Thats the parent name. This is the set of words that will go in the Parent text box. As shown:

http://i122.photobucket.com/albums/o...gtoaParent.jpg


Now if you have a different unit frame than me, then the parent name will be different. This is why that macro is so handy.

If have done everything correctly so far you be able to see a little bit of the texture behind the Unit Frame. Lets change that.


2.5 Getting those settings exactly how you want them

We have to change the height and width of the panel first. For me the Width of the panel was 160% and the Height was 500%. Your settings may be different, depending on resolution and the size of your art. Remember you must hit enter after entering in the text or it will just go back to default. Just fiddle with the settings until you find the exact size you want, and also make it the size of your UF.
Next we need to Position it. To do this hover over Horizontle/ Verical Position. Try to get the border around the UF. The Horizontle Position will most likely be in the negetives, and the veritcal position number will most like be in the positives. My numbers for these were: Horizontle -90, Vertical 125. Yours will most likely be different.

Here is the end result:

http://i122.photobucket.com/albums/o...lePosition.jpg


Here is some of the types of things i have done with this addon:

http://i122.photobucket.com/albums/o...407_222038.jpg
http://i122.photobucket.com/albums/o...707_164919.jpg
http://i122.photobucket.com/albums/o...207_184434.jpg


Here are some example Unit Frame Borders:
RapidShare: 1-Click Webhosting
To install these, Extract the files to Interface\Addons\eepanels
Then go in game and then add this string of text to the Custom Background Texture text box, "Interface\Addons\eepanels\UnitFrames#.tga (Change the # with any number from 2-6. For the first Unit Frame just type in UnitFrames.tga no number.

This is the Top and Bottom borders for the second to last pic.
RapidShare: 1-Click Webhosting
Same install as above; except, for these you dont dock em. Just resize to the size you want. The bottom Panel has a weird line on it that i dont know how to get ride of. Also to stretch it across the screen you need to select tiling. and then make the tile size accordingly.

I DID NOT MAKE THIS GUIDE I AM POSTING FOR ALL THE BEGINERS ON HERE

[Kurtiz]

Yeah, You shouldn't copy paste stuff that's already on the site, and this should be in addons section.

[Unholyshaman]

Im pretty sure this is a repost. Its fine he copied because he said he wasn't his. But you should say where you got it from, also search because this is already on the site.

As for guides section or addons section or graphics section, dont think it makes a diff, could be argued into any of those categories.

[Chz420]

I will +rep you purely because you are "pyrojunkie" the frost mage.
Also, I lol'ed "can i buy some water"

[synthblade]

Awesome guide. Thought you didn't make it, I had never known how to do things like these. eePanels is the SHIT. I'ma go make me some UI panels now ^_^