{"id":2533,"date":"2011-03-11T14:38:08","date_gmt":"2011-03-11T20:38:08","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/03\/11\/how-to-get-do-screen-caputre-selections\/"},"modified":"2011-03-11T14:49:59","modified_gmt":"2011-03-11T20:49:59","slug":"how-to-get-do-screen-caputre-selections","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/03\/11\/how-to-get-do-screen-caputre-selections\/","title":{"rendered":"How to Do Screen Capture Selections"},"content":{"rendered":"

\"how<\/a> Recently a reader asked me how to to select a region of a webpage and capture it. What she means by this, she doesn\u2019t want to capture everything on the browser she can see but just a region on the screen.\u00a0 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.<\/p>\n

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<\/a> or PhotoShop<\/a> to create print screens and edit them. Now you don\u2019t even need to have an image editor installed.<\/p>\n

What Tools Do I need to Do Screen Capture Selections?<\/h2>\n

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

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.<\/p>\n

How Do Use Aviary Talon Screen Capture?<\/h3>\n
    \n
  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.<\/li>\n
  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\u00a0 in capture mode. If you move your mouse around the screen you will see cross hairs moving where you move your curser.<\/li>\n
  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.<\/li>\n
  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.<\/li>\n<\/ol>\n

    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.<\/p>\n

    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.<\/p>\n

    How Do I add Arrows and Boxes around Text Fields on My Screen Capture?<\/h3>\n
      \n
    1. On top left side you will see all the different tools you can use in the basic editor.<\/li>\n
    2. To add rectangles, select the rectangle tool.<\/li>\n
    3. On the right site of the screen, you can make adjustments to your tools.<\/li>\n
    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.<\/li>\n
    5. Then select the color you want your rectangles to be.<\/li>\n
    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.<\/li>\n<\/ol>\n

      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.<\/p>\n

      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.<\/p>\n

      \n
      <\/object><\/div>\n
      Screen Capture Using Aviary Screen Capture Plugin<\/div>\n<\/div>\n

      Final Thoughts<\/h2>\n

      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.<\/p>\n

      Image Source: DeviantArt<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      Recently a reader asked me how to to select a region of a webpage and capture it. What she means by this, she doesn\u2019t want to capture everything on the browser she can see but just a region on the screen.\u00a0 She also wanted to add arrows and boxes to those images. You might ask […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[163,14],"tags":[739,738,386,181,378,740,737],"class_list":["post-2533","post","type-post","status-publish","format-standard","hentry","category-blogging-tips","category-tutorials","tag-addons","tag-aviary-talon-screen-capture-plugin","tag-chrome","tag-firefox","tag-plugins","tag-screen-capture","tag-screen-capture-regions","entry","has-post-thumbnail"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-ER","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/2533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=2533"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/2533\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=2533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=2533"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=2533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}