[ Print this page ]

Images

Including an image in an HTM page is fairly simple, but first we need one to include. The most likely images you'll need while making a document are pictures of relevant hardware, or screenshots of various software elements. We may need to edit the images a bit as well, but let's start with acquiring them.

Taking a Picture

While taking a photograph for a document, ensure that you have good lighting and a uniform, preferably white, background. This makes removing the background and any further editing we need to do to the picture easy. Take several photographs of each piece to ensure that there is at least one crisp picture to use. Good backgrounds and clear pictures with good lighting are critical to maintaining the professional appearance of a document.

Uploading a picture to your computer will vary depending on your camera, but plugging the camera into your computer will normally allow you to open it's internal storage. Source images should be stored in the projects source folder.

Taking a Screenshot

We can also use the keyboard's "Print Screen" button to capture an image of a computer screen. This is especially useful if you need to take a screenshot of a software program. Bring up the item you'd like to capture, and then press the Print Screen button (which may vary by keyboard). This will capture the screen, which you can then paste into an image editing program like GIMP or Paint. Source images should be stored in the projects source folder.

Editing

There are two primary edits you'll want to do perform on images, cropping and highlighting.

Cropping

In GIMP, the crop tool allows you to select an area and cut away everything else. It appears as a small razor in the toolbar.

To use it, select an area. After you make your initial selection you can pull on individual corners of your selection box to get a cleaner crop. When satisfied with your selection, press enter to crop the image.

Highlighting

An Example of Highlighting

Highlighting allows us to use the shadow and color functions of GIMP to create a nice looking highlight around a section of an image we'd like to emphasize. Image highlighting in all documents should remain consistent, so there is a specific process for this.

Open the image in GIMP
Using the rectangular selection tool, select the section you'd like to highlight as closely as possible.
Press "Shift+Q" on the keyboard. This will activate Quick Mask mode, which shows the non-selected parts of the image covered in red.
Use the pencil tool with a size of 1 to paint in individual pixels to get a more precise selection.
Press "Shift+Q" again when finished with your selection to toggle Quick Mask off.
Press "Ctrl+I" to invert your selection to select all of the image except your object.
Go to "Filters" in the top bar, then to "Artistic", then click on "Softglow."
Set glow Radius to 50.00, Brightness to 1.00, and Sharpness to 0.00. Click Ok.
Go to "Colors" in the top bar, then select "Desaturate." Select Choose shade of gray based on: Lightness, then click ok. This will desaturate the colors of everything besides your object.
Press "Ctrl+I" again to invert selection back to your object.
Go to "Filters", "Light and Shadow", and click "Drop Shadow."
Set Offset X to 0, Offset Y to 0, Blur Radius to 10, and the color HTML notation to "fcff00". Click Ok.
Press "Ctrl+F" five times to duplicate the shadow to achieve the desired brightness.

Saving

Saving in GIMP is a bit different than usual for image files. By default the image will save a .xcf file, which contains all of the metadata about how the image was edited. This is useful if you need to edit the image again at some time. If you are ready to use the image, instead you will want to go to "File" and then to "Export As." Export your image as a .png to the project's images folder. Keep the default settings for the GIMP prompts and click Export.

Including an Image

Now we have an image, but it's not in the webpage yet. The format to include an image is another HTML tag, similar to the ones described in the last section. The tag below was used to display the image on this page.

The src field specifies the image location. In this case, replace "document_creation" with your own project folder, and replace "con_save.png" with your own image name. Title specifies mouseover text. Width is the width of the image in pixels. There is also a height attribute, which controls the height of the image in pixels. If only one of these attributes is set, the image will retain it's aspect ratio as it is resized.