Streamline Graphic Work by Templating

Tuesday, July 29, 2008

Template is a BIG part of our standardize operation. We not only create and use the html and css templates. We also heavily rely on the layered image template for banner, box, and linked buttons. The examples can be find in our usual podcast library.Our design goal is to use a minimum set of attractive features to win the most acceptance on the market place - the 10/90 rule. Doing so, we leverage our large stock collection of images and clips; and we reduce the risk of our young and relatively un-experience staff design team.

I have included some of the sample templates here on this blog entry. The one on the top is a sample banner image generated by the standard banner template.png. The next image is generated by the box template. To see the link button at work, you have to go here.

Please go to the Podcast/SOP folder to download those .mov clips which are some of the key Fireworks operations required to make the SOP work.

The image templates heavily depends on the vector based geometric shapes. One needs to know the basic vector operations in order to modify the templates. For example, to cut certain shape from a vector artwork, another vector artwork can serve as a cutter:

1. to place the cutter vector shape on top of the target shape,
2. to select both artwork
3. to click on modify -> combine -> punch

Besides punch, Many more operations are available, e.g. join and union. There are more than one ways the vector images can be edited. Please refer to the video tutorial for more detail.

You may also find a lot of button and bullet design here, maybe useful.