Web Development & Design Foundations with HTML5

Skip to Content 8th Edition

Adobe Photoshop CS5 Tutorial: Creating a Logo Banner Page 2

Create a New Image

To create a new image, select File > New. Your display should be similar to the screen shown below.

The "New" dialog box appears in the middle of your screen. This dialog box configures setting for your new document. Set the Preset value to "Web". We would like our working logo banner file to be named logo.gif, 700 pixels wide, 100 pixels high (the Preset will automatically change from Web to Custom after you change the width), have 96 ppi resolution (the default), 8 bit RGB color, and have a transparent background (Background Contents).

Modify the "New" dialog box with these settings. It should be similar to the one shown below:

Adobe Fireworks after launch

Click "OK". Photoshop creates the new image canvas according to your specifications and the window below appears on your screen.

logo.gif in the canvas

Take a minute to familiarize yourself with it.

  • The "logo.gif" in the Title Bar is the name of the file at this point.
  • Although the image file extension psd is the native image format for Photoshop, we will use the gif file extension in this tutorial.
  • The checkerboard pattern in the window indicates a transparent background canvas — don't worry your final image will not have a checkerboard pattern background.
  • The "100%" indicates that the image is displayed at "100%" of its size.

If you look at the bottom left of this window you will notice the display magnification (currently 100%).

Continue with the next page to begin editing your company logo banner.

Page 3Next Page