Back to

Web Design Tricks of the Trade

Ever wondered how web designers make those little icons up in the address bar? Can’t figure out how to make a glossy button, complete with faded out reflective web 2.0 goodness? Or how about how to create those little badges and buttons you see gracing the sidebars and footers of your favorite blogs? I’m here to help.

Contrary to popular belief, you don’t have to own an $3,000 software package and a bleeding-edge beefed up computer. In fact you can pass as a pro without even opening up Photoshop… for, dare I say, free! Thanks to the advancement of web technology and all of the love being spread by the web design community, you should have no problem convincing your friends you’ve spent back-breaking hours creating a pixel-perfect masterpiece.

I’ve compiled a list of 10 great online tools to help you become a web design (insert musical genre of choice here) star.

favicon.ico Generator
This tool is great for creating favicons. You have the option of importing an image to trace over with a very intuitive user interface making this task a snap. even gives you the ability to create an animated icon! What more do you need? I’ll answer that, nothing.

Button Maker
This Button Maker by Adam Kalsey is the perfect tool for creating your own zany badge & button images. Choose your own custom messages, colors, and crispy pixel perfect positioning options.

Websnapshot 1.0
This is an Adobe Air application, which means you have to download and install it, but it’s free. This tool takes snapshots of any given website and creates 3 different sizes on your command. Perfect for bloggers and web content publishers.

Photoshop Express
Did you know Photoshop has an online web application that let’s you “Upload, tweak, rotate, edit, share and store your photos” for free? I’ve used this in a pinch a few times, and it’s very handy. There are a few filters as you see in the thumbnail.

Silk Icons
This set from has over 700 icons you can use for any purpose, and make any changes you like. We use these on our in-house project management system, Athena. This is the most expansive free icon set I’ve seen.

I can’t stress enough how great this site is. Users get hundreds of thousands of high quality, hand picked stock photos and graphics – all free! It’s also a great way for you to share your own self-produced stock art as a way to give back to this wonderful community.

Squidfingers’ Patterns
The web design community truly is a sharing bunch these days. Squidfingers has been sharing these beautiful pixel patterns for years, before it was trendy to be so giving. If your looking for web page background ideas, don’t sleep on this site.

Web Developer Firefox Extension
This tool comes in pretty handy if you dabble in html and/or CSS at all. It gives you easy access to actions such as: validating html and css, displaying image information, clearing your browser cache, viewing outlined css page elements, and much, much more.

ColorZilla Firefox Extension
This tool is perfect for grabbing a color for inspiration in your own designs. With two clicks you’re armed with the HSB, RGB, and Hex values for any given color on a webpage.

MeasureIt Firefox Extension
All too often we need to know the dimensions of areas on a web page. This is the rich man’s version of “print-screen, fire up Photoshop, paste, selection marquee”. If you understood that last sentence, congratulations, you are just as geeky as me.

I hope you find these gems as useful as I have. Feel free to share your favorite tools I left out in the comments!

Filed under: Design, Technology

12 Responses to “Web Design Tricks of the Trade”