Creating Professional Quality Banners in e-Picture

e-Picture is specificly targeted towards web graphics professionals. This step by step example describes how to create a standard web banner under constraints commonly imposed by a hosting web site.

When creating a banner for display on a commercial web site such as Yahoo!, professional web developers must keep several factors in mind:

  1. The image dimensions are dictated by the commercial site. For Yahoo! the standard banner size is 468x60 pixels.
  2. The smaller the image size, the better. For Yahoo!, the absolute limit is 12K.
  3. The higher the image quality, the better.
  4. Color selection is generally limited to a maximum of 256 colors or fewer.
  5. Certain banner elements produce a higher number of click-throughs (the ultimate objective), so some or all of these must be included.

The challenge is to produce a banner that is eye catching yet conforms to the factors listed above. The example below meets each of these objectives. Before you begin, minimize the Layers Panel; it is not needed for this example.

Step 1
Create a new web banner (468x60) document with a transparent background.

Detailed Instructions
Start e-Picture or choose File > New to bring up the New Document creation window. In this window, select Web Banner (468x60) from the Template popup menu and Transparent () from the Background choices. Then press the New button.

This will create a blank web banner sized canvas for you using the standard web banner characteristics. A blank canvas is indicated by a gray and white checkboard pattern (the checkerboard pattern indicates transparency).

Note
For convenience, e-Picture comes with templates for common sized web banners. Users are welcome to add to or change any item in this list to suit their particular needs.

Step 2
Create the bottom-most background element of your banner.

Detailed Instructions
The background of this banner consistes of two elements: a filled orange rectangle that covers the entire canvas, and some decorative, maybe even subliminal text. The orange rectangle is created in this step and the decorative text is created in the next step.

To create the orange background rectangle, select the Rectangle tool () from the toolbox. When you select the Rectangle tool, the Tool Inspector panel changes to display the customizable features of the selected tool. The Rectangle tool, like most 2-dimensional tools, has both a Stroke tab to control the rectangle outline, and a Fill tab to control the rectangle's fill properties. Set the stroke to transparent by selecting the Stroke tab and clicking on the transparent button. Set the fill to orange by selecting the Fill tab and adjusting the sliders or typing in the adjascent text fields the following values: Red 255, Green 198, Blue 0, Alpha 255. Now, draw a solid orange rectangle that covers the entire canvas.

Note
e-Picture separates out the stroke and the fill colors in order to allow graphic artists to more finely control every aspect of their images.

Step 3
Create the background text for your banner.

Detailed Instructions
To create the decorative background text, select the Text tool () from the Toolbox. In the Text Tool Inspector, select the Stroke tab and set the stroke to transparent. Next, set the fill to a partially transparent white by selecting the Fill tab and setting the Red, Green and Blue values to 255, and the Alpha value to 100. Now, click on the canvas and type "GIFT"

At this point, the text has been created, but it needs some adjusting. To change an object after it has been created, use the Pointer tool (). First, ensure that the text object is selected by double-clicking on the item in the Objects Panel. Next, make any adjustments necessary using the Inspector panel. Notice that the inspector now has 2 additional tabs. These tabs allow you to manipulate any composite methods or filters that have been applied to the current object. Change the font to Arial Black Regular if available, or Swis721 BT Roman if not (Arial is a common font family, but it is not available by default on the BeOS). Lastly, reposition and resize the text so that it resembles the size and location shown at the left. Click anywhere within the bounding box of the text and drag to change the text position. Click on any of the resize handles on the bounding box to resize the text.

Note
Every hand drawn or imported object in e-Picture is editable at all times. Although the font, position and size changes above were made immediately after entering the text, adjustments can be made any time using the same steps outlined above.

Step 4
Create the raised URL pedestal.

Detailed Instructions
One element that most banners for the web should contain is a company or URL identifier. During the next 2 steps, a stylish identifier for our sample banner is created. This banner is meant for demonstration purposes only and is in no way related to www.shop.com.

To create the pedestal, select the Ellipse tool () from the Toolbox. In the Ellipse Tool Inspector, select the Stroke tab and set the stroke to transparent. Next, set the fill to purple by selecting the Fill tab and setting the Red, Green Blue and Alpha values to 140, 120, 255, 255, respectively. Now, hold down the Shift key and draw a circle in the document window that is approximately 2 1/2 times the height of the canvas.

Next, select the Pointer tool and reposition the circle as shown at the left. Lastly, give the circle a raised appearance by selecting the object in the Objects Panel and choosing Options > Effects > Emboss & Bevel from the menu. In the Emboss and Bevel dialog box, you can customize virtually every aspect of this effect. In this particular case, the default values are acceptable. Press Apply.

Step 5
Complete the URL identifier portion of the banner.

Detailed Instructions
Completing the raised URL identifier is done using the Text tool and the Emboss & Bevel effect, which are described above. Please refer to steps 3 and 4 for a more detailed explanation of how to use these e-Picture elements.

The two lines of text are done separately in this banner. Select the Text tool and for both "SHOP" and ".COM", do the following:

  1. Set the Font to Arial Regular (or Swis721 BT Roman if Arial is unavailable) in the Text Inspector .
  2. Set the horizontal and vertical text sizes (Size H: and Size V:) to 20 in the Text Inspector.
  3. Set the Red, Green, Blue and Alpha values all to 255 in the Text Inspector .
  4. Add a full emboss to the text by selecting Options > Effects > Emboss & Bevel in the Objects Panel. The default values are appropriate. Press Apply.

Once all the text has been created and embossed, use the Pointer tool to move the text to the correct position. e-Picture will automatically align objects for you if you select both text objects (click the first and Shift click the second to select both) and choose Objects > Alignment > Align Left from the menus.

Note
Only those items that fall within the canvas will be exported to the popular web graphics formats by e-Picture (though everything is saved when using the internal e-Picture file format). The area outside the canvas, called the overscan, is useful for producing effects and animations. You can limit the view to only the canvas by unchecking the Overscan box in the lower right hand corner of the document window.

Step 6
Add a (fake) text entry field to the banner.

Detailed Instructions
One design element that often increases banner click-through rates is a place to enter text. While simple images cannot have text entry fields, simply having an object that looks like one is a quite effective. A text entry field is created in the next 2 steps complete with a blinking cursor.

Creating an object that looks like a text entry field in e-Picture is easy. First, select the Rectangle tool from the Toolbox. In the Rectangle Tool Inspector, select the Stroke tab and set the stroke to transparent. Next set the fill to white by selecting the Fill tab and setting the Red, Green, Blue and Alpha values all to 255. Now, draw a short and wide rectangle as shown. Finally, to finish the look, select the rectangle in the Objects Panel and choose Options > Effects > Emboss & Bevel. In the Emboss & Bevel dialog box, set the Blur to 1 and the Type to Inner Bevel. Press Apply. You can reposition the text entry field using the Pointer tool as necessary.

Step 7
Simulate a blinking cursor in the text entry field.

Detailed Instructions
The blinking cursor is actually just a line that is animated to turn on and off repeatedly. To create the cursor, select the Line tool () from the Toolbox. In the Line Tool Inspector, select the Stroke tab and set the stroke to black by setting the Red, Green, Blue and Alpha values all to 0, 0, 0, 255, respectively. Because lines are inherently 1 dimensional, there is no Fill tab. Hold down the Shift key and draw a straight vertical line in the text entry field as shown. You can reposition and resize the line as necessary using the Pointer tool.

Animation in e-Picture is done in the Animation Panel. In order to make the line blink like a cursor, a second frame is needed. Change the value in the Total field from 1 to 2 and press Enter to accomplish this. Now, to make the cursor appear to blink, all that is necessary is to hide the line in one of the frames. To hide the line in frame 2, select frame 2 by entering a 2 in the Current field and pressing Enter. Then, click the eye icon () for the line in the Objects Panel. That's it. Press the Play button () to view the results. Checking the Loop box will play the animation continuously until you press the Stop button ().

Note
Animation in e-Picture is tightly integrated with the image design process. This is evident above by the fact that changing the visibility of the line object impacts only the selected frame (or if subsequent frames exist or are added, those frames as well). Furthermore, in e-Picture you can play your animation at any time as opposed to waiting until export time as with most other tools. We call this feature "Animate as you go".

Step 8
Add some interesting text to encourage user interaction.

Detailed Instructions
In order to be effective, the text entry field must have some explanation for its purpose. Because space on a web banner is limited, it makes sense to animate some simple text to provide this explanation.

Similar to the blinking line, the animated text will be created by showing one item in the first frame, and another item in the second frame. Select the first frame and using the Text tool do the following:

  1. Set the Font to Arial Regular (or Swis721 BT Roman if Arial is unavailable) in the Text Inspector .
  2. Set the horizontal and vertical text sizes (Size H: and Size V:) to 14 in the Text Inspector.
  3. Set the Red, Green, Blue and Alpha values to 0, 0, 0, and 255, respectively, in the Text Inspector.

For the first line of text, click just above the text entry field in the document window and type "Tell Us Who You Are Shopping For...". For the second line of text, click just above and to the right of the first line of text and type "And We Will Do The Rest!!!". Your banner at this stage should resemble the top image shown on the left.

Next, using the Pointer tool, click the bottom text and Shift-click the top text to select both items. Choose Objects > Alignment > Align Left to provide horizontal alignment. Then choose Objects > Alignment > Align Bottom to stack the objects one on top of the other. Finally, set the visibility for the text in each frame. With frame 1 still selected, click on the eye icon for the second line of text to hide it (the first line should still be visible). Now, select frame 2 in the Animation panel, and click on the eye icon in the Objects Panel for the first line of text (the second line should still be visible). Play the animation to see the effect.

Note
Holding to the constraints imposed by most commercial web sites such as Yahoo! can be challenging. For this example, the decision to limit the animation to 2 frames allowed for more detailed and captivating graphics to be used.

Step 9
Finish the banner with a button.

Detailed Instructions
A second banner element that is proven to generate click-throughs on web sites is a push button. People are much more likely to click on a banner if it appears to be interactive.

A push button is a simple interface element made up of a button that contains some text. To create the rounded rectangle, select the Rounded Rectangle tool () from the Toolbox. In the Rounded Rectangle Tool Inspector select the Stroke tab and set the stroke to transparent. Next, set the fill to purple by selecting the Fill tab and setting the Red, Green Blue and Alpha values to 140, 120, 255, 255, respectively. Now, draw a button sized rounded rectangle like the one shown. Finish the rounded rectangle by selecting the object in the Objects Panel and choosing Options > Effects > Emboss & Bevel from the menu. Set the Type to Inner Bevel and press Apply in the Emboss & Bevel panel.

Step 10
Finish the button with the button text.

Detailed Instructions
To create the button text, select the Text tool from the Toolbox and do the following:

  1. Set the Font to Arial Regular (or Swis721 BT Roman if Arial is unavailable) in the Text Inspector .
  2. Set the horizontal and vertical text sizes (Size H: and Size V:) to 15 and 13, respectively, in the Text Inspector.
  3. Set the Red, Green, Blue and Alpha values all to 255 in the Text Inspector.

Now, click in the body of the button and type, "Find It". Lastly, Add an inner bevel to the text by selecting Options > Effects > Emboss & Bevel in the Objects Panel. Change the Offset X and Offset Y values to 1, the Type to Inner Bevel and press Apply. If necessary, you can reposition the button text using the Pointer tool.

Run your animation one last time to see how everything looks.

Step 11
Save and export your animated banner.

Detailed Instructions
e-Picture uses a special encoding format to preserve all of the object, layer and animation information. In order to save your animation for later editing, choose File > Save and choose a file name and destination directory when prompted.

In order to use your animation on the web, you need to export it as an animated GIF. To do this, choose File > Export > GIF Animated. The resultant Animated GIF export dialog provides you with numerous options which allow you to export a file that meets your particular needs. Check the options for "Generate HTML", "Loop" and Override Document Speed. Set the value in the Override Document Speed field to 100. The Color Reduction options provide the web graphic artist with precise control over the GIF generation process. The default values produce very good results in this case. Press the Save As... button. You are prompted to enter a name and a directory for your GIF. A .html file with the same name as your GIF file is also created in this location.

That's it! The banner is ready to be posted on Yahoo!, and it meets all of Yahoo!'s requirements. Open up the folder where the banner was saved and display the finished product.