The Salcombe Web Design Blog

Welcome to the Salcombe Web Design blog. This is kept up to date by our Creative Director Daniel Ashton. Daniel is a project manager, graphic designer and website consultant.

In my last blog article I looked at 'Explaining Icons'.

Now it's time to start considering the process of building your icon. With the advent of HTML5 and CSS3 there will be a gradual shift towards in browser creation of vector graphics. But these are new technologies that have a long way to go until full implementation so for the time being we still need to use images to present graphics on our web pages. There's a million different image editors out there and we all have our favourite.

As we're still going to be using bitmap images there really is no reason why we can't use Adobe Photoshop. Most graphic designers are using applications like Illustrator or Fireworks, probably out of habit as they're used to creating scalable vectors for company logos and other printed products. Many icons can be as small as 16px x 16px so for this purpose Photoshop is not dead! It's designed for working in pixels, it has advanced anti-aliasing features and by combining this with transparency very crisp beautiful icons can be achieved.

When designing icons the placement of every pixels counts. When working in Photoshop switch the pixel grid on and make sure every pixels is aligned to the grid, with restrained anti-aliasing helping smooth the curves

Don't know what antialiasing is? Have a look at this tutorial that will help you use anti-aliasing and transparency in tandem.

Next we'll look at the anatomy of an icon..

But lets first consider another case study, this time focusing on the global brand giants Apple who at the cutting edge of touch screen technology are leading the way in Icon navigation