Web Screenshot Guides

No more manually drawing red squiggles to tell somebody where to click!

How many times have you had to take a screenshot of a website, and then draw some red squiggly arrow to tell somebody where to click? Or maybe you're demonstrating how to use an application and are trying to focus the user's attention on a specific part of the screen?

Well I threw together a quick and dirty UserScript that will automatically spotlight selected elements on a webpage, allowing your screenshots not only to be more focused then red squiggles, but also more accurate!

Web Spotlighter

After running it on the site, you'll be presented with a super minimistic UI that allows you to click on whatever element you wish to spotlight.

After clicking, it is previewd for your convience - if there's anything wrong with it you can either remove it, or head on over to the Edit controls to make any direct CSS changes you want.

The most common ones are the removal of margin/padding - so common that if you hold down the p or m keys it will clear all of them out for you, or wasd to clear the top, left, bottom, and right padding, and WASD to clear the top, left, bottom, and right margins.

Second-most common adjustment needed is the color or background color, directly customizable via the color and background-color CSS properties.

Lastly if the default white box-shadow isn't enough, you can add a custom color via the boxShadowColor flag.

Numbers

Of course sometimes you want these to be in some order, so you can add to each element a text flag and a text-corner flag to position it in the corner of your choosing.

Animated

Finally if you're looking to advance from screenshots, perhaps making a GIF or video, you can add the animated flag to have the element animate in and out!

Interactivity

Of course not all sites are static, and not all elements exists at once, so to handle this you can add the javascript flag to execute your own JavaScript code after each element is highlighted - this can be used to add another element, interact with the website, or anything else you can think of!

Conclusion

Yes there exists libraries that do this better then mine - like shepherd, but the advantage is that you can inject and run this on any website, not just those you have developed yourself, and this is more of an interactive UI for generating the steps, so with that in mind I actually added an export option allowing you to export the steps to shepherd - and various other - formats!