Tip:
Highlight text to annotate it
X
Chapter 8 Section 50: Preparing thumbnails. A thumbnail is a small image
that is normally linked to a larger version of the same image.
The thumbnails download quickly
and the website visitor makes the decision themselves whether they click a
thumbnail
so that they can see a larger version. That way you don't make them wait for
the larger version - they make that decision themselves.
To create a thumbnail image, you'll need to have
a larger image to start with.
I have downloaded storm one and storm two, those are available on my website,
to my images folder this time.
I downloaded them into my images folder because these two are going to be the
larger images that the thumbnails link to
and I didn't place them in my assets folder - I just placed them directly
into images.
So these are the larger versions of the image.
My storm one is visible right now.
We would want to decide whether our thumbnail would include the entire image
or if we crop just a portion of the image. I'm going to use the full image
but let me show you what I mean by cropping just a portion.
I have my resolution set to 72 and have the crop tool, and if I wanted to
display
just a portion of the image,
I could crop the thumbnail like that and that could link to the entire
full-version
at a larger height and width,
but i'm going to
use the
full image for both of these
as the thumbnail.
To prepare this i'm going to go to image,
image size,
and i'm going to set my resolution to seventy-two pixels per inch, if it is
not already seventy-two.
I'm going to make certain that all of the boxes at the bottom are checked
and that I have chosen bicubic sharper which is best for reduction.
I'm going to enter a width of ninety-six.
Thumbnails are usually from about seventy-two
pixels per inch to ninety-six pixels per inch -
on the width.
I'm going to click
okay,
and now I have a thumbnail version of that,
but I need to save the thumbnail version.
Now be careful here, we're going to file,
save for web and devices.
I'm still in the four-up view. I'm clicking on
one of the available windows,
choosing JPEG medium,
embedding the color profile,
I'm going to click save.
I'm going to make certain I'm in my images folder,
but I'm going to add to this name and call it storm1_small.
This way I will know that this is the small version of the storm one image,
and i'm going to click save.
Now I have a web-ready thumbnail.
Now I could repeat this process for storm two,
but i'm going to
undo this process by pressing control-z,
or control-alt-z to take me back to the original size, and i'm going to
show you something called a batch action in photoshop.
In photoshop, you can go to window, actions,
and that opens the actions panel.
Now the actions panel has default actions which i'm going to collapse
and you can make your own set of actions. So i'm going to click the
folder icon
and I'm going to call this Lisa's actions.
So these would be actions I created myself. When you have time you might want to
explore some of these options/actions that come with photoshop.
but I have my selected folder and i'm going to
click upon the new icon.
I'm going to create a new action. Now this new action I could use to
resize multiple images. I can do them one at a time or I can tell photoshop to
just apply the action to an entire folder of images.
So in the actions panel, I'm going to name this action
thumb
nails
hyphen ninety six.
Now you might say ninety-six pixels, that way you know that this action will
automatically create thumbnails that are ninety-six pixels in width.
I want to create the action in Lisa's actions,
and I'm going to click record.
Now when I click record, you'll note that the
red button is so on
and that means every move I make in dreamweaver--
oops. Photoshop, is being recorded. So you don't want to record a lot of
unnecessary strokes, keystrokes or mouse clicks.
Since I am recording,
I am going to go to image,
image size, just like to get a moment ago,
I am going to make certain the resolution is seventy-two, the three boxes
are checked,
that I'm on bicubic sharper
and I'm going to enter that width of ninety-six, just like I did a moment ago
and i'm going to click
okay.
I have resized that image to
ninety-six pixels per inch, or ninety-six pixels in width, at seventy-two pixels
per inch.
Now because I'm recording that action, i'm going to click the stop button.
Once I click the stop button my action is recorded here. It says that the action
thumbnails ninety-six
changes the image size. So I've applied that to this image.
Now I'm going to go to the storm two image
and to apply that action to this image, I click upon the action
and I click the play button.
and automatically
that image picks up all of the attributes that were recorded with the
action. So this can truly speed up the process if you're trying to create
multiple thumbnails.
Again you can apply an action to a folder
of images by going to file,
batch-- Sorry. Automate, batch,
and in the
batch actions dialog box
you would choose
the action set,
the specific action you want to apply,
you would choose the source folder, where you would find the original images, and you
could choose another destination folder so that these two images didn't collide, that
you were able to keep your small version and your large version.
and then you could specify the type of file name to add to each one of these
and click ok.
So I'm going to hit cancel,
but that, that would allow you to
click that action, tell it to process a batch of 500 images and then you could
walk away while it created the 500 thumbnails.
That concludes section 50.
Oh, I started to say that concludes. We didn't save those for web.
My apology.
Back to storm one, we really had done this one but i'm going to do it again. File
save for web and devices, JPEG medium,
embed, save,
put that in my images folder,
add the word -small or _small to the end of it.
Says that one already exists for me, I'm going to replace it.
Then I'm going to go to storm two and do the same thing. Save for web and devices,
JPEG medium,
embed color profile,
save,
_small,
in my images folder and now both of them are saved.
Close storm two.
Don't save it, that's the original. Close storm one.
Don't save it, that's the original.
Now you have those images saved in your images folder ready for us in
dreamweaver when we get there at the end of the lesson.
THAT concludes Section 50.