Reply
 
Thread Tools Display Modes
Old 06-30-10, 09:56 AM   #1
ChaosInc
Curse staff
 
ChaosInc's Avatar
AddOn Author - Click to view addons
Join Date: Aug 2006
Posts: 670
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()"
__________________
Originally posted by Mirrikat45
so says the 1/2 million downloads per week.......
Impossible statistics = FAIL!! But don't point this out, or your post will be deleted!
ChaosInc is offline   Reply With Quote
Old 06-30-10, 10:55 AM   #2
LadySilverwolf
An Aku'mai Servant
 
LadySilverwolf's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2008
Posts: 37
Thumbs up 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.
__________________
~ Strength of Character withstands the Test of Time. ~
LadySilverwolf is offline   Reply With Quote
Old 06-30-10, 12:36 PM   #3
Wella
A Rage Talon Dragon Guard
 
Wella's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 322
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!
__________________
Addons I use, not that any of you care
* Bejeweled - For boring 5 minute flights to Tanaris
* Genie - Blizzard really should have implemented bag sorting by now
* ncHoverBind - I'm a Lock, what can you expect?
* oGlow - Agan, a missing feature
* Recount - Derp
* ShooShards - Another missing feature


"Your idea is good. So i will try it."
- popmissa
Wella is offline   Reply With Quote
Old 06-30-10, 05:35 PM   #4
xandora
A Chromatic Dragonspawn
 
xandora's Avatar
Join Date: Jan 2009
Posts: 188
Nice tutorial, concise and to the point. I didn't know about being able to hide the world frame!
__________________
xandora is offline   Reply With Quote
Old 06-30-10, 09:27 PM   #5
ChaosInc
Curse staff
 
ChaosInc's Avatar
AddOn Author - Click to view addons
Join Date: Aug 2006
Posts: 670
Originally Posted by xandora View Post
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.
__________________
Originally posted by Mirrikat45
so says the 1/2 million downloads per week.......
Impossible statistics = FAIL!! But don't point this out, or your post will be deleted!
ChaosInc is offline   Reply With Quote
Old 01-08-11, 07:37 AM   #6
mentalnutsy
A Cyclonian
AddOn Author - Click to view addons
Join Date: Apr 2008
Posts: 47
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.

Last edited by mentalnutsy : 01-08-11 at 09:07 AM.
mentalnutsy is offline   Reply With Quote
Reply

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

Thread Tools
Display Modes

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