Performing a Browser Screen Capture: Using FireShot for Internet Explorer and Mozilla FireFox

Transcription

1 Performing a Browser Screen Capture: Using FireShot for Internet Explorer and Mozilla FireFox There are times when you are using the HUB that you may find the need to perform a screen captures. These times might include when you are presenting information or even reporting an error that HUB has given you. FireShot This is a free add on for those that use Microsoft Internet Explorer and Mozilla FireFox. The add on will not only create screenshots of web pages, but allows you to annotate them, them, print the screenshot, or export it to an external editor. You can download FireShot at: For Internet Explorer: for Internet Explorer/ _ html For Mozilla FireFox: US/firefox/addon/fireshot/ FireShot in Internet Explorer Once you have downloaded and installed the FireShot add in for Internet Explorer, you ll find it located at the top of your screen as a separate toolbar. Click the FireShot button, FireShot will then take a picture of the entire webpage FireShot in Mozilla FireFox Once you have downloaded and installed the FireShot add in for Internet Explorer, you ll find it located at the top of your screen as a separate toolbar. Click the FireShot button, FireShot will then take a picture of the entire webpage. 1

2 FireShot Menu FireShot also has a dropdown menu that can save you time in your screen captures. By clicking the down arrow next to the FireShot button, you ll be able to bring up the dropdown menu. Any of these menu items will have a fly out menu. If you want to click Edit, your image will open in FireShot s image editor. Number Description Open an existing file stored on your hard drive or a server This option functions very much like the paste function and is only available when you have something either copied or cut to the clipboard This section will take a screen capture of whatever is visible on your monitor. From here you have other options to choose from which you can view below. This section will take a screen capture of the page you are on and turn it into an image. From here you have other options to choose from which you can view below. This will capture everything that is in the browser window. 2

3 FireShot Toolbar From this point on, both the Internet Explorer and FireFox FireShot add ons look and act the same. As a result, we can cover them both together. The toolbar in FireShot looks like the following: Number Name Description Upload This feature allows you to easily upload your screen capture to Facebook or other social media sites Save Save a copy of your image to your hard drive or server space Copy Mail Export Print Open Save Save As Undo Redo Select Shape Drawing Pointer Text Image Options About Tweet Rate Upgrade to FireShot Pro Copy the image to the clipboard to allow you to paste into another software program like Word or PowerPoint an attachment of your image Export your image to a program such as Adobe PhotoShop Print your image Open an image stored on your hard drive or on the server Available only in Pro version Save your image Available only in Pro version Rename an existing image Available only in Pro version Undo the last action you performed Redo the last action you performed Allows you to select part of the screen. From here you can copy that selection, invert the selection, annotate, crop, fill, blue, or other options Allows you to draw a transparent shape around a part of the image and annotate it Draw on your image Draw an arrow to a part of the image and annotate it Add text to your image Add another image(s) to this image Allows you to specify a working directory on your hard drive or server Tells you the version you are working with and how to upgrade Takes you to the social media site Twitter You can rate FireShot If you would like, you can purchase FireShot Pro for $59.95 per license. Pressing this button takes you to the purchase page. 3

4 Capturing an Image To make a quick capture of your screen you can simply click on the button. If you want to capture a page that is long (you need to use the scroll bar to get to the end of the page) and you want to capture the entire page, click the dropdown arrow and click on Capture Entire Page and. You ll then get the fly out menu. Next, click on Edit from the fly out menu. You should now have the image in the FireShot editor. You ll know this because you ll see the FireShot Toolbar (see p. 3). Using the Most Common Tools There are a common set of tools that you will find helpful in your work that you do. 1) The Select Tool This tool is used for a variety of reasons that include cropping, annotating, or blurring parts of your image. a) Click the Select Button b) Next you will notice that your mouse pointer has changed to a cross (+). c) Move your mouse pointer to the top left portion of the area you want to capture, click and hold down the mouse pointer to the bottom right portion of the area you want to capture, then release the mouse. If you ve done this right, you will see a transparent rectangle with dots surrounding it. 4

5 Tools you can use with the Selection Number Description Copying this selection will add it to the clipboard and allow you to paste it to other software programs such as Word or Outlook This unselects your selection and allows you to make a new selection This selects the area of the screen opposite of your selection. In this case, it selects everything in the image other than your selection. This turns your selection into a color and then adds an annotation box with an arrow pointing to your selection. Reduces your entire image to the area that you selected 2) Annotate your image Change the color of your selection area Blur the image where you ve made the selection Make this selection area of your image gray Inverts the colors of the image. For our image we have gray text and a blue background. Click invert and the background will turn gray and the text blue. You can color the edges of your selection Use this tool when you want to mark something as less important or secondary content To annotate your image you can use the Shape tool on the toolbar. a) Select the Shape button b) Click on the upper left corner of where you want to select, hold the mouse pointer down, select to the bottom right side of the area of the image you want, and release your mouse. c) You should now see a selection area with a box with an arrow pointing to the selection area. d) You can move the annotation box simply by dragging it to the spot on your image that is best for you. e) Next, you can type in the beige box by clicking in it and typing 5

6 Another Annotation Tool: Pointer The Pointer Tool. a) Select the Pointer Tool b) Click in an area of the image and drag the mouse INTO the place you want to point to. You should get something like the following illustration. c) Next click in the beige box and type a description of what you are point to. 3) Adding Text to Your Image a) Click on the Text Toolbar. b) Click on the image where you want the text box to be (a beige box will appear) c) Type in the textbox. 4) Saving and ing Your Image When you have completed editing your image, you can either save or your image. Save Image: Click the button to save your image. You will need to select where you want your image to be saved (hard drive or server), name your image, and select what format (.png,.jpg,.gif, etc.). If you plan on using this image again in other documents, it is recommended you save it in a.png format. These type images do not degrade in quality when stretching the image in other documents. Image: Click the button to your image. FireShot will ask you what to send it as. The PNG format is most likely the best format. Click Save. FireShot will then attach the image to a new message. 6