Jan 19, 2017

On long shadows in graphics

It seems that just about everywhere you look now, you see simplified icons. I think that the trend kicked off when the Windows 8 UI came out in 2012, where all screen icons were simple and flat. Since then designers had been adding the illusion of depth via shadows to give the flatness a bit of substance. Nothing new there. However, over the past year I've been noticing ever more flattening of the shadows themselves, without a typical blur, and the length of the shadows extended to the edge.

In practice there may very well be a variety of ways to make long shadows and everyone has their preferred way, but I pick rendering in Blender because of the flexibility of the creative process. The main thing to look out for is to set the light source to Sun because it is directional and even across the whole scene, and in turn it produces shadows. Angle the the Sun at a steep 90 degrees, then rotate it on the Z axis to whichever direction you want the shadows to go. As you play around with the scene the shadows are an instant by-product!

Dec 12, 2016

On photographing beer cans for product photography

The challenge with beer cans in product photography is that they are curvy and reflective, which has to be managed with care. The current trending style for displaying bottles and cans features a white vertical reflection on one side or both.

A popular current technique for producing product photography is using a white product tent. I got one only recently, and became an instant convert to this method. My current ideal setup for photographing objects is placing them into something like a reflective white cyclorama tube; this can apply to real photography but is more achievable in 3D software. If you can imagine, the photo shoot would be inside of a white shiny tube that is partly squeezed from top to bottom, and extending to the left and to the right, that's what I'm thinking. In reality however we work with what we've got, and a bunch of MacGyver-ish improvising -- still you get most of the effect that you want.

Features to target include:
  • Even illumination, as the light bounces from top to bottom throughout the scene 
  • A seamless background that doesn't cause overexposure flares that break colors and ruin sharp object edges 
  • A real base reflection 
  • Space to the left and right of the object where you can place a white body or a black body to interact with the object but stay out of frame -- remember that if the object is highly reflective then you will need to give it something to reflect 

The setup here was:
  • A white product tent for even illumination, with softbox lights to the left and right, spaced far enough to avoid hot spots 
  • The base was standard shiny white perspex 
  • White styrofoam panels to the left and right, for white body reflections, placed and angled just right to get nice reflections and minimise blocking the lights -- find a balance 
  • A white mask in front of the camera to minimize the camera's black body being seen reflected in the object -- in post, unwanted reflections were further de-emphasized or removed 

Here is a sample of the results:

[1] Left, Basic retouch and deep-etch  [2] Right, same as Left + reflection + asymmetrical lighting + 5 percent black background

[3] Left, sample promo layout square cropped  [4] Right, sample promo layout xmas tree 

Dec 29 2016
Client website had been updated with new images

Dec 9, 2016

sq1.net.au website redesign 2016

Earlier this year I started using Google's Material Design Lite (MDL) as my preferred web design framework for bespoke websites. This was a departure from my previous long-standing Blogger/WordPress CMS approach. Somewhat related, recently I was asked to assist with the upkeep of the Square One Studios website, sq1.net.au. As one good idea leads to another, I thought that it would be a great idea to combine the two. So I prepared a template, copied the content from the existing website to my proposed MDL prototype, and tweaked it while waiting for the right moment to pitch it to the manager. Soon enough we sat down for a workshop session to apply requested changes, and it was ready for upload.

The advantages of the new design are many, but these are the main points:

  • Contemporary website layouts are expected to transform automatically to fit any device that they are viewed on, so now that's up to date.
  • Sophisticated layout elements are available from the MDL framework and can be applied with relative ease. 
  • Site maintenance is simplified by needing to edit only one HTML file.
  • The use of codepen.io for editing enables expert facilitated rapid prototyping in a workshop session that is client oriented and user-friendly.

Between the dynamic layout and the relatively flexible design elements, this site is now ripe for change via incremental improvements if you like that sort of thing as I do.