How to Create an Image for the Web in Photoshop

Enhance the quality of your website by creating images with Photoshop.

Eye-catching images are a vital part of website design. To be effective, the images must load quickly, be optimized for on-screen display and be saved in a universal format. Using Photoshop's "Save for Web" command will let you prepare any image for use on the Internet. The primary factors to consider when adjusting the settings are image format, quality and file size. Photoshop simplifies the process by providing a full image preview and several presets.

Instructions

1. Launch Adobe Photoshop and choose "File," "New."

2. Adjust the pixel width and height to the size required, set the resolution to 72 pixels per inch and click "OK."

3. Go to "File," "Save As" and save the new image in Photoshop (.PSD) format.

4. Edit the file by adding pictures, text or other graphics, then go to "File," "Save."

5. Select "File" and "Save for Web & Devices" after you finish editing the image.

6. Choose GIF, JPEG, PNG-8 or PNG-24 as the file format, or choose a preset from the drop down menu.

7. Adjust the image optimization settings. You can observe how the changes affect the image in the preview. File size information is available in the bottom left corner of the preview window.

8. Click "Save," select a name for the file and click "Save" again.

References

• Adobe CS5: Optimize an Image For the Web

Resources

• Webopeida: JPG vs. GIF vs. PNG