Web Graphics Using Photoshop

LESSON #4

Step #1
Converting to a GIF

Let's start with GIF. You might think you'd just Save As GIF. No, Photoshop chose a different approach, which makes sense if you think about it. They want you to use the Export command.

• Choose File>Save for the Web.... The Optimize for the web Options dialog box will appear.
• In most cases, you will use whatever Photoshop offers you. The program is pretty smart and will try to offer the best options. .

Note: By saving for the Web, instead of Save As you have created a GIF, but you are still looking at your original millions of colors JPEG image. Often, I would now create a compressed JPEG of the same image to see which will work better for the web. See step #7.

Step #2
Looking Deeper Into How a GIF is Compressed

If you choose System, photoshop will choose 256 colors equally spaced over the spectrum of colors...it will look terrible. The problem is the "equally space."

If you choose Adaptive, photoshop will look into your image file and choose the 256 colors that will make the image look best.

What this means is, a GIF can almost look as good as a TIFF in most cases using an Adaptive palette.

What it also means is, except for cropping, reworking a GIF is not a good idea. You do not have enough information to work with. Always go back to the larger, millions of colors version to resize or make corrections.

Step #3
Converting to a JPEG

But we already have a JPEG in this case. Why do we need another one?

Because the one we have is only slightly compressed and would take a long time to download.

With the image resized and the resolution set to 72 pixels per inch, let's make a compressed JPEG fit for the web.

• Choose File>Save A Copy. The Save A Copy dialog box will appear.
• From the SaveAs entry box, choose JPEG.
• Remove the words _working and _copy from the file name and add _web. Do not remove the .jpg extension.
• Make sure the file is being saved where you want it to be. I always save to the desktop and organize my images later.
• Click Save. The JPEG Options dialog box will appear. Ahhh, here is where the compression gets done.
• Choose Quality 2 and let Photoshop choose the format options.
• Click Save.

Note: Quality 2 (20%) is usually fine for most web JPEGs. To check, look at it ON THE WEB, to make your final quality decision. In some cases I have used quality 0 and obtain good results. It is a judgment call.

Step #4
Resizing An Image For Print

• 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 #5
Adjusting the Canvas Size

• 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 #6
Saving An Image For Print

• 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.