Creating custom dashboard skins...
 

Repost:

---------

The one positive (admittedly selfish) byproduct of this ridiculous change in addon policy is that I found your project via your participation in the discussion. I downloaded it yesterday and have been test-driving it the last two nights. I was a big fan of photek before they abandoned the project and I really like how you incorporated many of the same features into one simple addon.

I'm enjoying it very much so far.

There are a couple minor problems I have it, though. First, I find the font size in the chat windows to be too big. Is there any way to reduce the size below 12pt?

Second, the textured background behind the top info is pretty distracting to me. It appears that you've duplicated the bottom background and flipped/floated it on top. I'd love to develop my own custom skin for it and release it, I just have to dig up some info on the process (.pla's, photoshop, os/x, etc). I saw the one available transparent skin, but I'm not in love with it.

Assuming I can get my skin working, I'll gladly donate. Thanks for all the hard work.

-----------

You here, Erranthor?

That I am.

And, again, thanks for the kind word... I've ruffled a lot of feathers over there ~lol~

No problem. And don't get me started on the ingrates... it's a mindset I can't begin to understand.

Anyway, I'm a web designer/developer so I'm not totally lost. If I can better understand how to create some skins, I'd enjoy releasing new ones periodically.

~lol~

Yeah... they're an, ummm... interesting? bunch.

Anyway... it's really pretty easy to create textures for nUI's dashboard and upper console. For starters, the master graphic is 2560x512 -- it's a rule that the dimensions on all WoW textures have to be a power of 2... 2, 4, 8, 16, etc. The height and width do not have to be the same, but they do have to be powers of two on each dimension.

You're observation is correct... by default nUI does repeat the bottom texture flipped upside down on the top -- it saves size by using the same textures, but that is optional... you can have two separate sets of textures for the top and bottom.

There are is one more texture set you're probably not seeing, as well, and thats yet another copy of the bottom dashboard that's also flipped upside down and attached to the bottom the dashboard.

The top graphic and the "hidden" bottom graphic both extend off-screen... this allows them to "slide" up and down if the user has Fubar or Titan installed so that their buttons tie in seemlessly with nUI's artwork. If you have either installed, nUI will automatically detect them and "move" the upper console or lower dashboard to allow for them. Setting your Fubar or Titan bar background transparent causes their buttons to blend right into nUI.

Anyway, everything else that follows is true regardless of which graphic we're discussing...

The master graphic, once complete, is broken into five chunks from left to right across the graphic that are 512x512 in size. That's required because there's a "maximum" size for textures.

So, create your main graphic, then crop it into five square blocks 512x512 and save it as a transparent PNG. There's a free download app called "WoWImage" (you can google for it, I'm afraid I don't have a link handy) which you can then drag your PNGs onto and it will convert them to BLP which is WoW's native texture format. You can also drag a BLP onto it and it will convert it to PNG... neat little program.

After that, just look at the code for the "Thin Gloss Black" dashboard skin if you want to see how to do different top and bottom textures, or the "Gloss Black" skin if you want to use the same graphic just flipped.

I would be more than happy to help you with the Lua code if you need it when you get to that point.

/rolleyes

I was able to find some of this info floating around, not much else.

I cheated and found a BLP viewer to check out the images. Would it be easier to use the transparent skin as a "base of operations" since it doesn't seem to repeat the background for top and bottom?


Okay, I'm gonna try to tackle this tomorrow.

I'm interested in learning some Lua after this Blizzard/Addon debacle, so yeah that would be great.

Couple of other random questions:

1. Have you ever thought of overlaying QuestHelper's waypoints and coords onto the map in the bottom right corner? It works on the minimap as of right now. Obviously, I have absolutely no idea how much time it would take to get this to work or even if you could (setting aside QuestHelper's apparent mothball status moving forward).

2. I play on a 24" intel imac and switching from full screen to windowed mode (and vice versa) throws the UI completely out of whack. I'm getting white blocks where the various elements of the UI should be. Simply reloading the UI after switching screen modes fixes the problem (and honestly isn't that big of a deal), but I was wondering if there was any permanent fix. From what I've read, it appears to be a video card issue specifically with macs but I don't know that for a fact.

It should be fine... I've not looked at the code (that's not one of my skins) so I'm not sure how the author implemented it. But it works, so as long as they didn't break the bar behavior, it should be all good.

I'm not sure what's going to happen there. Gonna wait and see. I've often thought it should integrate the battleground map. I don't think I could do it via nUI though... unless it truly is abandoned and I get stupid enough to pick it up (which I doubt) I don't know if it would happen -- it pretty much would have to be done inside of QH.

This is a known bug in Blizzard's video driver code that randomly affects custom textures on certain video cards. It's documented in the patch notes for nUI if you want all the painful detail. Bottom line... avoid switching modes and '/nui rl' is your friend when you must.

I play in full screen windows mode full time unless I'm in a raid, in which case I'll switch to non-windowed mode and stay there the whole raid. If you're on a Windows box, the "Windows" key will drop you out of WoW and into Windows even when you aren't windowed and without breaking the textures.

Okay, thanks for all the info. Can anything be done about the font size of the chat boxes, btw?

I think that might be covered here: http://www.nuiaddon.com/faq.html

:banana:

Hehe, it didn't even occur to me that the 2560 number was the main graphic size. When I was looking at the other images that are useable as replacements I thought they had to be individually set up. The best I could do was recolor them but then they didn't look so good so changed my mind.

Knowing this will help my next attempt whenever that is.

Thanks Scott.

For now the only font size options available for the chat frame are the ones built into Bliz's settings menu for the chat frame. If it matters any, nUI is compatible with Chatter, Prat, etc.

I looked there first.

Easy enough. Thanks.

I think this is the FAQ you were being pointed to...

My font size is too small (or big)...

(strictly as a matter of record)

WoWImage program link:

http://files.filefront.com/wowimage+.../fileinfo.html

Quick test to see if I could get it working:

http://i43.tinypic.com/2v32c28.jpg

Now I can start working on some better ones :P

Cool beans.

By the way... rather than post images on the other hosting sites, you can upload them directly to here... when you're posting a message, just scroll down the page a short way and you'll find a "manage attachments" button... you can just click and and upload up to four images at a time that are attached directly to your post.

first shot:

Attachment 2399

Very nice... gonna be more than one who wants that.

Damn, that's nice! Very impressive!

Will there be a visible matching top panel without the tribal art?

I recently dusted off my photoshop... may have to give these UI layouts a whirl.

Sure. I can do that. I'm thinking about releasing them with/without the top panel. The top backgrounds really annoy me for some reason, am I alone? If I am, I'll just do the top/bottom ones.

I also want to start a "how to" column on creating custom backgrounds complete with links to the conversion programs and template photoshop files (with placeholders for content boxes and slices for 512x512 output).

Think people would be interested in that?

Btw, mains are a tauren and Nelf druid... so tribal art sort of fits. I'll do different ones too.

I would be very interested in that!

Wow, that really is nice. I've never been good at image editing, so I've always just used Skinner to have 'flat black'. (also haven't tried nUI, but if I ever come back to wow I may have to try it).:)

quiet yourself down you know you will be back, after a little while and some kind of change or even know change to the UI policy you will have the craving and you will come back.

Thanks everyone!

This is somewhat like complementing the body shop that did the pinstriping on the Ferrari... but thanks regardless.

Wow . way cool. I really need to refresh my artistry skills. The old saying .. 'what you don't use you lose' .. thats me and art. Stopped painting 20 yrs ago and forgotten everything.

And yeppers a little step by step would go down well at my end :D

Now if only I can find my Paintshop Pro XI discs. Go on vacation for 3 months and everything goes missing.

I'm one of those odd people that can't let go of Fubar, so I need that top graphic lol. I'm pretty sure there are some here that also use Titan Panel. :p

Oh absolutely. A step by step tutorial (with screenshots?) would be most useful! May I request an uncut template file (with layers if needed) in psd format? That would just rock. :D

Yeah, I plan on it! I'm trying to perfect the positioning of the content boxes first.

A tutorial would be awesome I'm sure there are plenty of us that would be interested :D

@ Paantheaus
 

I love the new graphic layout that you made. I am interested in the transparent console and the texture on the lower portion. The tribal graphic was great but would need to be a bit smaller for setup. Very nice work.
So where and when can I get it. *taps foot ;)*

I look forward to more great stuff from nUI and all its supporters. Thanks for the great work Scott */hug*
:banana:

People who give hugs are awesome in my book! I tend to be careful with giving out mine lately though... I get tired of explaining that I'm old and can hug whoever I like lol.

[quote=Seladina Brightwing;123042]I love the new graphic layout that you made. I am interested in the transparent console and the texture on the lower portion. The tribal graphic was great but would need to be a bit smaller for setup. Very nice work.
So where and when can I get it. *taps foot ;)*

I am one of the afore mentioned Titan users :D.
Can you let me know where I can download your skin please minus the tribal, it's nice mind you but if possible I like a plain skin, yes yes boring I know.

Tnx anyways

first I would like to say NUI ROCKS!!!! I was a spartanUI user through BC till WOTLK and bartender stuffed it all up (from what i can gather). And now i have donated to this awesome addon and will make many more to come.

I would have to agree the top panel is a pain in the ass specially in raid which i turn it off :p . problem solved

paantheaus i want that skin!!!!! its very nice ... I would have to move oras2 tank list but small price to pay upload it plz!!! or email it i don't mind :p

Once again great addon and paan very nice skin i want to see lots uploaded :p
and to all the crew working on NUI my hat goes off to you great job on the addon i love it

the first skin
 

Hey I thought the first skin SS you linked was awesome, anyway to get that uploaded or emailed?
Don't want to start a riot, but I was never really into the tribal thing.
Thanks in advance.

an attempt...
 

This is my first attempt with GIMP, I am still learning how to make patterns, and make pre made patterns work with GIMP.
I think this is horrible, but I was just trying to see if I could do it.

the first SS is just a generic red leather tile replicated
the second SS shows the carbon fiber texture I actually drew, it is only on the second panel, and I am going to work on it more tonight.
this is my first day working with this kinda thing so don't be too cruel :)
D

Well... you got it working... that's 3/4 of the battle... now you just have to get the image the way you want it and you're golden.

Quick Question
 

How do I make the panels just blank in certain areas? Do I need to cut out those parts? Thanks

You would use transparency in the original PNG file.

whats the best program to make skins? (im guessing that Paint wont cover it :D)

I use Photoshop myself. However, Gimp is very very good and free.

hmm ill look into that..

im going to try my hand at a dashboard....

i might fail... but im still going to try :D

Feel free to holler if you have any questions... though the beginning of this thread pretty much contains all of the info anyone needs to create a custom dashboard.

Oh... and you asked earlier about a dashboard request thread... I have no problem with that at all.

ok! yea i was reading th thread and it seems pretty straight forward.. i am joust going to have to learn how to actually make the textures :D

ok quick question (prolly a total noob one)

with the dashboard graphic there are 2 layers? the base is transparent and the top layer has the designs on it?


or am i just going at this the wrong way?

Well... when you save it to a PNG it's all one layer with transparency. However, my original artwork actually have six or seven layers. That said, I usually start of by having a transparent background and then layering over top of that, so you are generically correct.

well here is attempt number one...

FAILURE


i guess i suck at cutting things out?

anyways here some SS.. get ready for a lol cause i certainly did

EDIT: ill have to try to finish this later time for work >.<

Common seriously Voyager?!?!?!? ... Ya should have at least used TNG or Enterprise :-)

Just j/k .. good try and hope ya get ir fixed later ... Think I might give Making one a shot Myself sometime soon here

lol yes voyager!

its amazing!

ok maybe not as BA as TNG though :D i *want* to make one for each series.. but.. i have to figure out how to do it properly first :D

attempt number two!!!

semi fail... i was not sure how to make the little cut out that goes above the first action bar and the stance bar... so i did it by hand :D still kinda sucks though >.< now if i could figure that part out i think i will be ok!

more SS for good lols

EDIT: something i just noticed... Captain Janeway's face is getting rolfpwned by the minimap....

third attempt....



less fail then before...

i need some help on the part that comes up and over the bars in the center.. any hints/tips from the pros?

another SS for giggles... im tired and im head to bed :D

EDIT: so tired i uploaded the wrong SS <.<

Hmm, I see this was a bit ninjad :D, did Paantheaus ever finish his tribal looking skin? :D

i have no idea what your talking about <.< ninjas.. psssh..

as far as the tribal skin.. not sure havent seen him around so.. no?

Ok so I made one and it came out ok i think but i messed up a little on the cutting :( What is the best way to section it using Gimp? Thx for any help

Yeah the cutting up part was always messing me up so I just left it to the experts :D

I don't use Gimp enough to be able to help you, hopefully someone else experienced with Gimp will speak up.

Lua and Toc??
 

I can handle the editing and creating of graphics.. but what about the Lua and Toc portions? I can't even view them to edit.

Any help please?

THANKS!
~Wierdlings

They are editable by any text editor :D So you should be able to edit them fine :D

Right click over any toc file and choose Properties. On the General tab you will see "Type of file" and "Opens with". Click on the Change button and choose Notepad. If it's not on the list, choose Browse and peruse your way to where Notepad is installed and choose it's exe file.

Rinse and repeat for lua and wtf files. ;)

A great free editor that's better than Notepad is Notepad++.

http://notepad-plus.sourceforge.net/uk/site.htm

Thanks and Test Layout
 

Thank you Xrystal and Petrah for your replies. I had a design done earlier today, its actually my third attempt and one I am happy to show to others... hehe. Its a translucent cool (as in frosty) azure blue with scrolly purple and blue motifs in the right, left and center sections.

~Wierdlings

Attachments are an in-game screen shot and the second is a screen shot of the full image w/o the game noise. While it looks like it has a white background (which does not show) and solid blue bottom area, it is actually translucent.

Very nicely done.

Yes, looks very cool *pun intended* :D