Tilt-shift photography (also known in the industry as “swing and tilt”) is a method by which photographers can take an aerial shot of a real-life place that makes it look as though it’s a miniature model. It’s a fascinating effect, and I have always found it interesting how the lens can fool the eye into believing something that isn’t real simply by adjusting light and focus. The end-result is very cool, and always reminds me a bit of the intro to Mr. Roger’s Neighborhood.

Some Amazing Examples of Tilt-Shift Photography

While tilt-shift photography has been gaining momentum, photographers Olivo Barbieri and  Vincent LaForet were some of the first to bring this technique mainstream, with LaForet’s work featured in the New York Times and all over the country. I’ve included a few of his pieces here, but if you like this style, be sure to check out the New York Times photo slideshow (with fascinating audio) of his work, a great collection of 50 Beautiful Examples of Tilt-Shift Photography by Smashing Magazine, and a substantial collection on Funtasticus (although I suspect a few of these may be faked – but more on that later.)

Photo by Vincent LaForet

Photo by Vincent LaForet

Photo by Vincent LaForet

So How Does it Work?

According to Wikipedia:

Tilt-shift photography refers to the use of camera movements on small- and medium format cameras. In many cases, it refers to tilting the lens relative to the image plane and using a large aperture to achieve a very shallow depth of field. The technique relies on the Scheimpflug principle [a geometric rule that describes the orientation of the plane of focus of an optical system (such as a camera) when the lens plane is not parallel to the image plane] and usually requires the use of special lenses.

“Tilt-shift” actually encompasses two different types of movements: rotation of the lens, called tilt, and movement of the lens parallel to the image plane, called shift. Tilt is used to control the orientation of the plane of focus (PoF), and hence the part of an image that appears sharp. Shift is used to control perspective, usually involving the convergence of parallel lines.

Applying tilt on a small- or medium-format camera usually requires a tilt-shift lens or perspective control lens; shift can be applied with the same type of lens or with a lens that offers only the shift movement.

An article on Cheapshooter describes it like this:

A tilt-shift lens allows the photographer very exacting control over the depth-of-field in an image, much more than any regular lens could provide. Focus can be restricted to a single, narrow band, with everything else rapidly blurring away. This distorts the appearance and makes the eye think that distances are a lot smaller than they typically are. When applied to a large scene like a city or a museum, everything appears miniature.

Tilt-shift and perspective-correction lenses are available for many SLR cameras, but most are far more expensive than comparable lenses without movements. The Lensbaby SLR lens is a low-cost alternative for providing tilt and swing for many SLR cameras, although the effect is somewhat different from that of the lenses just described. Because of the simple optical design, aberrations are significant, and sharp focus is limited to a region near the lens axis. Consequently, the Lensbaby’s primary application is selective focus. If that’s what you’re looking for, however, the Lensbaby may be a great (and affordable) choice.

Tilt-Shift for the Rest of Us: Miniature Faking

Unlike my amazingly talented husband, who is a professional photographer (among other things), I am less-than-awesome behind a camera. I’ve managed to pull off a few decent shots in my life, but only thanks to digital cameras, and taking thousands of shots, hoping one might come out the way I want. Seriously, if I were kidnapped by that bad guy from the Saw franchise, and all I had to do to get out was take a decent photo using a camera that doesn’t auto-focus, I’d be dead.

My skills are more in the post-production area, using Photoshop to create the effect I am not capable of achieving through my camera alone. I can fake it, even though I can’t make it.

And just like everything else genuine and cool in this world, you have to figure that eventually someone would figure out how to fake it.

In principle, it’s not hard to make a fake: essentially, pick an area in a photo that you want to sharpen, then blur the rest. (Unnatural color saturation, one helpful fake-tilt-shift tutorial offers, “makes it look more as if it’s built from polystyrene and lichen.”) In practice, it’s a little harder and takes some time, but the end results are really fun.

Two excellent tutorials on using Photoshop to turn a regular photo into a faked tilt-shift photo can be found on TiltShiftPhotography.Net and Receding Hairline, although like any other tutorial for photo editing, it’s not an exact formula since every photo is different. Once you get a feel for the process, you’ll want to play around with the settings until you get the end result you’re looking for.

If you don’t have any aerial photos laying around to practice on, consider using Google Earth.  To get an idea of exactly how amazing this effect can be using Google Earth images, check out this video on the Google Earth Blog, that does a video flyover of San Francisco using faked tilt-shift photos based on images from Google Earth. Simply incredible.

And, For the Truly Lazy…

The website TiltShiftMaker.Com lets you upload your own real-life photos, and use a simple interface to select the area you want to focus on. Click a button, and boom, you’re done. If you’re skeptical that it can be that easy, check out their gallery on Flickr and see for yourself.

Possibly related posts:

1. Photo Retouching – How to Salvage a Dark Digital Photo I prefer not to shoot with flash when I can...
2. Put a Fun, Techy Spin on the Boring Office Card You know the drill – someone in the office is...
3. Facebook and MySpace Users, Beware! I have received two virus emails from two unrelated friends,...

This code will allow you to create a thumbnail from a segment of the image. In some situations, you want to thumbnail an entire image – but other times, you may want only a piece – for example if you wish to generate square thumbnail images regardless of whether or not the original image is landscape or portrait style.

The basics are as follows:

1. Resize the image, using the $newthumb size value as the SMALLEST measurement (height in the case of landscape images, width in the case or portrait images). So if you had an original image that is 400 pixels wide and 200 pixels tall, it would set the height to 60 (since 60 is the $newthumb height we’ve used in the example below) and then resize the width down according to whatever ratio is that will contrain the proportions.
2. Trim off the extra so that the end thumb is 60×60.

$orig_path = ‘/path/to/original/file/’;
$micro_path = ‘/path/to/cropped/file/’;
$imagefilename = ‘myimage.jpg’;

$size = getimagesize($orig_path.$imagefilename);

/**
* new cropped thumbnail sizes
*/
$newthumb_width = 60;
$newthumb_height = 60;

/**
* assign friendlier values to getimagesize data
*/
$orig_width = $size[0];
$orig_height= $size[1];

$width_ratio = ($newthumb_width / $orig_width );
$height_ratio = ($newthumb_height / $orig_height);

if ($orig_width > $orig_height ) {
// this is a landscape image
$crop_width = round($orig_width * $height_ratio);
$crop_height = $newthumb_height;

} elseif ($orig_width < $orig_height ) {
// this is a portrait image
$crop_height = round($orig_height * $width_ratio);
$crop_width = $newthumb_width;

} else {
// this is a square image
$crop_width = $newthumb_width;
$crop_height = $newthumb_height;
}

$source_img = imagecreatefromjpeg($orig_path.$imagefilename);
$dest_img = imagecreatetruecolor($newthumb_width,$newthumb_height);

/**
* if you want to crop from a specific area, for example, if you
* want to crop the image from the middle instead of the top left,
* you’ll need to do some more math to replace the 0,0,0,0 bits here.
*/
imagecopyresampled($dest_img, $source_img, 0 , 0 , 0, 0, $crop_width, $crop_height, $orig_width, $orig_height);
imagejpeg($dest_img, $micro_path.$imagefilename);
imagedestroy($dest_img);

Possibly related posts:

1. Dynamic thumbnailing with PHP and the GD library Although there are loads of ways you can do this,...
2. Photo-Realistic Painting in Photoshop While Photoshop is an incredibly powerful photo manipulator, you can...
3. Dynamic Watermarks/Text Overlay on Images in PHP This code can be useful for a number of things,...

This code can be useful for a number of things, such as making dynamic banners or for adding a copyright type of watermark to photographs or artwork (as we do in snipe gallery). As usual, this will not work for gifs unless you have a version of gd that lets you do that (cuz the folks at Unisys are a bunch of mo-mos).

The example here is taken from the Godsmack sig generator, so it’s designed to create white text with a black drop shadow on a preformatted blank banner.

Note: Remember that PHP must be compiled with jpeg/png/gd support, AND that the font file must be uploaded to the server for this to work. For our purposes, we’ll assume you’re going to take this snippet and make it into its own file, which we’ll call “mkwatermark.php”.

// specify the file name - you can use a full path, or "../../" type stuff here
// if the image is not in the same directory as this code file
$image = imagecreatefrompng("gs-banner-sm.png");

// specify the font size
$font_size = 14;

// in this case, the color is white, but you can replace the numbers with the RGB values
// of any color you want
$color = imagecolorallocate($image, 255,255,255);

// make our drop shadow color
$black = imagecolorallocate($image, 0,0,0);

// and now we do the overlay - the layers of text start top to bottom, so
// the drop shadow comes first

// $image - the base image file we specified above
// $font_size - Well duh. Its the size of the font
// 0 - the angle of the text - we don't want an angle, so we leave it at 0
// 55 - pixels to the right from the leftmost part of the image
// 35 - pixels down from the top of the image
// $black - the color we defined above
// "../fonts/ARIALBD.TTF" - the location on the server that the font can be found
// "Test Text" - the text we're overlaying - you can also use a variable here
ImageTTFText ($image, $font_size, 0, 56, 36, $black, "../fonts/ARIALBD.TTF","Test Text");

// Now add the actual white text "on top"
ImageTTFText ($image, $font_size, 0, 55, 35, $color, "../fonts/ARIALBD.TTF","Test Text");
header("Content-type: image/png");
imagepng($image);
imagedestroy($image);
}

To print out the image, we would just have to wite the html as:

<img src="mkwatermark.php">

Note about Variables – If you are using any variables outside the file to determine what the code does (for example, making the text a variable as we do with the Godsmack sig generator), be sure to secure your code and check to be sure the user can’t do any damage to your system by entering harmful values.

Possibly related posts:

1. Dynamic thumbnailing with PHP and Imagemagick This code formatting is a little off, since the WYSIWG...
2. Dynamic thumbnailing with PHP and the GD library Although there are loads of ways you can do this,...
3. Sending HTML/Plain Text Mail Simultaneously using PHP Although I expect this article to cause a few ruffled...

Although there are loads of ways you can do this, for this example, we’re assuming that the fullsize image is located in a directory called “images”, and the thumbnails will have the same name as the fullsize, but will be copied into a directory called “thumbs”.

<?php
// find out the current size info
$photo_filename = "myimage.jpg"
$path = "/home/snipe/www/images/";
$image_stats = GetImageSize($path.$photo_filename);
$imagewidth = $image_stats[0];
$imageheight = $image_stats[1];
$img_type = $image_stats[2];
$new_w = 100; $ratio = ($imagewidth / $new_w);
$new_h = round($imageheight / $ratio);

// Find out if we need to resize it by checking to
// see if the original image is larger than the
// defined new width, and making sure the
// resized version does not exist yet

if (($imagewidth > $new_w)&& (!file_exists($path.$photo_filename))) {

// if this is a jpeg, resize as a jpeg
if ($img_type==2) {

$src_img = imagecreatefromjpeg($path.$photo_filename);
$dst_img = imagecreate($new_w,$new_h);
imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,imagesx($src_img),imagesy($src_img));
imagejpeg($dst_img, $path.$photo_filename);

} elseif ($img_type==3) {
// if image is a png, copy it

$dst_img=ImageCreate($new_w,$new_h);
$src_img=ImageCreateFrompng($path.$photo_filename);
ImageCopyResized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,ImageSX($src_img),ImageSY($src_img));
Imagepng($dst_img, $path.$photo_filename);

// Normally if image is neither png nor jpeg
// (ie, invalid image or a gif file), I use
// the fullsize as the thumbnail and just
// resize it through the html size tags. For this
// example tho, we’ll pretend we have a version of
// Gdlib that can handle gif resizing

} elseif ($img_type==1) {

$dst_img=ImageCreate($new_w,$new_h);
$src_img=ImageCreateFromGif($path.$photo_filename);
ImageCopyResized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,ImageSX($src_img),ImageSY($src_img));
ImageGif($dst_img, $path.$photo_filename);

} else {
// if it doesn’t show up as any of the valid formats, give an error
echo ‘error’;

} // endif img_type sequence

}

?>

Possibly related posts:

1. Cropped Thumbnails using PHP and the GD Library This code will allow you to create a thumbnail from...
2. Dynamic thumbnailing with PHP and Imagemagick This code formatting is a little off, since the WYSIWG...
3. Dynamic Watermarks/Text Overlay on Images in PHP This code can be useful for a number of things,...

This code formatting is a little off, since the WYSIWG editor seems to have eaten part of it. Sorry.

<?php

/* ———————————————- */
/* ———— BEGIN PHP SNIPPET —————-*/
/* ———————————————- */
// specify your file details
$current_file = “image.jpg”;
$max_width = “150″;

// get the current info on the file
$current_size = getimagesize($current_file);
$current_img_width = $current_size[0];
$current_img_height = $current_size[1];
$image_base = explode(“.”, $current_file);

// this part gets the new thumbnail name
$image_basename = $image_base[0];
$image_ext = $image_base[1];
$thumb_name = $image_basename.“-th.”.$image_ext;

// determine if the image actually needs to be resized
// and if it does, get the new height for it
if ($current_img_width > $max_width) {
$too_big_diff_ratio = $current_img_width/$max_width;
$new_img_width = $max_width;
$new_img_height = round($current_img_height/$too_big_diff_ratio);

// presto chango alacazam
$make_magick = system(“convert -geometry $new_img_width x $new_img_height $current_file $thumb_name”, $retval);

// let us know if it worked or not
if (!($retval)) {
echo “Thumbnail created  -”.$thumb_name;
} else {
echo “Oops – no dice! Script failed cuz your momma doesn’t love you.”;
}
} else {
echo “No need to resize! You’re perfect just the way you are.”;
}

?>

Possibly related posts:

1. Dynamic thumbnailing with PHP and the GD library Although there are loads of ways you can do this,...
2. Dynamic Watermarks/Text Overlay on Images in PHP This code can be useful for a number of things,...
3. Extending Facebook Static FBML Tabs with Dynamic Content This tutorial walks you through how to use DynamicFBML to...