My Design: Brand your ZIPBOX Store

To help you get started with your ZIPBOX Store design download this basic template PSD. This file is broken into parts by layers for you to have a reference to size and position of all your design elements. We've also created a more detailed Photoshop file that shows each layer and all the repeating and sizing possibilities. This is the file ZIPBOX's designers use when creating templates.

Understand layers and pixels.

This help topic assumes you understand the basics of Adobe Photoshop, pixel resolution and Layers in Photoshop.

All images can be JPG, GIF or PNG files. Do us all a favor and optimize your images using Photoshop's "Save for web" or "Save for web and devices" option in the file menu. This way you can preview what the images will look like and choose the most optimal file size for your images. Smaller file sizes means shorter load times for your users.

The basic dimensions of a ZIPBOX Media Store are 800 pixel wide content area with an extra 100 pixels on either side for additional "bleed" or hanging images. That bleed can be utilized with the header image, transitional image or the page image.

Header, Banner, Page, Transition, and Content Images

There are 5 basic parts to a ZIPBOX Media Site design that can have images applied to them. 

• Header: This image goes at the top of your page and can be as high as 600px but no less than 120px. The forms will always be layered on top of the header image.
• Banner: This image is placed behind the banner ads when that page has banner images. See banner ad help for more on banner ads. This image will repeat in all directions, so keep in mind that the banner space is 160px tall.
• Page: The page are is layered behind both the Content and Transitional areas. It is the continuous space left, right and bottom of the browser window. The image that you place in the Page area can optionally be repeated in any direction you desire. Keep in mind the origin of the image starts at the top middle.
• Transitional: The transition area is layered in front of the page area and behind the content area. By default it is transparent so you do not have to assign the transitional area an image or a color. Because the content area is 800 pixels wide make sure your transitional image is at least 802 pixels wide so it will show up. 
• Content: This is the main area where most of your page content will go. It is always 800 pixels wide and will most often have text on top of it so consider the color of your text when designing this area of your page.

Save slices or segmented photoshop files.

My Media: adding files to sell on your store