Left Justified
FeedsFree Design Tools
∞ | August 16, 2004 | Category: Design
Each of these four tools fit a specific task within web design - and fit it “to a T”. Including the ultimate colour sampler, a feature packed screen ruler, a favelet so useful it should be an entire application and the colour palette generator to end them all.
Screen Callipers
Screen rulers are all the same. At least, that’s what I thought up until about a month ago - that’s when I discovered Screen Callipers from Iconico (Windows only 23/10/05: Now available for OSX aswell!).
Here’s why this application rocks:
- It doesn’t just measure a distance between two points - like a real calliper, it measures around and between objects.
- With a memory footprint of 2MB, I can leave it in the far corner of my second monitor and it’s always there, ready to work.
- Don’t like the default skin? No problem, download another or skin it yourself.
- The colour of the measuring edge can be changed with a single keystroke, ensuring that you always have enough contrast to see what you’re doing.
Whilst the full version isn’t free, there is a fully featured version which is. Try it out, if you like it make sure to pay the $15 to support the creator.
Get screen callipers
Colour Palette Generator
After Andy Clarke’s Creating Colour Palettes article kindly reminded us about high-school art theory, Steve Chipman from slayeroffice.com took it upon himself to automate the process of generating a colour’s tints and shades. The reason I rank this colour tool above all others is that it saves me time again and again. No matter how I go about choosing the primary colours of a design, I always like to have all the relative tints and shades mapped out in swatches before I get knee-deep in the design. As of the latest update (1.6), this handy script can also output all your colour sets as a single PNG file - Awesome!
ColorPic Colour Sampler
Unfortunately I was beaten to the line regarding publicising this app, but it’s so good it should be mentioned more. I find having my colour palette loaded in a graphics application far too limiting. I don’t want to be jumping back and forth just to see my hex values when writing CSS, that’s counter productive! ColorPic is another fine product by Iconico, the makers of the Screen Callipers.
Reasons this program rocks:
- Magnified (2-50x) navigator window so you know exactly which pixel you’re sampling.
- Run by keyboard shortcuts. I can never get enough keyboard shortcuts. (Ed-nerd!)
- If the sampled colour is web-safe, displays its name as well as RGB and hex values
Favelet Suite
Steve Chipman of slayeroffice.com is someone who doesn’t get enough recognition for the free work he does. His “web experiments gone horribly awry” are awe inspiring to those of us with less than average javascript skills, possibly none more so than his Favelet Suite. I’m not even going to bother going into the details of how incredibly useful this is, but here’s my top reasons this tool rocks:
- Mouseover DOM inspector: Something bugging out in your design and it’s not the CSS? Worse yet, trying to help someone else fix their live site? With this Favelet you can edit the content of any html element live! Want to test if a clearing
divwill help? Stick it in. Want to try changing the source of an image? You can do that too. - Colour List: Samples the colours of the current page and gives the result as swatch/#hex pairs. Not perfect, but very handy and insanely quick.
- Document Tree Chart: Displays the elements of the page and their nesting in glorious technicolour. So simple a designer could understand it.
And What Did You Bring For Show & Tell?
That’s it folks, four pieces of kit that make my life that little bit easier. Now it’s your turn. Please take this opportunity to share any similar simple little apps or online services which you think would benefit others.
If you want more of these sorts of tools, have a look in the tools section of mindlesslemming.com.
Have Your Say
Sorry, comments are closed on this post.
If you’re a FireFox or Mozilla user, you’ll probably be happy to discover The Web Developer Extension by Chris Pederick. It’s a lot like that favelet suite, but it comes with a toolbar and it builds itself into the context menu. Super neat.
I’m also a happy user of the Web Developer extension, but to be perfectly honest it get’s enough publicity everywhere else.
Even with the web developer’s extension there are still another 10-15 favelets that I use all the time…
The Screen Callipers looks an awesome tool, I’ll be looking into that further. Thanks for finding it
What Awesomeness! Found this site from the Web Standards Awards site. Congrats on that award and congrats on giving a budding developer some tools to help him on his way.
Pixy’s ‘color scheme’ tool is the best colour tool I’ve found to date (even if it is spelt wrong! ;o) - some quite phenominal functionality when you start to play with it, such as previewing for colourblind perception.
Those screen calipers look like a really useful tool man. Great site by the way. The grammar nazi inside couldn’t hold back. origin of “to a T”
One tool that is a must is a visit to this site: http://www.websiteoptimization.com/services/analyze/
It calculates page size, composition, and page download time.
that page actually has a quick shortcut from within the web developer toolbar - altho i’m a 1.x user so i dont actually get the toolbar, just the options in context menu.
Steve: That tool has one fatal flaw - it doesn’t include the size of images imported via css in any of its calculations. That makes it of little use to me any more.
Those screen calipers are the bomb. I was using Jruler Pro before i discoverd those thanks to you.
My latest addiction has got to be the Color Palette Generator from Alpha Builder and the Color Harmony Dreamweaver Extension is a very useful tool if you develop with dreamweaver. Check them out, they can both be downloaded.
ENjoy
TooL
The best all round tool I’ve found is PHP Designer here. It has every feature I need and is quick and simple - not like Dreamweaver which took like 2 mins to load! And it’s only 1.3Mb!!!!!! Just try it, you’ll love it.