Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 10 – Using Photoshop Elements to Prepare your Images

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Now we’re going to look at Photoshop elements to prepare images. I don’t actually use Photoshop elements. I use Photoshop and I use it all the time. I’ve found that it’s the right tool for the job for me.

Why I’m Teaching Photoshop Elements

I have a bunch of lessons on the site about Paint.net but that’s only really available for Windows. And it’s not available for the Mac and there aren’t any relatively easy programs to use that are free for the Mac. So I decided that I will start teaching this material on Adobe Photoshop Elements which is relatively inexpensive at just over $100. And you can try it for 30 days for free.

It took me at least a half hour to install this so I’m not going to go through that process but I am going to show you what it looks like once it is installed.

What Elements Can Do

Adobe Photoshop Elements can be used for lots and lots of things. What we’re going to look at here is simply cropping, resizing and optimizing images. But it can be used for tons of other uses and I think most people probably use Photoshop Elements for touching up family photos and that sort of thing. Obviously that’s not what we’re doing. We’re going to take graphics and edit those graphics. And the good news is it works in both the Macintosh and on the PC and it works in very much the same way on both.

Photoshop Elements Tutorials

Once it’s installed, you get to this little screen and there’s some nice tutorials here on how to use it. And I absolutely suggest that you watch these and see how to use different aspects of it.

Photo Editor

But we’re going to go directly to the Photo Editor. It takes a moment to load up and then we’re going to minimize this thing down so that it fits in our video window. And when it starts up, you have 3 different potential views.

Quick View

You have the quick view which is for sort of the basic work you might do on a typical family photo. There are some special kinds of editable photographs.

Guided View

You have the guided view which is probably not a bad place to start if you’ve never worked with image editing programs because if you want to learn how to crop a photo, it’s going to show you how to do that and similar kinds of things.

Expert View

And then you have the expert view which is where we’re going to work. And the expert view essentially gives you all the standard tools available to you and you can just go to town on it.

Working with the Expert View

Now from the expert view, we’re going to open an image and the image I’m going to open went to my downloads. So I’ll go to downloads and I want a jpeg because that’s how it was downloaded. Here we have our image.

Check the Image Size

Inside of our image, we can come up here to the image and check its size. So you go up to image and resize. And if you look at image size, you’ll see that it has a resolution of 180 pixels, it’s 14.4 inches by 10.8 inches. We don’t really care about that aspect of it. But in dimensions, it’s 2595 by 1944. Remember that we’re shooting for 640 by something so the image is plenty large for what we want to do.

Crop an Image

The first thing we’re going to do though is to crop the image and this is the crop tool right here. If we click on the crop tool, you get those little crop bars like that. Part of optimizing your image is making it the right size and I probably don’t need this stuff in the background, the telephone pole and all the dirt. But I do want to get the steeple or the top of the roof there.

You can just drag this around until you get to the size that you think is right for what you want to show without having too much else. So that’s part of image optimization is just reducing what gets displayed to a manageable size.

I think that looks okay. In fact, we might just cut out part of the bottom and make it look more like it’s floating in the page. So I’ve cropped it down, now just hit enter and your image is now cropped.

Set the Image Resolution

Now it’s time to set the resolution. Let’s come over here back to image and resize. Notice you have a couple of choices here. You’ve got image size and you’ve got canvass size. Now canvass size essentially lets you either enlarge or reduce the thing, the image itself or the canvass that it’s on.

Let’s go to pixels for a moment here. You could actually increase the height of this image, say 1500 pixels. And if we don’t move anything and don’t have relative clicks, if we say okay to this, we’re going to get some top and bottom added to this image, right? Okay, I’m going to undo that and then we’re going to come back over to image resize and canvass size.

I could also choose to make it smaller. So I could say 1200. And I’m just going to cut it off from the bottom so it’s going to cut up this direction. Say okay to that. It’s going to warn you that it’s going to chop off and then it’s going to chop off, right? Undo that.

Canvass Size

That’s canvass size. Physically, it either crops or adds to the image but it doesn’t change its resolution. It retains the resolution.

Image Size

However, if you use image size, it has no effect on the canvass. What it does instead is it changes the image size based on the resolution you specify. So right now, we’re showing it at a resolution of 72 pixels per inch. We know we want 640 pixels to be our size. So we just go to 640 and now, this image is being scaled down to 640 by 384.

Review the Image

We also have a choice here of how to change. So best for smooth gradients, preserve hard edges, that kind of stuff. In this case, I would say best for reduction. It probably doesn’t matter too much what you select but we’re going to say best of reduction here and say okay to that. And now it got kind of small. I can go to the view here and say actual pixels. And I can see exactly what it will look like on my monitor when it’s on the website.

Optimize the Image When Saving

At this point we’ve minimized the dimension by cropping it. We’ve optimized the dimension by taking it down to its maximum size at 72 dpi. Now what we’re going to do is optimize it by choosing how to save it.

Saving for the Web

The way to do that is to come over here as save for web. It’s not save. It’s not save as but it’s save for web. And what save for web does is it’s deliberate about optimizing the image for web use. So we select save for web and I need to make this smaller so you can see what’s really going on here.

What it does is it shows you the original view and the optimized view. You can physically see the difference between the two. And it’s best, I think, to have the scale at 100% so you can really see what the image should look like. It may mean that you don’t see the whole image but you don’t really need to see the whole image in order to determine which way it should be.

Choosing the File Type and Setting for Photographs

We know that PNGs are not best for photographs. They make a great photograph but you can see how big it is, 720k. So what we’re going to do instead is to come over and look at JPG because we know that JPG is best for photographs. This is a photograph so we’ll pick JPG and we’ll pick JPG low.

JPG Settings

Now a JPG low is 23k but you saw how much that JPG low distorted this red roof. The bright red and bright white are kind of tough on JPG. So low quality is not going to be satisfactory. So if we take it up to medium, medium still loses a lot of the texture and medium is at 36.4. And that may be okay.

This is actually was not a good picture to choose from because of that red because this is going to artificially inflate its size. I’m going to take it up to 50 and see what it looks like at 50. Okay, at 50, I start seeing the texture of the roof and that’s what I would want to see. Now you can see that is 53k versus a 720k so obviously, it’s a significant reduction.

Now I could pick high just to show you and that goes up to 69k. Now you really do see this very well and if that was really important to me, that’s probably where I would keep it. If it was a little bit more bright in color, you wouldn’t have to have this higher quality in order to get that appearance.

GIF and PNG Options

An alternative of course is to look at a GIF. Now you could look at a GIF that is 128 colors and dithered. You can see though that it’s way bigger at 136k. We could turn off transparency and see if that makes a difference in size since there is no transparency. But, no, that didn’t actually change it any.

If we decrease the colors to 64, that decreases its size but loses all of the texture. And if we take it up to 256, that brings up 161k. So really, it’s 3 times the size of the JPG. And PNG 8 at 256k is acceptable in terms of its appearance but it’s still 139k. But it’s still not the right choice so we’ll pick JPG. I think we’ll be good with that.

I don’t think adding any blur is going to help. I think adding blur is just going to decrease the texture so we won’t do any of that and this is going to be our size. If we save that, I’m going to call this red roof, hit save and we now we’ve just optimize this image. Okay so that’s optimizing a photograph.

Choosing the File Type and Setting for a Graphic

Next, what we’re going to do is optimize a graphic. I’m going to open a new file and this is in downloads again as well. And this is a graphic that is a little bit too big for the use. This is a graphic that one of our members has for his header and it is 1046 pixels wide. It is a PNG and its size is 463k which is really, way too big.

Image Size and Resolution

Let’s just look at the image size for a moment. There’s a 1048 wide, 151 pixels tall and it’s 463.6k. Let’s just see if that’s the size it is in its downloaded version here because this may, in fact, upscale it. Yeah, it did upscale it because its actual size right now on my server is 63k which is more like it ought to be. So what has happened is Photoshop Elements has increased its quality and therefore, increased its size.

Notice that here, the resolution is 95 pixels. We’re going to take it down to 72 pixels and then in terms of its width, we want it to be 1008 because that’s the space that we have available for it. So that’s how we would do this, 1008 by 145 at 72 dpi is going to create the right image. And then when we save this, we go to save for web.

JPG Options

If we save it as a JPG high… actually the JPG doesn’t look too bad although there is some ghosting in the letters around here because the white and the black are so close to each other. If we took it down to a JPG medium you just ghost all over the place around this. The JPG medium is 56.6 which is bigger than it needs to be.

GIF Options

If we take it to GIF and we make it a GIF, it doesn’t need to have 256 colors because it doesn’t have that many colors. In fact, if we take it down to 16 colors, it’s only 15.27k. And if we take it down to 8 colors… yeah, it loses something at 8 colors. So we’re not going to do 8 colors. We’ll do 16 colors. It looks pretty good to me.

If we take it up to 256 colors, it’s 29.86k versus what did we say it was as a PNG? It’s 63k. So rather than using a PNG, using a GIF for this reduces it by half. And 128 pixels is probably all it really needs in order to look really dang good.

PNG Options

Now we can double check this with the PNG. If we take PNG 128 dithered actually, if we’re using a PNG 8, since there’s no transparency, we don’t need to use PNG 24. If we use a PNG 8, now we check out 128 colors, it actually came down to 20.46. So it’s actually a better choice as PNG 8 than the GIF was. And really, you can’t tell the difference between the very high 428k PNG and the fairly low 20.46 PNG. They look essentially identical.

Image Optimization in Photoshop Elements Review

So with it like that, we’ll just go ahead and save. And in this case, we’ll call it 1008 header and hit save. And we’ve just optimized two different images, right? With the photograph, we knew we didn’t have to crop this. There wasn’t any purpose in cropping this down so we didn’t need to do that. But we did use image size to get it small enough so that it would fit the 1008.

And then we just chose the smallest file size for the best look. And fortunately, Photoshop Elements gives you that ability to really fine tune it, hone it down to the smallest possible size and still maintain an attractive appearance.

So that’s why I like this program. Photoshop is a little bit more sophisticated about that and you can compare your image versions side by side. You can always test everything against settings of JPG versus PNG. And you can see them all together and then just pick the one you want. But as a practical matter, generally speaking, you’re going to know which one is going to be better and it should be relatively easy for you to make that choice.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment