On The Button: Creating Web Buttons

[Free Photos]
[Photo Sharing]
[Articulate Presenter 5]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Macromedia Studio 8]
[Dreamweaver 8]
[Flash Professional 8]

[Articulate Presenter 5]
[Captivate 1 ]
[Contribute 2 ]
[Director MX]
[Dreamweaver 8]
[Fireworks 8]
[Flash Professional 8]
[Flix Pro]
[FrontPage 2003]
[GoLive CS2]
[Namo WebEditor 5.5]
[NetObjects Fusion 7.5]
[Macromedia Studio 8]
[Swift 3D 3]
[Swish 2]
[Toon Boom 3]
[WebEasy Pro 5]
[WebPlus 8]
[Wild FX]
[Xara 3D 6]

[Free Photos]
[Photo Sharing]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Flash Video]
[Flash Bitmaps]
[Web Success]
[Web Statistics]
[Web App Roundup]
[Creative Suite]
[CSS Positioning]
[HTML Tables]
[Understand CSS]
[Flash Usability]
[Web Fonts]
[MX Explained]
[Flash Animation]
[Web Design Roundup]
[Web Buttons]
[Flash 5 Tutorial]
[XML Revolution]
[Dreamweaver Tutorial]
[FrontPage Tutorial]
[Web Design/HTML Tutorial]
[Web Graphics Tutorial]
[Fusion Power]
[Site Structuring]
[SVG Format]
[Web Repurposing]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]

you can help support the site with a direct donation or by shopping via the following links:


Thank you!



The development of Web graphic apps

Tom Arah looks at the constantly changing field of Web button creation and the ongoing battle between Adobe and Macromedia.

Web designers might not like to admit it but a huge part of their graphical work boils down to just one thing - producing bitmap buttons. This is a three stage process that involves designing the button, optimizing the GIF output and then managing the HTML code that integrates the graphic into your Web page. It might sound straightforward but in fact the process, and with it best practice, is constantly evolving.

When the Web first hit the big time, the natural tool for producing your buttons was the market-leading bitmap editor Adobe Photoshop. Using its layer-based compositional approach you could add a rounded rectangle and a text layer above to create a master PSD file. To create the Web bitmap you would then have to merge the layers to allow you to change colour mode to an indexed colour palette before saving as GIF. Finally you would have to manually add the necessary <A> and <IMG> tags to your Web page to add the link and load the image. To create another button you could then open the master PSD, change the text layer and repeat the process.

In early 1998 this approach changed once-and-for-all with the launch of Macromedia Fireworks. Suddenly each stage of the button creation process - orgination, optimization and coding - is turned on its head. The most fundamental change is the move from a layered bitmap environment to an object-based vector environment. Now each button is handled as a vector-defined shape which means that it can be directly selected, repositioned, scaled, rotated and edited non-destructively - as can its text. Even better, for producing multiple buttons you can use features such as the ability to quickly duplicate, align, distribute, group and layer your objects.

For handling its buttons Fireworks offers all the benefits of a vector drawing program, but for controlling their appearance it combines this with the greater flexibility and creativity of a bitmap program. The Fill and Strokes palettes offer advanced texture-based fills and even path-based natural media effects. What really makes the difference for button formatting though is the Effects palette which lets you quickly apply customizable drop shadow, emboss, glow and, crucially for buttons, pseudo-3D bevel effects. Best of all, these effects are also non-destructive so remain easily editable.

Fireworks 1's vector handling and bitmap-based formatting revolutionized the creation of Web graphics.

Advanced formatting effects are ideal for designing eye-catching buttons but as soon as you move away from simple flat fills, you run the danger of ballooning download times. As such it's crucial that you optimize your bitmap output to hit the right balance between quality and file size. To be able to achieve this you need to be able to see and compare the effect of different settings - a feature Fireworks introduces with its Export Preview dialog in which up to four versions of an image can be visually compared alongside their byte count.

For button images the optimization process generally involves creating indexed GIF files. The most important choice is to determine how the palette of 256 (or fewer) colours are picked from the full-colour original. Previously this meant choosing either an Adaptive palette that picked out the most common colours in the image, or the Web-safe palette of 216 colours that can be viewed across browsers and platforms without dithering. Fireworks 1 introduces the semi-intelligent WebSnap Adaptive palette in which colours that are close to a Web-safe colour are shifted to safety, while the remaining most common colours are left unaffected to avoid excessive colour shift. For absolute control you can also control the level of image dithering and also delete or edit individual colours.

An export preview lets you compare different settings for image size and quality.

Fireworks 1 also breaks new ground by taking on the responsibility for the generation of the HTML code. This is less important for individual buttons but then it's rare that a button will be created in isolation. For producing navigation bars, instead of associating URL links with each button object as you might expect, Fireworks offers a dedicated Web layer on which you can mark up linked hotspots with the rectangular, oval or polygonal hotspot tools. On export, Fireworks generates the necessary <MAP> tag to turn your overall image into a clickable image map.

Alternatively, rather than image map hotspots, Fireworks 1 also introduces the Slice tool for interactively dividing the image into rectangular sections along with the Insert Slice command to instantly add a slice encompassing the currently selected object - ideal for Web buttons. Now when you export the image not only does Fireworks generate separate images for each slice, it also generates the necessary <TABLE> code to reassemble the original image in the end user's browser.

Image slicing is a huge advance enabling the design of whole Web pages, thanks to the ability to add HTML text to table cells in your authoring package, and dramatically speeding up overall download times, thanks to the ability to specify optimized output settings for different sections of the image. Crucially it also opens up the image to scripting. In particular it becomes possible to set up rollover effects where the button image changes as the end-user's mouse moves over it.

In Fireworks 1 this is handled by copying an object to new frames created with the Frames palette and reformatting them - simple thanks to non-destructive effect-based formatting. You then create an image slice over the button object and set its object properties to Javascript rollover. Now using the Export Slices option, Fireworks generates separate images for the image slice corresponding to the mouseover, mousedown and mouseup states along with the <TABLE> code to reassemble them and the <SCRIPT> code to bring them to life.

The psychological impact of a button that seems to respond to the user and invites them to click is absolutely massive and soon no self-respecting Web designer could afford to be seen with static buttons. This easy creation of rollovers was Fireworks' killer weapon, but in any case its totally new approach from vector handling, effect formatting, export preview, intelligent GIF optimization through to advanced HTML coding, completely rewrote the book on button creation.

The quantum leap that Fireworks 1 represented blew Photoshop and the whole moonlighting bitmap editor approach out of the water. Adobe clearly needed to respond and its solution was the standalone, Web-dedicated ImageReady. Unfortunately with the exception of its impressive ongoing optimization capabilities available through a tabbed view of the current image (and a simulated 256-colour browser display to help control undesirable system dithering which Fireworks 4 still doesn't offer) this is completely dreadful.

ImageReady 1's only real strength was its file optimization.

ImageReady's main strength is its close tie-in with Photoshop, but this means that object handling has to be managed as awkward bitmap-based layers. Even worse is the half-baked integration in which ImageReady supports layer effects that have been applied in Photoshop but can't apply them itself, while text created in ImageReady is uneditable in Photoshop and vice versa. This means constant swapping between applications - easier said than done without a Jump to command in Photoshop and positively dangerous without automatic image updating. And in the end it's all pretty pointless as ImageReady's feeble HTML support only stretches as far as creating HTML tables along slicing guidelines without any rollover capabilities at all!

ImageReady 1 could hardly be seen as a threat, but Macromedia didn't sit on its laurels and quickly brought out Fireworks 2. This incorporates some minor enhancements first seen in ImageReady, such as the ability to specify Web-safe patterns and even Web-safe semi-transparencies, but the core development of the Web button production process is the concept of styles.

In Fireworks 1 you could apply a single formatting effect such as a bevel or a shadow. Now you can apply multiple effects to build up unique and eye-catching designs. More importantly, you can name and save these effects to reapply in future. Using the new Styles palette, you can take the idea further to store not only effect settings but fill, colour, stroke and text attributes. Once saved, these are then available to be applied directly from the palette's preview thumbnails. There's no option to edit and update styles that have already been applied, but styles are an excellent way of quickly and consistently applying a shared button design.

The use of styles makes consistent formatting simple.

Fireworks 2 also extends its scripting capabilities to move beyond simple rollovers. With the new Toggle Group command, for example, you can set a clicked button to appear sunken while ensuring that the previously pressed button is raised - ideal for producing framed navigation bars. The Swap Image option meanwhile can be used to create disjoint or remote rollovers where moving a mouse over a button causes an image to change elsewhere on screen. Crucially all these JavaScript effects are now handled from a Behaviours palette just as they are in Dreamweaver. And indeed Fireworks' generated behaviours are now editable in Dreamweaver - the first step on the increasingly important road to tighter workflow integration.

A few months later Adobe released its response in the form of the Photoshop 5.5/ImageReady 2 combination. ImageReady 1's excellent image optimization engine, tweaked to include new features such as "lossy" GIF output, is now incorporated directly into Photoshop 5.5 as the new Save for Web command. This means that for static standalone Web images, Photoshop 5.5 might well provide all that you need. For more advanced, active graphics Photoshop now offers a Jump To ImageReady command to load its junior partner along with better thought-through (though by no means complete) integration.

In fact ImageReady 2 is only made available bundled with Photoshop so any pretensions to standalone competence are gone. Even so Adobe made sure that it sorted out the majority of the crippling limitations from the first release. The program now offers effect-based formatting, for example, and even introduces new Colour Fill and Gradient/Texture options. Even better these can now be saved and reapplied as styles from the new Styles palette. Best of all is the introduction of the new interactive Slice tool and the ability to create normal, over, down and up image states with the Rollover palette.

Macromedia's response was Fireworks 3 which overhauled the whole approach to button creation with its dedicated and self-contained Button Editor. This lets you design your rollover button's Up state then, using the tabs at the top of the dialog, switch to Over, Down, Over While Down states and create appropriately restyled versions of both button and text. Finally it lets you load a special Link Wizard where you can set the desired optimization settings and URL.

Fireworks' dedicated Button Editor helps create rollover effects.

This new integrated approach isn't just more convenient, it's also more powerful as Fireworks automatically turns your button into a symbol and makes it available from the new Library palette. To create multiple buttons you simply drag copies onto your image. Each instance remains connected to the master symbol so that editing changes ripple through. Even better, Macromedia recognizes that each instance needs its own text and link so lets you edit these directly in the Object palette. Best of all, Fireworks automatically creates a linked image slice for the button so that if you move the button the slice moves with it.

In addition Fireworks 3 enhances its optimization capabilities with an ImageReady-style ongoing preview that also shows your rollover effects without having to load a browser and it copies features such as "lossy" GIF support and the Mac gamma preview. Code support also improves with the ability to target your HTML at particular authoring packages and also the ability to update sliced image tables in existing Web pages, or alternatively to copy your HTML code to the clipboard ready for pasting. For Dreamweaver 3 users though much the best option is the new Insert Fireworks' Object command which automatically sucks in and sorts out all image slices and code.

Adobe's eventual response was its recent Photoshop 6/ImageReady 3 combination. ImageReady 3 still doesn't win many friends but does finally offer a serious advance over Fireworks with its introduction of rollover styles. Drag one of these onto a layer-based button and that's all you need to do - all the necessary restyled image states are automatically created along with an associated layer-based image slice.

More significant than the changes in ImageReady are the changes in Photoshop 6. These include the introduction of layer sets which make button handling more manageable with the ability to nest text layers with their button layers and to nest multiple buttons within a navigation bar. Even more fundamental is the introduction of vector shapes and a direct selection tool which finally open up drawing-style button handling. Photoshop's layer effects are also completely revamped with new fill, gradient, satin and stroke options and new style-based handling via a central layer formatting dialog and Styles palette.

These features are hugely useful for all creative work including print (see RW76) but they clearly come into their own for Web work. This major shift for Photoshop is confirmed by the introduction of image slicing, including automatic layer-based image-slicing, and for the first time the ability to output HTML. In other words Photoshop is finally fulfilling the original Web-oriented intention of ImageReady. There's still room for improvement, most obviously in terms of rollover handling, but the writing is clearly on the wall for ImageReady.

And the same might well be true for Fireworks. After all, in future it looks like the fight isn't going to be with the unloved, under-powered ImageReady but with the much-loved and all-powerful Photoshop. And with Photoshop embracing Fireworks' vector-based handling, style-based formatting, preview-based optimization and behaviour-based scripting approach there are fewer reasons to stick with Fireworks itself.

This is very apparent in the recent Fireworks 4 which concentrates on improving existing functionality, such as the ability to create disjoint rollovers by simply drag and drop and much improved animation, rather than adding new power. Apart from the all-new ability to create drop-down menus, which seems slightly strange in Fireworks' graphical environment, it's clearly becoming increasingly difficult for Macromedia to come up with unique, must-have features.

While there's no doubt that Fireworks 4 remains the best choice for the dedicated Web graphics creator, there's also no doubt that the gap is constantly closing. And of course while Fireworks has always pinned its reputation solely on its Web handling, Photoshop offers much more. With most designers almost contractually obliged to have Photoshop in their toolset, the longer the race goes on the less these designers will need Fireworks' standalone, dedicated approach. In the long run then Adobe's tortoise might well overhaul Macromedia's hare.

However that's not necessarily the end of the story. Macromedia has consistently shown itself to be at least one step ahead of its larger rival and from the recent releases of Fireworks it's clear that the company has plans. In particular, rather than being promoted as a standalone, the program is increasingly being bundled more as a bitmap editing module for Macromedia's other applications - Director, FreeHand and Dreamweaver. The integration with Dreamweaver is especially tight with the ability to optimize graphics in place and to quickly load and edit original source images, even rollovers and image tables.

Perhaps even more significant is the new ability in the recent Dreamweaver 4 to create and insert Flash buttons directly. The Flash SWF format is self-contained and therefore simpler to integrate than image-sliced and Javascripted GIF buttons - but it must be a sign of things to come with Fireworks' standalone Button Editor an obvious target for future incorporation. It certainly shows just how sensible it is to put your button creating power where you actually want it - not in a separate program but directly within your Web page design software. In the long term then a fully integrated Dreamweaver/Fireworks combination as happy handling graphics as text and code really would be a hard act to beat - and would certainly wrong-foot the Photoshop graphical juggernaut approach.

Dreamweaver 4 enables Flash button creation directly from within the program.

One way or another then it looks like the glory days of the standalone Web graphics programs, ImageReady and Fireworks, are drawing to a close. And the process of Web button creation is going to go through yet more changes.

Tom Arah

February 2001


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Web designer-info.com

designer-info.com: independent, informed, intelligent, incisive, in-depth...

All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah

[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.