The making of Lemonscape

Lemonscape was my submission for the third qualifying round of the Last Photographer Standing competition. The theme for this shot was Irregular so I decided to reveal the irregular surface of a lemon. To really highlight the texture of the surface I knew I was going to need a very hard light source. The plan I put together was to use extreme contrast as well and try to make the lemon look like a crescent moon.

The first problem to solve was how to get a hard enough source of light. When shooting near macro size, even a bare normal flash head covers too large of an angle to reveal small textural details in a monochromatic surface. To make the apparent size of the light even smaller I took a small block of MDF and drilled a 3/8" hole in it. Placing that in front of the flash gave me a quite small but still bright enough light source to support the aperture I was going to need.

The next problem to solve is to prevent the light from falling on the lens and causing flare. I was going to be shooting with lens only a few inches from lemon so I needed very good light control. The solution to this was a long box (originally used for shipping a light stand). I put the flash head in one end and the lemon near the other end. I was getting a lot from this box: it prevented both lens flare and light scatter around the room which might spill on the background. It also put some distance between the light and the lemon which further reduced the apparent size of the light and hardened the shadows even more.

The final setup was lemon and backdrop at one end of the box:

and flash and mask at the other end of the box:

When I was actually shooting the flash was pushed a little way inside the box giving me excellent light control. All in all it was very simple once I figured out what I needed to do. The flash was triggered using Canon's optical remote system with an ST-E2 trigger on the camera.

There were a couple of other hiccoughs along the road. The first was depth of field. The portion of the lemon that needed to be in focus was the lit section which was not perpendicular to the axis of the lens. To get sharp focus on all the visible areas of the lens I needed to use a tilt lens and a small aperture. The other issue was the specular reflection off the lemon was extremely bright. So you can see what I was dealing with I have included a copy of the shot exposed for the highlights.

Believe it or not even in this shot the highlights are blown in small areas despite the fact that I have underexposed for the diffuse reflections by more than 4 stops. The final image is actually a Photoshop blend of two exposures: one for the specular reflections and the other for the diffuse reflections.

In the end this shot did not fare very well in the competition. As a result of one of the comments I received after the competition was over I decided to crop it a bit tighter to give it a slightly more lively composition. While I hoped to evoke both a sense of seeing a lemon in space and also emphasize a face-like feature in the lemon, in the end I don't think this idea had a chance of rating more and more than "kinda cool" so it was not the best choice of entries. In retrospect, I might have been better off submitting an alternative shot, Out of Water, which I took before I started working with lemons.

Adding a nav bar to the blog.

In this chapter about customizing the blog I'll walk through the process of adding a navigation bar below the banner. Building the navigation bar is considerably more complicated then adding to this site. I'll try to cover how my navigation bar works at the same time, but in practice I just copied the bulk of that code over from my Smugmug customizations.

Where I last left the blog template I had co-opted the original header-wrapper element to display my own custom banner JPEG. Since a single div element is no longer sufficient for my new goal, I'll need to remove the background from tag and put it elsewhere; the header-wrapper div will return to being a wrapper which contains both the banner and the navbar. Here I have commented out the reference to the background and also bumped the height up to 200px to make room for the 50px high navigation bar.

#header-wrapper {
width:750px;
height:200px;
margin:0 auto 10px;
/* border:1px solid $bordercolor; */
/* background-image: url(http://gallery.liquidairphoto.com/photos/122915663-O.jpg); */
}

Next we define a div class for the banner.

/* banner class */
div.la_banner
{
background-image:url(http://gallery.liquidairphoto.com/photos/122915663-O.jpg);
background-repeat:no-repeat;
border: 0px;
height: 150px;
width: 750px;
margin: 0 auto;
display: block;
}

I dropped this class and all of the navigation bar CSS in the template just ahead of the header-wrapper tag. Note that la_banner is a class (using a .) rather than an id (using a #). I use a class because id are required to be unique and I have several different version of the banner and navbar for different parts of the site. Technically, for the blog CSS that distinction is not important, but this keeps my CSS consistent with the rest of my code.

Next comes the navbar CSS. There are four basic pieces to this. The la_navbar div class and then a definition of a table style and a table element style and an anchor style within the la_navbar context. Of course I want the navbar to link somewhere so I want to define the style for the a tags. Most of this is boilerplate so that all the elements pack tight against each other with no space between. I have added a default background to the td element which is just a simple black to gray gradient used for inactive positions in the bar. The table elements are 125px wide so 6 items will fit across the 750px of the full column.

/* navbar class */
div.la_navbar
{
border: 0px;
height: 50px;
width: 750px;
margin: 0 auto;
display: block;
}
div.la_navbar table
{
width: 750px;
height: 50px;
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
}
div.la_navbar td
{
width: 125px;
height: 50px;
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
background-image: url(http://gallery.liquidairphoto.com/photos/123621150-O.jpg);
background-repeat: no-repeat;
}
div.la_navbar a
{
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
text-decoration: none;
text-align: center;
display: block;
width: 125px;
height: 50px;
}


Now we provide bunch of special case td backgrounds for specific buttons.

div.la_navbar .atHome {background-image: url(http://gallery.liquidairphoto.com/photos/123621770-O.jpg); }
div.la_navbar .goHome {background-image: url(http://gallery.liquidairphoto.com/photos/123621165-O.jpg); }
div.la_navbar .atGallery {background-image: url(http://gallery.liquidairphoto.com/photos/123621764-O.jpg); }
div.la_navbar .goGallery {background-image: url(http://gallery.liquidairphoto.com/photos/123621158-O.jpg); }
div.la_navbar .atSearch {background-image: url(http://gallery.liquidairphoto.com/photos/123621780-O.jpg); }
div.la_navbar .goSearch {background-image: url(http://gallery.liquidairphoto.com/photos/123621176-O.jpg); }
div.la_navbar .atInfo {background-image: url(http://gallery.liquidairphoto.com/photos/123621775-O.jpg); }
div.la_navbar .goInfo {background-image: url(http://gallery.liquidairphoto.com/photos/123621171-O.jpg); }
div.la_navbar .atBlog {background-image: url(http://gallery.liquidairphoto.com/photos/125345752-O.jpg); }
div.la_navbar .goBlog {background-image: url(http://gallery.liquidairphoto.com/photos/125345754-O.jpg); }
div.la_navbar .contact {background-image: url(http://gallery.liquidairphoto.com/photos/129014901-O.jpg); }

These are all the images I have. We will only actually use a few of them here. The "go" buttons are blue; the "at" buttons are red so that the user can always look at the navbar to see where they are. Since we are doing the blog navbar here, we'll use the "atBlog"; all the other buttons will use the "go" flavor.

Finally, now that all the CSS is ready to go, it is time to add a little HTML. This is what the HTML for the header looked like before the edits.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Liquid Air Photography (Header)' type='Header'/>
</b:section>
</div>


We have already disabled the section in the CSS so we can leave it there and just add the new HTML for the banner and navbar.

<div id='header-wrapper'>
<div class="la_banner" id="blog_banner"></div>
<div class="la_navbar" id="blog_navbar">
<table cellpadding="0" cellspacing="0" ID="Table1">
<tr>
<td class="goHome"><a href="http://www.liquidairphoto.com" target="_top"></a></td>
<td class="goGallery"><a href="http://gallery.liquidairphoto.com" target="_top"></a></td>
<td></td>
<td></td>
<td class="atBlog"><a href="http://blog.liquidairphoto.com" target="_top"></a></td>
<td class="goSearch"><a href="http://gallery.liquidairphoto.com/photo_search" target="_top"></a></td>
</tr>
</table>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Liquid Air Photography (Header)' type='Header'/>
</b:section>
</div>

It looks a little messy, but all we have done here is added a div tag for the banner followed by a div tag for navbar. Inside the navbar div there is a table with 6 td elements. The class of the td element calls out a specific background image. The td elements of the navbar which have links include an <a> to specify the destination.

Note that this particular implementation of a navbar does not use any image tags despite the fact that all the buttons and the banner are JPEGs. I tried to adhere as much as possible to keeping the format in the CSS and the content in the HTML. Done this way, it is possible to completely change the look of the banner and navbar without touching the HTML. For a Blogger template that doesn't mean much because it all goes in one file, but on my main web site that will come in handy as I write many web pages which all share the same banner and navbar.