Preparing an Ecommerce Template for the Miva Merchant CSS Framework

Once you have your template designed, you need to prepare the graphics to be implemented within the Miva Merchant CSS framework. My last post talked about how to design a template. Now we will get into cutting up that template into usable images. The items designed to be customized include the logo, top header background, search button, phone number, top navigation bar, left navigation bar, promotion graphic, featured products section, best sellers section, and footer.

Since this design was created in Adobe Photoshop, the industry standard website design tool for creating graphics, I will discuss chopping up the images using Photoshop. There are two popular techniques that are used to chop up a design into usable images in Photoshop. One is using the Crop Tool to crop around the desired area, and the other is to use the Slice Tool to slice up a graphic into the pieces/images that will be used. Both techniques work fine but the Slice technique is the most popular, working best for more complex designs. Regardless of which method you use, be sure to measure carefully. In the design process we used multiple guides to ensure that each element of the design is sized exactly to the nearest 5th pixel. For example, instead of making the navigation 32 pixels high, we rounded it up to the nearest 5th pixel, making the bar 35 pixels high. Since the design follows some web design best practices regarding the width of the site, taking into account popular screen resolutions, the design is working off  a 960 pixel wide design. Everything fits exactly within this size, including the 35 pixel high top navigation bar. Be sure to confirm your design’s measurements before you begin chopping it up.

Logo

Since the logo image is placed in front of the header background image,  it is best that we make it a PNG with transparency. This way, you can change the header background in the future without having to edit the logo. Conversely, you might want to just change your logo image without touching the header graphic behind it. An example of this would be when sites decorate their logo to fit a seasonal theme, such as adding ice or snowflakes for winter. Google frequently does this with their logo.

Header Background

In this design, there is just a subtle white highlight with a touch of texture, all to add depth to the appearance. This graphic is going to be a rectangle that spans the full 960 pixel width of the site so it can easily be changed to whatever you like. This area is frequently used to add a promotion or sale graphic.

Search Button

By default the search button is not a graphic/image but a solid block of color with text over it. In the code we will change it so that it displays an image for the search button instead of what is there by default. This button was designed to be the same height as the search bar where you input what you are searching for. Make sure your custom search button image is sized correctly when you design this part.

Top Navigation

The top navigation will be cut as a whole, to accommodate the rounded corners. (If the corners were just square, it could just be set to tile a two-pixel wide image and make it span the 960 pixel width of the site.) On top of the navigation bar image, there will be text making up the links portion of the navigation. We’ll use a two-pixel-wide divider graphic to create a 3D appearance for the divisions between the links. This will be its own image and in the code will be placed between items, to the left of each text navigation link, dividing them.

Left and Right Columns

The left column consists of the navigation for the categories within the store. The right column is where a promotional graphic is placed, along with Best Seller products and Featured products. Within this CSS framework, in order to have a clear graphical split between the two columns, a single 2 pixel high image, spanning the full 960 pixel width, will have to be made that will repeat for the entire height of both columns. To have the bottom of the two columns end properly (also known as a bottom cap), keeping the appearance of the border, an additional image will be created just of the bottom portion of the two columns. This still spans the full 960 pixel width.  If your corners are square, it is best to keep it between 2-4 pixels high. Rounded corners call for a larger height, to accommodate the radius of the corners. The top does not need a “top cap” since we will have a “Categories” graphic in the left column and a promotional banner at the top of the right column.

Small Graphic Elements

Adding detail with clean graphic elements can really add a lot of visual appeal to a design. Next to the text for the categories, in the left side navigation, are small graphics used as bullets. These small graphics look best when designed to be the same height as the text, or smaller. The Categories, Best Sellers, and Featured Products graphic elements all have design applied to a blue bar that will span the top of each of these three sections. These will all need to be cut at the same height, only spanning the width of the column they belong to, not the full 960 pixel width of the site as a whole. The promotional graphic at the top of the right column will also be cut similarly, at the same width as the two other blue bars in this column, but the height adjusted to the correct size.

Conclusion

The footer has no images applied to it and will be fully customized in the code. Overall, this template was designed using best practices for creating clean, pixel-perfect, web design. Other Web 2.0 design trends can be viewed in my “Web 2.0” blog post.

The next post in this series will outline how to implement these graphics in the code within the new CSS framework.