Rather belatedly here is part 2 of our web development process, following on from this post. In this step we use ImageReady to create HTML and image files that will form the basis for subsequent work in Dreamweaver.
We use ImageReady to slice the design created in Illustrator. The slices correspond to the following features of the resultant HTML page.
1. By default ImageReady will produce image slices. In Dreamweaver some of these slices will get converted to be HTML text slices. This will always be the case for the main body of the page and sometimes for other areas such as sidebars.
2. Some slices will form navigation buttons. The slicing allows these to be individually clicked and also enables their rollover behaviours to be defined.
3. Occasionally we might use a subtle piece of animation, so in this case the slice defines the area that will become an animated gif or a Flash component.
Our starting point will be the psd files produced in Part 1. We open one of these, then use Place to add the other as a layer. These are then organised into Layers Sets corresponding to the original layers in the Illustrator design. Now we save this as a new psd file. If, subsequently, the Illustrator design changes then you can repeat the extract process and use Place to position the exported psd layer files above the layers which are being replaced.
Now comes the slicing. Set ImageReady to snap only to Guides and Boundaries, then set guides to mark the horizontal and vertical positions of the slice edges. Now use the Slice tool to set the slices. Once this is done you can use the features of ImageReady to define the slice properties such as rollovers, navigation link targets, alt text and optimisation settings.
Now we're nearly ready to to do a Save Optimized to export the HTML and images. But first we need to use the Group Slices into Tables feature that will ease the creation of HTML text slices. That's a topic in itself, so we'll leave that for 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.
