The best place to start off is to define a color scheme. You'll want a predefined pallet of three to ten colors arranged in a hierarchy from most prominent to least. We would like to create a text file that lists the hex values and some comments for each color about how it should be used in the template.

We've seen designers who do well with a scheme of only three colors. However, six to ten colors is probably more realistic for your design. Keep in mind that you've got several types of rollovers and links to deal with, and that will push your color scheme out.

Color schemes are the hardest thing to start pulling together. Designers who have many years’ color theory still dread coming up with eye-catching color pallets. But the fact is, it is the first thing people will notice about your site and it's the first thing that will help them notice that this is not another Joomla! website with some slightly varied, standard template.

Two Minute Color Schemes

When it comes to color schemes, don't sweat it. Mother Nature or at the very least, someone else, already created some of the best color schemes for us. Sure, you can just look at another site you like and see how they handled their color scheme, but it's hard to look at someone else's design and not be influenced by more than just their color scheme.

For those who intent on an original design, here's my color scheme trick. If your site will be displaying a prominent, permanent graphic or picture (most likely in the header image), start with that. If not, go through your digital photos or persue a stock photography site and just look for pictures which appeal to you the most.

Look through the photos quickly. The smaller the thumbnails the better: content is irrelevant! Just let the photo's color hit you. Notice what you like and don't like (or what your client will like or what suites the project best) strictly in terms of color.

Pick one or two images that strike you the most and drop them into Photoshop. A thumbnail is fine, but you'll probably want an image a bit bigger than that. Don't use photos with a watermark as the watermark will affect the pallet output.

Go to Filter | Pixelate | Moziac and use the filter to render the image into huge pixels. The larger the cell size, the fewer colors you have to deal with, but unfortunately, the more muted the colors become.

We find that a cell size of 50 to 100 for a 72 dpi web image is sufficient. (You might need a larger cell size if your photo is of high resolution.) It will give you a nice, deep color range, and yet few enough swatches to easily pick three to ten for your site's color scheme. If you liked the image in the first place, then any of these color swatches will go together and look great! Instant color scheme.

Using PhotoShop's Mozaic filter to generate a color scheme

Just pick up the eye dropper to select your favorite colors. Then double-click the foreground pallet and copy and paste the hex number into a text file.

Keep track of this text file! It will come in handy when you're developing your mock-up design in Photoshop, and later on when you're coding in HTML and CSS.

I recommend putting little notes or comments next to the hex colors in your text files describing the color and the types of things the color is intended for—button backgrounds, rollover highlights, border edges, and so on.

Color scheme text notes

CoffeeCup software (http://coffeecup.com) has a nifty color schemer tool. For those of you with the color theory background, this tool comes with a color wheel, color mixer, and a host of saturation, de-saturation, and other advanced tools which will provide no end to the mathematical permutations of color.

CoffeeCup Software's Colorschemer Photo Color Schemer option

We, however, prefer to use the Photo Color Schemer feature which lets us load in an eye-pleasing photo and choose 1 to 10 colors. The software's top two features include: 

• Generation of the final list of your color schemes with hex, RGB, or even CMYK values,; saving some precious time in copying and pasting your initial color; scheme text file. 
• It has a rudimentary Web Page Color Preview, which lets you drag-and-drop your swatches to; a basic web-page layout and get the gist of how the colors will work; best together, which we've found helpful in determining our color scheme's; order of importance.

Defining the Graphic Style

You'll find Joomla! to be an icon-oriented CMS. Keeping this in mind, selecting icons, or, deciding how you want to handle Joomla!'s standard features up front, will smoothen the rest of the design process as well.

We can offer you three suggestions on this front.

Invest in a good quality, royalty-free icon set which includes authoring files that you can modify as you wish (preferably, in a vector format). We like http://www.iconbuffet.com and http://stockicons.com, but a quick Google search will turn up many more. (Be sure you read the royalty-free agreement and have proper usage rights and rights to modify the icon set you purchase.)

• Find your icons; at http://openclipart.org. Open Clip Art offers illustrations; in a native vector SVG format. They're easy to edit into your own creations; with a vector or image editor.
• Don't use icons!; The built-in rhuk template, just uses standard grey; squares with the words—pdf, email, print, and so on in them. There's; no reason why you can't do the same.

If you don't have a vector editor such as Adobe Illustrator, Inkscape (http://inkscape.org) is a great open source SVG vector editor and what many artists who contribute to openclipart.org use.

The icons (or standard buttons) you choose, and the way you choose to treat them can be used as a guide for how to handle the rest of your template's elements.

Are your icons cartoony with bold lines? You'll then want to repeat that effect in other site elements, such as making sure navigation buttons or header backgrounds have their edges outlined. Are they somewhat photo realistic? Are they with drop shadows or reflections? Again, you'll want to think of ways to subtly repeat those elements throughout your site. This is a simple detail, but it brings a template design together, looking sharp and highly professional.

Again, we recommend you make a list and take notes during this process. If you apply a style to an icon and reuse it somewhere in your design, make a note of it so that you can reference it for future elements. For example: “All background header images, while being of different colors for different uses, get the 'iMac' highlight applied to them as used in the main icon set. Use custom action pallet “iMacMe” or, “All side elements have a bottom border with a color that fades up with a 90 degree gradient path.”

No matter how well you plan the layout in your mock-up phase, you may find later on (especially while coding) that there's an element you need to go back and design for. Having a style list for your elements will become an invaluable time saver. You'll have something to reference and won't waste time figuring out how the module element should be styled in relation to other similar elements or how you created a particular style effect.

Detail of rhuk_solarflare_ii template

Slice n' Dice

At this point, you know what modules you have to design, and you've thought about whether you're going to start from scratch or modify an existing template. You should have your color scheme and graphic styles defined and applied to your template's mock-up in an image file.

It's now time to start considering what parts of your mock-up get exported for the template and what parts are going to be all code.

If you're used to standard WYSIWYG or Photoshop Slice n' Dice design, you've got a little more to think about. You can't just slice your image up and export it with an HTML page. Joomla! templates don't work like that. Content is separate from layout. The majority of your images will need to be loaded using CSS.

You'll need to look at your design and start thinking in terms of what will be exported as a complete image, and what will be used as a background image. You'll probably find that your header image is the only thing that will be sliced whole. Many of your background images should be sliced so that their size is optimized for use as a repeated image.

If you notice that an image can repeat horizontally to get the same effect, then you'll only need to slice a small vertical area of the image. Same goes for noticing images that can repeat vertically. You'll only need to slice a small horizontal area of the image and set the CSS repeat rule to load in the image.

Detail rhuk_solarflare_ii slice samples

If you'd like more information on how to slice and work with background images, repeating and non-repeating for use with CSS, check out this article from adobe's site:

http://www.adobe.com/devnet/dreamweaver/articles/css_bgimages.html

Your menu items will need to be exported as background images without graphic text. Joomla! generates the text for each link dynamically so it's best to style that text with CSS and have an eye-catching background image with one image that includes its rollover beneath it. Same goes for section headers, if you'd like them graphically highlighted, it's best to export a background image so that the dynamically generated html text can be displayed over the image.

Wellstyled.com has an excellent tutorial on how to use a single image technique to handle image background rollovers with CSS.
http://wellstyled.com/css-nopreload-rollovers.html

Now that you've placed the slices for each of your template image elements, export them using the smallest compression options available, and get ready to look at some code.

If you're working from an existing template and overwriting images, pull out that module check list and make sure that each slice is correctly named and assigned the same file type so it will overwrite the old template image.

Putting It All Together

At this point you should have the following:

1. Module checklist—listing; all the elements your design will handle 
• Image checklist—(if; you're going to leverage an existing template structure) list of all; image names, sizes, and what modules they belong to
2. Color scheme hex; list—a list of your hex values for copying and pasting into your image; layout and code 
3. Graphic-style notes—a; list of things you've done to your icons and standard ways to treat; repeating graphic elements 
4. Full mock-up layout 
5. Sliced and exported; images

Summary

In this article, we covered the key elements of a Joomla! template and what considerations to make when working with your mock up. We went over some basic techniques for image extraction and optimization as well as covered some tips and tricks to speed up the design process. You should now have your color scheme hex values defined and listed in a handy text file and your key image elements optimized and exported into their own images.