CREATING WEB-READY IMAGES USING PHOTOSHOP

(informal tutorial)

 

 

When we want to include pictures or other images in our web pages it is a good idea to try to keep them as small as possible. This has nothing to do with the visual dimensions of the image, but rather with their size in terms of bytes. Small images are a plus in web pages, because they save server space and because they take less time to download. This is an important consideration when creating web pages, because you might be developing a web-project aimed at users without fast internet connections. Whether that is the case or not, keeping images small (bytes) is an efficient approach in web design.

 

Photoshop is an extremely powerful image-editor software that has almost infinite editing possibilities.

In this guide you will learn the basic steps for optimizing an image for efficient web-viewing.

 

The most important concepts for optimizing an image for the web are:

 

·        FILE SIZE

·        IMAGE SIZE

·        IMAGE RESOLUTOIN

 

STEP 1

 

Launch PhotoShop(PS) START|PROGRAMS|ADOBE|

Open your image in photoshop. To do this you have 3 options:

1.    You can double click the main PS window

2.    choose FILE|OPEN

3.    drag your image from your disk and drop it in PS.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


STEP 2

 

Before optimizing the image for your webpage, you should know that they are many editing tools available. In this tutorial I will show you some very basic ones, but feel free to explore the many options and effects that can be applied to your images. In lab we can try more advance techniques depending on the ideas and needs you might have.

 

 

CROPPING AN IMAGE

 

Imagine you want to use only one part of an image in your web page.

For example, in the image below imagine you just want a shot of homer running.

 

 

To do this we use the crop tool in PS.

To access this tool press its button from the tool bar (shown on image), or simply press the letter C on the keyboard.

Then draw a box around the area that you want to keep. Notice how the rest of the picture becomes dark, this shows the portion of the picture that will be cropped. The bounding box can be used to resize the cropping area. When satisfied, press enter. This will crop the image. If you want to start over, right-click and select cancel.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


  CROPPED IMAGE

 

 

BASIC IMAGE MANIPULATION

 

There are many effects, filters, and modifications that can be applied to images. Here is where to find the most common ones.

Image Brightens and Contrast

 

Select IMAGE|ADJUSTMENTS|BRIGHTNESS AND CONTRAST

This will bring up the brightness and contrast adjustments tool. Make sure check the preview option, that way you can experiment before actually applying changes to your image.

 

                                                                                                    Variations in Brightness and Contrast

 

Feel free to experiment with any filter or option you find, when you are satisfied with your picture make sure to save your changes.

 

STEP 3

 

OPTIMIZING YOUR IMAGE FOR WEB-VIEWING

 

Photoshop 5.5 and above include a module specially designed to optimize pictures for the web.

You can access this module by choosing FILE|SAVE FOR WEB.

 

Thing to look:

Settings: Here you can choose from different image format such as JPEG and GIF. Also can use the pull down menu to choose the quality settings. (low, med,max)

 

Image Size: Here you can specify the size of your image, either in pixels, inches. You can also use percentages to reduce or enlarge your image. This is a very important point, since your images should never exceed the size of your page. When you like your setting press apply.

 

Infobar: On the lower left-hand you can see information about your picture. In this case:

JPEG/ 80.82k/31 sec @ 28.8kbps

This information is automatically updated every time you change a setting, and indicates the image format, the size in bytes, and the time it takes to load in the slowest internet connection


As you play with the different settings, the main window shows you how the image will look after you apply the changes.

When you are satisfied with your results, save your image to your disk. Notice that after you save your image, you return to the main photoshop window. You can close your image in here, and don’t need to save any changes.

 

Experiment and enjoy.

(end of this tutorial)

 

 

CREATED BY ANDINO 01/16/2005