Thread Tools Display Modes
Prev Previous Post   Next Post Next
06-30-10, 09:56 AM   #1
Sythalin
Curse staff
 
Sythalin's Avatar
AddOn Author - Click to view addons
Join Date: Aug 2006
Posts: 680
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()"
  Reply With Quote
 

WoWInterface » Developer Discussions » Tutorials & Other Helpful Info. » HowTo: Layout your UI with Photoshop


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off