Multimedia and special effects


Image basics

Image file formats

GIF (Graphic Interchange Format)

An 8-bit color format that can display 256 colors and is useful for images with a limited range of color. GIF images support the transparent attribute. They are best for grayscale photo­graphs, cartoons, small icons, buttons, bars, lines, and bullets. They can be interlaced and animated.

JPEG (Joint Photographic Expert Group)

JPEG format is commonly used to display photographs and other continuous-tone images in HTML documents. If you use images with 256 colors or more, use JPEG format. JPEG files have either a .jpeg or .jpg filename extension.

BMP (Windows Bitmap)

The standard bitmap image format intended for Windows, used in WinHelp applications. Bitmap images support up to 24-bit color. When you import WinHelp projects into HTML, the bitmaps are converted into GIF or JPG format. You can use bitmaps and icon formats (ICO files) when you add link controls or HTML Help controls (custom buttons.)

MRB (Multi-Resolution Bitmap)

A Windows Help image format that contains an image saved in different screen resolutions in a single file. The program imports these files from WinHelp projects and converts them into GIF images.

WMF (Windows Metafile)

A vector graphics format intended for Windows systems. WMF files are commonly used as clip art for word-processing applications. The program imports these files from WinHelp projects and converts them into GIF images.

PNG (Portable Network Graphics)

A bitmap image format like GIF. The most recent versions of Netscape Navigator and Micro­soft Internet Explorer support PNG.


Create a stationery watermark effect by displaying background colors and images from the Borders And Shading dialog box.

When you select an image, the Cable Drum button appears cable_drum.png. Use it to link topic items (such as images, text, and tables) with another topic item, and assign a Dynamic HTML effect to the connection.

When you import a Microsoft Word file or an HTML file, all images are imported with the file (images must be in anchored frames.)

note:   If you generate WebHelp Pro or WebHelp output, use GIF or JPEG files.

Locate images

Use the Graphics Locator to scan hard drives and folders for image files, view thumbnails, and copy files.

1)In the Toolbox pod, double-click the Graphics Locator graphics_locator.png.

2)Select the graphic file format to search for.

3)Enter the path for the search or browse to a new location.

4)Click Search.

Copy an image

1)In the Toolbox pod, double-click the Graphics Locator button graphics_locator.png.

2)Select an image from the Image Files list.

3)Browse to a destination.

4)Click Copy File.

View an image

To view an image, you associate the filename extension with an application:

1)In the Project view, select the Images folder.

2)Right-click an image.

3)Click View.

4)Select File > Options.

5)Click the Associations tab.

6)Click Add next to File Associations. Enter a filename extension.

7)Click Select. Browse to the application to use for editing and viewing the file type.

Add an image to a topic

You can insert files with the following filename extensions: .gif, .jpeg, .jpg, or .bmp.note:   For Web-based Help, use GIF or JPEG files.

1)In the Design Editor, select a location for the image.

2)In the toolbar, click the Insert Image button InsertImage.png.

3)Do either of the following:

Click the Browse button browsebut.png to browse to a file.

If the image file is in the project, select a folder from the Images In Project Folders pop-up menu. Select All Folders to see all images in the project.

4)Click OK.


For an image used in the project, drag it from the Project Manager\Images folder into the topic.

To add predefined images, click the Gallery tab in the Image dialog box, select a category, and select the image. To add it to the project, click OK.

You can paste screen captures into the Design Editor without using a third-party image-editing tool. The images are saved as either GIF or JPEG files. Press Alt + PrtScr to capture the active screen.

Add a RoboScreenCapture image to a topic

Simultaneously create and add images.

1)Move the cursor to a desired location in the Design Editor of a topic.

2)Click the Insert ScreenCapture button InsertScreenCapture.png on the Object toolbar. The Insert ScreenCapture dialog box appears.

3)Enter a filename for the new image.

4)Select a file format.

5)Click OK. RoboScreenCapture opens and RoboHelp is minimized.

6)Select Capture > Active Window or any desired capture. The new image appears in the blank area.

7)Click Save Save.png.

8)Close RoboScreenCapture. The Image dialog box of RoboHelp for HTML appears.

9)(Optional) Resize the image or place borders around it.

10)Click OK.

Remove an image from a topic

To remove an image from a topic, in the Design Editor, select the image. Click the Delete button. The image remains in the Images folder.

To remove an image from a project, delete the file from all topics. The image is removed from the Images folder.

Edit an image in RoboHelp

1)In the Design Editor, select the image to edit.

2)Right-click the image and choose Image Properties.

3)Set options:

Text Wrapping

Select the alignment of the image with the surrounding text.

note:   If text wrapping occurs around an image, then the image cannot be aligned. If text wrapping is set to None, then the image, or the line it is on, can be aligned.

Screen Tip

Enter text to display when the user hovers the cursor over the image. Typically, the screen tip text is the image title.

ALT Text

Enter the text to display when the image cannot be displayed (perhaps because users have disabled images in their browsers). Typically, ALT Text (alternative text) should contain a crisp description of the image.


Click to set the dimensions of the image in pixels. In the Size dialog box, select Maintain Aspect Ratio to maintain the height to width proportion.


Click to specify the space between the image and the text. You can specify the same width for the margin on all sides or a different width for left, right, top, and bottom margins.


Click to add a border to the image and specify a style.

Edit an image with RoboScreenCapture

1)In the Design Editor, select the image to edit.

2)Do one of the following:

Select Edit > View > Image.

Right-click and select Edit with RoboScreenCapture.

3)Edit the image.

4)Click Save. note:    See RoboScreenCapture Help for more information.

September 30, 2016

Legal Notices | Online Privacy Policy