I’ve been enjoying the portfolio at The Skins Factory, a company that does a lot of high-profile GUI work. Very very slick and shiny! According to this interview, they’re a virtual company that uses graphic design talent from the skinning scene worldwide. You can get a rawer inside-look from this chat transcript.

The Skin Factory’s work is a heady combination of industrial design, rendering chops, and the ability to really illustrate the tactile details of real objects. It’s really pretty cool to see scenesters make money at what they love doing.

I thought I knew something about making pretty GUIs, but this is quite a leap over what I’ve done in the past. Time to get cracking!

Masterful Touches

In addition to The Skin Factory’s overall command of design, I’m quite impressed by their technique:

• The reflections. Very nicely done overall. I’m pretty sure that the major reflections (like the glass) are drawn in and faded by hand. The curved reflections around the edges (they are pretty subtle) might have been rendered in a 3D program and dropped in. Reflection maps are funny things…you almost never use the actual surrounding 3D geometry because it will look like crap Instead, you want something that has high contrast and is organic without being too recognizeable. I remember when this phenomenal 3D artist at EA, Greg Jobes, who showed me his favorite reflection map for rendering shiny metal surfaces. I was surprised that it had absolutely nothing to do with football…hey, if it works, use it!

• The use of scale. I’m not sure what this is called by professionals, but there is a consistency of scale that helps create a convincing rendering. Say you’re depicting a wrist watch up-close: you expect that there will be fine details like small knurled knobs, etched lettering, maybe some subtle abrasion or scratches. I think of this as “microdetail”. Every object has it when you get close enough. However, when you’re looking at a car from some distance away, you expect the details to be larger and “robust”. You also expect that these details are “sized appropriately” according to the kind of material used and the purpose intended. In other words, there is an appropriate and expected scale of detail. If you put a large clunky knob on the finely-detailed watch, that knob will look ungainly. If you put a tiny knob on the door of a car, it will look like it will snap off, which is not car-like at all. These mistakes DO happen in real life; we call that bad design :-) Beginning 3D texture artists tend to be unaware of scale…they’re just thinking “I need to put something on the walls, here’s a wall texture, let’s slap it on”. The texture is magnified by a factor of 100, and since our perception of dimension is determined by relative scale, that wall will now look “out of scale” compared to other things in the room. It will feel wrong, though you may not immediately know why. There is excellent scale awareness in all of the Skin Factory’s public portfolio, and therefore as objects they seem entirely credible. They also seem hyper-real because they are so clean and slick, but that’s a different issue.

• The color shading. Really sweet. As the electroluminiscent colors go from lighter to darker tones, there is a slight hue shift. A lot of beginning artists will just darken and lighten a hue by using the brightness slider in Photoshop. Or worse: they’ll add white or black on top. The results are pretty drab. If you look closely at the Skin Factory work, you can see how the reds are actually along a red-orange scale, and the blues go from a kind of blue-hot to a slightly purply cool blue. Likewise with the greens…there’s just a touch of yellow added to the brighter colors. It looks more vibrant. Just adding pure black and white is a sure way to make an ugly color palette. If you look at real-world shadows and colors, you’ll see that they always have some kind of tint. It’s this kind of careful modulation that makes things interesting; it works in lighting, in music, and in any time-based visual media. On a side note, using color burn seems to impart a color shifting to some degree. Try using that to make darker shadows, compared to painting black.

<

p>On yet another side note: the slickness of the work reminds me a bit of the grandmaster of chrome Sorayama. He did all those “Sexy Robot” illustrations back in the 80s. Check out his official website. Warning! Probably not safe for work!

Gearing Up

Since I’ve actually got to do some slick GUI work over the next week, I’m looking at the following pieces of software to help ease some of the rendering workflow:

I’m thinking of using a set of Photoshop plugins I’ve had my eye on for a long time: AutoFX’s DreamSuite Series 1. It appears to have a 3d engine that can help establish the base lighting effects, without having to go through 3DS Max 4.2 (yeah, I haven’t upgraded in a while). I’m not convinced that this will be the way to go, but the DreamSuite will probably come in handy for future jobs. I’m hoping to get back into actually making cool graphics as a hobby. I tend to flip-flop on my hobbies…when I’m doing more coding, I tend to like to take more photos and draw more pictures. Conversely, when I’m doing more graphics, I feel like I should be hitting the programming harder. Sigh.

I’m not sure if the DreamSuite package is powerful enough; modeling things like subtly-rounded 3d objects are probably beyond its capabilities, so additional Photoshop post production will be necessary. Or, I’ll have to use a 3D program. Or, I’ll have to render it by hand in Illustrator or Photoshop, which would take way too long.

Another interesting contender is Pixologic’s ZBrush 2. I’ve had my eye on this program for quite a long time, though I wasn’t aware of the newest version until just about an hour ago. I never quite understood what it was until recently; the website does not really explain what it is, but there is plenty of artwork to browse (once you actually find the gallery link, that is). I did just download their practical guide, which required registration on their forum, which was annoying. Do they not want people to find out about the program too easily?

From what I can tell, ZBrush is hybrid 2d illustration / 3d modeling program that allows you to paint with “pixols”. Imagine that the pixels you were painting with in Photoshop actually had real physical thickness, and everytime you used the paint brush the pixels built up like layers of clay. Now imagine that you can take other images and use that to “spray on” surface detail. That seems to be what the program is capable of doing…there’s a demo available and a quicktime movie that will make its place in the 3d world clearer. Maybe.

UPDATE: There actually are some excellent tutorials in the ZBrush Classroom. It’s given me a better idea of the program and how it works. It’s funky and cool.

Anyway, based on that quicktime movie, I’m thinking that ZBrush might be quite useful for building more complex forms with drawn-on detail. It would beat the hell out of learning NURBS…I never got past polygonal modeling in Max anyway, so maybe it’s time to switch. At around $400 $500 bucks, ZBrush 2 is much more affordable than a $1200 $1500 Max upgrade.

This sword picture by “Stumph” gave indication that ZBrush 2 might fit into my workflow. ZBrush is clearly capable of more; for example, the characters in Doom 3 were apparently created with this package. Definitely check out the

Now all I need to do is come up with a cool-looking design. Should be fun…my first one came out a little stiff and predicatable, but I’m getting limbered up. Booyah!