RokWebify website design
Requirements
RokWebify is a website design created with Fireworks CS3 using the same techniques we use to develop all our Joomla template designs.
Designing for a content management system like Joomla is a little different from just creating a design that ends up as a pure XHTML implementation. Care has to be taken to create the block elements (modules) in such a way that they can be added or removed so that the content area adjusts as necessary to maintain the desired look. This template design is used as the basis for a series of tutorials on Joomla template modification, and serves as a good learning tool and starting point for more advanced layouts.
The key components of the RokWebify design is that the content is in a separate layer that can be turned off easily to allow for exporting of the required slices. We use the minimum number of slices possible, keeping the images as small as possible, setting the name and export properties of each slice so that a single export of "slices only" recreates all slices with appropriate filenames. This allows color modifications to be a simple process of editing the elements and then exporting over the existing files.
The font we use in the RokWebify masthead area is Bitstream Vera Sans Bold, which is a freely distributable font. This is an important thing to consider when creating website templates. You must be careful to use fonts that have a license compatible with your distributed design.
The icon used as a logo in the header is a GPL icon from the Dropline Neu set. The bottom reflection is a simple technique that requires only selecting the bottom elements, flattening them, flipping them vertically, and moving down below the original elements. You then apply a vertical gradient path to a mask and set the mask properties to Path Outline.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
