Chapter 5 – Web Graphics Styling Basics
A key component of a compelling website is the use of interesting and appropriate graphics. This chapter introduces you to working with visual elements on web pages. When you include images on your website, it is important to remember that not all web users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Some of your visitors may be using a mobile device that may not display your images. As a web designer, strive to create pages that are enhanced by graphical elements but that are usable without them.
Optimizing a Photo for the Web
Free Graphics Tutorials
Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:
Free Image Editors
Free online image editor applications:
Free image editor applications to download:
Free Online Image Optimization Tools:
Round the corners of rectangular images:
Create an icon from your image:
WebP —A New Image Format
Google Labs has developed a new image format for the Web called WebP (pronouced "weppy") that improves compression on photographic images. Currently it's supported by Google's Chrome browser.
- Page 146: In the last paragraph, the phrase "coords attriubte" should be "coords attribute".
Questions or Comments
The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.
- Free Digital Photos
- Public Domain Photos
- Free Stock Photography — stock:xchng
- Microsoft Design Gallery
- Free Stock Photos
- Indezine Stock Photos
- The Stock Solution
- Free Images
- Free Range Stock
- Free Photos Bank
- Big Stock Photo
- Photos To Go
- FamFamFam—free icons
- 30 Free Icons
- Default Icon
Instant Buttons and Logo Banners
- Web 2.0 Logo Creator
- Glassy Buttons
- CoolText Buttons
- Free Buttons
- 3D TextMaker
- Animation Online
- ABC Banners
- Ad Designer