Basic Photoshop Tips:

Web Image File Formats and Characteristics
Save in PhotoShop format (.psd) While Still Working on an Image
Windows (palettes) to have open in Photoshop
How To Create a New Image
Resolution -- 72 dpi
Are your images at 100%?
Are you working in RGB mode?
How to Change Modes
How to Crop an Image
When Scanning Images
How to Shrink an Image


Web Image File Formats and Characteristics

File Format

Filename

Corresponding PhotoShop Colour MODE

Characteristics

CompuServe GIF

image.gif

Indexed Colour

Used for the web

Up to 256 colours displayed

Good for logos, line art, flat colour graphics

Can be:
  • Interlaced
  • Transparent
  • Animated

JPEG

image.jpg

image.jpeg

RGB

Used for the web

Millions of colours displayed

Good for photographs and art with many colours

Lossy compression

PNG

image.png

RGB

Used for the web

Millions of colours displayed

A newer format, widely supported.

PhotoShop

image.psd

All of the above, and more

Used for in-progress graphics, and to store original/editable versions of graphics.
Not used on the web.

Displays colours depending on MODE

Lets you use and keep layers and other things.

Takes up a lot of memory, holds lots of info.


Save in PhotoShop format (.psd) While Still Working on an Image

File > Save For Web when saving the final version of the image for use on the Web

While working on an image, save it in PhotoShop format (.psd) This will allow you to keep all layers and text readily editable.

When you are finished working on an image, save it once more in PhotoShop format.

Then choose File > Save For Web This will let you save a copy of that image as a GIF, JPEG or PNG.

The web-saving window will open, and you can choose which format you want to save in. Remember to set some reasonable settings for whichever format you choose. Then hit SAVE, and PhotoShop will name the image appropriately for the format, and you can save the web version of image .

Use the GIF, JPEG or PNG on your web page, keep the PhotoShop (.psd) version of the image somewhere -- perhaps in an appropriately named folder like "A1 working files." This way, if you notice a spelling error in your image on your web page, or you need to change the image for any reason, you can return to the PhotoShop version to fix it. You would open up the PhotoShop version of the file, make the changes, save it again as a PhotoShop file, and THEN do then File > Save For Web again, and use the new version of the GIF, JPEG or PNG on your page.




Windows (palettes) to have open in Photoshop:
(these can be found under the Window menu)

Also quite useful:


How To Create a New Image

  1. Choose File > New

  2. A window will open up:

  3. Click OK

  4. Your blank image should open up. If you chose to make the contents Transparent, the image will have a light checkerboard pattern.


Resolution -- 72 dpi

Images on the web should be at 72 dpi

Images meant for print may be at 180 dpi, or 300 dpi, or 600 dpi, or up!

Images meant for the web or for multimedia that is only viewed on a monitor should be at 72 dpi; however, you can have in-progress images at a higher resolution, and then reduce them to 72 dpi in PhotoShop before you save them for the web.


Are your images at 100%?

Make sure you are working with your image at 100% (which means actual size). If you are at 50%, it means you are seeing the image at half its actual size. If you are at 200%, it means you are seeing the image at twice its actual size.
  1. Check the bar at the top of the image window to see if the image is displaying at 100% size.
  2. If it is displaying at less than 100%, you are not zoomed in to actual size.
  3. Zoom in & out by going to VIEW > ZOOM IN or OUT until the image's title bar shows a reading of 100%
(All this assumes that the image you are looking at is 72 dpi. If your image is at a higher resolution, e.g. 150 dpi, the image will be weirdly extra large when viewed at 100%.).

Are you working in RGB mode?

RGB - Red Green Blue - the colour mode used by computer monitors. It is best to work in this mode in PhotoShop when creating images for the web.

Check your image's title bar -- it should say RGB. If your image doesn't say RGB anywhere, then you are not in RGB mode. You should usually change to RGB mode so that you can work correctly and more easily for the web.

Some other colour modes include:

How to Change Modes:

Occasionally, you may need to change modes to save your image in the file format you want, or when you want to use certain tools in PhotoShop, or when you want to shrink an image.

  1. Go to IMAGE>MODE
  2. You will see many choices. Choose the one you need.

(You want RBG colour for millions of colours, or Indexed Colour for up to 256 colours. Grayscale is good for black and white images. CMYK is used only for print, not for the web.)



How to Crop an Image: (cut off the extra space around the outside of your image)

In the toolbar, at the very top left, is the marquee tool. With it you can select rectangular or round areas of your image.

  1. If you hold down on the marquee tool, some options come up. At the end of the options is a darker tool called the crop tool. Choose the crop tool.
  2. Drag your mouse over the area of your image you want to keep. Don't worry about getting it perfect, because you can fix it in a moment. Release your mouse.
  3. You have created a hilited box with little squares in the corners and at the sides. You can drag on these squares.
  4. The idea is to make sure everything you want to keep in the image is inside the hilited box. Drag the squares until you like what you've selected.
  5. Double-click inside the hilited box. Everything outside the box will be cut off, and the rest of the image will be left.


When Scanning Images:

Scan your images as big as you need them to be, or bigger!

If you need your image to be twice as big as the original, scan at 200%. You can always shrink the image later in PhotoShop if need be.

Scan or create images at the same (or higher) DPI that you need your images to be

Images on the web should be at 72 dpi

Images meant for print may be at 180 dpi, or 300 dpi, or 600 dpi, or up!

You can scan images at a higher resolution, and either work on them in PhotoShop at that resolution, or reduce them to 72 dpi before you start to work on them. Regardless, before you save your images for the web, you must reduce them to 72 dpi.

You can get better quality images if you scan at twice (or more) the dpi you need, and then reduce the dpi in PhotoShop. See "Shrinking an Image" below...



How to Shrink an Image

  1. Make sure you are in RGB mode before trying to shrink an image.

  2. Then go to IMAGE > IMAGE SIZE

  3. A widow will open up.

  4. Make sure the image, if it is for the web, is at a resolution of 72 dpi. This means the image's resolution is 72. A higher resolution is usually only used for print. If the dpi is not 72, you can change it to 72 by typing it in beside Resolution.
    However, if you do so, you should usually change the width AND height units at the top of the window to percent, and then type in a percent of 100 for either width or height. This keeps your image the same size (in pixels wide and high) but sets it to 72 dpi, which works on the web.

  5. Choose the settings for the new dimensions you would like your image to be. Make sure you check what units the window is using (usually you want pixels). You usually only need to type in the size for either the new width or the new height because PhotoShop will calculate the other for you, unless you wish to distort your image (see next step).

  6. If you wish to stretch or squish your image, take away the checkmark beside the "Constrain Image Proportions" option at the bottom of the window. Conversely, if you wish your image to shrink normally, make sure the checkmark is there.

  7. Once all these settings are correct, click on OK.

  8. Your image will shrink in size. If you do not like the results, choose EDIT > UNDO.



Do not enlarge images in PhotoShop, because this will make them fuzzy/pixelly and will reduce their quality. Scan or create the image again, choosing to scan it at a larger percentage and/or higher resolution than you did before (if just creating, create a larger image to begin with), and then adjusting the settings as needed using the 8 steps above.



If an image won't save in the format you need when you go to FILE > SAVE AS then choose FILE > SAVE A COPY and you should have no problem. Make sure to remove the " copy" from the end of the filename, however, and include the correct filename extension.