1. © 2001 – All Rights Reserved – Page 1 Web Graphics & Animating Web Graphics

2. © 2001 – All Rights Reserved – Page 2 Web Graphics Background tiles or watermarks Graphic Headers Navigation Buttons and Bars Image Maps Sliced & Tabled Images Advertising Banners

3. © 2001 – All Rights Reserved – Page 3 Types of Backgrounds Square Tiles –Small tiles: usually 100x100 pixels –Meant to repeat in both dimensions –Subtle designs are best Seamless Tiles –Considered desirable –The design is such that the repetitions are not obvious Horizontal & Vertical Margin Tiles –Long, thin tiles designed so user only sees repetition in one dimension Watermarks –Sufficiently large so that user sees no repetition

4. © 2001 – All Rights Reserved – Page 4 An Easy Tile Create a 100 x 100 pixel canvas Fill the background with a web-safe color Apply Filter>Noise>Add Noise File>Save For Web as a easytile.gif Load onto web page with this HTML code: Before NoiseAfter Noise

5. © 2001 – All Rights Reserved – Page 5 Creating Seamless Tiles in ImageReady Create an original tile in Photoshop Jump to ImageReady Run Filter>Other>Tile Maker –Select Blend Edges, Check “Resize Tile to Fill Image”, or –Select Kaleidoscope Save Optimized and Insert onto HTML page Original Designs Blend Edges Kaleidoscope

6. © 2001 – All Rights Reserved – Page 6 A Margin Background A long, thin tile which repeats like any tile A.k.a. “sidebars” Must be wide enough that most users will not see repetition horizontally In this example: –Original size: 1300 pixels x 200 pixels –View in context at: –http://www.petersheimdesign.com/glassheim/default.htmhttp://www.petersheimdesign.com/glassheim/default.htm

7. © 2001 – All Rights Reserved – Page 7 WatermarksWatermarks Full screen background files Tiles sufficiently large that they won’t repeat in either dimension http://www.petersheimdesign.com/ Original size 1600x1200 pixels

8. © 2001 – All Rights Reserved – Page 8 Graphic Headers A graphic file with a textual purpose Enables use of fonts which are not “web-safe” Provides consistent “graphic identity” to pages Permits special effects such as filters and layer effects not available in HTML

9. © 2001 – All Rights Reserved – Page 9 Navigation Buttons Text-based or iconic Consistent graphic theme Mouseovers provide multiple “states” Buttons by ART4193 Alumnus Bill Schick – Top Row is Normal State – Bottom Row is Over State Iconic Buttons (recalling origami) by ART4193 Alumnus Jason Petitpain

10. © 2001 – All Rights Reserved – Page 10 Image Maps A single large graphic file Hyperlink “hotspots” created by mapping X,Y coordinates of diagonal corners Easiest to create map graphically in a WYSIWYG editor like FrontPage or in ImageReady

11. © 2001 – All Rights Reserved – Page 11 Sliced Images…Table Mosaics A large graphic is sliced into pieces Pieces inserted into cells of table Each slice is assigned a separate hyperlink Useful for mouseovers

12. © 2001 – All Rights Reserved – Page 12 Animated Banners Full Size Banners are typically 468 x 60 pixels Mouseover Image View this banner at http://www.petersheimdesign.com/pages/pfolio/wd_banr3.htmhttp://www.petersheimdesign.com/pages/pfolio/wd_banr3.htm

13. © 2001 – All Rights Reserved – Page 13 Web Graphics & Animating Web Graphics