Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from Painting the Web

Badges and Bows: Beyond the Buttons

Page badges and application icons are the two- or three-dimensional graphical shapes that are used to attract attention, convey simple messages, or visually represent an application. They can be used to note that an application is still beta, to indicate that a sale is ongoing, to highlight the date of an event, or even just to add a pretty effect to web pages.

Shiny, wet button created with Photoshop CS3

Figure 5-13. Shiny, wet button created with Photoshop CS3

The main difference between a badge and an application icon is that the badge is not meant to look like something that can be clicked. An application icon, on the other hand, can look clickable.

Where the icon differs from a button is that the icon is usually graphical, with no text, whereas buttons have text describing what happens when you push the button. Buttons also have distinctive button-like shapes, whereas icons can be any shape, though square is the most popular. With icons, the graphics represent the action (open the application, save to file, and so on).

In this section, I focus on badges. Later, in the section on reverse-engineering designs, we'll look at some icons.

Tip

In this section and the next, I'm switching to Photoshop for the examples. Note that when creating a shape such as a rectangle with Photoshop, you'll need to "rasterize" it before you can apply most of the modifications I'll cover. This is because the image ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page