Web Development & Design Foundations with HTML5

Skip to Content 9th Edition

Adobe Photoshop CS5 Tutorial: Creating a Logo Banner Page 6

Trim and Save Your Company Logo Banner

The logo banner

Notice how there is a rectangle of empty space around the text in the image. This will automatically leave blank space around the text when the image is displayed on a web page.

If you would like to reduce the dimensions of the image to the width and height needed to display the text (without an empty area bordering the text), you will need to to trim the image by selecting Image >Trim.

Select Image, Trim

The Trim dialog box displays, as shown below. Click OK.

Trim Dialog Box

If you trimmed the canvas around the image, your Photoshop work area should now look similar to the one shown below.

The logo has been trimmed

Save the Logo Graphic

Save for Web Dialog boxSelect File > Save for Web & Devices to optimize the image for the Web. See the screen capture at the left (click on it to view a larger version). The Save for Web & Devices dialog box has four tabs: Original, Optimized, 2-Up, and 4-Up.

The Original tab displays the image before optimization. In this case, the sample image is 150K. Click the Optimized tab. In this case the optimized image is only 19.15K — a huge difference. The Optimized tab has a variety of other options that you can explore on your own at another time. The 2-Up and 4-Up tabs display multiple versions of the image to allow easier decision-making.

Select the Optimized tab and then click the Save button. Browse to the location where you want to save the optimized file.Save your file on your hard drive or portable storage media (CD-R, USB thumb drive, etc.). Name the file logo.gif. Click Save.

Now save a .psd version of your logo banner file. This file can be easily modified. Select File > Save As. Name the file logo.psd. Click Save.

Close Photoshop. Select File > Exit.

If you are thinking, "There really is a lot to learn about using graphics applications." — you are correct.

Consider taking a graphics course sometime in the future. Some technical web developers outsource their graphic work to graphic specialists.

Large-scale web projects usually have at least one graphic designer on the team. This allows the developers to concentrate on the HTML and scripting.

Happy Graphics!