How to Do Screen Capture Selections

4 Flares Filament.io 4 Flares ×

how to do a selection screen capture using Aviary  Screen Caputre Plugin Recently a reader asked me how to to select a region of a webpage and capture it. What she means by this, she doesn’t want to capture everything on the browser she can see but just a region on the screen.  She also wanted to add arrows and boxes to those images. You might ask why someone would want to do this. For bloggers and tutorial creators, this is a common use of screen capturing. For a blogger, knowing how to do selection screen capture quickly is a valuable tool.

In the past a person would have to do is hit the print screen button on the keyboard and open of the image an editor and edit the screen capture. Some people still do this. I use to do that until I found a faster way to do it. Today, you do not even need use GIMP or PhotoShop to create print screens and edit them. Now you don’t even need to have an image editor installed.

What Tools Do I need to Do Screen Capture Selections?

The only tools you need are FireFox or Google Chrome and Aviary Screen Caputre Plugin. I consider this addon a must have plugin  for FireFox and Chrome. I have it installed in my Firefox, Chrome, and RockMelt (yes it works for Rockmelt!) browsers.

You can use this addon by clicking the Aviary button and create a screen capture and do a basic edit on your new image. In the basic area, you can draw arrows and rectangles, crop, rotate, and resize the image to the size you need.

How Do Use Aviary Talon Screen Capture?

  1. In order to get your screenshot, you will need to click on the Aviary Icon and select continue in the login or continue pop up window.
  2. Then you will see your window gray out a little. You can still see the content on the page but the gray out lets you know you are  in capture mode. If you move your mouse around the screen you will see cross hairs moving where you move your curser.
  3. Then all you have to do is left click in the top left corner of the area with your curser and move it across your target area until the whole area you want to capture is captured.
  4. Next click the Save button. After clicking the save button you will get another popup window with options. I generally select save to desktop or click to edit.

If you select the save to desktop option, you have the option to save as .png or .jpg. I generally use .png to save space on the site.

If you choose to edit, the edit screen pops up. This where you can crop, rotate, resize, add arrows, and boxes. Anything else you might want to do will have to be done in the advanced editor.

How Do I add Arrows and Boxes around Text Fields on My Screen Capture?

  1. On top left side you will see all the different tools you can use in the basic editor.
  2. To add rectangles, select the rectangle tool.
  3. On the right site of the screen, you can make adjustments to your tools.
  4. You will need to select the size slider and slide all the way to the left. This will make the lines 1 pixel wide.
  5. Then select the color you want your rectangles to be.
  6. Now start at the top left corner of your target area you want to add a rectangle to and drag it across the target area. Make sure to hold the cursor down as you drag. When you have your area selected, then release the cursor button.

To add arrows, you will do it the same way you add rectangles. But instead of dragging the cursor across the target area you start just off to the side of the area drag the cursor to the target area stopping just before the target area and it the enter button on your keyboard.

Instead of adding print screens, I decided to do a screen cast video. This video does not have sound. At some point I will redo this video with sound. But right now, I do not have a good enough mic to create audio for the screen capture.

Screen Capture Using Aviary Screen Capture Plugin

Final Thoughts

The only downside to a browser screen capture tool is you can only capture images inside the content area. You can not capture things up in the nav and tool bar areas. If you need to screen capture those areas or software, you will need to use an image editor and the print screen button your keyboard.

Image Source: DeviantArt

If you enjoyed this post, make sure you subscribe to my RSS feed!

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Loading Facebook Comments ...

Comments

  1. Looks like a great add-on James. Never did use Aviary before I am currently using Jing for screen capture and putting arrows, boxes, texts and more. It also works great and it is free and standalone. There are however other things that Aviary seems to do that I can not on the free Jing version, so I may just take it for a test drive and maybe use both :) Thanks

  2. I’ve been using Awesome Screenshot on my Chrome browser, brilliant and simple, I’ve also used Aviary when I’ve been using FireFox, both are which very handy plugins for those screenshots we like to do every now and again 😉
    Karen recently posted..Album Review- Remergence – Wide Open SpaceMy Profile

  3. My favorite software for screenshots is SnagIt which I’ve used for years and it just gets better and better. You can download a free trial at http://www.techsmith.com/snagit/

    As a web designer, I use it almost daily!

    Glennette Goodbread
    Premium Web Design and Hosting
    Glennette recently posted..Setting Up Your Google Places ListingMy Profile

  4. the down side is it cannot work without browser….
    foo recently posted..How To Integrate Nivo Slider Into WordPress ThemeMy Profile

Speak Your Mind

*

4 Flares Twitter 0 Facebook 3 Pin It Share 0 StumbleUpon 1 Google+ 0 Buffer 0 Email -- Filament.io 4 Flares ×