Get Images Ready for the Web with Photoshop - dummies

By David Karlins, Doug Sahlin

Although Fireworks is the tool of choice when you’re creating graphics for a web page, sometimes when you create a document in Photoshop you will need to export different parts of the document with different file formats.

For example, if you create a splash page, you get your best results and the smallest file size when you export the text by using the GIF format, and export the sections with images by using the JPEG format.

To get an image ready for the web in Photoshop, follow these steps:

1Choose File→New.

The New dialog box appears.

2Specify the size of the document.

In most cases, you’ll be creating things like banners. Choose Pixels as the unit of measure, and then specify the width and height of the image.

3Add the objects you need to flesh out the document.

For example, to add an image, choose File→Place, and then click inside the document where you want to place the image. This can involve layers, filters, adjustment layers, as well as adding text.

4Resize objects as needed.

Select the object with the Transform tool.

Choose Edit→Transform.

Choose one of the options from the popup menu. You can scale, rotate, skew, distort, rotate, and so on.

5Select the Slice tool.

This tool is introverted by nature and shares space with the Crop and Slice Select tool, which is the fifth slot on the toolbar. The last-selected tool appears at the top of the heap. Click the arrow in the lower right of the last-selected tool, and then select the Slice tool from the fly-out menu.

6Slice and dice the image as needed.

When you first select the Slice tool, the entire image appears as a slice. You then use the tool to select individual layers, and choose export options using the Save for Web command.