Scanning
Image Size and Resolution
Transform Effects

 

PhotoShop Image Size and Resolution

 

Resolution, or DPI refers to the number of dots, or pixels, on a linear inch of an image. The web displays graphics at 72 DPI, yet sometimes your client will hand you a 300 dpi image. PhotoShop can help you make the transition from a clunky, slow downloading file to speedy 72 DPI delight.

PhotoShop can also help you resize an image. Lets face it, things arent always the way we want them. You can shrink or stretch an image to fit your liking, or you can chop out a small part of an image and make it larger.

 

The possibilities are endless!

 

Resolution

As previously mentioned, all web images should be set at 72 dots per inch. This can be achieved through scanning (scanning chapter next), or by manually changing DPI settings in PhotoShop.

Adding or subtracting pixels is easy. Deciding what color to make the new pixels is another story. How is PhotoShop supposed to know if a new pixel is part of a line, or if its part of someones face? Its just a computer program. PhotoShop doesnt even know what a face is

When changing resolution, PhotoShop runs complicated algorithms on an image to decide exactly how to change it. PhotoShop does an amazing job of adding and subtracting pixels, but it isnt magic. Usually you can only move up or down in resolution by about 1/3 before the image really suffers.

 

Changing Resolution (but not size) for Web Images

Sometimes youll have an image that was scanned at a higher or lower resolution than you need. Its size is fine, youll only need to change the resolution.

  1. Click IMAGE-> IMAGE SIZE



  1. Uncheck Resample Image
  2. Change the Resolution to 72

 

Image Size

When you instruct PhotoShop to change the size of an image, it merely spreads out or scrunches the image pixels. Pixels spread outimage gets bigger. Viola.

On the other hand, if youre trying to make an image larger, and still keep your current dpi, well then PhotoShops got its work cut out for it. To make an image larger, PhotoShop must spread pixels apart. To keep resolution the same while stretching, PhotoShop must add new pixels to the image and decide what color they should be. When shrinking an image, PhotoShop must decide which pixels to remove.

 

PhotoShop is really good at adding and removing pixels, but you can generally only increase or decrease size by about 1/3 before images start looking yucky.

 

Work on a Copy When Changing Sizes

Changing image size actually changes the color information in the image, so you might want to save a copy before resizing an image forty times to decide how you like it. Every time PhotoShop changes the image, it removes or adds pixels, slightly lowering image quality.

 

Changing Size, but not Resolution for Web Images

  1. Click IMAGE-> IMAGE SIZE
  2. Make sure there is a check in Resample Image
    "Resample Image" instructs PhotoShop to keep the resolution the same, no matter what you do to the size. If you make an image bigger, PhotoShop will have to add pixels. If you shrink the image, PhotoShop will have to remove pixels. There are three resample image choices. Use "Bicubic" its the best.

 

  1. Change the Pixel Dimensions of the image, not the print size.
  2. Click OK

 

Heed this warning:

PhotoShop was designed for both print and web work. Thus, the program gives you the option to change print dimensions or pixel dimensions. As a web designer taking a web design course, you dont care about print size; your only concern is pixel Dimensions. Dont bother changing the print dimensions.

 

Printing Web Images

Im sure youve tried to print something from the web, and it looked bad, didnt it?

If you positively need to print something you found on the web, you can use this trick.

Basically, youre going to shrink the image. To accomplish the downsizing, PhotoShop will move pixels closer together, resulting in a higher, more printable dpi.

  1. Find the largest instance of the image you want to use for print. As youre going to have to shrink the image, the largest original will work better.
  2. Click IMAGE-> IMAGE SIZE
  3. Take the check out of Resample Image
    Remember that Resample Image could have been called "Keep Resolution the Same". We dont want the resolution to stay the same; we want it to go up!
  4. Change the print size to your desired print dimensions.
  5. Print a copy
  6. If the image quality still isnt good enough, you can bump the resolution up by following the directions for Changing Resolution (but not size) above.

 

Changing Canvas Size

What if you dont want to change the image size, you just need more room in the PhotoShop window? Maybe youre trying to place two images next to each other, or add text next to an image.

Just like a painting is on a canvas, PhotoShop images are also on a canvas. If you need to add extra space in an image, youll just change the canvas size. The picture wont get any bigger or smaller, but there will be more room around it.

To change the canvas size:

  1. IMAGE-> CANVAS SIZE

 

  1. Enter in the new Height and Width.
  2. Chooses which direction to add the canvas by adjusting the anchor.

 

It can be tricky to add canvas in the right direction.

Heres the trick to keep in mind:
The arrows, not the white box, determine the placement of added canvas.

 

Cropping an Image

Youve got a great image, but you only need the center. Cool, were going to chop off the rest using the crop tool.

The crop tool is found on the toolbox.

 

To Use the Crop Tool

  1. Open an image. Im using Cup.psd.
    If this were a product shot, you sure wouldnt need all that empty space on the edges.
    Lets crop it!

  1. Select the Crop tool.
  2. Drag diagonally across the cup.

 

  1. Adjust the crop by dragging the handles (boxes) in the corners

 

  1. Hit ENTER to accept the crop
    (To reject a crop and start over, hit ESC on your keyboard instead of enter.)

 

 

Using The Crop Tool To Straighten A Scan

No matter how hard you try to keep an image straight in the scanner, evil gremlins will knock it off whack right before you close the scanner lid. The scan will come out slightly twistedalmost always happens.

 

Luckily, you can foil the evil gremlins by using the crop tool.

 

To straighten an image:

  1. Select the image with the crop tool
  2. Place your cursor directly above the corner handle (box). Your cursor will turn into a double arrow.

 

  1. Click and drag in a circle to rotate the crop.
  2. Adjust the crop so that the dotted lines line up with the image.

 

  1. Hit ENTER

Viola!

 

Using the Crop to Enlarge Part of an Image (to Correct Proportions)

Lets say youve got a 100 pixel photograph for your website, its a nice photo, but you dont need the outside edges You want the image to still be 100 pixels, though. Never fear, the crop tool has anticipated your needs and has a special feature just for you. You can choose an area to crop. Youll tell PhotoShop how large that area should be after you crop it. PhotoShop will crop the image, and shrink or enlarge the cropped area to fit dimensions you specify.

 

To crop to specific dimensions:

  1. Select the crop tool
  2. On the Options Bar, set a target height, width, and resolution.

    You can also specify that your cropped image should have the same properties as your current image by clicking the Front Image button.

  3. Draw your crop and hit ENTER. (or esc to cancel)

Continue to Transform Effects |