WoWInterface (
-   Tutorials & Other Helpful Info. (
-   -   HowTo: Layout your UI with Photoshop (

ChaosInc 06-30-10 09:56 AM

HowTo: Layout your UI with Photoshop
If you have Photoshop or another program that supports layers, there's a nice way to map your UI outside of game. Of course, this won't give you the exact positions and such, that's still on your end.

1) Get all elements on your screen that you're looking to position (Omen, Damage Meters, etc). Throw them around your world screen and keep them a decent distance apart.
2) Take a screenie without your UI (ALT-Z) to get the "background" template (SS1)
3) Bring back your interface
4) Type (or copy) "/script WorldFrame:Hide()" without quotes. This should leave you with a black "background" with only your UI elements.
5) Take a screenie of this (SS2).
6) Open SS1 in Photoshop
7) Open SS2 in Photoshop
8) In SS2, marquee around an element (we'll use the Omen frame for example) making sure to include a bit of the black "background".
9) Cut the image out (CTRL-X)
10) Open a new window (CTRL-N). The size should already match your cutout and make sure you choose the transparent background.
11) Paste your image (CTRL-V)
12) Use the magic wand tool, click the black "background" to select it and delete it. This leaves just the frame you want to use.
13) Drag your image over to SS1. This should create a new layer with this image. Close the now-empty window.
14) Viola! Select the layer and move around as you see fit.
15) Repeat steps 8-13 for each element you want to do.

There's may seem like a lot of steps, but it's pretty intuitive after the first time. I can add images to illustrate the process if anyone wants. Hope this helps.

EDIT: Forgot to note, to bring back your WorldFrame use "/script WorldFrame:Show()"

LadySilverwolf 06-30-10 10:55 AM

Tutorial Appreciated
I have played with images before, used photoshop, even tinkered with layers, but being new to WoW Art, I think this was a nice way to be introduced for someone who is 'curious' about doing artwork.

Thanks ChaosInc. :)

Wella 06-30-10 12:36 PM

Hey, this is a pretty cool tutorial, especially for those who want to mess around with positioning things without all the bother of actually being in-game. (Like the stupid 6-hour-extended maintenance. /me glares at Blizzard.) Anyways, yeah, nice tutorial and all. To make it better you might want to make it a bit longer, rather than just 1. 2. 3. 4. 5. if that makes sense. I.e. break things down into easier-to-see sections, with subtitles or something. Screenshots of some (if not all) of the steps would also help clear certain things up.

Anyway, worthy of a new thread, yes! :)

xandora 06-30-10 05:35 PM

Nice tutorial, concise and to the point. I didn't know about being able to hide the world frame!

ChaosInc 06-30-10 09:27 PM


Originally Posted by xandora (Post 195246)
Nice tutorial, concise and to the point. I didn't know about being able to hide the world frame!

Frame manipulation is what I do mate. ;)

mentalnutsy 01-08-11 08:37 AM

Has this changed as /script WorldFrame:Hide() just freezes wow for me :(

Edit: Managed to get around this using kgpanels and creaking a black panel that covered the whole of screen.

All times are GMT -6. The time now is 03:36 PM.

vBulletin © 2018, Jelsoft Enterprises Ltd
© 2004 - 2017 MMOUI