Transcript Slide 1

Digital Photography
From “Say Cheese” to the Web
Michael Lucas, presenter
Copyright 2004 Michael Lucas
Digital Photography
Digital and
“traditional” film
cameras work on
very similar
principles.
Both use light
through a lens to
create an image
on a surface.
Digital Photography
In a traditional
camera, light is
reflected onto a
photoreactive film.
In a digital camera, a
special sensor
called a “CCD”
captures and
records the
image.
Digital Photography
A CCD, or “Charged
Couple Device”,
tracks millions of
tiny parts of an
image.
These parts are
called “pixels”,
from the words
“picture elements”.
Digital Photography
A Megapixel is simply
one million pixels.
For comparison, VGA
(640 x 480) is
about 1/3 Mpixel.
Digital Photography
CCDs can register
only black and
white.
Tiny filters control
the level of colors
in light reaching
the sensor.
Digital Photography
Each pixel consists
of two green, one
blue, and one red
element. (RGB).
This is what leads to
“pixelization”, the
graininess seen in
magnified digital
photos.
Digital Photography
Beware!
Less expensive
cameras may
advertise a high
“digital zoom”.
Digital zoom does
not increase the
number of pixels in
the given shot!
Digital Photography
If possible, choose a
camera with a
higher optical
zoom.
For day to day use,
4x optical zoom is
fine. Consider a
10x optical zoom if
budget permits.
Digital Photography
0101010
1010101
0101010
1010101
Digital cameras store
image data in
either compressed
formats (JPEG) or
uncompressed
formats (TIFF or
RAW).
Digital Photography
0101010
1010101
0101010
1010101
Which format you use
depends on the
output device.
For computer-based
viewing (Web or
email), JPEG is fine.
Enlargements or
prints may fare
better with TIFF.
Digital Photography
This JPEG is 4Kb
The same image, rotated
90 degrees, is 9Kb– more
than twice as large!
Digital Photography
0101010
1010101
0101010
1010101
Cameras write to a
variety of media.
Older cameras wrote
directly to floppy
disks.
Digital Photography
0101010
1010101
0101010
1010101
Newer cameras can
connect to a PC via
USB or serial port.
Nearly all allow the
use of removable
memory, such as
SmartMedia, XD,
MemoryStick and
so on.
Digital Photography
So what are the
functional
differences?
Digital Photography
So what are the
functional
differences?
Film cameras deal
well with bright,
high-contrast light.
Digital cameras like
softer, gentler light.
Digital Photography
So what are the
functional
differences?
Non-professional
digital cameras
sacrifice some
“depth of field”.
Digital Photography
So what are the
functional
differences?
Many digitals have
stabilizing software
(some even have a
gyroscope!) to
reduce blur from
photographer
motion.
Digital Photography
So what are the
functional
differences?
Until recently,
traditional 35mm
cameras offered
much higher
resolution than
commerciallyavailable digitals
(up to ~10 Mp).
Digital Photography
So what are the
functional
differences?
Digitals offer “instant
gratification”– you
can see your
results seconds
after a shot is
taken.
Digital Photography
So what are the
functional
differences?
Once purchased,
there is practically
no cost to using a
digital camera…
…unless you want
prints.
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
 Renaming
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
 Renaming
 Rotation
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
 Renaming
 Rotation
 Cropping
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
 Renaming
 Rotation
 Cropping
 Resizing
Digital Photography
Now that we have some photos, we need to
publish them to the Web.
There are six main steps:
 Selection
 Renaming
 Rotation
 Cropping
 Resizing
 Creating thumbnails
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Selection is simply the process
of choosing which shots you
want to publish.
Step 1 is to save all your
original data to a non-volatile
storage medium, such as CDROM.
Step 2 is to copy all your files
into a new directory.
Step 3 is to simply delete any
files you don’t want to publish.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Renaming the remaining files
is important both to the
creation of thumbnails (still
ahead) and to the automatic
generation of the Web pages
that will display the photos.
I simply number sequentially:
001.jpg, 002.jpg, 003.jpg
and so on.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
As I take numerous
photographs of people,
rotation is an important
function to me.
Most of my shots are taken with
the camera set to a right angle
to the “normal” orientation.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Next you should crop images to
draw attention to the subject
and eliminate unwanted clutter.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
A symmetric crop is pleasing to the eye
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
An asymmetric crop can add tension
and excitement to an image.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Then photos should be resized
to form a balance between
download time and clarity.
I’ve found 500 pixels in width or
height (whichever is larger) to
be a good balance for my site.
Some people use HTML to force
the Web browser to resize their
photos. This is a bad idea.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Finally, thumbnails should be
created so the viewer can get a
preview of what they’re about
to load.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Sounds like a lot of work,
doesn’t it?
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Sounds like a lot of work,
doesn’t it?
Luckily, all the steps but two
(marked in red) can be done in
batch mode.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Disclaimer:
I am about to mention some
products by name. I am not
affiliated with, or compensated
by, their associated companies.
They’re just the tools I actually
use to build my Web pages.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
We’ve already selected the
shots we want to publish, using
the thumbnail view of nearly
any popular graphics program.
Now we need to rename all the
files we’ve chosen. A free tool
called Irfanview can do this in
batch mode.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Irfanview also enables batch
mode rotation. Halfway done!
Just a note: Directing your
output to a new directory is a
good idea, just in case you’re
not happy with the results.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Cropping has to be done by
hand. Finding a comfortable
“framing distance” is something
that just takes practice.
Nearly any photo or graphics
software will give you this
function. I use Paint Shop Pro
version 7.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Good news– we’re back to batch
mode. I select 500 pixels as the
default height (or width) for my
photos, and Irfanview does the
rest– again, directing the output
into a new directory.
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
Now to make the thumbnails,
we’re going to combine a couple
of steps.
Again using Irfanview, we’re
going to rename our completed
files, and direct the output into
another new directory.
001.jpg >> 001t.jpg
002.jpg >> 002t.jpg
003.jpg >> 003t.jpg
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
This method of renaming
ensures that the right photo is
matched up with the right
thumbnail.
I then use Irfanview to resize
these copies to a height of 100
pixels.
Thumbnails are done!
Digital Photography
Selection
Renaming
Rotation
Cropping
Resizing
Thumbnails
That’s about it for the prep.
Just a couple more steps and
the page is complete.
Digital Photography
This application presumes your Web
server supports PHP (nearly all can,
and most already do).
PHP is a “hypertext preprocessor”.
It is Perl-like in syntax and very
powerful.
PHP is open source and therefore
free of charge.*
*See complete PHP license information on php.net.
Digital Photography
In a “vanilla” Web server layout, the
Web server is asked for a plain-text
file, which it delivers.
Digital Photography
A PHP-enabled server can read the
file, then perform extra functions
defined within the file, before
returning it to the user.
Digital Photography
To tell a PHP-enabled server to
execute PHP code in a document,
simply name it foo.php instead of
foo.html
Digital Photography
Here is a screen capture of the generic photo page.
Digital Photography
The code that builds this page is available from
lucas-photo.com/downloads
There are just two places where you must enter
configuration information:
// Init variables.
Changes should only be needed in this section.
$showName = "Your Title Here";
$linesPerPage = 5;
$picsPerLine = 7;
$picsPerPage = $linesPerPage * $picsPerLine;
$totalPicsThisShow = 164;
$totalPagesThisShow = ( $totalPicsThisShow / $picsPerPage );
<span class="creditBox">
<font size="-1">Photographed by</font>
<br /><strong>Your Name Here</strong><br /><br />
Digital Photography
The page has several neat functions including:
 Auto-sizing for pop-up display
 Auto-numbering for pages
 Automatic generation of navigation menu
 Attractive default image capability
 Automatic last-modified date
 Works even if user has disabled JavaScript
Digital Photography
After making the first page and entering the number
of photos you have, you will know how many total
pages to create.
Pages are named pageX.php, where X is a number
that tells the page what numbers to use in the
photo URIs.
Use makepages.pl X to make X copies of the page
with the appropriate names.
makepages.pl 3
->
page1.php page2.php page3.php
Digital Photography
#!/usr/local/bin/perl
#
# This script automates the creation of bodybuilding
# contest pages.
#
# # # # # # # # # # # # # # # # # # # # # # # # # # #
if (! $ARGV[0])
{
print ("\n\nUsage:
exit(0);
}
./makePages numberOfPages\n\n");
$pages = $ARGV[0];
$pages++;
for ($x = 2; $x < $pages; $x++) {
$name = "page" . $x . ".php";
system("cp index.php $name");
}
system("ln index.php page1.php");
Digital Photography
We’re done! We’ve gone all the way from taking the photos
to preparing them for the Web to publishing the pages.
I hope you have enjoyed this presentation. If so, you can
download a copy from
lucas-photo.com/downloads
Thank you!
Copyright 2004 Michael Lucas