Free For All: Web Design Tools

Pariah Burke

1

Kern Text Online

Think kerning text on your website is impossible or just more trouble than it’s worth? Not any more. Check out Kern.js. It’s a simple bookmarklet that you install into your browser’s bookmarks or favorites bar. Then, while viewing your own website (or your client’s), click the Kern.js bookmarklet to load the toolbar and visually adjust the kerning, leading (line-height), and letter placement of text on the page. You can adjust whole paragraphs or simple glyph pairs. When your text is perfect the bookmarklet will provide you the CSS code—in pixels or ems—to make the changes permanent and visible to everyone; just paste the code CSS into your site’s CSS.

CSS3 Gradient Generator

Even CSS-writing pros often flinch at the prospect of writing the complex markup required to create gradients. Not only must you individually define two or more colors, but you must specify in decimal measurements the exact locations of color stops along the gradient. And if you want more than two color stops you might need to code multiple gradients that flow into each other. Then, once you’ve got that just right, you’ll need to rewrite the code a few times so that every browser correctly renders the gradient. Insanity!

Well, it was insanity. Enter the Ultimate CSS Gradient Generator, which works like a browser-based version of Photoshop’s Gradient Editor. Using this excellent tool you can visually add, define, and position color stops along a gradient ramp. Color stops can be moved by dragging or positioned with precision using the Location percentage field. Even the opacity of each color stop can be set like in Photoshop. As you work, the generator automatically updates the CSS (and optionally SCSS) markup to describe the visual representation. When your gradient is perfect, just copy the markup and paste it into your .css stylesheet or inline definition.

CSS3 Button Generator

An even more daunting task is creating 3D buttons with CSS—especially if you want those buttons to contain gradients. Another tool, CSS3 Button Generator, similarly makes a formidable coding task easy. The user interface isn’t as visual as Ultimate CSS Gradient Generator—instead of moving color stops you’ll need to enter location percentages—but it’s still much easier than writing the CSS by hand. To get a feel for the tool, check out the gallery of button styles others have created. The look you want might already be there, with copy and paste-ready CSS code!

Design to a Baseline Grid

In the world of print publishing and in digital publishing to mediums that have typographic control—formats like PDF and Interactive Magazine for tablets—designers know that using a baseline grid is important. It creates a vertical rhythm that guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout. On the web, though, few websites even bother to increase leading (line-height in CSS) from the default to a more comfortable level. For those coming from the print publishing world, aligning web text and objects to a baseline grid has been too much to even dare dream about…until now. Now, the dream is a reality.

jMetronome is a jQuery plugin that can be easily integrated into any website. Once installed, jMetronome automatically adjusts CSS line-height so that text and objects align to a fixed baseline grid. Yahoo!

What can I find free for you? Want more free fonts? More Photoshop brushes? How about more online applications that do this or that for free? Tell me in the comments what you’d like to see in future installments of Free for All, and I’ll do my best bloodhound impression to track it down for you.

Please note: Free for All will often link to resources hosted on external Web sites outside of the control of CreativePro.com. At any time those web sites may close down, change their site or permalink structures, remove content, or take other actions that may render one or more of the above links invalid. As such neither Pariah S. Burke nor CreativePro.com can guarantee the availability of the third-party resources linked to in Free for All.

Pariah S. Burke is a design, publishing, and digital & epublishing workflow expert and consultant bringing creative efficiency into studios, agencies, and publications around the world. He is the author of ePublishing with InDesign CS6, Mastering InDesign for Print Design and Production, and other books for professionals with jobs to do on InDesign, Creative Suite, Adobe Illustrator, QuarkXPress, and digital publishing; author of more than 450 published tutorials and articles; co-author of the InDesign and Illustrator Adobe Certified Expert exams; an Adobe Community Professional; the former trainer and technical lead for InDesign, InCopy, Illustrator, Photoshop, and Acrobat to Adobe’s own technical support team; the host of a series of digital publishing, epub, and the business of design Webinars; a freelance graphic designer and publisher with more than 20 years’ experience; a WordPress and social media evangelist; and the publisher of a network of Websites, communities, and tools for creative professionals, the Workflow: Network.