Skip to Main Content

Photoshop Basics

Want to know how to edit images? This guide shows you resources and steps in editing images from cropping to color adjustments.

Document Setup and Resolution

This page covers instructions on performing the following:

  • Document setup using both the Image Size and Canvas Size menu
  • Altering document setup using both the Image Size and Canvas Size menu
  • Changing resolution
  • Change pixel width and height
  • Defining color modes and changing modes to fit your needs
  • Definition of and saving to different file types

Image Size and Canvas Size Setup

Document Setup:

Setting up your document will be different for print and web files. Here are some general guidelines to follow for each:
 

Print media: Resolution should always be 300 with color mode either being in CMYK for color or Grayscale for Black and White printing

Web media: Resolution should be 72 with color mode being RGB as RGB is the color mode for all computer screens

Image Size and Canvas Size Menus:
Looking at your Image Size and Canvas Size menus allows you to see the size of your image, edit your image and change your document size. Know the difference between Image Size and Canvas Size below:

Image Size menu is accessible by clicking on the Image menu button and clicking on Image Size:
Photoshop image drop-down menu with menu item Image Size selected   Image Size pop-up window with pixel dimensions and document size, both in terms of width and height

Image Size allows you to change both the document and actual image size. When changing sizes, change it by Pixel Dimensions or Document Size. When changing sizes, always be sure to have 'Constrain Proportions' checked off. It is important to know that if the resolution is not altered and you change the document size, images may become blurry or pixelated. Be sure to not the alter the size of the document too much. For example, don't try to make a 1 inch document into an 8 inch document because this will lower the quality dramatically.

Canvas Size menu is accessible by clicking on the Image menu button and clicking on Canvas Size:
Photoshop image drop-down menu with menu item Canvas Size selected   Canvas Size pop-up window with current and new size, both in terms of width and height, and canvas color drop down menu

Canvas Size allows you to change your canvas/document size without altering the size of the image. For example, changing the width of the size to 5 inches will make the document size bigger, but the image will not be changed. This is is good if you are working in layers and want to move images around without having to worry about changing their quality or if you want a document to be a certain size. Change the size by simply typing in the new width/height in the Width or Height bar and clicking OK.

Changing Resolution

Access the resolution through the Image Size menu. When changing resolution, always make sure your 'Constrain Proportions' button is checked off and 'Scale Styles' and 'Resample Image' are unchecked. This allows the resolution to change proportionally and not lose quality.
Image Size pop-up window with resolution set to 300. Scale Styles and Resample Image boxes are unchecked.

Changing Pixel Width and Height

Changing pixel width and height is related to web media. Whenever someone gives you dimensions on a web file, it will be in pixel width and height. Example: 640x480. As a rule for descriptions of dimensions, width always comes first.

To alter pixel width and height, you will need to be in your Image Size menu. To change width/height, be sure to have
'Scale Sizes', 'Constrain Proportions' and 'Resample Image' checked off. Checking off 'Resample Image' will give you access to alter the pixels. Checking off 'Scale Sizes', 'Constrain Proportions' will keep the dimension proportionate.

To change pixel width or height, type in the number in either menu and click OK. Don't worry about the 'Document Size' portions of the menu.

Image Size pop-up window with Scale Styles, Constrain Proportions and Resample Image boxes checked while editing pixel sizes.

Tip: Another method in altering pixels width and height is through your cropping tool. If you have a specific size in mind, click on your crop tool, put in your dimensions in the top menu and select the area you need cropped.
Crop tool is selected and pixel sizes are set to 125 px by 125 px

To setup or change sizes, place the size in the dimension boxes. For pixel width and height, always place a 'px' after the dimension.

Color Modes

Color modes define just that! The mode you are in will allow you to be setup for the web or print and will allow access to different filters and features of photo editing. Below is a general description of the most used color modes and what they allow you to do:

CMYK:

Print mode. This mode is set up for print media. Whenever you are working on a full color document and you know it will be printed, make sure it is set on CMYK mode. Tip: Some features such as filters are not accessible when in CMYK mode. If you know you will be using filters from the 'Filters Gallery', change your mode to RGB. Once you are finished with using filters, change it back to CMYK.

RGB:

Web mode. RGB color mode is the mode you will want to use when setting up documents that will be used on the web or video. Also use this mode if you need to use filters from the 'Filters Gallery'.

Grayscale:

To change a color mode, go to the Image button in your main menu, select Mode and select your color mode from the side drop-down menu:

Different File Types

Different file types serve different purposes. When saving your document, click on the Format drop-down menu to see your file type selections. Below is a guide and definitions of the most used file types.

Click on the 'File>Save As' option and click on the 'Format' drop-down menu to see your file type selections:File Explorer is open and user is saving the file as a JPEG from a list of formats.

Most common file types and uses:

PSD:

Stands for Photoshop Document. This file type gives you the most access without quality being lost and allows for files to be saved at a larger size. It saves all layers, channels, text or any other settings you have been working on. This is most commonly saved as your original file which any final edits should be made to. For example, work on your PSD file for making final edits, then save a copy with no editing capabilities (no layers) for printing.

TIFF/TIF:

Stands for Tagged Image File Format. TIFFs are similar to a PSD file in that they allow full editing capabilities. Images are also saved at the highest quality without quality being lost over time. This is the preferred file type when sending images to print. It is recommended to work on your original PSD file and save a flattened (no layers) TIFF file when printing. This allows quality to be maintained, but file sizes may not be as large as a PSD.

JPEG/JPG:

Stands for Joint Photographic Expert Group. This file type does not save layers and is considered a flattened file. JPEGs are the most commonly used files for the web and for sharing photos with friends and family. Most often, digital cameras save image files as a JPEG/JPG. They are able to be saved in a much smaller file size, which frees up space and makes it more convenient, but as a result are considered a lossy file. In other words, they do not maintain quality and lose quality over time. Every time you open a JPEG file, quality is lost. For comparison, consider copying an image on a copy machine, then making a copy of that copy and doing the same thing repeatedly. You will notice the image slowly lose quality with each copy made. The same concept applies to a JPEG. So, just remember, try not to open JPEG files so no more quality is lost. It is always best to have an original file such as TIFF or PSD you can go back to for maintained quality. Tip: JPEGs are your friend for the web and files sharing, but not maintaining quality.

GIF:

Accessible through the 'Save for Web' menu, the GIF stands for Graphics Interchange Format. The GIF is an even lower quality file type in comparison to a JPEG and is used for the web. It reduces the amount of colors in the document to reduce the file size as well. However, because it is lower in file size and quality, it promotes fast download time for web pages. It also is accessible for all Internet browsers. Two major advantages of the GIF is that it supports transparency and you can apply simple animation with layers of images using the Animation tool.

PNG:

Stands for Portable Network Graphics. This file type is less known and used and was originally intended to replace GIF files because it supports transparency just like a GIF, maintains quality and contains more colors. Although it is not quite as popular, it is a better file type than both the GIF and the JPEG for digital images. This is because it maintains the quality of an image, regardless of how many times it is opened. The only downsides are that it does not support CMYK color mode, meaning it cannot be used for printing, does not support animation and because it is not as known or used as much, some Internet browsers may not support it. Tip: When choosing to save digital images, choose a PNG over a JPEG to maintain quality. PNG files are also good to use for Flash and PowerPoint Presentations.

PDF:

Stands for Portable Document Format. Most used for file sharing, viewing and printing. Images can be saved as a PDF file in Photoshop, which allows for maintained file features, for example, layers. You can save it as a JPEG compression or a ZIP file to prevent loss of quality. One advantage of a PDF image file is being able to use spot colors. Spot colors are specific colors used in the printing industry. For example, if you are going to print a file as a one color image, you would use a spot color. By far the greatest advantage of saving in a PDF format is accessibility. Anyone will be able to open the file on any computer as long as they have Adobe Reader installed. Adobe Reader is a free software by Adobe that is or can be installed on the majority of people's computers. Most people already have or can install this software within minutes.