DD Title screen and main menu:
Once again I'm re-doing the whole UI for Dredmor, having come back to it after a few weeks in California and due to recent thoughts on UI design.
My original revised titlescreen (middle image) was a pretty straightforward riff on the Doom cover, though I never did invest the time in the "DREDMOR" text that would have made it really worthwhile. The real problem is that the composition focused attention on the center of the image while the (programmer art) Doom-style text mainmenu was overlayed on top. That's some busy text on a busy image so what it ends up with is too much going on; the text is difficult to read and there's no flow to the design at all. A user doesn't know where to look or how to interact with the buttons
The new titlescreen takes the original picture with it's reference to Doom and moves the focus to the left to allow for a large and tactile UI (to match the in-game gameplay UI) on the right. I do very much want to revise the font, touch up the background art, and remove that awful bright-green text from behind the menu-scroll, but it feels much more sensible layout this way: The users tends to 'read' a screen from left to right, so they see the main character blowing up weird bad guys then go to the menu that allows them to jump into the game to do just that.
DD Dredmor skill selection screen:
The left shot of the old revised skill selection screen is an example of my tendency to over-design. You've got here a scrolling list of skills to choose from in the left panel. When clicked on, the skill then appears in the "Your Hero" box (and I forget if you can remove it by clicking on it there). When one mouseovers a skill, its description appears in the lower-right panel.
Though at some point I thought to maintain a left-to-right attention flow, it's not at all clear what is supposed to go where and what the player is able to click on and what they are not able to click on -- the copper arrows between the skill list and the "your hero" box, for example, are not buttons but look like they could be. And with the skill mouseover-description, the skill name being described is not shown anywhere, nor is the skill name mouseovered even highlighted; the only way to make a connection between what is going on in the description box and the user input is by seeing the text change as the mouse moves around. Not good.
On the right is the new system of skill selection following what I believe I described in my last post as "the simplest possible UI design": That is, show everything at the same time. Every skill is in the grid and is represented by an icon (which will be used elsewhere, in the in-game character skill info panel). When selected, a skill is set to remain highlighted (as opposed to it's default shadowed state) so that the player knows that it is active. While a player mouseovers each icon, both the skill's name and its description appear in the bottom box. The un-used skill points remaining to be used appear at the top and, when used up, the "done" button will light up, inviting the player to continue on to the game.
This revised approach makes skill selection more concrete and imminent. The player interacts with tangible skill-icon-objects rather than pushing around abstracted elements in visually disconnected lists. It is straightforward and tactile, just like (what ought to be) the underlying principle of UI interaction throughout the entire game.
Aragon Online
Graphics for Aragon Online; Feel quite free to check out the game because, well, it's free.
AO Development Icons:
Some icons for the various resources and corresponding resource-harvesting structures that one can build:
Well. I haven't done the mines yet, so you've just got two types of mineral there, metal and gems, without the corresponding levels of mines for them. I really do quite enjoy the little progressions of quality and details that need to be managed to express all of these. ('Guess that's why I draw little meticulous sprites for everyone, 'eh?)
AO Digital Painting:
Yes, the fun stuff comes last: Fantasy character portraits!
Now part of the deal with these is that they're aimed to appear at 80x80 pixels and they're priced in a manner that demands, ah, artistic brevity on my part. It'd be great to spend 16 hours on every picture, but when you have to do tons and tons of assets and pay rent, you've got to get things down with some consideration for time. So in this sense these portraits I've been doing are a bit like a speed exercise for digital painting (though, admittedly, I usually spend too long on the ones I end up having more fun with). It's good practice.
1.
2.
3.
4.
5.
6.
Thoughts on the images:
1: I just hate the hammer and the hand holding it. I figured that a visual element with extreme perspective distortion was necessary to show the scale of the guy (a Titan warrior), but it just looks weird. I'd have to redo it (for the fourth time) -- with reference -- to be happy.
2: It's probably pretty obvious that I like drawing evil more than good. Just so here. I admit, I totally cheesed the skull and hand on this one. The skull and smaller eyes are to show scale, as Trolls in this fiction are a good bit larger than humans.
3: A little secret: I'm terrible at drawing horses. The only way I can manage is through reference images, so I don't know if there's any way I could possibly be happy with drawing a centaur. I did what I could, but I still can't stand it.
4: Again, evil is more fun that good. And again, skulls for size reference -- I was thinking of an evil nordic-style Giant here.
5: Human mage. Note dramatic underlighting; I seem to always draw mages holding something glowy near their face because it makes pictures look so cool. Also: to come up with this image I asked a friend what she thought would make a hot guy, as she's been complaining about a lack of available hot guys. What it boiled down to, I think, is that she wants Johnny Depp dressed like a wizard. (Hear that guys? Go get your robe and wizard hat, 'cause that's what the ladies are all about.) Had to add facial hair so he didn't look like an elf.
6: Now I had way too much fun with this and spent far more time than I should have. Dramatic underlighting is always a winner, as said. And I'm not going to point out the many flaws in it this time because I just want to enjoy it for a moment. (But a hint -- if you want to see how screwed up a picture of a face or figure you've drawn looks, take the image and mirror it; You'll see a bunch of huge flaws in the shapes, volume, balance, perspective, and everything. If you ever want to make something look really good, flip it back and forth a few times while correcting errors.)
Here's a shot of that last one in photoshop (at half size), as I was drawing the background. I use the default brush to do nearly all of my painting, though this likely isn't very kosher and I am probably missing out on a lot of cool effects. To use asymmetrically shaped brushes I'd really like that 6d pen. By the way. If anyone is feeling generous.
And here's an image showing the progression of the portrait. I usually don't document things so well, but this time I started a new layer every time I sat down to draw so the history of the drawing is saved in the layers. Neat.
