Retro Web Design Graphics

Remember the early days of web design when you had to create graphics that loaded speedily in dial-up connections using a 14K baud modem? One of the tricks used to shrink graphics was to reduce the color palette and use dithering in the converted .gif to simulate the original image. I 'kinda' missed dithering. It often added a fine pattern or noise to images that gave them a retro feel and a bit of texture and dimension. Well, I'm bringing back dither patterns baby! It feels so retro!

In the home page for my web design portfolio I converted the main graphic into a .png file that is reduced to 128 colors, and used a noise pattern to render the image. This closeup image gives you a look at the subtle texture this adds to the photo. The subtle retro feel works perfectly for the '59 Caddy in this photo. Well, as digital makes it possible to create smooth images with perfect color, its nice to step back to the look and feel we had in the days of film. Love that texture!

Shrink PNG Web Design File Size

As a web designer, I love the PNG format for its loosless color rendition. 24bit PNG files are the perfect format for graphics that contain both an image and text. JPEG format tends to muddy text somewhat, but PNG keeps it crisp. The downside is that PNG files can be huge, That's still a no-no in web design! If you save PNG 24bit files in Photoshop, it will not give the maximum compression for the smallest possible file size. There is an online tool that will do a very nice job of optimizing your PNG files while still maintaining visual quality: http://www.gracepointafterfive.com/punypng

This free online resource allows you to upload PNG files for automatic optimization.The files I optimized using this serve were generally made 18-24% smaller while still maintaining perfect visual quality. This is a must-have online resource for any web designer!