I apologise for the short gap between recent blog posts but I am in mid-preparation for a round-the-world gap year experience and time isn't falling at my feet. I have however decided to spend an evening creating a sort of web designer toolbox in which your average Joe designer can just quickly pull out a themed set of icons and other design elements and plonk it into their mockup.

These will hopefully save some people some time and should be of use to beginner designer's who wish to learn how to create scalable artwork in Photoshop.

Have you ever wanted to create the Firefox logo in a scalable Photoshop format? Probably not, but now you can anyway.

This tutorial is a good way to get to grips with creating scalable graphics in Photoshop and the skills discussed can be carried over to logo design, icon design, UI design and a whole load of other practical uses. The Photoshop source file is included. 

I have ploughed through several pure CSS star rating systems, only to find that many use either unnecessarily large images (defining every state) or bloated mark-up in both HTML and CSS.

In this post I talk through an example of a new and elegant approach that uses some CSS trickery and a single image defining the three states of static, hover and active.

Working examples of how to create perfectly accessible, cross-browser compatible and javascript-free CSS overlapping tabbed navigation systems. The menus are completely expandable and customisable, with both expandable menu items and menu item length.

This entry contains 4 free examples available for download.