Tip:
Highlight text to annotate it
X
chapter 8 section 48: cropping for the web. images from a
digital camera are often physically too large for a web page and must be
cropped.
that means parts of the image must be cut away
and/or
rescaled,
meaning reduce the height and width.
to crop an image i'm going to use this photo of
some baby
fox that were in my backyard this summer I had a mom and three babies in the
backyard, and i loved taking pictures of them and watching them play
and you can download this from lisatime.com chapter eight
assignment.
i downloaded this file it was a Jpeg file from my digital camera and i placed it
in my assets folder.
I've opened it in photoshop
and i'm going to go to
image
image size
to show you, I have already reduced it once but right now it is
nine hundred pixels wide by six hundred seventy-five pixels tall.
it is at a resolution of three hundred pixels per inch which is considered high
print resolution and not an appropriate web resolution.
we're going to click cancel
and uh... because this is too high we're going to reduce it to seventy-two
pixels per inch.
So were going to come over and select the crop tool
we could have reduced in the image dialogue box that we're going to do it
as we crop,
select the crop tool and on the tool options bar and under resolution type
seventy-two and note the pixels per inch to the right of that.
once you've typed seventy-two
you have the ability to drag the area you would like to keep and it will
eliminate the area on the outside of that.
so if i begin dragging and i want to keep just the focal point of the
cubs here,
i can hold shift to constrain my height and width while i'm dragging if i
choose to.
release the mouse. i have the ability to drag the handles. hold shift if you want
to keep that height and width constrain.
i have the ability to place my cursor inside
the
crop marks and reposition
so i've repositioned just a little bit.
there are two ways to confirm this crop - you'll notice the outside area is dark and
the part you will retain is light or in its original format,
i can press enter or i can click the commit checkbox. my habit is just to
press the enter key on the keyboard.
so i have cropped this image
to no specific height and width based upon the area that i selected. if i go back to
image, image size, you will see that i cropped to a 405x405
because I was holding the shift key to constrain that
and it is at a resolution of seventy two pixels per inch because i
set that on the crop tool.
i'm going to say okay.
now i'm going to go to
file
save for web and devices.
i have the 4 up but i'm not going to go through the entire process. the one on
the right
just says it's a jpeg so im going to choose jpeg medium.
and with the j peg medium, this is a fairly large image, 405.
that would be about six inches wide on a monitor
because there are seventy-two pixels in a inch.
not quite six inches, a little bit below that.
this jpeg is 27.75k in size.
so that's the one i'm going to select is the j-peg medium.
i'm going to embed the color profile and i'm going to click save.
now remember the original resides in my assets folder but i want to save this one
in my images folder
so i'm going to
go right here into images and click save,
and that way i have the web-ready version saved to the images folder.
we took a large,
high-resolution jpeg with a file size of about 1.74 meg
down to a low-resolution jpeg with a file size of--
what was it? 23? something much smaller...
i'm going to-- our file sizes will vary too, based upon the area that we
included in the crop.
i'm going to go ahead and close the fox image.
and when it asks me if i want to save this, i'm going to say don't save
because it's really asking you about the original image that you placed in assets.
we've already saved
the cropped image so i'm going to say don't save.
that concludes section 48.