chapter 2: the photoshop workspace this chapter details the photoshop

8/14/2019 Chapter 2: The Photoshop Workspace This Chapter Details the Photoshop

1/93


2/93


3/93


4/93


5/93


6/93


7/93


8/93


9/93


10/93


11/93


12/93


13/93


14/93


15/93


16/93


17/93


18/93


19/93


20/93


21/93


22/93


23/93


24/93


25/93


26/93


27/93


28/93


29/93


30/93


31/93


32/93


33/93


34/93


35/93


36/93


37/93


38/93


39/93


40/93


41/93


42/93


43/93


44/93


45/93


46/93


47/93


48/93


49/93


50/93


51/93


52/93


53/93


54/93


55/93


56/93


57/93


58/93


59/93


60/93


61/93


62/93


63/93


64/93


65/93


66/93


67/93


68/93


69/93


70/93


71/93


72/93


73/93


74/93


75/93

Chapter 10 - Basic ImageReady

Creating a BannerBanners are usually a means of advertising via web sites. Historically, bannershave been positioned in a horizontal orientation at the top of web pages. However,as is often the case with the Internet, things have changed. Designers have begunto position banners in a number of different areas, but predominantly on the rightside of web pages in a vertical orientation. Regardless of the orientation andposition, companies arrange to have their banners placed on other web sites topromote their product or service. For example, we could say that Travel Japanwants to draw users to their web site by advertising on Yahoo, most specificallythe section listing Travel-based web sites. Viewers who visit that section ofYahoo may {Click} on the banner and visit Travel Japans site. Your job, as adesigner, is to create a banner that encourages users to visit the Travel Japansite within particular dimensions and color and file size restrictions. Bannerswith a horizontal orientation usually use these standard specifications: 468 x 60 GIF: Web Color Palette Animation: Permitted/Not Permitted 8K to 14KDimensions, palette, and file size can, and often do, vary depending onrestrictions dictated by the company that displays your banner. Before developinga banner, it is essential that you acquire and confirm the Banner specifications.Developing the BannerCreating a static Banner is simply a matter of creating an image within thespecified pixel dimensions and compressing it so that the file size does notexceed the specified limit and uses the specified color palette. Let's create astatic banner for Travel Japan. Examine the finished product: Developing the Banner (con't)

The first step is to create the banner file itself:1. Create a new image at 468 x 60, 72 ppi, transparent background.2. Open logo.psd. logo.psdWe need to place a copy of the Travel Japan logo into our banner. There are a fewtechniques we could use to move the image information from logo.psd to our banner.In this situation its easiest to use the main menu or keyboard shortcuts:3. Choose Select/All or [CTRL + C] and then Edit/Copy Merged or [CTRL + SHIFT +C]. Copy Merged makes a copy of all the visible image data across all the Layerswithin the image.


76/93

4. Select the banner Image Window. Create a new Layer and call it logo.5. Paste your selection into the banner image.6. Clearly the logo is too big. Youll need to reduce the scale and position itaccordingly. Reducing the scale by 35% makes for a good size (see TransformingLayers.)Developing the Banner (con't)Next we should create the background of the banner.7. Open miyagate.psd. miyagate.psd8.9. Create a selection around the Gate and copy it. For your convenience aselection is saved with the document. Feel free to use it if time is an issue.10. Create a new image and paste your selection to it. When you make a copy ofimage data in Photoshop and then create a new image immediately afterward, thedimensions of the new image will automatically match the dimensions of the imagedata you copied.11. Make your Foreground Color the same red as that of the Rising Sun in thelogo and your Background Color white. Select Image/Adjust/Gradient Map. The Gateshould now be two colors. Select Filter/Sketch/Graphic Pen and apply the filterwith the default settings.12. Use the Move Tool to move the Gate into the banner. Name the Layer gateand reduce the scale by 50%. Position it according to the example above.13. Make sure the gate Layer is selected. SelectImage/Adjustments/Brightness/Contrast. Reduce Brightness by -15 and increaseContrast by +25.Developing the Banner (con't)At this point, the banner image should appear like this: Next, we need to add the Type.13. Select the Horizontal Text Tool and input See Tokyo this Summer Use thefollowing settings:o Font: Verdanao Style: Boldo Size: 23o Anti-Alias: Crispo Color: White14. Use the Stroke Layer Style to add a black, 2-pixel wide (outside) stroke tothe text. Position it according to the example above.15. Repeat steps 13 and 14 using this text and save.16. Create another Type Layer. Input 50%. Use the following settings:o Font: Verdanao Style: Boldo Size: 30o Anti-Alias: Crispo Color: White17. Use the Stroke Layer Style to add a red (R: 205, G: 51, B: 51), 2-pixel wide

(center) stroke to the text. Position it according to the example above.Developing the Banner (con't)Thats it, youve created a static banner. Your next step is to save it for theInternet using the techniques we covered previously (see Saving for the Internet:Image Optimization Options.) In our case, weve chosen to save the banner withthe following settings: Image Type: GIF Color Reduction: Perceptual Dithering: No Dither Transparency: Unchecked Interlaced: Unchecked


77/93

Lossy: 0 Colors: 64 Matte: White Web Snap: 0The resulting file size is 8.5k.Developing the Banner (con't)If you like, open staticBanner.psd and travelBanner.gif to view our versions ofthe images. staticBanner.psdtravelBanner.gifOur next step is to use ImageReady to build an animated version of our banner.Load animatedBanner.psd. animatedBanner.psdThis is a different banner, with a vertical orientation. It is advertising specialrates for travelers who visit particular cities during particular months. Weregoing to move the pointer or arrow around to inform users that they should {Click}on a city to select it for more information.Moving from Photoshop to ImageReady and BackAs you produce images for the Internet, you may find you prefer to produce theminitially in Photoshop before moving to ImageReady to use its unique web-specificfeatures. Conversely, you may find you prefer to use ImageReady to produce yourimages, shifting to Photoshop to use some of its unique features when necessary.Regardless, moving from one application to another simply involves selecting theImage Window you wish to move from one to the other and then {Clicking} the Jumpto Image Ready (from within Photoshop) or Jump to Photoshop (from withinImageReady) button at the bottom of the Toolbox. Select the animatedBanner.psd Image Window and press the Jump to Image Readybutton. ImageReady is launched and animatedBanner.psd is opened with it.The ImageReady EnvironmentThe ImageReady environment or workspace should be immediately familiar to youbecause there are many similarities to Photoshops. Examine the Image Window. Notehow it contains Save for Web tabs in the form of Original, Optimized, 2-Up, and 4-Up, just as in the Save for Web dialog box in Photoshop (see Preview Windows onpage 203.) Because ImageReady is dedicated exclusively to web output, you canthink of ImageReady as always being in Save for Web mode, though of course, youcan still save native Photoshop files. Color in ImageReadyOne of the things you may notice is that the colors in the image may have changed.By default, ImageReady works with color that is uncompensated. If you have setupPhotoshop to use a particular set of color options then your images and the colorswithin them will have been using those color settings all along (see ColorSettings.) Unfortunately, color profile support is not yet a standard within HTMLor within all browsers, though that may change in future (support in Mozilla has

already begun.) Developers like to keep their options open to repurpose images toother media. As a result, if you do use color profiles, very often withinImageReady you will have to adjust your color again so that you get a solid ideaof what your images will actually look like when rendered by a browser on a clientmachine (see Adjusting Images.)To force ImageReady to work with a color profile, select View/Preview/Use EmbeddedColor Profile. However, at this time this is not recommended. Because of the poorcurrent support for color profiles you may wish to keep ImageReady at its default.To set ImageReady back to its default select View/Preview/Uncompensated Color.Adjustment options for color are similar, though not as robust, as those inPhotoshop.


78/93

Fundamental ImageReady FeaturesAs we continue through the remainder of the manual we will be examining thefeatures unique to ImageReady in depth. You should keep in mind some of thesefundamental features:The only Color Modes available are RGB and Grayscale. You cannot produce images with a ppi value higher than 72 (you can work withimages from Photoshop with higher ppi values, but you will not be able to createimages within ImageReady with higher values.) There are significant differences between the ImageReady Toolbox and thePhotoshop Toolbox. The Navigator Palette is replaced by the Optimize Palette. There is no Channels Palette in ImageReady. Palettes unique to ImageReady include: Animation Palette, Image Map Palette,Slice Palette, Rollovers Palette, Color Table Palette, Layer Options Palette. For Type Size, the only available unit is pixels.As you work with ImageReady and Photoshop together, youll find that forparticular objectives, youll have to move back and forth between the twoapplications. Lets look at how we can animate elements within our banner.Creating an Animated GIFAn animated GIF is a GIF that basically consists of many GIF images in one.Animation is the process of rapidly presenting a sequences of individual frameswhere the content of each frame changes in some way to create the illusion ofmotion. To create an animated GIF in ImageReady, we assemble each of the elementsrequired and then work with the Animation Palette. The more frames you use in youranimations the smoother the result. However, youll quickly see how large animatedGIF files can become which is one of the reasons technology like MacromediasFlash has become the most popular method of animation on the Internet.The Animation PaletteMake sure the animatedBanner.psd Image Window is active and that you have selectedthe Original tab. You have to work in the Original mode to build your animation.Select the Animation Palette by {Clicking} on the Animation Tab. You should see asingle frame (by default) which consists of a thumbnail of your image. Building an AnimationIn animation, its a good idea to plan out what you want to occur. In this case, wewant the cursor to begin beside Kobe and move to Kyoto, then Osaka, and finallyoff the image itself. Select the pointer Layer and move the pointer just belowFebruary and beside Kobe. Next, we need to add another frame. To do so, {Click} the Duplicate Frame button.A new frame is added to the Animation Palette. It is an exact duplicate of ourfirst frame.Building an Animation (con't)You can think of each frame in the Animation Palette as displaying the currentstatus of every element within your image. To change the position of an elementsuch as the cursor, we simply select a frame in the Animation Palette and changeour image accordingly. Lets try it out:

1. Select the second frame and then select the pointer Layer.2. Move the pointer just below the word March and beside Kyoto. Now {Click} back and forth between the first and second frames. Note how theposition of the pointer changes.Building an Animation (con't)In the typical animation process, these frames would be referred to as Key Frames.That is, each frame illustrates a key event or moment in time. In this case, thepointer moves from Kobe to Kyoto. It does not do so smoothly however. At themoment the pointer simply jumps from one position to another. To make the motionsmooth well need to add frames between these two Key Frames. The frames between


79/93

Key Frames are traditionally referred to as In-between Frames. ImageReady willautomatically create the In-between Frames for us. In ImageReady the process ofbuilding In-between Frames is referred to as Tweening. Lets add two In-betweenFrames between our Key Frames:Select both frames in the Animation Palette (hold [SHIFT] and {Click} on eachframe.)3. {Click} the Tweening button.4. The Tween dialog box appears. The Tween dialog box consists of the following options: Tween With, Frames to Add,All Layers or Selected Layers, and Parameters (Position, Opacity, and Effects.)Building an Animation (con't)Tween WithSelect from Selection, Next Frame, or Last Frame to designate which frames youwish to Tween with.Frames to AddDesignate how many In-between Frames you wish to add. In our case select 2.LayersCheck Layers to Tween all Layers or check Selected Layer to Tween only thecurrently selected Layer.ParametersCheck Position, Opacity, or Effects to Tween any of these parameters. Positionwill modify Tween changes in the position of an element, such as our cursor.Opacity will Tween changes in opacity of an element, and Effects will Tweenchanges in Layer Styles.In our case use the following settings: Tween With: Selection Frames to Add: 2 All Layers: Checked Position: Checked5. {Click} OK.Building an Animation (con't)Now {Click} through each frame and note how the cursors position hasautomatically been modified for us. You can {Click} the Play button to view theanimation. It should loop and move rapidly. We can adjust the speed if we like,and will do so in a moment. First, we should continue to create Key Frames and In-between Frames for the remainder of the animation and then tweak the pace.6. Select frame 4.7. Duplicate frame 4.8. Select frame 5.9. Make sure the pointer Layer is selected and move the cursor just belowApril and beside Osaka.10. Select both frame 4 and frame 5.11. {Click} the Tweening button and use the following settings:o Tween With: Selectiono Frames to Add: 2o All Layers: Checked

o Position: CheckedBuilding an Animation (con't)12. {Click} OK.13. Select frame 7.14. Duplicate frame 7.15. Make sure the pointer Layer is selected and change the opacity of theLayer to 0%.16. Select both frame 7 and frame 8.17. {Click} the Tweening button and use the following settings:o Tween With: Selectiono Frames to Add: 2


80/93

o All Layers: Checkedo Opacity: Checked18. {Click} OK.Building an Animation (con't)You should have a total of 10 frames. {Click} the Play button to view theanimation. It should be obvious that we will need to tweak the timing of theanimation. We want the cursor to stop for a moment as it reaches each city and wewant to reduce the pace at which it moves. To do so, we need to select each framein turn and change the Frame Duration accordingly. {Click} the drop-down arrow andselect one of the pre-set durations or input your own (Other.) Building an Animation (con't)19. Select the following settings for each frame:o Frame 1: 2 secondso Frame 2: 0.1 secondo Frame 3: 0.1 secondo Frame 4: 1 secondo Frame 5: 0.1 secondo Frame 6: 0.1 secondo Frame 7: 1 secondo Frame 8: 0.1 secondo Frame 9: 0.1 secondo Frame 10: 2 secondsBuilding an Animation (con't)View your animation. Its simple but now the pace should be improved. By default,the animation loops forever. We only want it to play once:20. Select Once from the Looping Options drop-down. Note that Other allows youto input how many times you want a GIF animation to loop.Viewing the animation within ImageReady does not always give you an accuraterepresentation. You need to view the GIF in a browser. Before doing so, letsselect the Optimized tab and set our Optimization options.In ImageReady, you can set Optimization options just as you do in Photoshop (seeCompression Options.) With ImageReady, you use the Optimize Palette. Building an Animation (con't)21. Select the following settings:o Image Type: GIFo Color Algorithm: Perceptualo Dithering: Diffusiono Dither: 100%o Lossy: 0o Colors: 64The resulting file size should be approximately 25.8k.Building an Animation (con't)To view the GIF in a browser, {Click} the Preview in Default Browser button on theToolbox or select File/Preview In and select your default browser or other.

Building an Animation (con't)A temporary HTML file is generated and displayed in your default browser, completewith a summary. Building an Animation (con't)At this point, we have completed the animation for this GIF image. Its always agood idea to save a work in progress. If you wish, save your file (selectFile/Save As) and call it what you wish (except for animatedBannerFinished.psd.)Using File/Save As, you are saving the native Photoshop document (.psd.) Savingthe optimized version of the image in ImageReady is a little different than inPhotoshop because we do not use or have the Save for Web option. In ImageReady, to


81/93

save the optimized version of the file select File/Save Optimized As. We dontneed to do that just yet because we havent completed working with this GIF.For now, after youve saved your file (if you did), loadanimatedBannerFinished.psd. Examine this file if youd like to see the version wecompleted. animatedBannerFinished.psdNext, were going to make an Image Map in ImageReady so that users will bedirected to the correct city when they {Click} on the city of their choice.Image Maps in ImageReadyAn Image Map is an HTML technique whereby a single image is used to link to ornavigate to multiple web pages (or any kind of valid link through the web.) Thisis accomplished by using the Map tag and its associated attributes and tags todefine areas of the image that are referred to as hotspots. As a web developer, itwill be up to you if you use ImageReady solely to generate images, to developimages and HTML code, or a combination of both. You may wish to code an Image Mapyourself or in an authoring package such as Macromedias Dreamweaver MX. Thechoice is yours. Regardless of the method you prefer, well examine how an ImageMap is created from within ImageReady itself.Image Maps in ImageReady (con't)This image is very similar to the banner we just worked on. However, the textChoose City has been removed from the bottom of the image and their is noanimation. We want to use this image as a jump point to specific pages for eachcity. Well give a potential customer the ability {Click} on the Kobe, Kyoto, orOsaka area and be directed to the specific page for more details. Of course, thistype of banner is intended to be hosted on another site and links to the TravelJapan site. However, for this example, were going to link to some local pages. Ithelps to know where, within your site structure, these particular pages are foundand where the banner page is relative to these pages if youre using documentrelative links. For the purpose of this procedure we are going to link to thefollowing pages in a folder that sits at the root level of the site folder calledpromotions: february.htm march.htm april.htmImage Maps in ImageReady (con't)The promotional banner will only appear in the example page of the site, calledadBanner.htm. Using relative paths, our links within our Image Map would use thefollowing path (in x.htm x refers to the applicable month):promotions/x.htmA site relative path would appear as follows:/promotions/x.htmWell use a document relative path to test out the links within our folders on ourharddrive. A site relative path requires a server to resolve the link properly.The Rectangle Image Map ToolTo create an Image Map in ImageReady we use one of ImageReadys unique Tools, theRectangle Image Map Tool (just below the Lasso Tool) and/or the related Tools, the

Circle Image Map Tool, the Polygon Image Map Tool, and the Image Map Select Toolin combination with the Image Map Palette. The Image Map ToolsThe Rectangle Image Map Tool (con't)If you {Click} the Tear Off Bar, ImageReady creates a separate Tear Off Palettethat houses the associated files. The Image Map Tools in a tear off.Select the Rectangle Image Map Tool and draw a rectangle around the February andKobe area.


82/93

A rectangular Image Map is created.The Rectangle Image Map Tool (con't)Enable the Image Map Palette and examine it: The location (x,y) and dimensions of the Map itself (w,h) are displayed. In theName field you can input a name for Image Map Area. In our case, were going touse the city names. For the URL, input promotions/kobe.htm.If we were using a Frames based page, we could input a target name in the Targetfield or select the standard HTML target options (such as _blank to launch a newbrowser window with the page were linking too.)In the Alt field we can input content for the alt tag. In this case well inputKobe: save 30%.The Rectangle Image Map Tool (con't)Repeat the process for the March and April areas. The following settingsshould be used for each area:Kobe Name: Kobe URL: promotions/kobe.htm Target: n/a Alt: Kobe: save 30%Kyoto Name: Kyoto URL: promotions/kyoto.htm Target: n/a Alt: Kobe: save 30%Osaka Name: Osaka URL: promotions/osaka.htm Target: n/a Alt: Kobe: save 30%Before we optimize the image and export it together with an HTML file, lets makea change to the image and explore moving back and forth between ImageReady andPhotoshop.Moving between ImageReady and PhotoshopLets add the dolls face we worked on when we explored the Pen Tool (see The PenTool.) In ImageReady, make sure you still have your Image Map file open and opendollFace.psd as well. dollFace.psdThis image comes complete with a Path around the dolls face, but we cannot accessthat Path in ImageReady to convert it to a Selection so that we can copy the faceinto our banner. We need to go to Photoshop to use the Path information. {Click}the Jump to Photoshop button at the bottom of the Toolbox. You will be switchedback to Photoshop.Convert the Path into a Selection and then save the Selection (see Load Path as aSelection.) Switch back to ImageReady.

In ImageReady, load the Selection and cut and paste it into the banner image. Namethe Layer face. Place the face at the bottom of the banner.Moving between ImageReady and PhotoshopThe face is a little to large, so well need to reduce the scale of the face. Ifyou select Edit/Free Transform (or [CTRL + T]) note how the Options Bar inImageReady differs from that of Photoshop. The Options Bar floats in theImageReady environment, the units for changing scale are in pixels, and not all ofthe options we had in Photoshop are available to us, such as the Uniform Scalebutton. Transform Options in the ImageReady Options Bar.


83/93

Moving between ImageReady and Photoshop (con't)You could manually transform the face, holding [SHIFT] to constrain, or move backto Photoshop to use its transformation options. To match our scale, position, androtation, input the following values: x: 102 y: 348 w: 55.9 h: 66.7 rotation: -20.8 horizontal skew: 0 vertical skew: 0Finally, lets add a Layer Style, specifically, the Outer Glow effect. Select theLayer and add an Outer Glow to it, just as you do in Photoshop. Youll discoveranother difference between Photoshop and ImageReady. ImageReady has a LayerOptions Palette.The Layer Options PaletteIn ImageReady, the properties of a Layer are modified using the Layer OptionsPalette. For example, weve just added a Layer Style to the face Layer. If weexamine the Layer Options Palette, well be able to modify the settings for theOuter Glow effect weve just added. The contents of the Layer Options Palettechange depending on what part of the Layer you have selected. When you have aLayer Style selected, the options for the Style youve selected appear. When youhave a Layer selected, the Fill Opacity option appears. The Layer Options Palette (con't)Use the following settings: Blend Mode: Screen Opacity: 35 Gradient: Foreground to Transparent Color: White Noise: 0 Technique: Softer Spread: 15 Size: 30The Layer Options Palette (con't)Now were almost ready to save the image and the accompany HTML with our Image Mapcode. Your image should appear as follows: The Layer Options Palette (con't)Youre hotspots may have disappeared. The visibility of hotspots can be toggled{Clicking} the Toggle Image Maps Visibility button in the Visibility Toggle areaof the Toolbox. You can also toggle the visibility of Slices (which we cover inthe next chapter) by {Clicking} the Toggle Slices Visibility button. You may find it helpful to see your hotspots again if theyve become invisible.For optimization, use the following settings: Image Type: GIF

Lossy: 0 Color Algorithm: Perceptual Colors: 64 Dither: Diffusion - 100%Saving an HTML File and an Image Together in ImageReadyNow were ready to export both the image itself as well as the accompanying HTML.Select File/Save Optimized As. Navigate to the website folder in the chapter010folder of photoshop7xfiles.For File name, input imageMap.For Save as type, it is essential that you select HTML and Images when saving boththe image(s) and the accompanying HTML file. If you need to save the image(s)


84/93

only, select Images Only. If you need to save the HTML only, select HTML Only. Weneed to explore the HTML options when saving an HTML file and an image together.Saving an HTML File and an Image Together in ImageReady (con't)The next option is Settings. By default, Default Settings is selected. To set yourown parameters, select Other. The Output Settings dialog box appears. CategoriesSelect from HTML, Slices, Image Maps, Background, and Saving Files. Each categoryhas a set of unique parameters, some of which you will have to be familiar withHTML tags to fully understand.HTML OptionsHTML options include Formatting and Coding. Under Formatting you can change thecase of the tags and attributes that ImageReady generates. In addition, you canformat the layout of the code by selecting an Indent option. Finally, you can setthe type of Line Endings in HTML.Under Coding you have a number of checkboxes to toggle the available options on oroff. Checking Include Comments places comments in the code that identifies thegenerator of the code as ImageReady. Select each of the options to fit the mannerin which you code HTML. We recommend that you check Always Quote Attributes asthis is an HTML rule that should always be adhered to.SlicesWe havent looked at Slices yet. Well be examining them in the following chapter.Image MapsImage Map options include Type and Placement. For Type, select Client-Side, which is the standard manner in which Image Maps areused in web development today.For Placement select Bottom. Again, it is a de-facto standard that Image Map codeis placed at the bottom of an HTML document, within the set of tags.BackgroundThe Background category allows you to set options for the background properties ofyour HTML document. Select Image if you want the background to your HTML page to use either an imageor a solid color for the background. You can set the image that will act as yourtiled background by inputting the path to the background image itself in the Pathfield. To set a background color other than the one in your document, select itfrom the BG Color menu.Checking Background makes the optimized image the tiled background image of yourweb page.Saving FilesThe options for Saving Files include File Naming, Filename Compatibility, andOptimized Files. For File Naming, you can build the file-naming format for the web imagesImageReady automatically generates by selecting from a variety of options in each

of three drop-down lists. You can build your file names from three parts as wellas input custom names into each field. A preview of the file name appears belowthe drop-down boxes. For the most part, these options relevant when using Slicesand Rollovers. We will cover these in the following chapter.Filename CompatibilityLeave each option checked for maximum filename compatibility with multipleOperating Systems. Note that using file names over 31 characters may be truncated.Optimized FilesThere are three options available that affect how optimized files are saved. CheckPut Images in Folder if you wish the images you are saving to be saved to aparticular folder. For example, you will be saving the file imageMap.html into the


85/93

website folder. By checking this option, ImageReady will create a new foldercalled images (or whatever you specify) in the website folder if one does notalready exist. At anytime, if this option is checked, images will be saved intothe designated folder within the folder you specify when you save the image,images, and/or HTML files themselves. For now, check this option.If you have designated that a background image be used, check the Copy BackgroundImage when Saving option. We do not need to do this. If we had, the image wespecified would be copied into the folder specified above.Include CopyrightIf you have input copyright info for your image(s) (by selecting File/Info)checking the Include Copyright option will include the information.{Click} OK. The Output Settings dialog box disappears. We are returned to the SaveOptimized As dialog box. {Click} Save. Your image is saved as imageMap.gif in theimages folder inside the website folder and an HTML file called imageMap.html issaved within the website folder.Exit Photoshop and navigate to the website folder in the chapter010 folder.{Double-Click} imageMap.html and try it out.You can also {Double-Click} imageMapComplete.html to view our version.If you like, you can view imageMapComplete.psd within ImageReady to view ourversion of the file.

Chapter 11 - Advanced ImageReady


86/93

SlicesOne of the most common techniques in web development today is the use of Tables,in HTML, for page layout. Content, such as text, images, and rich media are placedwithin Table cells to achieve your layout goals.Another common technique is to slice up a single image into distinct parts,primarily for two reasons. One, breaking up larger images tends to decreasedownload time as the HTTP protocol reportedly handles a series of smaller packetsbetter than a single large packet. The second reason is for Rollovers. You maywish to keep the look of a unified layout, but need some elements of the image tochange when the user passes the mouse pointer over particular areas. In otherwords, you have to slice up an image so that particular sections can have Rolloverscripts applied to them. A basic Rollover involves switching one image for anotherwhen the user passes the mouse pointer over the image. When the mouse pointer isnot over the image, the original image is displayed.Slices (con't)When we built our Image Map for our promotional banner, the only visual indicatorthat each city (Kobe, Kyoto, and Osaka) was a link was the mouse pointer itself(see Image Maps in ImageReady.) When you use Rollovers, you give the user astronger visual indicator that this part of the image is a button that can be{Clicked} on to navigate to another page.In order to create Rollovers for our promotional banner, we need to slice theimage up into distinct parts so that we can swap the city sections of the imagewith alternate images that indicate that each city area is a link. To slice up animage, we use the Slice Tool.The Slice ToolSelect the Slice Tool to create Slices in your image. The moment you select theSlice Tool, a Slice indicator is displayed around your image in the Image Window.The Slice Tool (con't)Select the Slice Tool. Note how a yellow border surrounds the image in the ImageWindow with a grey box at the top left containing a number, 01, and an icon besideit. This is an Auto-Slice, a Slice that ImageReady automatically generates. InHTML terms, you can picture an Table housing your image. At this point, the Tableconsists only one column and row because we only have one slice, and therefore,one image. Slices are numbered from left to right, top to bottom. Use the Slice Tool to draw a box around the February area of the image, justalong the top of the purple bar and just along the top of the green bar forMarch.The Slice Tool (con't)ImageReady adds another Slice. This is a User-Slice, distinguished by the blue boxthat contains the Slice number. Note how another Auto-Slice has been created tomaintain the rules of HTML Tables. Furthermore, the image area within the currentSlice is clear whereas the image areas below the two (2) Auto-Slices is slightlyghosted. This gives you a clear indication about which Slice or Slices (you canselect multiple Slices if you like) is selected.

Create two more Slices around the March area and the April area. Note howunselected User-Slices are not as ghosted as Auto-Slices. When youre done, selectthe Slice Select Tool.The Slice Select Tool To select and modify existing Slices use the Slice Select Tool. Go ahead and{Click} on each Slice with the Slice Select Tool. Note how each Slice has handlesthat you can use, if necessary, to change the size of a Slice and move a Slice.You will have to experiment with rescaling and moving Slices around to get a feelfor how Slices function. Its easy to place then are change them so that a numberof different Auto-Slices are generated. If you drag any area of a User-Slice over


87/93

an Auto-Slice the Auto-Slice area gives way to the User-Slice area. For now, makesure you have five (5) Slices in total, two (2) Auto-Slices and three (3) User-Slices. Select the Slice Palette and select the February Slice with the SliceSelect Tool.The Slice PaletteUse the Slice Palette to set the Slice Type, Slice Name, Slice Background Color,the URL to navigate to, and the HTML Target. A thumbnail of the currently selectedSlice appears in the Slice Palette. TypeSelect from Image (default) or No Image. When No Image is selected, the SlicePalette changes, replacing many of the options with a Text field into which youcan input text that will appear in your web page should you save it fromImageReady. Check Text is HTML to use any tags you wish to format your text. Otherwise, anytags you input will appear in the browser as text. For example this line:Travel Japan Specials!Would appear thus in a browser if Text is HTML is checked:Travel Japan Specials!Otherwise, with Text is HTML unchecked, the text would appear thus:Travel Japan Specials!BG (Background Color)If a Slice has been designated No Image or if a Slice is over a transparent areaof the image you can set the Background Color for the slice here.NameSlices are given a Name automatically, based on the name of the image and thenumber of the Slice itself. For example, our image is called slices.psd and ourFebruary Slice is numbered 02. As a result, the automatic Slice name isslices_02. When you save the optimized version, the Name becomes the actualfilename of the image file itself. You should input your own Slice Name so thatyour web site doesnt consist of a series of rather peculiarly named image files.URLIf you wish to set your links within ImageReady, input the path to the link here.TargetIf you are targeting your links, select the target here.Input the following names for the Slices: 01: bannerTop 02: kobeFeb 03: kyotoMarch 04: osakaApril 05: bannerBottomToggling Slice VisibilityThough this particular image contains only 5 Slices, sometimes you may have manymore Slices for a particular image which may obscure the image itself,particularly when modifying it. You can toggle the visibility of Slices on and offby {Clicking} the Toggle Slice Visibility button, just as we toggled the

visibility of hotspots for Image Maps (see Image Maps in ImageReady.) Optimizing SlicesYou have to keep in mind that essentially, when you have applied Slices to imagesthe image remains a single image in ImageReady, but upon saving the optimizedversion, you are saving multiple images (equal to the amount of Slices in yourimage.) Using the Slice Select Tool, you can select each individual Slice andapply optimization settings to them. This can be very advantageous because now youcan mix and match optimization techniques. Parts of the image that appear betteras JPEGs can be optimized as such. Parts that appear better as GIFs (usually textand solid colors) can be optimized as such.


88/93

In our case, with this image, make sure each Slice is optimized with the followingsettings: Image Type: GIF Color Algorithm: Perceptual Dithering: Diffusion Dither: 100% Lossy: 0 Colors: 64Optimizing Slices (con't)Preview the file in a browser ({Click} the Preview in Default Browser button) andtake a look at the code. Note how the Slices translate into an HTML Table. Takenote of the image names as well. They default to the name of the images is thename you gave each Slice. As a developer, you could cut and paste that code intoyour own HTML documents (or in the case of a banner, send it to the site hostingthe banner.) Of course where you store your images may differ and thus any pathsin the code may have to be adjusted.Save your image if you like (the .psd version).Creating Rollovers in ImageReadyWe needed to use Slices on our banner so that we could build Rollovers. Rolloversinvolve, at the very least, exchanging one image for another when the user passesthe mouse pointer over a particular image. JavaScript is the most popularscripting language used to accomplish the effect. When you build Rollovers inImageReady, the JavaScript is written for you and is included within the HTML filethat you save at the same time as the images (see Saving an HTML File and anImage Together in ImageReady.) Again, how you use the JavaScript within yourpages, or how you integrate it within your pages is up to you. Just as you mayonly cut and paste the Table code that is generated by Slices, you may have toselectively cut and paste elements of both HTML and JavaScript from the files thatImageReady generates.Creating Rollovers in ImageReady (con't)To create the Rollovers themselves, we need to take the following steps:1. Create the image and optionally at this point, the Rollover elements of theimage2. Create the Slices3. Create the Rollover elements within the image4. Create the Rollover statesWeve create the image and weve create the Slices. Now its time to create thesections of the images that will appear when the user passes the mouse pointerover a particular image. In this case, we are going to place a black Stroke aroundthe text.Creating Rollovers in ImageReady (con't)You can continue working on the image youve been working on throughout thischapter, or you open rollovers.psd. rollovers.psdExpand the February Layer Set and select the February Type Layer. Add a StrokeEffect to it, black, 2 pixels, outside.

Do the same thing for the text in the March and April Layer Sets. You can justdrag the Stroke Layer Style from the February Type Layer to the remaining TypeLayers. You may find it useful to toggle Slice visibility.To review then, when the banner is viewed by a user, initially the text will nothave a black Stroke around it, but when the user passes the mouse pointer over thetext, the black Stroke will appear.Make sure that you toggle Slice visibility to visible and select the kobeFebSlice with the Slice Select Tool.Using the Rollovers PaletteUse the Rollovers Palette to build Rollovers in ImageReady. Select the kobeFebSlice (02) with the Slice Select Tool. Examine the Rollovers Palette:


89/93

Using the Rollovers Palette (con't)At this point, the Rollovers Palette contains Rollover State thumbnails of each ofour Slices, with the currently selected Slice highlighted, in this case kobeFeb.At the top of the Rollovers Palette a thumbnail of the entire image, labelledNormal is present.{Click} the Rollovers Palette Menu and select New Rollover State. A new thumbnailis added and indented, just below the kobeFeb Rollover State. It is labelledOver State. You now have two thumbnails that represent the image within the Sliceas it appears in what is referred to as the Normal State. Using the Rollovers Palette (con't)Just as you do with frames when creating an animated GIF in ImageReady, you selecta particular Rollover State and modify the image accordingly (see Building anAnimation.)In this case, we want the Stroke to be invisible in the Normal State and invisiblein the Over State. Select the Normal State and toggle the visibility of the LayerStyle (in this case Stroke) to invisible. Select the Over State and toggle thevisibility of the Layer Style to visible. Now, when you {Click} between the NormalState and the Rollover State the Stroke around the text appears and disappears.Using the Rollovers Palette (con't)Repeat the same procedure for the kyotoMarch and osakaApril Slices. NoteYou can add additional Rollover States to a Slice by selecting the RolloversPalette Menu and selecting New Rollover State. Additional States include the DownState, the Selected State, and the Out State. If you wish to build complexRollovers, you can use these additional States.Preview the file in a browser ({Click} the Preview in Default Browser button.)Pass your mouse over the images to test if the Rollovers work.Examine the code. Note the inclusion of both the HTML Table code as well asJavaScript to make the Rollovers possible. Youve generated Rollovers withImageReady, complete with the JavaScript.Issues and TechniquesNow that you have used ImageReadys advanced features to create Rollovers andSlices its up to you how you integrate both Photoshop and ImageReady into yourweb development workflow. Some designers prefer to develop Image Maps andRollovers themselves, or with authoring packages such as Macromedias Dreamweaver.Others prefer to use ImageReady to things like Rollovers and then integrate theHTML and JavaScript into their own pages. Were going to look at a couple oftechniques you can utilize and some of the issues that occur when usingImageReady.Using ImageReady to Build a Page LayoutMany developers turn to Photoshop or ImageReady to build the entire layout of thepage, or at least all the graphical components. Weve built the entire layout withsome common elements for the Travel Japan site.Open webpage.psd.

webpage.psdToggle the visibility of Slices to visible if necessary and select Slice 11. Using ImageReady to Build a Page Layout (con't)With Slice 11 selected, examine the Slice Palette. Note how this particular Slicehas been designated as No Image for Type, Text is HTML is checked, and some text,complete with HTML tags has been input into the Text field Preview the file in a browser. Note how the text is not at the top of the page. Wedo not have access to many of the tags and attributes for HTML Tables. As a


90/93

result, the text is in the correct area of the layout, but is vertically alignedin the center of the cell, which is the default alignment in HTML. Furthermore,ImageReady itself does not show us the text within the Image Window and the text,complete with attributes, can be difficult to edit within the Slice Palette.What ImageReady does particularly well in this situation is build the Table itselfand export each image for us. Once we have all the images exported, and the layoutbuilt for us within a Table, we can move on to using them for each of our pagesand editing them according to our needs.Slice Names and Multiple Images for Layout:Method ASelect Slice 04 and examine the name of the Slice in the Slice Palette. The nameis title.Next, expand the titles Layer Set (in the Layers Palette) and examine theLayers. Note how their are titles for different sections of the web site. Forexample, their are titles such as Specials, Gallery, Contact, and so forth.Each title is a graphic that corresponds to different pages in the web site.Because we will be changing the image that appears within this particular celldepending upon which page we are viewing, many developers build changing imageelements according to position.For example, toggle the visibility of each Layer, making sure that only one Layerwithin this particular Layer Set is visible. Note how each title is aligned to theright and uses the same type design.Slice Names and Multiple Images for Layout:Method A (con't)The issue that we have when we do this is that we cannot assign the name of theLayer to be the name of the image file we export. In this case we have eleven (11)title images to optimize and save within our web site folder. Because the name ofthe Slice is title, each image would in turn be called title.gif. This is fineif we save each image under a different folder. In this case, we would uncheck PutImages in Folder in our Output Settings and navigate to a unique folder each timewe saved this particular Slice.Another method developers use is to simply rename the Slice itself just beforesaving each version of the title. For example, make only the Destinations TypeLayer visible within this Layer Set. Change the name of the Slice todestinations, and select File/Save Optimized As. The Save Optimized As dialogbox appears (see Saving an HTML File and an Image Together in ImageReady.)Slice Names and Multiple Images for Layout:Method A (con't)For Slices, select Selected Slices. This ensures that none of the other Slices areresaved or saved. Very often, you will have saved many of the Slices within alayout and many need to only save one (or two, or three, etc.) at a time as youcontinue to develop the site.For Settings, make sure that Put Images in Folder is checked under the SavingFiles category, and make sure the folder name is images (see Saving Files.)Next, make sure that Save as Type is set to images Only as you do not need to saveany HTML at this point.Slice Names and Multiple Images for Layout:

Method A (con't)Finally, navigate to the website folder in chapter011 and {Click} Save. A ReplaceFiles dialog box appears asking if you wish to replace the file destinations.gif.{Click} Replace. This appears because we have already saved this file to thisfolder. This dialog box is a good reminder and warning to you when saving outindividual Slices. In this case, we can safely save over the existing version. The process then, of saving the remaining versions of the titles would involvemaking the applicable Type Layer visible, changing the Slice name, and saving onlythe Slice itself.Slice Names and Multiple Images for Layout: Method B


91/93

Another method you could employ is to make a separate file to house the changingcontent, such as the titles. For example, select Slice 04 and then select the InfoPalette. Note the dimensions of the Slice, 429 x 47.What we could do is create a new image with each title stacked vertically. Wesimply need to create a new image that is 429 pixels wide by 517 pixels high (11 x47.) Lets do that. Create a new image, 429 wide by 517 high.Next we need to create Guides at 47 pixel intervals so that we can use them tocreate our Slices. To do so, select View/Create Guides. The Create Guides dialogbox appears. Slice Names and Multiple Images for Layout: Method B (con't)We do not need any Vertical Guides at this point. For now we need nine (9) Guides,evenly spaced at 47 pixels between them. Input 9 and 47 in the first two fields.If Preview is checked, youll see the Guides appear in the Image Window. {Click}OK.Why nine (9) instead of eleven (11)? Picture the top and the bottom of the imageas the remaining Guides. By using nine (9) Guides, we divide the image into eleven(11) distinct, and in this case, evenly spaced sections.Slice Names and Multiple Images for Layout: Method B (con't)You should now have an image with eleven (11) distinct sections, divided byGuides. Next, select the Slice Tool and create eleven (11) Slices, using theGuides to constrain the height of each Slice. Give each Slice the following names: 01: title 02: book 03: destinations 04: specials 05: gallery 06: contact 07: japan 08: login 09: osaka 10: kyoto 11: kobe NoteWhen using this method, it may be advisable to plan for the future. For example,at present, the Travel Japan web site requires eleven (11) distinct titles. Thiswill almost certainly change in the future. Travel Japan may add new sectionswhich require more titles. We could have create this image with room enough foranother 5, 10, 20 titles. If you find in the future that you do need more space,you can do one of two things. You could use Image/Canvas Size, the modify theheight of the image and add more Slices and Layers to the image, or you couldsimply save the existing image under a different name and change the content ofeach Layer (or in this case, each Type Layer.) If you do save the image under adifferent name, make sure you remember to rename the Slices accordingly.Slice Names and Multiple Images for Layout: Method B (con't)Select View/Clear Slices to clear the slices out of our new image.

Select the webpage.psd Image Window and select View/Show/Guides if necessary. Notehow there are two Guides in this image that intersect within Slice 04. TheseGuides were used for precise positioning of the title Type Layers. We will need toreplicate the position of these Guides throughout our new image as well. Thismeans that we will need one Vertical Guide and eleven (11) Horizontal Guides.Lets start with the position of the Vertical Guide.If we zoom in to the top area of the webpage.psd Image Window (use the Zoom Toolor the Magnification Menu at the bottom of the Image Window) we can see that theVertical Guide is positioned at 557 pixels from the left of the image. What weneed to know is how many pixels from the edge of the border of Slice 04 thisVertical Guide is. To do so, we can just drag another Guide into the Image Window


92/93

to the edge of Slice 04 and subtract 557 from the position of the new Guide.Slice Names and Multiple Images for Layout: Method B (con't)Select the new image and select View/Create Guides. Uncheck Horizontal Guides andcheck Vertical Guides. Input 420 into the third field (to insert a single Guide)and {Click} OK. Slice Names and Multiple Images for Layout: Method B (con't)The final step in setup for this document is to place eleven Horizontal Guides atthe precise points within each Slice. All the Type that make up the titles forthis site will be aligned to these Guides. To find out how far from the top ofeach Slice we need to place the Horizontal Guides we can zoom into the edges ofthe webpage.psd Image Window.We can see that the top of Slice 04 begins at 95 pixels. Slice Names and Multiple Images for Layout: Method B (con't)Looking at the Horizontal Guide, we can see that it ends at 128 pixels. If we subtract 95 from 128 (128 - 95) the remainder is 33. This means that we willneed to place a Horizontal Guide 33 pixels below the top of each Slice. To do so,we are going to have to enter eleven (11) Horizontal Guides manually following thesame procedure we used to insert the Vertical Guide except switching to theHorizontal axis obviously.Slice Names and Multiple Images for Layout: Method B (con't)The first Guide is the easiest. We place at 33 pixels. Following that, we place aGuide at 47 pixel intervals from 33 pixels. Thus the next Guide will be place at80 pixels (33 + 47.) The following Guide at127 pixels (80 + 47) and so on. Hereare the intervals: 1: 33 2: 80 3: 127 4: 174 5: 221 6: 268 7: 315 8: 362 9: 409 10: 456 11: 503Slice Names and Multiple Images for Layout: Method B (con't)Now youre ready to build the titles.If you like, you can open mainTitles.psd and work with that file or your own. mainTitles.psdYou can create each title (using the Horizontal Text Tool) with the followingsettings: Font: Verdana Style: Bold

Size: 36 Anti-aliasing: Smooth Alignment: N/A (since you are positioning the Type Layers)* Color: White Layer Style: Stroke, Black, 2 pixels, Outside* If you duplicate the Type Layers, position them, and then highlight the existingtext and replace it with the appropriate text you may find setting Alignment toRight helpful.Slice Names and Multiple Images for Layout: Method B (con't)Or you could just drag and drop the existing Type Layers from webpage.psd andpositioning them accordingly.


93/93

The final steps of course, would be to optimize each Slice and save each Slicewhen and where required.You can open mainTitlesComplete.psd if you like to examine our final version.To examine the web site itself, open index.html from the website folder.The Old Adage: Practice Makes PerfectAs you can see, both Photoshop and its companion program ImageReady are powerfuland complex applications. You will never stop learning the applications anddeveloping new methods to create your images. The old adage Practice makesperfect is certainly applicable to Photoshop and ImageReady. Use this manualtogether with the online manual included with Photoshop as you use it and practicewith it. As you continue to use each application youll find that youll come upwith your own way of working. We look forward to viewing your work.

chapter 2: the photoshop workspace this chapter details the photoshop

Documents