Professional and Affordable Web Design
0800 080 5401
Using Faststone Capture to screen capture and edit images.
In this tutorial we are going to show you another simple solution to a common problem. How do we select part of a website, take a picture of it, and add notes?
Our clients may find this useful if they are having a website designed, need areas of their sites upgraded, or simply wish to show someone a part of a website.
We are going to be demonstrating a single but very powerful utility published by Faststone Soft called “Faststone Capture”
The Software Package (Downloading and installing)
We need to download and install the software package ready to work through this tutorial.
This fantastic package is provided under a “Shareware License” meaning it is free to download and try for 30 days after which time you will need to buy a full license to meet with the developers requirements. Cost is approx. £15.00.
To download the package please visit the developer’s web site located at www.faststone.org.
As you can see the developer currently offers 4 packages (all available for instant download); and in an earlier tutorial we will covered “Faststone Photo Resizer” dealing with file size renaming and watermarking of digital photographs.
If you click Download on the correct software package you will be taken through to a new screen allowing you to select the file format that you wish to download.
In this instance we are going to click the first option “Download exe”. Once clicked your browser might prompt you to accept the download. Once accepted the download should take only a few minutes to download if you are connected to the internet on an average broadband connection.
Now you have the package downloaded, you need to run the installation file that is now on your computer; depending on your browser settings this could be stored in several locations; in my case the file has been saved to the desktop.
Double click on the installation file and follow the instructions to complete the installation.
Using the software
With the Software installed, we now need to launch “Faststone Capture “ which should be located within your start menu or on your desktop.
Once the program loads you will see a small toolbar open on your desktop, as shown below (with exception to the drop down)
Lets examine the tools available within this software package. I have labelled them as Capture Buttons (Input).
Capture Active Window (1st icon on the left)
When you click this icon, the program will take a screen grab of your whole screen.
Capture Window (2nd icon on the left)
When you click this icon the program will allow you to select the window you want to capture, as you move your mouse around your screen the capture window will highlight in Red.
Once you left click, the software program will capture the highlighted window.
Capture Rectangle Region (3rd icon on the left)
When you click this icon the tool bar will disappear, leaving you with a cross hair on your screen and a magnified area. This shows you a zoomed in version of the area your cross hair is positioned over.
Simply take the cross hair to the top right of the image you wish to capture and left click, once clicked the cross hair will disappear. Drag the rectangle down to the furthest bottom right section you wish to capture; once clicked the software will grab the screen that falls inside the rectangle.
Capture Freehand Region (4th icon on the left)
When you click this icon the program will display a small lasso and once again a magnified window helping you to pinpoint the correct area.
Move the Lasso into the first position and then left click, move your mouse around the object you wish to capture and left click once again, this will place a red line between the two points; continue this until you have completely encompassed the object you wish to capture ending up at the first point you clicked on – the lasso will then change to a small circle to indicate that you have selected the area you want to capture. Once clicked, the software will capture everything that falls within the area you have circled.
Capture Full Screen (4th icon on the left)
When you click this icon the program will take a screen grab of your whole screen.
Capture Scrolling Window (1st icon on the left)
This tool is very handy when you want to capture a window that is longer than your computer screens resolution. Once selected, move your mouse into the window you wish to capture and the software program will highlight the window in red.
Once happy click anywhere within the screen area and the software package will automatically scroll downwards capturing the full length of your window.
Once your screen has been captured...
Once you have captured the correct area, the software will automatically transfer your screen capture into a new window (as seen below
The image above has been edited to give you a better understanding of the software.
Number 1: As you can see with this screen capture we have taken a rectangular screen capture of the main Google home page .
Number 2: At this stage we can simply save the image. Saving the image will be detailed at the end of this tutorial.
Number 3: This powerful software application allows you to draw notes on your screen shot – as we have with the above example. Click on the Draw icon and the software package will then take your screen capture into a new screen (as shown below)
The Draw function allows you to make annotations on your screen capture, helping you to explain your ideas.
Number 1: This tool allows you to draw a rectangle that will hold text that you wish to type on the screen as shown with “Google Screen Shot”.
Number 2: This tool allows you to draw an arrow – as shown in the above screen capture.
Number 3: This tool allows you to draw a coloured rectangle around an area you wish to highlight.
There are many other tools for you to explore on this page. In this tutorial we have now finished our edits, and will return to the original screen.
When finished, return to the main window
Once finished, click Ok found in the bottom right hand corner of the screen. The software will return you to the main window with all of your edits visible. (As Shown Below)
Saving your work
Now we have made all of the required edits we need to save the image, ready to email or compile into a document.
On the top navigation bar you need to select “Save As” (2nd from Left) this will the display a new screen (shown below)
Saving the image is the final stage to a successful screen capture.
Number 1: This section allows you to change the files name
Number 2: This section allows you to edit the file type – We would recommend you change the default “PNG” to “JPG”.
Number 3: Simply click save and the program will exit leaving the file on your hard drive.
Tutorial Finished :)
All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.
Make a Comment
See Full Portfolio Some Of Our Work
Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...
County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...
Customer News & Resources
At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.Introduction to sitemap.xml
Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »Center a web page in CSS
One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »