STATIONERY DESIGN SPECS

(1)

EMAIL STATIONERY DESIGN SPECS

Rex Weston

President/CEO

StationeryCentral.com, Inc. 506 N. Main Street

Lake Mills, WI 53551 (920) 648-5408

[email protected] www.stationerycentral.com

1. Getting Started

We suggest that you visit our website – www.stationerycentral.com – and click into the Email Letterhead section.

Review the following to get a feel for design and the various program features: • Sample Gallery

• Website Links • Signatures • Personalization • Disclaimers

(2)

2. General Design Criteria

Width:

Maximum allowable width: 674 pixels

Suggested “paper” width before application of (optional) drop shadow: 645 pixels

(Optional) Drop shadow: Suggested specifications (for application to 645 pixel wide “paper”): Vertical offset = 4

Horizontal offset = 4 Blur = 16

Orientation is to the lower right.

Height: We suggest presenting designs to clients using a 390 pixel height for the “paper.” This will provide a good illustration of what their average email will look like.

Background image: The templates are designed to elongate via a tiled background image when long email messages are composed. This background image is a horizontal slice taken across the entire width of the graphic.

White windows: Virtually every e-mail program will display the finished template in a white window. Consider white to be the backdrop for all of your designs.

What we need you to send us: You should supply us with a single image for each template design. We will convert the image into the necessary sub-components.

Please email your file(s) – sized to the specs provided - in a high quality format compatible with a PC (.TIF works well).

(3)

3. Over-Under Style:

This stationery template is defined by a top graphic and a bottom graphic, separated by a tiling background image. The user’s message will be composed in the space between the top and bottom graphics, and the top and bottom graphics will become further separated from each other if the user composes a long message (i.e. the “paper” will stretch vertically).

The “tiling” background image for this design is illustrated below (red lines added so you can see it.) In this case the tiling background image simply adds the left and right drop shadow, so that the stationery remains fully surrounded by the drop shadow no matter how much the “paper” is elongated vertically by the user composing a long email message.

(4)

4. Side-by-Side Style:

This stationery template is defined by the user composing their e-mail

message to one side of a graphic. The side graphic can either appear on the left or right side of the design. (Note that this design style utilizes a top graphic and a bottom graphic, just like the over-under design style, but then adds a side graphic.) The following template illustrates a left side graphic design.

When creating a side-by-side design, there are some special considerations that must be adhered to. These relate to the “paper’s” ability to stretch vertically for longer messages.

Rule: The side-graphic must be either top aligned or bottom aligned to the design. In other words, as the “paper” begins to stretch, there must be an accommodation for the background graphic to fill in the space either above or below the side graphic. The following two graphics illustrate how this design has been structured to accommodate for this:

(5)

(6)

The “tiling” background image for this design is illustrated below. In this case the tiling background image adds a continuation of the brown left-side column, the tan “paper,” and the left and right drop shadows.

6. Quick Start Suggestions: We approach each new design as follows:

Layers:

• Background layer: White, 730 pixels wide by 520 pixels high

• Layer 1 (drop shadow): Roughly center a colored rectangle 645 pixels wide by 390 pixels high • Layer 2: (paper): Place another 645x390 rectangle directly over the one on layer one.

• Additional Layers: Build up the stationery design on additional layers.

Approach: Use the “paper” layer (layer 2) to alter the background color during the design process. Build up the stationery design using additional layers on top of this. Wait until the “paper” color and other major graphic elements are in place before applying the drop shadow. This will enable you to create a drop shadow that looks good with the rest of the design.

7. Embedded Links: We will take care of all the programming of these when we convert your

design into actual email stationery.

Navigational Menu Requirement: The architecture of the client’s website must be examined before offering them any kind of built in navigational menu, such as this one:

To incorporate a working navigational menu in email stationery the client’s website must be designed such that each page has a unique URL. The following graphic illustrates:

(7)

If the client’s website displays individual pages without actually displaying a unique URL for each page, a navigational menu cannot be incorporated into the stationery – rather, we are limited to a linking to their home-page only.

8. Inclusion of digitized “handwritten” signatures: Incorporation of the user’s digitized

handwritten signature into the template is an add-on option we offer our clients.

If your clients would like to incorporate their signature(s) we ask that you collect the signatures from them. Please scale the signatures so that they look good with some sample email text typed using Arial 10 point. Once you have the signature scaled, please send it to us on as a separate file on a plain white background.

9. Useful Tips: Following are some general tips that will be useful in creating the best result for the

client.

• Assume the compose font will be black (i.e. do not use a dark background color). • Recognize that your design will be displayed against a white background.

• To the extent possible, keep the height of the top graphic to the 80 to 120 pixel range. This is not a requirement, but since email messages are often first viewed in the “preview pane,” a shorter top graphic increases the likelihood of the first few lines of the client’s typed message are visible in the preview pane.

• Inclusion of the client’s email address in the contact info is somewhat optional, as all a message recipient will need to do to email the client is to click reply.

(8)

• Generic designs can be created for a company and then each individual user can personalize their own template via the use of what Microsoft calls an email “signature” (different than a digitized rendition of the user’s handwritten signature). This page illustrates: