Adobe Photoshop

Creating a Static Banner

Creating a static Banner is simply a matter of creating an image with the specified pixel dimensions and compressing it so that the file size does not exceed the specified limit and uses the specified color palette.  Let’s create a static banner for Travel Japan.

f porduct.jpg (25730 bytes)

The Finished Product

  1. Create a new image: dimensions 468 x 60, resolution 72 ppi, mode: RGB, contents: transparent.  Save it as staticbanner.

  2. Because the vertical resolution is so low (60 pixels), the shape of banners forces us to design almost exclusively within a horizontal direction.  However, we can use our logo so open travelogo.psd.

  3. Select the “Kimono Girl” Layer  in the Layers  Palette  and link the remaining Layers to it by {Clicking} each one separately, or {Clicking}, holding, and running the mouse pointer over the Link boxes.  Note that the Text Layer Set has been compressed.

all layer.jpg (25473 bytes)

All Layers  are linked to the “Kimono Girl” Layer .

  1. Select Layer /Merge Visible to merge the Layers  together.  The result is one Layer titled, “Kimono Girl.”

  2. We want to put “travelogo” into the banner so we’ll need to resize it.  Select Image/Image Size and change the height to 60.  The width should adjust automatically as the proportions are set to constrained.

  3. Now we want to move “travelogo” into “staticbanner”.  Select your Move Tool , put it in the “travelogo” Image Window , and drag and drop the content into the “staticbanner” Image Window.  Position it on the right end of the document.

banner.jpg (25083 bytes)

The Logo resized to fit the dimensions of the banner.

  1. Open miyagate from the chapter009 folder.  Create a selection around the Gate and copy it to the clipboard.  For your convenience a selection is saved with the document.  Feel free to use it if time is an issue.

  1. Create a new image and paste your selection to it.

  2. Make your Foreground Color the same red as that of the Rising Sun in the Logo and your Background Color  white. Select Image/Adjust/Gradient Map.  The Gate should now be two colors.  Select Filter/Sketch/Graphic  Pen and apply the filter with the default settings.

  3. Save the image as “filtergate” in Photoshop  format.

  4. We’ll need to resize the Gate so it will fit in the banner.  Select Image/Image Size and change the width to 240 pixels.  The width should adjust automatically as the proportions are set to constrained.

  1. Select your Move Tool , put it in the “filtergate” Image Window , and drag and drop the content into the “staticbanner” Image Window.  Position it on the right end of the document.  The gate is higher than the banner so position it in the Image Window so only the top of it is visible.

map.jpg (23724 bytes)

The Gate image with the Gradient Map and Filter applied

banner1.jpg (21404 bytes)

Gate image added and positioned in “staticbanner”

  1. Select the Type Tool and input “See Tokyo this Summer!.”  Font : Verdana,  Style : Bold, size is 23, Anti-Alias is Crisp, color is white.  Use the Layer  Styles  dialog box to add a black, 2-pixel wide stroke  to the text.

  1. Create 2 new text Layers .  For the first input the words “and save” and use the same appearance settings that you applied to the first text Layer .  Input “50%” into the second Layer.  Use the same settings with a few exceptions.  Make the size 55 and change the color of the stroke  from black to red.

  2. Position the text according to the example at the beginning of the lesson.  The “50%” text overlaps the word “summer” on purpose so don’t worry about the positioning for the time being.

  3. Add a new Layer  and position it at the bottom of the stacking order.  Use the Fill  Tool to fill it with pure white.

  4. Save the “staticbanner”, again, refer to the picture at the beginning of this chapter or open the staticbannerfinished file to see how your finished document should look.

Back to Index