Most of the web development projects that we are involved in are done in conjunction with a graphics design agency. We have refined a process that allows us to take their designs in Adobe Illustrator format and turn them into high-quality HTML for the web. This process involves passing files between Illustrator, Adobe ImageReady and Macromedia Dreamweaver. Subsequent posts will discuss the ImageReady and Dreamweaver parts of the process
In general we will try and work all the pages for the site of a common template. Sometimes this is not possible and variants on the template have to be done for certain pages. To create the template we start out by working in Illustrator and we perform the following steps.
1. Set the document to work in pixels and scale the artwork to 760 pixels wide. This is to accomodate the significant number of browsers which are still in operation on machines with screen resolution set to 800 pixels wide.
2. Adjust all significant features of the layout so that they lie on pixel boundaries. This is in order that the design can subsequently be sliced in a precise manner, without worrying about the anti-aliasing which would otherwise confuse this process.
3. Organise the artwork into two layers. The top layer represents the normal view of the site, the bottom layer represents those portions of the design that will be revealed by mouse rollovers.
4. Set a crop area to the outer bounds of the design. Again this should be specified to fall on pixel boundaries.
5. Optionally rasterise the elements which require anti-aliasing. This isn't necessary if the anti-alias option is selected in the next step. However it does enable the use of the Illustrator feature which allows an element to be rasterised in a manner that is optimised for text or for artwork.
6. Export the design as two psd files. The first is the main design (the top layer), the second is the rollover design (the bottom layer). These are now ready to be imported into ImageReady. I'll talk about that next time.
The information is provided 'as is'. It has worked for us,
but it may not work for you, so you use it at your own risk. We can't
enter into any correspondance about anything recorded here but please feel free to leave a comment.
Geographical coverage: AlphaOne Computing Services
provides a range of small business computer support and I.T. services throughout Sussex, including
Brighton, Hove, Shoreham, Worthing, Steyning, Burgess Hill,
Haywards Heath, Crawley, Lewes, Newhaven, Seaford, Uckfield and Eastbourne.
