Kate's Point of View

I mentioned earlier that I’m teaching an upcoming Photoshop course at work. I’m not an expert but I can make my way around the tool. I’m sharing my class in pieces. This post is about saving your cropping and resizing your images.

Cropping
To crop an image, select the Crop Tool from your toolbar. It looks like . Place your cursor on your image at where you would like to begin your crop. Left click your mouse drag your mouse so a dotted line appears where you would like to crop the image.

After you release your mouse, a box will appear on the image with the handles on your crop lines allowing you to change the size of your crop.

Select the handles and size your crop accordingly. When you have your crop marks as you want then, hit Enter.

Resizing
You can resize an image using the menus in Photoshop. Simply go to Image … Image Size … Type in the size you would like for your new image … OK.

In the drop-down menus you have the option to size your image by pixels, percentage inches, centimeters, etc. Work with whichever ones makes the most sense to you.

In nearly all occasions you will want to leave the “Constrain Proportions” box checked. This means that Photoshop will keep your image proportional to the original image.

Want to start from the beginning? View class 1, which reviews the Photoshop toolbar. View Class 2, which reviews pictures for print versus web.

As always, see something you disagree with or think is just plain wrong? Tell me! Seriously – I want to know.

I mentioned earlier that I’m teaching an upcoming Photoshop course at work. I’m not an expert but I can make my way around the tool. I’m going to start sharing my class in pieces. This post is about saving your images for the web and for print.

Defining DPI and When To Use What
DPI stands for Dots Per Inch. Although somewhat of an oversimplification, one way to view DPI is that on print to make something look nice you need to squish a lot more dots of color into each inch while on digital platforms you don’t need to have as many dots. There are different rules for when to use what, but if you remember two measurements, you are good:

• 72 dpi for digital
• 300-600 dpi for print (you’ll almost always be dealing in the realm of 300)

What happens if you prepare a print image at 72 dpi? It looks something like this:

(It’s a little hard for me  to illustrate this on the web…)

What happens if you prepare web images at 300 dpi? It slows down the time it takes your webpage to load. For examples of slow sites, check out this top ten list.

How to Adjust DPI
You can modify the DPI of an image down and achieve the desired outcome. It is nearly impossible to adjust the DPI of an image up and achieve good results. To confirm or adjust the DPI of an image: Image … Image Size … Resolution. The field next to Resolution is the DPI value. You can adjust it by typing a new number into the field.

Saving Digital Images
The two most common ways to save images are as .jpegs / .gifs for print or web.

Note: .jpeg versus .gif … If it’s a photograph save it as a .job. If it’s a line drawing, like a cartoon, save it as a .gif. If you aren’t sure, save it as a .jpeg.

Method 1, which can be used for print or web, but assumes you have already set your image to the appropriate dpi: Save your image by File … Save As … Select .jpeg as format and type in file name … Save As … Select the image quality* … OK

*Image quality for a print image should be 12 (nicest). If you are saving for web, you can set the quality at 7 (medium quality).

Method 2, which can only be used for images that will only be used digitally: File … Save for Web and Devices* … Select version of file you want … Save

*The first time you save an image this way, I recommend you set up the next screen like the version below. Once you have set this up once, you should not need to do so again.

Some notes about this screen:

1. I recommend the “4-Up” layout.
2. Select ,joeg or .gif, as appropriate.
3. If saving a .jpeg, set the quality at 60. This will act as a good default for you.
4. You can change the quality setting for each block. The thumbnail in each corresponding block will show you how the image, saved at that quality, will look. Pay attention both to the image quality as well as the file size. You want to achieve the highest quality as the smallest file size.

File Types
There are many file types to select from when saving an image in Photoshop. Here are the most commonly used ones and when to use them.

• .psd: If you are doing extensive editing work in Photoshop, saving your file as a .pdf will allow you to save your editing history and multiple layers. (I won’t be covering layers in any of my posts but am happy to answer questions if people have them.)
• .jpeg: This is the most widely used and popular photo file format. This is a good format to save a file in when you are done editing. If you are still working on the file, it’s better to save it as a .psd so you don’t lose any data. Every time you save resave a .jpeg, you are losing a small bit of data.
• .gif: The Graphic Interchange Format is great for graphics but less appropriate for photos. These file types can display up to 256 colors, which works for graphics but limiting for photographs.
• .png: This is a lossless file type, meaning that, unlike the .jpeg, you can save this file type over and over without losing any data. Unfortunately, this file type is not as widely supported as .jpegs and it does not support CMYK colors, meaning commercial printers can’t use them.
• .tiff: This is another lossless file type, so you can save it over and over without losing data. It also supports CMYK so it is good use in commercial printing. Unfortunately the file sizes are huge and often too unwieldy to work with.
• .eps: Files in this format are often used by printers because they can be imported into many printing programs. Unless requested by a printer, this typically does not make sense to use because it cannot be opened by many programs.

Want to start from the beginning? View class 1, which reviews the Photoshop toolbar.


As always, see something you disagree with or think is just plain wrong? Tell me! Seriously – I want to know.

I mentioned earlier that I’m teaching an upcoming Photoshop course at work. I’m not an expert but I can make my way around the tool. I’m going to start sharing my class in pieces. I’ve been doing research throughout my planning to make sure I’m calling things by their proper names (most of the time) and not telling any bold-faced lies.

One basic element of Photoshop is the toolbar. I’ve been using Photoshop for more than 10 years now and, despite updates in newer versions, the toolbar retains the same basic elements in each version. While looking up the name of each item to make sure what I called it was legit (healing brush tool versus Band-Aid tool), I made an important discovery that seems so obvious now.

When you scroll over the items in your toolbar, their name pops up. It’s a great way to double check that what you are selecting is indeed the thing you were going for. What also pops up is a letter in parentheses. This letter is the shortcut for selecting the tool. All you need to do is select the letter (as long as you’re not using the Type Tool) and voila! your tool is selected.

I am in love with keyboard shortcuts so this has sort of blown my mind.

Below is a screenshot of my toolbar (from CS5) along with labels and explanations.

For each of the items that has a small black triangle next to it, you can click on the triangle to find other variations of that tool. For the tools above, their functions are as follows:

1. Rectangular Marquee Tool – Select part of your image, in the shape of a rectangle
2. Lasso Tool – A free form selection tool that allows you to select parts of your image in whatever shape
3. Crop Tool – Crop your image to your desired size and shape
4. Healing Brush Tool – Similar to the Clone Stamp, the Healing Brush allows you to copy pixels from one part of your image and smartly repair other parts
5. Clone Stamp Tool – Copy parts of your image over the top of others
6. Eraser Tool – Erase parts of your image
7. Smudge Tool – Smudge the pixels on part of your image to blur out imperfections or lines
8. Pen Tool – Use your mouse to draw or write on your image as with a pen
9. Path Selection Tool – I don’t use this nor do I have any idea what it really does so no explanation … sorry
10. Object Rotate Tool – This is only for 3D images, which I don’t touch so no explanation … sorry
11. Hand Tool – Manually move your image so you can work on different areas
12. Set Foreground Color – Select a color to be working with for type of the paintbrush; the foreground color is the active color
13. Move Tool – Move your image or parts of your image
14. Magic Wand Tool – A selection tool that lets you choose parts of your image based on color
15. Eyedropper Tool – Select the exact color from an image by clicking on it with the eyedropper
16. Brush Tool – “Paint” on or add color to your image
17. History Brush Tool – Works similarly to the Undo option in many programs such as Microsoft WordWord
18. Gradient Tool – Create a gradient of two colors (foreground and background colors) across your canvas
19. Dodge Tool – Lighten an area on your image
20. Horizontal Type Tool – Add text to your image
21. Rounded Rectangle Tool – Draw shapes on your image
22. Camera Rotate Tool – This is only for 3D images, which I don’t touch so no explanation … sorry
23. Zoom Tool – Enlarge your view of your image
24. Set Background Color –The background color won’t be used as frequently but, for instance, if you expand your canvas size, the background color will be the background color of your canvas

See something you disagree with or think is just plain wrong? Tell me! Seriously – I want to know.