Adobe Photoshop - The Basics

This guide will show you the steps involved for basic image editing, using Adobe Photoshop.

1. Open Adobe Photoshop
2. Click on the 'File' menu, then select 'Open' and browse for the image file you wish to work on.

Cropping an Image

1. Using the Rectangular Marquee Tool (Square dashed line) in the top left of the Tools Palette draw a box around the area of image you would like to keep.
2. Click on the 'Image' menu and select 'Crop' to remove the unwanted area from the picture.
3. If you are unhappy with the result you can click on the 'Edit' menu and select the 'Undo' option to go back a step. Ctrl+Alt+Z will take you back further steps.

Resizing an Image

1. With the appropriate image open and cropped (if necessary) you can resize the image by clicking on the 'Image' menu and selecting 'Image Size' to open up the image size window.
2. Here you can choose the new size for your image, in pixels, for use on your website. Keep the 'Constrain Proportions' option ticked to stop your image becoming stretched. Click 'OK' to resize your image once you have chosen your size.
3. To preview how your image will look on-screen, select the 'Zoom Tool' (Magnifying Glass Symbol) in the tools palette and click the 'Actual Pixels' button in the top toolbar under the menus. This will set the Zoom level to 100% so your image will be show at the same size as it will appear in a web browser.Again, if you are unhappy with the result you can click on the 'Edit' menu and select the 'Undo' option to go back a step.

Saving an Image

1. Once you have prepared your image, to save it click on the 'File' menu and select 'Save for web.'
2. The 'save for web' preview window will open, where you can select the optimisation settings for your image and preview the result (under the 'optimised' tab.For the majority of photographs, using the preset settings 'JPEG High' or 'JPEG medium' will be fine. You can select a preset from the drop-down menu located under the 'OK' 'Cancel' and 'Output Settings' buttons on the right hand side.
3. As you change the settings, the image in the preview window will change. The higher the quality setting, the larger your file size will be, taking longer to download. Smaller files however, will lead to poor quality, blocky images if too low a quality is chosen.
4. Once you have selected the optimisation settings that you are happy with, click 'OK' to save your file under a suitable filename. This command is similar to using 'Save As' and will not overwrite your original file as long as a different name or
   folder is used.
5. If you are creating product images for your online store, it is always best to resize and save your product image first, then prepare your product thumbnail.

Chris Ward is the Design Manager at BF Internet. Established in 1996, BF Internet are a UK Web Design company offering creative design and online solutions for business start-ups, SMEs, corporate clients & major high street brands. See http://www.bfinternet.co.uk for portfolio, more details and a free consultation.