Download presentation
Presentation is loading. Please wait.
Published byBasil Neil Rice Modified over 9 years ago
1
© 2001 – All Rights Reserved – Page 1 Web Graphic Elements Web Graphic Elements
2
© 2001 – All Rights Reserved – Page 2 Web Graphics 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 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 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 DesignsBlend EdgesKaleidoscope
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 Cascading Style Sheets make this technique more efficient 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 Web Graphic Elements Web Graphic Elements
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.