6 Screenshot Utilities You Should Know About

Screenshot Utilities You Should Know About

I use different screen capture utilities depending on the type of screen I’m trying to grab. Some are great for a quick and dirty capture of a page I want to send someone. Others are good for annotating an interface I want to post to a web page. And still others are best for archival screen capture or for interfaces with video. Below are the 6 screenshot utilities that Mac users should know about. Don’t skip over the first one, because there’s a tip in there you might not be aware of.

  1. Apple Screen Capture (Mac)
    The built in screen capture tools provided by the Mac allow you to capture full screen (Command-Shift-3) or portions of screens (Command-Shift-4). The PNG images are then placed on your desktop named as Picture-1, etc. Adding Control (Control-Command-Shift-4 or 3) places the screenshot in your clipboard so you can paste right into Photoshop.
  2. Skitch (Mac, free)
    Skitch is an excellent screen capture tool from Plasque, the makers of Comic Life. The tool provided a twitchy interface for quickly capturing screens, annotating, and uploading to a photo site like Flickr, to it’s image portal, or to your FTP directory. This tool is easy to use, and I would argue provides greater flexibility and control than Apple’s built in tools in terms of file naming, screen selection, and editing. The only downside of this tool is that it doesn’t capture complete windows requiring a scroll below the fold.
  3. Jing (Windows and Mac, free)
    Jing is a screen capture utility from Techsmith, the makers of PC screen capture tool SnagIt, and video capture tool Camtasia. The tool copies the simple flow that makes Skitch so succesful, but adds video capture (exported as Flash/SWF) to the mix. As with Skitch, Jing doesn’t capture complete scrolling windows.
  4. Screengrab for Firefox (Windows and Mac, free)
    If you use Firefox, Screengrab is a handy extension that makes it easy to save or copy (to clipboard) a complete web page, a selection, or only visible portions of the browser window. A small icon is installed in the status bar of your browser, so whenever you see a page you want to grab, you can select your save/copy options, and the directory where you want the PNG to go.
  5. SnapWeb (Mac, Commercial)
    SnapWeb is a tool I’ve used for several years to grab complete pages including content below the fold. This is essentially a slimmed down browser that give you a lot of control over how you’re saving files—you choose from multiple formats, browser dimensions, and file naming preferences. It takes a few more steps to use this tool, but it’s proven the most effective at grabbing trickier Flash sites.
  6. Tasty Apps’ Web Snapper (Mac, Commercial)
    Web Snapper is a nice tool you can use with Safari that allows you to queue up screens you want to capture, and either save off one at a time, or using the Web Snapper window. The application allows you to capture pages in their currently viewed state so you can snap DHTML layers or Flash elements. One very nice feature is that you can save off all those screenshots into a multi-paged PDF. Love it. To trigger the capture so you can capture interactive elements on hover, you can invoke the keyboard shortcut Command-Shift-E.

And finally, a supporting cast member…

  • Backdrop (Mac, free)
    Jing and Skitch will take screencaptures of individual windows (on Skitch, use CMD-Shift-5 and click the window) and put them on a white background. But if you want to capture several windows, you probably want a clean background. Backdrop is an application that simply fills the background with solid white.

Update

  • Little Snapper from Realmac Software came onto the scene, and now I can recommend this above all the others. Aside from my Firefox Screengrab utility, this one is turning out to be the most useful to me because it lets me organize and tag my screenshots in the desktop software, and save them to the online QuickSnapper service. Excellent piece of software and well worth the $40.

CSS with Vertical Rhythm

drewish.com provides a nice script that takes a base font and line height and generates a scale of font classes with font sizes, line height, and margins calculated as ems. It's an odd selection of scale however with fonts sized at 12, 14, 16, 18, 20, 22, and 24 px. You can easily set this to a more familiar 12, 14, 16, 18, 21, 24, 36px. Or following Mark Boulton"s lead, you can set to 11, 13, 16, 18, 24px.

One very nice thing about using the classes this generates is not only that they are scalable via the browser because they are set as ems, but that you can do tricks like line up text on a ruled background with predictability, as in the example below.

This is text set at 36px.

This is text set at 12px (the base font size). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

This is text set at 14px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

This is text set at 18px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

http://drewish.com/tools/vertical-rhythm


Timeframe: A Javascript Control For Date Ranges

Timeframe

Stephen Celis" Timeframe javascript library allows you to create a calendar that allows users to select date-ranges by first clicking a start or end date, and then clicking the other end of the range. The range is shown as you expect in desktop calendar applications with a filled bar between the dates. Hover over the range and click the X control to delete. Nice.

http://stephencelis.com/projects/timeframe#example_information


Apple Dashcode

Apple Dashcode

Apple"s Dashcode widget builder provides a nice library interface for viewing the parts you can include in your widget, and a code library to view snippets.

http://developer.apple.com/tools/dashcode/


readbag personal bookmarking

readbag is one of those incredibly simple and well-implemented services that puts a subtle but useful twist on a product in an already crowded space. The readbag bookmarking service (it’s actually a Google App Engine application) provides the functionality to do one thing very well–bookmark pages that you want to read for later.

Now you might argue that you can use any social bookmarking service to do this, or something like Evernote. But what readbag does well is eliminates all the noise of social bookmarking, and gives you a nice mobile interface (generic mobile ui or IUI for iPhones) so that you can retrieve those articles you don’t have time to read now. So when you’re on a train maybe, or waiting in line somewhere, you can read them on your phone. The little twist is that it acts a bit like a to do list. Once you’ve followed a link from the readbag interface to one of those saved articles, it gets removed from the list, assuming that you’ve now you read it. You can unarchive links if you haven’t read them yet.

This goes a long way towards making my iphone more useful as someone who is constantly finding blog entries and articles to read, but not being able to read them all when I’m at the computer. What would really work well for someone like me, who occasionally is out of reach of a cell tower signal, is an application that can create a text-only version, cached on my phone so that I can read those articles on the subway. Of course, if iPhone’s Safari ever does offline reading this wouldn’t be an issue.

This is a very well implemented product design for a service that wants to be simple. Check it out.

http://readbag.com/


Install multiple versions of IE on your PC

The Multiple IE Installer is a must have resource for front end developers. I had to configure a new computer for myself because of a recent job change, so that meant installing all of my design/development tools again. On my new MacBook Pro, I run VMWare and just ran Tredosoft’s Multiple IE Installer for Windows XP. On an XP machine with IE7 (you must upgrade to IE7 before running this), the application will allow you to select versions of IE 3, 4, 5, and 6 to install. I’ve had it working on my last 3 Macs running Windows on both Parallels and VMWare without any problems.

http://tredosoft.com/Multiple_IE


Designers Toolbox: OS Form Elements

The Designers Toolbox provides a nice resource for designers looking to create form elements in design comps or wireframes. The site displays every type of form element that can be generated by Windows XP IE and Firefox, and Mac OS X Safari and Firefox. Photoshop files can be downloaded for each form element.

Thanks, swissmiss.

http://www.designerstoolbox.com/designresources/elements/


When is Good

When Is Good is a tool that does one thing—helps a group of people choose the time for their next meeting or event. One person starts by clicking (or clicking and dragging down) all the times that they are available on a calendar grid that shows 2 1/2 weeks of time slots. When Is Good then provides a link to circulate to participants, who see the proposed times and click on when they are free. Whoever started the calendar gets to see the combined results.

http://whenisgood.net/


Celebration Of Vintage and Retro Design

Celebration Of Vintage and Retro Design | Smashing Magazine

Smashing Magazine has collected a series of pictures celebrating vintage and retro desigtn—ads, illustrations, book covers, pins and posters from 1920-1980s or inspired by that period.

http://www.smashingmagazine.com/2008/04/21/celebration-of-vintage-and-retro-design/


QUEEKY Ratings

QUEEKY is a drawing community that allows users to draw pictures in their browsers using the site"s flash application. Users can rate the drawings using a rating scale ranging from 1 (Hmmm) to 10 (A masterpiece!). Scores on the low side are color coded to a cool violet color and on the high side towards a hotter pink/fuschia.

1. Low rating
2. High rating
3. Full page

http://www.queeky.com/


Brooklyn Museum Click! Rating

The Brooklyn Museum"s Click! show is a crowd-curated exhibition that accepted user submissions for photographs that reflect the theme, "The changing face of Brooklyn." Following the submission period, visitors are asked to help curate the photography show by evaluation submissions on their effectiveness at demonstrating the theme. The interface for evaluating photos steps the user through each entry and provides a slider control to rate the photo on a scle from most effective to least effective.

1. Introduction to show and guidelines for evaluation photos.
2. Example photo with evaulation slider and user statistics on right.
3. Photos include artist's title and description.

http://www.brooklynmuseum.org/exhibitions/click/


Sh*tty Data Visualization

I like single serving sites. The Letter pointed to this one, which shows the number of links to variations of the phrase “oh shit” when using multiple i’s. I wonder about the freshness of these results though, and I think the scale of the bars is a little off. :)

http://www.ohshiit.com/


Google Sites Rich Text Editor

Google Sites, the new wiki application that is now part of Google Apps is a content management tool based on the JotSpot service acquired by Google. Sites retains the excellent rich text editor tools that JotSpot had.

The formatting bar allows users to do the simple things you would expect from a word processor, such as making font changes and adding styles such as headings to text, insert lists, links, images, and table of contents. There are very well executed tools for laying out the page in 2 columns and inserting tables. It also allows you to do more sophisticated things you can't do with a word processor, including inserting Google Docs Documents and Spreadsheets, Presentations, Picasa Slideshows, YouTube video, and Gadgets which execute bits of code to do things like insert lists of content from your wiki into the page. Advanced insert tools like this have been commonly offered in more sophisticated CMS, blog, and wiki software that are largely used in the enterprise CMS space.

The Sites rich text editor feels like a very clean, and fast alternative to some of the more bloated WYSIWYG tools offered as plug ins for CMS. Many of the formatting tools I"ve encountered go the simplest route of using markup shortcuts and special syntax, which works well but requires a learning curve. Or they go the other route, which is to mimic Microsoft Word and include everything you might possibly want to use, and sometimes also give you the messy HTML to boot. This editor feels like it's somewhere in between, in that sweet spot where users are given just enough to get the job done, and even more under the hood when they need the power tools. It's fast, efficient, and intuitive.

1. The text formatting toolbar.
2. Creating a link to a named page on the wiki.
3. Creating a link to an external URL
4. The insert menu.
5. Inserting an image by uploading a file or referencing an external URL.
6. Inserting a Google Docs Spreadsheet by pasting public URL.
7. The inserted spreadsheet selected in the editor with links to bring back property inspector and handles to resize.
8. Inserting a "Gadget" to display a block recent todos created on this wiki.
9. Editor showing 2 column layout and styles applied to text. Inserted image selected.
10. Insert table menu.
11. Editor showing inserted table. Table is selected and shows resize handles.
12. Published page with all edits applied.

http://sites.google.com/


Users around the world translate Facebook for free

Facebook is tapping its international user community to help translate it's interface, namely the copy for its guidelines, into nearly the 2 dozen languages that represent the community"s market outside the US. The localization effort is a massive crowdsourcing task that has been both criticized and lauded. The critics often point to the unpredictability and inconsistency of translations. Proponents of the effort applaud the boldness at utilizing an already eager community to contribute to making the application better for users in other non English-speaking countries.

http://www.usatoday.com/tech/world/2008-04-18-facebook-free-translation_N.htm?csp=34


Cartoon Network to release casual multiplayer game

Cartoon Network are building a new online gaming community that hopes to challenge the model of the Massively Multiplayer Online Game (MMOG) with FusionFall, a game that leverages a community of players, but doesn't require the long term buildup of skillsets and earned resources.

We"re not building a game for hardcore gamers who will spend 60-plus hours a week here. If you think of those as hour-long dramas on TV, we want to be the half-hour sitcom. All of our missions are built in a way that they can be completed in 30 minutes at most. That get-in-and-get-out style of play is what makes casual gaming so popular, and we hope it is what will make "FusionFall" popular.

The game producers are hoping to capitalize on what they see as a growing interest in casual gaming, by providing a space that appeals to gamers who want bite-sized gameplay inside a more collaborative gaming space. The audience for this game are the youngsters who might now play Club Penguin, Habbo Hotel, and Runescape.

The Reuters article writes that the release of the game has been delayed to Fall because the producers won't release it until it's ready, citing the depth that has to be developed to get the experience right.

http://www.reuters.com/article/technologyNews/idUSN1640720920080417?feedType=RSS&feedName=technologyNews&sp=true


Pattern Tap Tag Filtering

Pattern Tap, an interface and visual design gallery, provides a UI for filtering using tags. Best case scenario would get rid of the filter button and also updates the set of available tags to indicate those that can be combined with the current selection (e.g. dim or hide tags that can't be combined with my selection "black AND white" AND simiple." Often times in interfaces that provide filtering based on all available tags or index terms, if the filtering UI doesn't update to reflect those terms that may successfully combined, the user is led down a path to an empty set. del.icio.us is one example I can point to that prevents this error. I really like the execution of this interface on Pattern Tap, but would love it if that added logic were there.

1. The tag filtering interface with no selections.
2. Clicking + icon adds the tag.
3. Several more tags added. Clicking a selected tag removes it. A filter button submits the selections.

http://patterntap.com/


Google Sites Theme Editor

Google released the technology acquired by JotSpot as the new Sites tool in the Google Apps suite. The Sites tools provides the interface you see here for modifying the appearance of your site, using pre-defined themes as a starting place, allowing you to modify the layout of content modules in the left column, and the colors used in the layout.

1. Selecting a theme.
2. Modifying page elements.
3. Configuring a module.
4. Setting colors.
5. Setting background images.
6. The modified site appearance.

http://sites.google.com/


Textism Word HTML Cleaner

In my old days working on a corporate portal, I occasionally had to take someone’s HTML, which was generated by Microsoft Word, and drop it into an entry on a CMS. But before I could just cut and paste, I had to run a series of regular expression replacements in vi or Allaire HomeSite to strip out any of the god awful HTML that Word generated. To pay homage to the past, fate recently dropped a Word HTML file in my lap. I was surprised to see how much cleaner the HTML was, but it was still pretty awful and full of excessive markup cruft.

Doing a search today for Word HTML cleanup turns up Textism’s excellent Word Cleaner service, which allows you to upload a Word HTML file, and then spits out cleaned HTML ready for you to use in your blog or CMS. It worked out perfectly for me. I only wish this were around 10 years ago!

http://textism.com/wordcleaner/