A Creative Commons Image Search will point you to several sources of open images including those in Google Images, Flickr, Pixabay, and more.
You can find open icons at Font-Awesome or resize square images from other sites. Most icons are 250x250.
Free tools like Jing can make screen captures easy, but you can also use the Print Screen function of your computer
First, find a webpage (or part of a page) that you want to capture as an image. PubMed is being used for this example.
It can be helpful to magnify the screen display before capturing the image. Magnifying helps keeps the captured image sharp and allows text to become more visible when you need to reduce the captured image size to fit it into your guide.
To magnify the screen display of your selected webpage click CTRL and + (Ctrl +) at the same time until image is the desired size, or hold CTRL and roll your mouse wheel toward the screen.
The PubMed image below has been magnified 3 times the size of the one above the keyboard image. Some of the information listed on the bottom of the first image is missing from the magnified image. The font is more pronounced on the page and very clear in comparison to the previous image at normal size.
Once the screen is magnified you are ready to capture the image. We do this by using the CTRL and Print Screen buttons. Press these buttons at the same time to capture an image.
This is intended to be a rough guideline for the maximum width of images for the various column sizes so that the users browser doesn't have to resize the image and waste bandwidth downloading a massive image.
Column Percentage | Pixel width for images |
---|---|
75% | 698 pixels |
50% | 448 pixels |
33% | 281 pixels |
25% | 198 pixels |