Web Graphics Using Photoshop

Formats - Preparing - Resizing - Exporting - Compare

LESSON #3

 Resizing Your Image
In this section you will go step by step through the process of resizing an image, changing its resolution and cropping the image for a specific purpose.

Step #1
A Variety
Of Purposes
For Images

 Now we are ready to crop the image for a specific purpose. We have saved a large clean version which we can always go back to for other purposes. What other purposes might we need this image for? Here are a few:
  • To place on the web, obviously
  • To create an alternative cropping or size
  • To make a print-ready version for the press
  • To include in a brochure
  • To send to your designer

Step #2
Another
Save As

 To prevent from accidentally overwriting the large clean version, let's do another Save As and rename the file indication the purpose of the file.
  • Save As and call this one primary_care_building_working.
  • You can leave it in whatever format it is currently in.

NOTE: It doesn't really matter how long you make the name, but NO SPACES. Use underscores where you would normally use spaces.

Step #3
File Naming Does and Don'ts

Some web servers reject files if they do not adhere to certain file naming standards. For this reason and for easy maintenance, here are some does and don'ts for file naming.

DO:

  • Make your file names clearly descriptive, so that others will understand what they are without looking at the image. The length of the file name is usually not an issue.
  • Use a word or number at the end of a file name (before the file extension) that indicates the version, i.e., _v3, _full, _working, _web, _raw or _final.
  • Keep track of where you store your important images on your computer.
  • If others are using your images, create a web repository so that others can easily find and use your images.

DON'T

  • Do not use spaces in your images.
  • Do not use certain characters that are normally used for directory switching such as colons, semi-colons, backslashes, forward slashes and exclamation points. Underscores and dashes are OK.
  • Don't use capital letters. It's not that they don't work but they can cause broken links that are hard to track down.

Step #4
Crop for
Purpose

 Let's say we are looking for a nice wide image to go along the top of the opening web page for Center For Primary Care. We don't really need the red sign. Although it adds color, it is distracting. Also, the edge of the tree is just as good as the whole tree, so we can crop some of it out as well.
  • With the crop tool, crop out the sign and most of the tree on the right.
  • From the floating tool bar, click and hold down on the top left tool until it presents other options. Choose the Crop tool.
  • With the crop tool, click and drag across the image starting in the upper left corner down to the bottom right.
  • With the crop handles, adjust each side until it is the way you want the image to crop.
  • Then double click anywhere in the middle of the crop area.

Step #5
Using Text

 Unfortunately, the sign on the building is not as readable as we would like it to be. There are ways of correcting this problem, but it takes a great deal of time and experience working at the individual pixel level. This is beyond the scope of this primer.

But there is something we can do that is easy and, since the image is going to act as a banner, it is appropriate.

Let's put some text right in the image.

  • Click on the Text tool in the tool bar. It is the one with the "T."
  • Then click anywhere in the sky over the building. The Type Tool dialog box will come up.
  • Type the following on three separate lines:

    CENTER
    for
    PRIMARY CARE

  • Highlight all the text and make the following adjustments to the dialog box:
    • Choose a serif font (with the little curly ends)
    • Bold
    • 24 point
    • Leading 26
    • Choose the center alignment
       
  • Before you close the dialogue box, click on the color block and choose a dark gray, or whatever you like.

Well that's nice, but it's not in the right place...

  • Hold down the Ctrl key (for Macs it is the Apple key) and grab the text. It will move wherever you want it.

Note: You may want to go back into the text box to make corrections. If the Layers box is not open, choose Windows>Show Layers. Double click the layer holding the text. The text box should open.

Step #6
Resizing & Changing Resolution

The next step is to change the size of the image to suite our purpose. This is often a guess. I'm going to guess about 500 pixels wide for this image.

IMPORTANT: It is not just the width and height that we need to consider, we have to choose the resolution as well. For web graphics, that is a no-brainer. It's 72 pixels. Most screens (monitors) use 72 pixels per inch. So just remember:

Web Image Resolution: 72 pixels

  • Choose Image>Image Size. The Image Size dialog box will appear.

  • Start from the bottom and make sure the Constrain Proportions is checked.

  • Enter 72 in Resolution:. Make sure the Pixels/Inch is designated.

  • In Pixel Dimensions, enter the Width you choose to try, 500 pixels in this case.

  • Click OK and see if it feels right.

Caution: Make sure you are at 100% Look up in the title bar of the image frame for the image percentage. If there is no image frame, click the lower left box in the Tool Bar. Now look for the percentage. While you are at it, click each of the three boxes on the bottom of the Tool Bar to see what they do.

Step #7
Resizing An Image For Print

Now let's take another route. What if our purpose is to create an image to be used in a print ad? What is different about print images? For print, we want to retain the maximum file size, the most information available.
  • Let's start with primary_care_building_full.
  • Rename it with _ad attached
  • Crop the image if necessary

Up to now, the only lose of digital information was when we cropping the image. Now we must resize:

  • Choose Image>Image Size from the drop-down menu.

Here we need to do a bit of a balancing act. We need to keep the file size about the same, but we want a 4 by 5 inch ad.

  • In the Print Size area, change the Width to 5 inches. Notice the the Height changes to something under 4 inches. Not good.
  • So lets change the Height to 4 inches. The Width is over 5 inches. This is good.

But notice at the top in Pixel Dementions, the size has shrunk considerably. It is less than half of what it was.

  • Let's increase the resolution to 300. Now we are much closer to our original size, which means that digital information is not being thrown away.

Step #8
Adjusting the Canvas Size

 But the image isn't exactly 4 by 5 inches. What do we do, crop? No, there is an easier more exact way:
  • Choose Image>Canvas Size.
  • Change the Width to 5 inches.
  • Click in the second box in the first row to make the image crop off the right side.
  • Click OK
  • You will be warned that some clipping will occur. Select Proceed.

Step #9
Saving An Image For Print

Now you are ready to create a JPEG or a TIF. This is a print ad, you don't want a GIF.
  • You can Save As or Save A Copy, and select TIFF. Don't forget to attach an _print.
  • If you want a JPEG, do the same but select JPEG. Remember to leave it at quality 10, 100%. We don't want to throw away information. This is for Print.

That's it. To finish your ad design, you can import this image file into any desktop- publishing program like Pagemaker or Quark.