Alibony - Web Design and Graphics
Photoshop Elements: Create a Web Banner
Adobe® Photoshop® Elements 6
January 15, 2008
In this lesson, we will create a colorful Web banner using simple shapes and text. The dimensions of the banner are 468 pixels wide by 60 pixels high, with a resolution of 72 pixels per inch. The finished banner will look like this:
To create a Web banner:
From the File menu, select New, and then select Blank File. In the New dialog box, enter the following dimensions and click OK.
-
Select two shades of the same color for the banner: one light, bright shade for the background color and a darker shade for the foreground color. Using the Paint Bucket tool, fill the Background layer with the bright shade.
Make the darker color the foreground color. Then, select the Shape tool and on the options bar, select the Arrow 19 shape from the Arrows shapes. Draw an arrow with its boundaries extending beyond the image so that it looks like it is breaking into the image from the left. A new layer is created above the Background layer for the arrow shape.
-
Select the Shape tool again and on the options bar, select the Stamp 1 shape from the Objects shapes. Draw a stamp with its boundaries extending beyond the image at the right so that only the left edge of the stamp is visible. A new layer is created for the stamp shape.
Use the Horizontal Type tool to add text layers as needed. In this example, we added three text layers: a black bold italic for the Web address, dark green bold for the ad copy, and white bold for the stamp text.
In the Layers palette, click the New Layer icon to create a new layer above the text layers.
-
Select the new empty layer and press Ctrl/A to select all. From the Edit menu, select Stroke (Outline) Selection and add a one pixel black stroke to the image. Select Inside as the stroke location. Click OK.
Your simple Web banner is done! You can liven it up by adding gradients or additional layers as in the following examples.
Updated on November 9, 2009