Adobe Photoshop Tutorial

Adobe Photoshop is one of the easiest and most powerful photo and graphic editing programs you can own. The latest version can be found at http://www.adobe.com/products/photoshop/main.html. A less expensive version can be purchased for either Windows or MAC - Adobe Photo Elements. If you are doing a lot of photo editing, this program is worth every penny! This tutorial just touches on the basics of how to resize and save a photo for the web. However, professional artists and photographers take this program beyond the basics to create works of art. Search for Photoshop tutorials on the web. Try About.com - http://graphicssoft.about.com/od/photoshoptutorials/

Open photo or graphic file to begin editing.

Here's an example of the newer version tools menu vs. an older version tools menu. This box will appear on your screen and you can move it by grabbing the top blue bar with your mouse.

Use the broken box to select the part of the image you want to crop. Select crop from the image menu. You may decide the photo needs some color or light adjustment. The photo below does appear to be too dark.

I recommend trying out the auto levels and auto contrast since those are very effective in "fixing" the lighting on your photo.

File Size

You will want your files to be less than 500 pixels if you are trying to use them on a web page. All photos and graphics must be a small file size in order to load up properly on the web. An ideal size might be 300x200 pixels depending on the detail in the photo.

Large file - 1818X1220 Pixels

Medium File - OK for web but slow to load up - 500x338

Small File - Great for web, but not good for detail - 206x208

Typically, cameras will use a file type that is not compatible with the web. Some cameras typically use bitmap - .bmp, tiff or pcx or the MAC .pict, etc. For the web, you need the file to be either jpeg (.jpg) or gif (.gif). When the web first began to use graphical interfaces, the early programmers selected jpeg from the MAC Adobe Photoshop format and gif from Windows Compuserve image file extension. Use "save as" and locate the jpg and gif extensions.

Note the difference between "image size" and "canvas size." The canvas size is the gray workspace on the screen, but you will want to change the image size.

LARGE FILE

For photo editing, one of the best features of Photoshop is the "image size" menu. You can view the file size (5.49 Megs) and the pixel dimensions (1600X1200) and know immediately that you will need to re-size your image for the web. Digital cameras and scanners tend to default at the highest resolution possible. This is great for printing, but not good for use on the web.

FILE SIZED FOR WEB

To resize, you simply need to change the width and the height will automatically resize in correct proportions as long as you have the "constrain proportions" box clicked below. You will see that once the width was changed to 350 pixels, the file size went down for 5.49 Meg to 269 Kilobytes. The size of a photo on the screen can be deceiving, but when the file is on the web, it will be ok.

FILE SAVE OPTIONS

You will want to save the file as .jpg or .gif. In Photoshop, the .jpeg option is found in the format box. To save as a .gif, you would select save for web.

SAVE FOR WEB OPTION

In Photoshop, you have a separate option to save for web. This will automatically save it as a ..gif file.

Using the save for web option takes you to a new window where you can make additional edits to the photo.

Generally, you will not be concerned with these changes, but you may wish to change the transparency of the image if you are using a background image file.