design → interface dev → rich media

Tilt-shift Trickery Refined

2008-12-21T12:49:00.000-08:00

Tilt-shift photography seems to be getting a little more attention lately, thanks to digg. And so have the corresponding Photoshop tutorials on how to fake this effect in Photoshop. Keith Loutit also created a wonderful video version of a miniaturized monster truck rally sped up just the way Homer Simpson would like it! But creating a true tilt-shift setup can be expensive. Besides, do you really gonna void the warranty on that new digital SLR to build a real tilt-shift setup anyway?

While some pieces really pull it off well, others seem to fall short in one way or another. The prime reason for this failure is when items fall out of the focal range they should remain in. The extremely shortened depth of field makes can make scenes with high vantage points appear like toy miniatures. However, when you come closer to the horizon, elements that stand above that plane are irregularly blurred using the faux digital technique. The example below shows the untouched photo, a version created Robert Palmer (and who knows... maybe it's that Robert Palmer!)

The next example shows the tilt-shift effect applied.

The spherical structure clearly started in the main focal area, yet the top of the sphere is blurred enough that it loses realism. To be fair, Robert does acknowledge this and tries to sharpen the top of the sphere, but the effect isn't the same in the end.

Decidedly so, in the pursuit of realism, the original photo's alpha was adjusted to make sure the sphere stayed in focus. The next couple examples show the maximum limits of 'perfect focus' or 100% white. DOF begins to falloff as the gradient turns to black. Assuming the concrete ring at the base of the partially-sunken sphere goes all the way around in a circle, then the sphere itself is fully within the perfect focal range. In Photoshop, make a rough approximation of the sphere with the Circular Marque and fill with white directly in the Alpha channel - You can do this in a separate layer and paste it into a channel before applying the Lens Blur... There's many ways to skin the same cat in Photoshop all yielding the same results.

The modified alpha channel clearly shows the sphere is now in the same focal range from top to bottom.

Photoshop guides overlaying for comparison after Lens Blur was applied.

Of course, from what I could see, the end result was much more convincing. What do you think? A slight bump in contrast and some spot sharpening with a soft brush in certain spots and this scene begs for a toy train track to be built nearby.

"You don't stop playing because you get old... you get old because you stop playing" -Unknown

Repainting the OS in a browser

2008-12-14T19:50:00.000-08:00

A couple days back when I was updating the newuprising logo, I noticed an added feature to the Blogger interface that was added with no fanfare. In fact, this may be a standard control you would find where form elements can be selected, e.g., radio buttons or checkboxes. For a browser, I definitely didn't expect this behavior. I accidentally clicked an area I normally wouldn't (unless I were utterly aware of where I was and at 8 am, I wasn't) and then did a double-take as I noticed this interface feature.

The 'feature' I refer to is usually reserved for operating systems, not browser-based forms. But javascript has come a long way. Clicking the text associated with a radio button is as good as clicking the radio button itself. The hit area doesn't extend very far from the boundaries of the highest and lowest parts of the font, either. The example below is a Mac OS Preference window for Firefox to illustrate the hit area for the mouse.

To be fair, I was using Firefox 2 on Mac OS X when this happened. I tried Safari 1.3.2 and it didn't like the DHTML-styled (javascript) button and linked text. It just reverted to the system widgets and behaved like the stogy, old browser it is. Here's an approximate area where text on Firefox can sense OnMouseClick and select a styled radio button, and possibly toggle a checkbox! Not much difference from the bounds of the Mac OS. Click on the pic to enlarge if ya really need.

Why go to (seemingly) great lengths to talk about something so seemingly trivial, then? Transcending the OS will only be fully embraced when interface developers recreate the experience of the operating system in a browser. Doing this requires recreating every nuance that makes the modern operating system usable. So, I'd say whoever recreated that functionality was thinking of the Mac while they were repainting the OS in a browser.

ED: I went back and looked at different elements and yes, you can toggle checkboxes, however not all radio buttons or checkboxes are actually linked to their respective text. It's kinda hit-and-miss... Beta-like now that I look at it with new eyes.

Case Study 01 - Filmmakers Help logo

2008-12-09T18:45:00.000-08:00

When creating a logo, the conscientious designer remembers basic principals like scalability, ease of reproduction, relative cost of reproduction, and most of all, simplicity. A successful design will be instantaneously recognizable and memorable. Considerations for the designer in the digital age also include creating the original in a format that can easily scale... up! Scaling down is simple and throwing away information is always easier than creating it from assumptions (B-spline, etc.) or scratch. Keeping that in mind, I try to create the bulk of the logo in vector format before moving to Photoshop to twiddle with other design principals.

A while back, Filmmakershelp.com contacted me to create a logo that would represent their business with a professional manner and still feel 'hip' to a younger generation. The logo for Filmmakers Help offered me many options to play with during the creation. The profession is already filled with so many iconic shapes, e.g., film reels, filmstrip, cameras, lenses, and even the famous (sometimes infamous) Director's chair. The word 'help' conveys need, and implies an answer to a question may be found. The symbol of the question mark was bandied around more than any other image or symbol. It was also decided that an actual logo was desired than just a type treatment and possible image accent, such as a filmstrip at the side or bottom of the typeface, so there goes using filmstrip.

But wait! Filmstrip is so cool. There's a deep feeling of reverence that filmstrip will always convey... it's the symbol of The Giants of Yore. These were the people you wanted to be like. They made you think of being a director instead of a race car driver or astronaut. They also used a technology that was prohibitively expensive to the average Joe. Nonetheless, the image of filmstrip persisted.

Days later, while poking around on digg's Design section, I came across an article about an old tool in Illustrator being used in a new, creative way. Epiphany. The proverbial light bulb was more like a flood light. And my dreams of wanting to use filmstrip came along for the sweet ride.

Using the Extrude & Bevel tool in the Effects -> 3D menu, I loaded the basic curve of a question mark, mapped the filmstrip texture in the Map Art section, and voilà! Now I've got filmstrip shaped like a question mark and a client pleased as punch.

While a shaded, realistic-looking logo was desired, the end result scales well when reduced to black and white. Judge for yourself.

Interactive header design eminent

2008-12-07T20:39:00.000-08:00

Header interactivity started as a subtle, fun addition to an obvious space not known for being fun. With Flash headers becoming more ubiquitous I'd assume many users weren't even aware certain sites they were visiting even had an interactive header.

Most of the interactivity you'll see consists of simple scripts that follow the movement of a mouse (usually leaving a trail of colored swirls or fairy dust) or morphing shapes that move in random directions. The picture above is from a design blog that makes wonderful use of Flash 8's Filters.

As this trend grows in the future we may see meta-rich info stray to other sections of a website. Expect designers and developers to add more interactivity to headers, sidebar elements and widgets. As bandwidth increases, we may start seeing dynamic RSS-like image streams with mouseover media clips in lightbox-style windows. This evolution of information architecture may attempt to keep people within the confines of a single window while providing a wealth of information and entertainment in nested windows.

The Flash Player's 'full screen' mode reinforces this ability to keep a user in a single window, but then again, Flash has always had that ability to confine information in a single square. We've become so accustomed to thinking outside the box that we may have to start thinking 'inside' the box again.