Creating a Web Page Banner with Adobe Photoshop Elements 3.0

This tutorial will show you how to create a banner or logo using Adobe Photoshop Elements. The logo that you can create can be inserted into a web page.

Creating a Blank Image

1. Start Adobe Photoshop Elements.
2. Under the File menu at the top of the screen, choose New →, and then Blank File... to open the New dialog box.

   

3. Use the Width: and Height: text boxes to choose the size of your banner. For example, to create a 200×125 banner, type 200 in the Width: text box and 125 in the Height: text box. Make sure that the drop-down menus next to both text boxes are set to pixels.

   

4. Since we are using this image in a web page, type 72 in the Resolution: text box. Make sure that the drop-down menu next to the text box is set to pixels/inch.

Note: If you are not familiar with image editing terminology, please read the Resolution & Print Size Primer.

4. Choose RGB Color from the Color Mode: drop-down menu.
5. The Background Contents: setting is a matter of preference. If you would like the image to start out as a blank white canvas, choose White from the drop-down menu. If you would like the canvas to be colorless when you first start editing, choose Transparent from the drop-down menu.
6. Type a name for the banner that you are creating in the Name: text box. Verify all the settings that you have made, and click the OK button to continue.
7. A window containing a blank image with the settings you specified will appear in the center of the window.

   

Selecting the Main Area of the Image

1. On the left side of your window, click and hold the Rectangular Marquee Tool button until a drop-down menu appears.

   

2. If you want your banner to have an elliptical shape, choose Elliptical Marquee Tool from the drop-down menu. If you want your banner to have a rectangular shape, choose Rectangular Marquee Tool from the drop-down menu. (This tutorial will create a banner with an elliptical shape.)

   

3. Place your cursor in the upper-right corner of where you want your banner to appear. Click the left mouse button, and - while holding the button down - drag your cursor to where you want the lower-right corner of the banner to be. Upon releasing the mouse button, you will have selected the banner's main area.

   

Adding a Border to the Image

1. Under the Edit menu, choose the Stroke (Outline) Selection... option to open the Stroke dialog box.

   

2. Set the desired width of the border (in pixels) in the Width text box.

   

3. Set the color of the border by clicking on the colored box and choosing a color from the gradient that appears.
4. If you want the selection you have made to represent the inner edge of the border, click the Outside radio button. If you want the selection to represent the outer edge of the border, click the Inside radio button. If you want the selection to represent the middle of the border, click the Center radio button.
5. Verify the settings that you have chosen, and click the OK button to continue. The preview of the image will be updated to show the changes you have made.

   

Coloring the Image

1. On the left side of your window, click the Paint Bucket Tool button.

   

2. Click on the Set foreground color box in the lower-left corner of the screen. Use the gradient that appears to choose the fill color, and click the OK button.

   

3. Using the Paint Bucket Tool, click anywhere inside your selection to fill it with the color you have chosen. The preview will be updated instantly.

   

Adding Text to the Image

1. On the left side of your window, click the Horizontal Type Tool button.

   

2. Click on the Set foreground color box in the lower-left corner of the screen. Use the gradient that appears to choose the text color, and click the OK button.

   

3. With the Type Tool, click inside the image where you would like the text to be placed. A cursor will appear where you clicked, and the Text toolbar will be displayed at the top of the window.

   

4. Use the Set the font family drop-down menu to choose the font of the text that you wish to insert.
5. Use the Set the font size drop-down menu to set the size of the text.
6. Use the Faux Bold, Faux Italic, Underline, and Strikethrough buttons to change the style of the text.
7. Use the Left align text, Right align text, and Center text buttons to change the alignment of the text.
8. Type the text that you would like to insert. It will appear on your banner wherever you originally placed the cursor with the formatting settings that you had chosen.

   

9. To finish editing text, select any other tool from the left side of your window.

Saving the Image in a Web Format

1. Under the File menu at the top of your screen, choose the Save as Web... option.
2. Under the Settings heading, click on the drop-down menu shown below, and choose the GIF option.

   

3. Click the OK button in the upper-right corner to save the image.

   

4. Once the image has been saved, you can insert the logo into your web page as you would any other image.