Gridulator
First of which is a grid generating website. http://gridulator.com/. Here you can control the width, gutter width, number of columns, etc. It's a great, flexible tool to get you started on comps or wire-frames. You can preview your configuration and export a png file that has the gridded layout so you can just drop that into Photoshop.
That link again: http://gridulator.com/
CSS3 Styles
I know CSS3 has shown up and everyone is excited, but I don't have a lot of the code memorized yet. So to help me out, I use http://westciv.com/. Hit "Tools" either in the navigation or those large buttons in the body of the page and select what specific kind of style you want to create with CSS3 from the CSS3 Sandbox. Once you pick one, you can easily navigation between the rest. The website allows you to control styles through check boxes and sliders, while giving you a preview of what's going on. It'll generate the code for you in web kit and firefox, so there's no compatibility problem unless you're using IE6 or IE7 (in which case, you have bigger issues at hand). Use this to get more familiar with CSS3 and realize what awesome potential it's bringing to web design.
That link again: http://westciv.com/
MeasureIt!
MeasureIt! is a tool exclusive to Google Chrome (as far as I know) which will allow you to measure (in pixels) distances on the web. It stations itself in the top-right side of the browser, icon looks like a ruler. You can see the blue box I've created on this web page just by clicking and dragging. The tiny red box next to the blue one displays the height and width in pixels. It's a neat tool I've used once or twice.
Eye Dropper
A tool that does exactly what you think it does. This is another Chrome-exclusive that situates itself near the top-right browser window. Basically it samples whatever color is on the screen instead of opening Photoshop to check. It's a good time-saving tool. As you can see from the image above, it'll give you the hex values as well as let you surf around a color picker that's exactly like the one Photoshop uses.
The Ball Pool
No, this probably isn't useful. But it sure is fun. http://mrdoob.com/projects/chromeexperiments/ball_pool/. Click to add more balls, double click to reset the pool. Dragging the balls around, moving the browser window around, just being balls-deep in some browser entertainment, it's all fair game. Just try not to spend too much time with it; maybe just when you're short on ideas and need a break.
That link again: http://mrdoob.com/projects/chromeexperiments/ball_pool/
No comments:
Post a Comment