The equipment I used was my 4″ Celestron NexStar 4 Maksutov-Cassegrain reflector telescope with my Canon 5D Mark II attached to it with a telescope adapter (see my video about using a telescope adapter).

Exposure

The first complication involved the exposure. The brightness of the lit side of the moon varies radically as the relative position of the sun changes. The ISO 800, 1/250s exposure of the full moon (you have no aperture control with the telescope) quickly became inadequate as darkness spread across the moon’s face — even the lit part of the moon became much darker than it had been with the full moon. My theory here is that I see far more shadows than I can resolve as the sun moves to an oblique angle to me, so the apparent brightness falls dramatically. To compensate, I had to increase the exposure as the moon waned and decrease it as it waxed. Near the new moon, my exposure had increased to ISO 2500 at 1/80s — dangerously close to causing motion blur.

Apparent Size

I told my friend Jack Andrys about this plan last November, and he brought up the issue of the moon’s apparent size changing as it moved around its elliptical orbit.

“Sure, but the effect isn’t very big,” I replied. Foolishly.

The effect is quite big actually, so I’d either have to compensate for the changing size of the moon, or figure out some way to smooth it out.

Libration

I’d known since I was a kid that the moon appears to wobble as it orbits the earth — a phenomenon known as “libration.” It’s not actually wobbling; the moon moves around the Earth in an elliptical orbit, so we see a little more of its left side at one part of its orbit, and a little more of its right at another. The plane of the moon’s orbit isn’t exactly the same as the plane of the Earth’s equator either, so we can see the moon’s north pole sometimes, and sometimes its south pole.

What didn’t I know until now? The effect of libration is huge. One day to the next I can see just by looking at my photos that the moon has tilted and rotated a lot. My plan of simply cross dissolving between moon photos was itself dissolving; the effect wouldn’t look very impressive if you can see craters shifting their positions between frames.

Making a movie of a moon tilting and rotating and growing and shrinking wasn’t going to be quite so easy. But I’m a technophile; I should be able to figure out a solution with my computer and a set of tools. And a solution I did find.

Fixing the Exposures

The first step was to make the photos’ exposures match what I thought it’d be naturally. I did this by using Lightroom’s eyedropper tool to sample corresponding bright areas of each of the photos, and adjusting the brightness and exposure until they all came fairly close. I did compensate for the darkening of the lit part of the moon in camera, but that’s only an approximation; just to get good image data to work with. The fine tuning had to happen in Lightroom.

Aligning the Images

With the moon changing its orientation each night, and with each photo showing the moon at a different angle because I took them in different positions in the sky on different nights, realistically reproducing the moon’s libration and apparent size changes seemed difficult at best.

A fairly quick Google search brought me an iPad app called Moon Globe that accurately shows the moon’s phase and orientation at any time of any day going far into the past and future. I took screen shots of this app for each night I took a moon photo at the time of day I took each photo, then brought each of those screen shots and each of the corresponding shots of the moon and aligned them using Photoshop layers. The figure at the right shows Moon Globe’s display on top and my corresponding photo below. The phase looks different because I increased the contrast of my photo in Lightroom.

Seamless Animation

I then had 21 shots of the moon with matching exposures and proper sizes and orientation. Now, how to get a seamless animation with all this?

Morphing software occurred to me. People typically use this kind of software for fun, to make movies of one of their friends or family members gradually morphing into someone else. It made sense to me that I could morph each moon shot to smoothly transition between two frames of the moon with different phases and orientations.

I don’t plan on ever morphing images again so I had to find a free one that seemed to have good quality, and I found one called Sqirlz Morph for Windows only. I use a Mac exclusively, but I also have Parallels and Windows XP, so this isn’t a problem.

For each of the 21 pairs of photos, I placed control points at corresponding major features of the moon, typically the edges of craters or small spots in the maria (“seas”). Then I have Sqirlz Morph generate an AVI that animates between the two photos of each pair. I convert each AVI to a QuickTime MOV file, import each into Final Cut Pro X, placed them in sequence in the timeline, and I had a nearly seamless animation from new moon to new moon. Small errors in various parts of this process mean you can see small glitches in the animation.

I hope you enjoy the video! Click the image below to bring up the video on YouTube.

You can comment on this blog post on its Facebook entry. Thank you!

If you followed my tutorial on building a photography website using WordPress, you probably already have some WordPress plugins on your new photography website. But my video listed several other plugins. This article goes into detail about all the plugins I listed so you can have some nice extensions to the functionality of your site. I listed them in alphabetical order.

To comment on this post, see it on Facebook. Thank you!

The question many photographers pose…

As I say on my home page, “Your business needs a website.” Why? Quick, furtive glances at people’s laptops, tablets, and phones at the local Starbucks…es (five reside in my small town) show games, YouTube…and people looking at business websites. Is your photography business on the Web? And I don’t mean on Flickr, where lots of people browse, but few photographers can stand out when it receives thousands of photos per minute. I mean your own site with your own domain name that you control and promote yourself.

Many options exist, from simple free blogs to a site customized to you by a Web developer, which is what I do for people. An easy-to-see example of this is this very site that I designed and coded as a WordPress theme.

WordPress is the path I take you in a four-part video series I’ve published on YouTube called “Your own photography website without coding.” This series is an answer to the question: “What service should I use to build my photography website?” I don’t mean WordPress the free blogging service — I mean WordPress the CMS, a very flexible and powerful software platform that can drive any website you can imagine.

Why WordPress? After some not-so-satisfying experiments with CMSs like Joomla and Drupal, I found WordPress’s CMS model to be the perfect combination of power, customizability, and ease-of-use. So enthusiastic have I become for WordPress that every single one of the last several websites I’ve designed use WordPress as the backend. I think it’s a great solution for photographers to put themselves on the Web with a great quality website for very little cost.

You can watch this series to start a website from my YouTube channel, or you can watch them right here.

Part 1 covers different options you have for hosting your website, including WordPress. It answers the question, “What is WordPress,” then begins the WordPress path by describing different hosting options, and how to get a hosting service that’s suitable for a WordPress-driven website.

You install a complete, default WordPress website in Part 2, visible to the world, though not (yet) customized to you.

In Part 3, I show the way around the WordPress dashboard for administering the site, such as creating blog posts with photos, pages and their menus, and WordPress themes. You start to have a custom-looking site by the end of this part.

I close out this series by finishing the example site with a home-page slideshow and an image gallery, I customize the menu, clean up the thumbnails, and finally discuss Search Engine Optimization.

In this series, I use an example theme which you’re free to use for your own photography website. You can download this theme that I call “CleanPhoto” from my gallery shop for free. Just “purchase” it for $0 and you’ll receive an email with a download link for the theme.

Lastly, you can run through the slide presentation I used in this series below.

I hope that, from this series, you’ll be able to create your own photography website, or that you’ll have the knowledge to use other solutions.

To comment on this post, see this post on Facebook. Thank you!

1. Even lighting
2. Faithful color
3. No distortion

While an artist publishing work for magazines and high-volume prints should go to a company dedicated to making reproductions, you can go far with a DSLR and a couple of strobes, as well as a couple of other affordable tools.

Even Lighting

Light needs to spread evenly over the entire surface of the artwork, so you need a large light source. The light from that source also has to come from the sides of the artwork to avoid reflecting any light into your camera lens.

I found that a good way to do this is to put large reflectors on either side of the artwork, and large sheets of foam core do nicely. Then point one strobe on each side of your camera with their light crossing in front of the camera to land on the opposite reflector. You need to flag the strobes so they don’t light the artwork directly — their light should only touch the reflectors.

Lighting artwork with two strobes and reflectors

In the video below, instead of crossing the light, I simply pointed each at the reflector on its own side. After making the video, I found that crossing the light made it easier to make the light on the artwork even.

Faithful Color

Faithful color is more critical here than with any other kind of photography, so you need the right tools. The best tool for this job is the X-Rite ColorCheck Passport. This combination of a color card, gray card, and software creates a color profile for each lighting situation.

First, you need to get the in-camera white point set properly. Set up all your lighting, then open the Passport to the gray card and place it where your artwork is. Take a shot of the card close-up with all your lighting turned on, then use your camera’s custom white point based on this photo.

Next, flip open the Passport’s color panels and place it where your artwork is again. The X-Rite software finds the Passport in your photo, but you have to set it up so that the panel with the three rows of gray is on top like in the picture. The software might not be able to find the Passport in your photo if it sits in a different orientation.

Proper orientation of the ColorCheck Passport, with the panel with three rows of gray color chips on the top

Now you can continue with the rest of the shoot. Since lighting shouldn’t be changing during a shoot of artwork, this one shot of the Passport should do ya. You only need to reshoot the passport when lighting conditions change.

The ColorChecker Passport software includes both a stand-alone app as well as a Lightroom plugin. As I use Lightroom, I’ll describe the plugin here.

Choosing a color profile

Once you copy all your photos — including the one of the Passport — into Lightroom, edit the Passport photo. First, set the white point to neutral by clicking the gray square with a notch in the second row of the upper panel. It should already be pretty close because of the custom white balance you set in camera, but this just sets it to perfect. Then export this photo with the ColorChecker Passport export preset. This doesn’t really export the file — it sends the image to the Passport software to find the Passport in the photo and create a color profile based on it. It immediately asks for a name for this profile, so name it something identifiable for this shoot.

The Passport software alerts you when the processing is done. Lightroom presets can’t tell Lightroom a new color profile exists (at least in Lightroom 3), so you have to quit Lightroom and relaunch it. You then go to the Camera Calibration panel at the bottom of the development panel, then go to the Profile pop-up menu. Choose the profile you just named. You should immediately see the colors of your image shift a bit, especially blue.

Now you need to make the darks and lights of your photo of the artwork match the darks and lights of the original artwork. To begin this process, look at the bottom row of the upper panel of the Passport for the row of gray chips. The left-most is a reference black and the right-most is a reference white. These two chips have to go to the ends of your exposure histogram.

Begin by turning on highlight clipping in Lightroom. You do this by clicking on the two triangles in the upper corners of your histogram.

Lightroom buttons to turn on clipping highlighting

Now any blacks in your image that are pure black turn blue, and any whites that are pure white turn red. Your task is to adjust your Exposure and Blacks settings to put these two chips right on the edge of purity without crossing into it. Move the exposure slider to the right (most likely, unless you over-exposed the photo) until the right-most chip turns red, then back off until it’s white again. Do the same with the Black slider until the left-most chip turns blue, then back off until it’s black again. If you think the resulting image has too much contrast, you can simply back off the Exposure and Black sliders a bit more.

You can now copy the White Balance, Basic Tone, and Calibration settings from this photo to all the other photos in your shoot by selecting all the photos in your shoot, and making this Passport photo the most selected. Then click the Sync Settings button at the bottom to copy the now-calibrated color settings to all the photos in the shoot. You only need to click the White Balance, Basic Tone, and Calibration check boxes.

Your image of the artwork now has colors faithful to the original.

No Distortion

Lastly, you need to go to the image of the entire artwork that just received the proper color calibration to fix up any distortion, either from the lens, from you not shooting the image from exactly directly in front of it, and maybe from the sides of the artwork not having exact right angles (you may or may not want to correct this last one).

In Lightroom’s Develop module, scroll down nearly to the bottom to the Lens Correction panel. First, turn on automatic correction which automatic barrel distortion. Click the Profile tab, then check the Enable Profile Correction checkbox. If the lens you used is in the Lightroom lens database, it’ll automatically correct the lens distortion the proper amount.

You then need to correct the edges of the artwork so that they’re square (unless they aren’t square in the original; in that case, you may want to place a frame known to have square corners that completely surrounds the artwork when you photographed it, then correct the image using that frame). Click the Manual tab of the Lens Correction panel. You then need to manipulate the Vertical, Horizontal, and Rotate sliders until the edges of the artwork line up with the grid that appears over the image. Each slider affects the other settings, so you’ll need to keep adjusting each one and correcting what each one does to the other settings until your artwork appears exactly square.

Conclusion

Now you have a photo of the artwork ready for reproduction. You may want to produce two versions of the photo cropped differently — one that crops to the very edges of the artwork, and one that includes the Passport. That lets people receiving that image do their own color calibration.

Many thanks to X-Rite for talking about this blog post on their blog!

Dave Reckart Headshot

Pacific Color Graphics, a commercial printer in my own town of Pleasanton, CA, asks me to photograph some new products they’ve produced every few months. This round is for November 2011, and it included a big variety of products from shirts, caps, key rings, storefronts, and a headshot of their CEO, Dave Reckart.

I Dave’s headshot in their front lobby where they have a beautiful dark-blue wall. I set up an entire studio including a soft box for the key light and a shoot-through umbrella as fill, and a gridded flash to illuminate the wall behind him.

Another unusual request was to photograph an AT&T storefront in the Town Center at Corte Madera. Pacific Color produced the front window display and asked me to photograph it. Reflections of the parking lot in the window was a big problem, and so I arrived there in the evening just after sunset and used a very long telephoto to avoid a reflection from the sky.

AT&T Storefront, Town Center at Corte Madera

They made a beautiful keyring that I photographed in a light box and made a YouTube video showing how I photographed it.

Lexus keyring

EA Sports Keyrings

SEGA Skateboard

To comment on this project, please see its Facebook post. Thank you!

Tōrō in front of falls

All Hallows Day, 2011, and I met up with Jack Andrys for a fun and quick photo exploration of the Japanese Friendship Garden in San Jose, California. Quick because it closes at sunset, effectively cutting off half of our “golden light” opportunity. No dawdling either — the rangers come around and make sure you’re out of there at sunset.

Waterfalls through the leaves

Our first target was a waterfall I’d missed the first time I came here in September. Of course, waterfalls mean tripods and long exposures, but the last time I was here I think I went a bit too far with a 10-second exposure, making it tough to tell what the water was. This time I limited my exposure to just a second or two, and I do like the results much better.

Glowing Falls

For these shots, I also went wild with post processing, doing HDR processing by default, as the contrast of the scenes were usually pretty high. I also altered the colors, not only of the overall scenes, but of specific elements of the photo. For example, I changed the color balance of the shot of the falls through the leaves to be very red to give a fall feeling, but then used the brush in Adobe Lightroom to color the falling water a bit bluish.

We ended the evening at the small building near the main entrance to the gardens. I decided to use a technique I’d heard of but never tried. Take a photo of the scene without any lighting, then walk into the scene with a flash and trigger the camera remotely using a Pocket Wizard Plus II set. In this case, I held the flash to the bottoms of the lanterns around the edge to make them appear like they’re lit. I then combined all the resulting photos into one, making sure only the lit lanterns are included — not me holding the flash.

The result: I think it’ll take me a little practice. For one thing, the missed shot rate of the Pocket Wizards was dismal, even though all their batteries were fresh out of the package. I have found Pocket Wizards to be very temperamental and sometimes frustrating, making my usual go-to remote triggers RadioPoppers.

Japanese building with lit lights

To comment on this article, please see its Facebook post. Thank you!

Clickable map of Hawaii

The amount of Javascript to make the panels and dots fade in and out is very small, and uses the jQuery library to handle the grunt work.

	// Set the map's glowing dots and information panels initially invisible, and
	// hide the information panels so they don't interfere with each other later.
	// They're all absolutely positioned and one on top of the other, so not hiding
	// them causes links within lower ones to be unclickable.
	$(".dot").fixPNGs().css({opacity: 0});
	$(".island-text").css({opacity: 0}).hide();

	$(".dot").hover(function () {
		// When a dot is hovered over, fade it in, then take its id, strip off the "dot-" prefix
		// and add a "text-" prefix to match the corresponding information panel's id.
		$(this).stop().animate({opacity: 1}, 100);
		var selectedElement = "#text-" + $(this).attr("id").replace("dot-", "");

		// Fade out the currently displayed information panel, which we know because it has
		// the current-island class on it, and fade in the information for the currently hovered
		// dot. But only do this if the currently hovered dot is different from the currently
		// displayed information panel.
		if (selectedElement !== ("#" + $(".current-island").attr('id'))) {
			// After the current panel fades out, hide it to keep it from covering the links of
			// the newly revealed panel. Add the current-island class to the newly revealed panel
			// so we can keep track of it.
			$(".current-island").animate({opacity: 0}, 500, function () { $(this).hide() }).removeClass("current-island");
			$(selectedElement).show().animate({opacity: 1}, 500).addClass("current-island");
		}
	}, function () {
		// Once the mouse moves off a dot, fade it out. The information panel stays though
		$(this).stop().animate({opacity: 0}, 500);
	});

The overall architecture is that the blue uncovered dots are built right into the map’s JPEG file, but the glowing dots that fade in when you hover over them are a separate PNG file with one glowing dot in it. Anchors for each island are absolutely positioned over the blue dots and use the PNG file as a background image, and initially given an opacity of zero. The information panels are a set of DIVs, each of which is hidden at startup.

The main trick with the map’s Javascript function is that the id names of each dot and each information panel are matched up to be the names of each island, but with different prefixes, “dot-” for the dots and “text-” for the information panel. When the Javascript detects that a dot has been hovered over, it grabs the id for that dot, strips the “dot-” prefix from it, prefixes “text-” in front of it, and uses that new id to find the corresponding information panel, fading it in. Of course, it also fades the previous one out if there is one.

I hope this is helpful for your clickable maps. My code is available under Creative Commons for both commercial and noncommercial use with or without attribution to me.

To comment on this article, see its Facebook post. Thank you!

Google SERP for “responsive”

A very impressive result, and a very impressive technology you can see right in your Web browser if you go to the right websites, where you see elements reposition and resize themselves as you make a browser window narrower and wider. This supposedly benefits mobile users who can see a website tailor made for them, with unnecessary elements removed and side-by-side elements on a desktop browser moved to be one on top of the other. So ingrained has this become that Web design guru (my title for him) Andy Clarke stated:

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.¹

Google News on an iPhone

Let’s take a step back and look at an actual responsive Web design on a target device: an iPhone. The site: Google News.

I scaled this screen shot to be roughly the size of an actual iPhone, though the size of the screen you’re viewing it with could make its size a lot different (especially if you’re reading this on an mobile phone). But on a desktop browser, it’s the size of an iPhone screen. A young person reading this would have no problems, but someone with eyes weakened by even middle age could have a really tough time reading it. One of the innovations of iOS is that you can zoom Web pages very easily. Only, you can’t; not with Google News which is responsive by using a fluid width — the width is always a high percentage of the width of your browser; the site isn’t zoomable. And for someone over 40, that means it’s unreadable.

Now let’s look at a completely unresponsive website: apple.com. When the page first comes up, it’s even more unreadable than the Google News site, I’d guess even for younger people. But a double tap on the text instantly zooms it to be completely readable.

Apple.com non-responsive website, unzoomed and zoomed.

We have Google News which specifically targets mobile devices and is unreadable, and the Apple site that pays no attention to the target device, and is easily readable on a mobile device.

You might think I’m calling for an end to responsive Web design. If we only had a dichotomy of responsive and unresponsive Web designs, then that would be true because I think this push for responsiveness mostly makes websites frustratingly unreadable.

But, as is nearly all of life, this isn’t a dichotomy — this is a spectrum. Within that spectrum, I’d like to try to coin a new term: lightly responsive Web design.

This website is lightly responsive. If you browse it with a mobile phone you might conclude it’s non-responsive. But this site does look for phone-sized mobile devices and increases the default font size for them. That’s all. That’s the only nod towards responsiveness I’ve made, and that’s because I want this site readable by someone with weak eyes. If the font size is still too small to read, the visitor can unpinch to zoom and make it even larger because I haven’t made this site fluid width. Fixed width makes sites readable on mobile devices with a simple double tap or unpinch.

My lightly responsive site on a desktop scaled down and on an iPhone

Here’s my call to action. If you’ve been designing fluid-width websites for responsiveness, put a piece of waxed paper over your phone’s screen and see how readable it is. Then try a fixed-width site and unpinch to zoom and see if you can read it more easily. I think you’ll make a lot of people with weak eyes much happier.

If you’re letting the responsive Web design trend pass you by, I think you’re doing just fine. But you might want to give lightly responsive Web design a try. It’s quite easy by using media queries, and may give your sites a bit of an edge.

To comment on this article, see its Facebook post. Thank you!

A Photoshopped Reflection

In the hands of someone skilled with Photoshop, you’d never know Photoshop was involved. But Photoshop was clearly involved with this photo. The camera’s obviously looking down on this nail polish bottle, but the problem is its reflection also looks like you’re looking down on it. But its reflection should appear like you’re looking up on it, so you should be able to see a bit of the bottom of the bottle in the reflection. This photograph screams Photoshop because someone just copied the bottle, flipped it upside down, and applied a gradient mask to it.

Unedited nail polish photo with a real reflection

Photoshop fan though I am, really the only way to make a proper photograph of a product and its base reflection is to photograph the product with a real reflection. So I took a nail polish bottle (belonging to my daughter; I can’t pull off the flower boy look) and photographed it on a sheet of white acrylic to make a real reflection. I also used a home-made light box made of PVC and wrapped it in a bed sheet as a diffuser for the cross lit strobes.

The photo as it came out of the camera shows a very strong reflection all the way to the top of the bottle. I edited the photo in Adobe Lightroom to correct the color and increase both the contrast and brightness, and to apply a gradient filter to the reflection to contain it better. That left some flaws in the bottle itself, some visible dust on the acrylic sheet, and shadows on either side from the cross lighting. So off to Photoshop the photo went to make the final product shot.

Photoshop-edited final nail polish bottle photo

It would be fun to do a version of this photo with dramatic lighting, like a halo of light around the bottle in darkness. But most cosmetics ad agencies aren’t looking for that. Look at Shiseido, L’Oréal, Chanel — all of their websites display their cosmetics on pure white backgrounds, sometimes with reflections, usually without. They want the cleanest look possible.

I made a video showing the photo shoot setup.

I’d love to hear from you! Feel free to comment on this post in its Facebook link.

Forrest Tanaka

Since I launched the first version of this website in August 2010, I feel like a different person with all I’ve learned about Web design and development. Back then I embedded a WordPress blog in the site that was otherwise coded in standard HTML and CSS, and I really didn’t understand WordPress that well. In October 2011, this is a WordPress-driven site, as the last several sites I’ve designed have been. I’ve become a WordPress expert and enthusiast, and comfortably code in the PHP programming language that drives WordPress. I code all websites in HTML5 and CSS3 now as well, which was simply on my to-do list to learn last year.

This also represents a rebranding of my business. My logo’s calligraphic playback button still lives unchanged, but the text style and content have changed. Before, I kept my Web design and photographic businesses separate. The new logo text now shows the merging as I now offer a complete package of Web design and photography for businesses. That means I no longer photograph family events. I knew I had to focus my business, and I’ve decided to focus on businesses as my customers.

Forrest Tanaka calligraphic logo vs digital camera playback symbol

This is also the very first site I’ve designed that doesn’t support Internet Explorer 6, and it doesn’t support Internet Explorer 7 either. The time it takes to shoehorn modern websites into those obsolete browsers simply isn’t worth it for my business case. My standard contract for Web design now does not include support for Internet Explorer 6.

I have so many people to thank for this progress: Mridul Chaturvedi for giving me my first chance at designing and implementing a site for a business; Christina Broadwin and her family that hired me for my very first family photography event; Martin Bailey for helping me become the photography enthusiast that I am today; all the people in the Livermore Valley Camera Club and the judges they’ve invited for helping me hone my photographic craft; all my website clients like Café Tandoor, Pacific Color Graphics, Frodo Joe’s Petit Café, David Tomb, Flax art & design, Jeepney Projects Worldwide, Peter Barto, and so many other valuable customers who’ve supported my Web design and photography.

This website now becomes a breathing document, as I plan to deploy new technologies and techniques here. Subscribe to my Facebook feed, Google+ page, or Twitter feed to see all the latest things that happen here.

Hello, world!

To comment, see this post on Facebook.