If someone asked you what tools you commonly use for constructing web designs, you would probably mention the obvious: your favorite text editor and graphics program, the web inspector in your preferred browser, things like that. But what about those nifty web apps that, though not necessarily an essential, are majorly helpful for small parts of your workflow?
Here are a few useful web apps that help you do things like choose a color palette or add vendor prefixes to your CSS.
Sprite Cow
Sprite Cow makes it easy to get the background-position offset and element dimensions for an item in your CSS sprite. It’s so much easier than trying to figure it out in Photoshop. All you have to do in most cases is click the part of the sprite you want to use and copy the coordinates into your CSS. Most of the time, it does an excellent job at selecting the relevant pixels.
Prefixr
Vendor prefixes enable browser to implement experimental versions of new CSS properties without causing compatibility issues down the line, once they become standardizes. Unfortunately, while current versions of some browsers (like Firefox) may understand border-radius and box-shadow, or whatever CSS3 property you’re trying to use, older versions require the vendor prefix still. That’s where Prefixr comes in. Paste your CSS in, and it will automatically ensure that your styles work in as many browsers as possible. It even handles the weird filter syntax that older versions of IE use. There are also numerous plugins to integrate it with your favorite text editor.
Kuler
Adobe’s Kuler is a tool for creating and sharing color palettes. Its editor lets you choose between Analogous, Triad, Complementary, Compond, Shades and free-form modes.
ColourLovers
ColourLovers works off a similar concept to that of Kuler. It’s all about creating, discovering and saving color palettes. ColourLovers has the advantage of a nice API, and integration with the ColorSchemer app for iOS.
JSFiddle
Need to brainstorm a bit of CSS or JavaScript? Or maybe you want to share something clever you did? JSFiddle is an interactive pastebin site that shows a live preview of any modifications you make, and it keeps multiple revisions as you save your changes.
Noise Texture Generator
Noise Texture Generator does what it says on the box: it makes textured images alike to what you would get using the Noise filter in Photoshop, but with an instant preview.
What The Font?
What The Font? attempts to use its powerful magic to identify the font used in an image you upload. It gives you a list of matches that may or may not be what you’re looking for, but are usually pretty close if not the exact font.
AjaxLoad
Need a throbber graphic for part of your website? AjaxLoad has a ton of options, and it can tailor them to fit your color scheme. They’re all animated GIFs, of course, since support for animated PNG images never took off.
Stripe Generator
Stripe Generator is along similar lines as Noise Generator. It’s an easy way to make stripey background patterns.
ConvertICO
Favicons are usually a pain to make, since Photoshop and most other popular image editors won’t export to the ICO container format by default. ConvertICO is a simple tool that accepts an upload of a PNG graphic and quickly converts it to ICO.
