After seeing and using many many many skins that are super shiny with super efficient layouts I decided I would make a skin that throws all these ideas out the window, and make a fun skin instead.
I'm one of the 9million+ WoW addicts out there, so decided a WoW themed skin would be cool. More specifically a Horde themed skin (Horde FTW!).
So during one of my days at work I started playing around with sketches of what I thought a Horde instant messenger would look like..
After a few versions inbetween serving customers, I came up with a sketch I didn't mind.. So I ended up refining it a bit..
Here's the initial sketch, and the refined version:
You gotta remember these are on the back of business cards and are done in a blue ballpoint pen.. lol.. High tech sketchery!
So I stuck these sketches in my pocket and kinda forgot about them for a day or 2, and then decided last night that I would get this into a working design - something I could put into action as a real skin.
The first thing I had to do was to get myself a decent wood/timber look though. I googled timber and wood etc, trying to find a decent looking chunk of wood, but nothing was particularly decent. So I decided to go snapshotting all throughout WoW, and I ended up making a decent wood texture from a few different ingame object screenshots (doors, crates, barrels)...
So today (my day off) while my daughter was asleep, I started to construct a real version of the skin. It's still missing little detailed parts and might not quite "work" (tiled resizing and/or stretch) but once I have the "real" version of the skin, I can then refine it so it can be skinned.
Here's the results so far:
I'm going to try and keep a running diary of this - it might interest some people as it will cover the process I use when skinning Trillian. The actual design phase takes a chunk of time, but the actual coding time is about 95% of the actual development time!.. Unless, of course, I make use of the new Astra feature "Custom Windows" and make just the main contact window... We'll see...
Next phase of development - added the area down the bottom where the user's avatar would be.. also a subsphere for where the connection status is showing..
Started fiddling with fonts for the list area, and added some other minor details - like nails etc... Most time was spent on the avatar surround.. A blood stained (or is it blood red glowing) elite dragon ring thing (almost)..
I'm currently working on the next phase of the skin, which is breaking it down into skinnable layers. The reason for doing this is that some things will tile or stretch without a problem, whereas some other things won't. So for instance, to make the skin work better, the angled pieces of wood on the bottom corners will be an extra layer on top of the rest, that way I don't need to allow for their size in working out the background slicing.
Layers I know I will need:
The main back layer (with all the main wood bits)
The corner bits of wood
The list area banner
and the avatar sphere thing.
By layering all these it will allow me to place object underneath other things, adding to the actual look and feel of the skin... Next screenshot should be of a working skin... rough - but working..
And here it is:
Needs polishing (obviously) but it's working...
Some details of the conversion to a working skin. I had to separate the top piece of timber from the main body of the back layer as the placing of the slice lines (where it resizes) didn't work well for both pieces if they were all one big chunk. By separating the top from the main timber parts, I was able to make it's own resizing area which looks a lot nicer.
The actual location of the slices isn't as tidy as I would normally like, but I had the advantage of knowing I was going to be overlaying the red banner over the top of most of it, so it covers over the bad tiling.
One thing I forgot I would have to do was when adding the avatar globe/dragon thing is center it. When I first placed it there I had fixed coordinates in place, so that when you resized the message window it would stretch the avatar thing all out of shape.. Oops. So a bit of skinxml maths was needed! Basically to find the left coordinate for the object we needed to get the width of the window, minus the width of the avatar object from it, and then divide that by 2. A simple way to calculate the right hand coordinate is just to use that exact same formula, and then add the width of the avatar object to it.. Pretty simple really, and it doesn't get messed up with any numbers being rounded up or down causing your coordinates to be out by one pixel.
So assuming my avatar object was 152 wide:
left coord = (%window.width%-152)/2)
right coord= ((%window.width%-152)/2)+152)
The end result was perfect (yay!) and the avatar thing (I really need a technical name for it!) was placed perfectly.
Next step I had to cut a hole in the avatar frame (but keeping the orbs shine) so I could place the users avatar behind the frame. You can see in the last screenshot that my Astra avatar is inside the orb, and it has a glassy look (thanks to that shine).. I'm quite happy with how that turned out, with the only issue being that the angled pieces of timber appear in there as well if the window is resized too small.. I might place a plain background colour in there to cover them up (or I might limit the minimum size the window will shrink to horizontally)..
So the next step will be tidying things up. That will mean somehow adding the iconholder for connection icons (I really should have factored them into the design!) and adding your connection status to the mini sphere thingy on the avatar frame. It would also be cool to be able to set your away message on there somewhere.. I might look at making a few different "banners" that can be toggled on/off in the layout.. That should work..
One of the biggest needs is going to be a WoW Horde themed icon set, as the typical Trillian Orbs are just not going to match the whole look! Anyone feel the urge to make some icons?
I'll also need to do a Horde sound pack, which I started looking more into last night - I've managed to extract a bunch of speech, just can't find some of the standard sounds (like the auction noise, the whisper noise, etc)... Anyone know where they're hidden in the game?
Another day, another update - nothing to show just yet though. I managed to find all the standard sounds in the WoW files - the mpq viewer/extractor I was using seems to have been the problem. I found a different one and it managed to load the 3gb+ file where the sounds were.
So I quickly threw together a soundpack last night - I definitely need to refine it though, as a lot of the sounds I'm using would confuse the hell out of everyone if it was running while playing WoW. I think I need more speech, and less common noises. I'll stick to using some of the lesser heard sounds instead I think.
I also got the connection status orb thing working. It's the smaller circle near the avatar and it shows your current connection status. Connected, Partially Connected, Disconnected, Away, Invisible, etc.. So far I've only got the connected, partially and not connected icons done (using the wow server status icon from the official site). Looks pretty cool actually. I'll do the rest of the icons tonight (my WoW server's 48hr maintenance period should be finished finally!)...