ILLUSTRATION BY 123KLAN www.123klan.com

ILLUSTRATION BY 123KLAN www.123klan.com 62 Computer Arts_May 2004

Tutorial CREATIVE SUITE WEB DESIGN IN ADOBE CS We show you four different methods for prepping your Web designs, using ImageReady CS, Photoshop CS, Illustrator CS, InDesign CS or GoLive CS If you re a designer, you probably spent your formative years with a box of crayons rather than a calculator. As a result, the arcane machinations of the programming world are something you may have cold sweats about at night, but don t really want to tackle in the waking world. To be fair, no-one expects you to know how to put computer code around the text in a Word document to get the layout you want, so why should you have to worry about HTML tags, styles and other abstract computer code to bring your ideas to the Web? Both Macromedia and Adobe offer complete packages for bringing designs straight from concept to the online world, but with the release of the Creative Suite of products from Adobe, you will be able to sleep more soundly at night. Although no computer program can truly replace a good Web developer with a thorough knowledge of the ins and outs of browser mechanics, these programs can help designers deploy simple sites quickly and accurately. In the following four quick tutorials, you ll learn how to take a completed Web design from a flat image into a completed Web page, ready to be deployed from each of the programs included with Adobe s Creative Suite. INFO Tutorial by Jason Cranford Teague (jason@webbedenvironments.com). Learn more at www.webbedenvironments.com ON THE CD Computer Arts_May 2004 63

PART 1 IMAGEREADY CS Use the Web designer s workhorse to quickly carve up and add interactive elements to your design A lthough often overshadowed by its older and more experienced brother Photoshop, ImageReady has several key features that can enable even the inexperienced Web designer to add interactivity to their work. In this tutorial, start with the file Wonderworld_ Comp.psd to use slices to optimise the image for Web display, and also add interactive rollovers to the links before output. While working with the file, notice that slices you manually create (referred to as user slices) are outlined in blue. Around these, outlined in grey, are slices automatically generated to fill the intervening spaces. Although you can select any of the auto-slices, if you make any changes, the auto-slice becomes a user slice. If the slice is not being used for an image, you can enter text into the field that will then be used as either graphic text or, if you check the option underneath, as HTML text that can be easily changed in GoLive. You may also want to set the background colour for the slice. If the slice is an image, you should always include Alt text for the graphic, which is used for accessibility. You can also specify a hypertext link URL and target for the slice, as well as a name used to identify the image for JavaScript. Choose the Slice tool from the Tool palette 1 (press K) and slice your design into rectangular areas. Try to carve out distinct areas, including logos, individual photographs, text areas, and a separate slice for each navigation link. In the Web Content palette, click the slice you 4 want to add a rollover state to (most likely, this will be a navigation link). Now click the Palettes menu (top-right corner of the palette) and choose New Rollover State from the list. Now choose the Slice Select tool from the Tool 2 palette (press O), and select one of the slices you created in step 1. In the Slice panel, choose whether the content of the slice is an Image, No Image (in other words, text) or part of a table, then follow this and the next two steps for all user slices. With the new state selected, make changes to 5 the style of the slice and these will be used to change the links appearance when the user rolls over the link in the final Web page. For each Image slice, use the Optimise palette to 3 set its graphic format: GIF or PNG-8 (images with large areas of flat colour) or JPEG or PNG-24 (photos). Use the 2-Up or 4-Up views to compare the changes you make to the original, until you get the maximum reduction with acceptable appearance. 6 You are now ready to save the optimised image for the Web (File>Save Optimised As...), which works the same as in Photoshop CS and Illustrator CS, shown in steps 4-6 in part 2 (see facing page). 64 Computer Arts_May 2004

Tutorial PART 2 PHOTOSHOP CS & ILLUSTRATOR CS Bitmap or vector? It makes no difference when it comes to output for the World Wide Web Although ImageReady CS was designed by Adobe to handle heavy Web design, both Photoshop CS and Illustrator CS include the ability to output directly to create a Web page. To do this, both programs use an identical dialog with most of the same options found in ImageReady, but in a single window. For many designers used to the comfortable environment of their favourite image-editing software, this is more than enough. However, there are a few pitfalls when using this system, the chief of which is that the HTML code generated uses tables to create structure, rather than the preferred Cascading Style Sheets. Although using tables will work to create the layout structure for your Web pages, it s better practice to use CSS instead. In this tutorial, you ll be starting with the file Wonderworld_Comp.psd. It s already sliced up, so we ll take it through the Save For Web process to create a completed HTML page, taking a slight detour along the way to switch over the output to CSS. Remember while working that if you have multiple slices selected, the settings are applied to all of the slices. You can then choose an individual slice and further tweak the settings to tailor that particular slice. Choose File>Save For Web to open the Save 1 For Web dialog which, although it s Powered by ImageReady, is used by both Photoshop CS and Illustrator CS to optimise your design for Web output (similar to steps 2 and 4 in part 1). Choose 2-Up or 4-Up to compare before and after versions. Use the Slice Select tool (a knife with an arrow 2 next to it) to choose a slice in either the second, third or fourth view in the window. You can also zoom in and out to make it easier to choose slices, or even Shift+click to choose multiple slices to process simultaneously. For example, you may want to optimise all of the photographs with the same settings, rather than alter each one individually. 4 Before you save your work in the Save Optimised As dialog, choose Other from the Settings dropdown menu. In the Slices panel, switch to Generate CSS as your option for how slices should be output. Click OK. Meanwhile, back in the Save Optimised As 5 dialog, navigate to where you want the files saved, make sure the format is HTML and Images, Settings are custom (as set in step 4), Slices is set to All Slices and finally click Save. Your design will now be automatically split into all of the relevant constituent files and saved. Alter the Optimisation settings by first choosing 3 one of the basic presets, and then tweaking the values from there. Once you re done, click Save. You can now locate the files on your computer 6 and open the HTML file that was generated in GoLive, and make changes as needed. Computer Arts_May 2004 65

PART 3 FROM INDESIGN CS TO GOLIVE CS Your design may start out for print, but you can still use it to create exciting Web pages A lthough you can t use Adobe InDesign on its own to create a Web page as with ImageReady, Photoshop or Illustrator it does have the unique ability to output all of the content of a printed piece (both text and graphics) to a special PDF file which, when opened in GoLive, can be used to quickly move the print files from one medium to the other. This can greatly reduce the time needed to move from printed page to the screen, and save you a lot of grief when trying to convert file types. Now all you have to do is For this tutorial, open the file Wonderworld_ Comp.indd in InDesign to start the ball rolling... Open the material to be repurposed in InDesign 1 and choose File>Package for GoLive... In the Package Publications for GoLive dialog, enter a name for the folder the elements will be saved in, then Save the files to the folder of your choice. Click Package, and watch in amazement as 4 progress bars fly across the screen detailing the files being generated as a part of the package. Check the folder where you saved the package. You ll find a special PDF file that you can open in GoLive, which contains all of the original document s elements. Before the package is actually output, you need 2 to set how the files are to be created and images optimised. The first panel you ll see shows the General settings, which you can pretty much leave alone if you re using GoLive CS. In GoLive, with the package PDF already open 5 in the Page Items window, start a new Web page. The Page Items window works as a kind of palette holding all of the items, and you can drag and drop them into your Web designs or even columns of text directly. GoLive, for its part, will then lay them out in a Web format. Click the Images button and set how the images 3 in your package should be output. Generally, you ll want to use the Optimised Formatted Images option and enable Automatic Image Conversion. If image quality of your photographs is a concern, increase JPEG Image Quality to High or Maximum. 6 If you re having trouble picking through pieces in the PDF to add to your Web page, switch over to Assets view. This simply lists all of the elements, and you can drag them from there instead. 66 Computer Arts_May 2004

Tutorial PART 4 GOLIVE CS Use Smart Tags to save time when you re making changes to your design in Photoshop CS or Illustrator CS M any designers will begin their work in Photoshop, ImageReady or Illustrator, carve up the static composition using slices, and then use the methods presented in parts 1 and 2 of this tutorial to create their Web pages. The problem is, when they go back and make changes to the design in the original composition, they then have to manually update the files in GoLive, which often leads to confusion and, in rare cases, tragedy when pieces get mixed up or lost. GoLive comes to our rescue with Smart Tags. When placed into a Web page, these will automatically monitor Illustrator or Photoshop documents and update the Web page when changes are made to the source file. This is spectacularly helpful if you prefer making your changes to the original image, rather than trying to mess about with HTML. Here, you ll be importing the file Wonderworld_Comp.psd from the CD as the file for your GoLive Smart Tag. Once GoLive is up and running, start a new file 1 and save it. Grab a Smart Tag (either Photoshop for PSDs or Illustrator for AI docs) from the Objects palette and drag it to your new Web page. You can now add multiple Smart Tags or any other content to the page as and when you need it. 4 Once you re finished with saving, you re automatically returned to GoLive with the design in your Web page window. You can click on individual slices in the design to make limited changes, including setting the Alt text or link and target for the slice, or manually entering HTML text. In the Inspector palette, choose the source PSD 2 or AI document by clicking the Folder button next to the Source field, then browse to the file. If you want to edit the optimisation settings for 5 the design used by the Smart Tag, click the edge of the Smart Tag area to select the Smart Tag and then click the Settings button in the Inspector palette. This reopens the Save For Web dialog (see step 3). For the next section, simply follow the Save 3 For Web instructions in part 2 (steps 2-5). The one limitation is you won t be able to set options; you re stuck with a table-based layout. 6 Once you re happy with the overall layout in GoLive, you re ready to preview your design in the browser of your choice (File>Preview In). Make sure you preview your design in as many browsers and on as many different platforms (Windows, Mac, Linux and so on) as you can before you actually go live with it on the Web. Computer Arts_May 2004 67