I just thought it'd be fun to share the iterations that the camera image went through. I added this image to the district site about a week or two ago. It's used next to the title of an article that has a feature-sized image (430px x 235px, fits Carolyn's homepage design) associated with it, when that article is in a list. For example, you can see it on the Recent headlines list on the News @ HEBISD page. Technically, these articles might not be featured on the homepage at any point, but in practice I believe all of them have been.
When I started, I wanted to clean up that News page, and I knew that one of the things I wanted to add was an icon to serve the exact purpose that the icon was used for in the end. I went through several versions of the News page itself, using "image.gif" as that icon. "Image.gif" is from an icon set called Sweetie, and made pretty good sense to me since I spend plenty of time online, using Web 2.0 sites, etc and since things you come up with always seem straightforward to you.
Of course, when I showed my new version of the News page to Carolyn, she pointed out that the icon was a little ambiguous (an image? a monitor? a playing card? a window?), and probably very ambiguous to less-savvy users, and suggested a camera. I did a quick search and couldn't find any tiny and legible camera icons, so I made my own.
When I started, I wanted to clean up that News page, and I knew that one of the things I wanted to add was an icon to serve the exact purpose that the icon was used for in the end. I went through several versions of the News page itself, using "image.gif" as that icon. "Image.gif" is from an icon set called Sweetie, and made pretty good sense to me since I spend plenty of time online, using Web 2.0 sites, etc and since things you come up with always seem straightforward to you.
Of course, when I showed my new version of the News page to Carolyn, she pointed out that the icon was a little ambiguous (an image? a monitor? a playing card? a window?), and probably very ambiguous to less-savvy users, and suggested a camera. I did a quick search and couldn't find any tiny and legible camera icons, so I made my own.
- "Camera1.gif" was lucky, I got the shape pretty well on my first go at it.
- "Camera2.gif" makes the lense slightly smaller and blue.
- "Camera3.gif" adds a flash and viewer window, which were almost universally included on the larger camera icons -- I really think they help a lot towards suggesting what the icon is.
- "Camera4.gif" added assymetric light reflection on the lense -- this was a really important addition, to me. It's very subtle in the icon, but I think it's the extra touch that turns it from a fun project into a high-quality graphic.
- "Camera5.gif" rounds the corners by cutting off the rectangle corners and adding to the width of the bump on top (turns out it's easier to see when it's wider).
- "Camera6.gif" has several finishing touches: the left corners are squared off again and the left side is darkened a little (which I don't think is really noticable in the icon, but makes me happy), and the spot at the top right was brightened a little, just to help it stand out in the tiny icon.