|
|
|
|
|
Modifying Images
In general, ePublisher will automatically transform images from your source document to an optimized version for online distribution. However, if necessary, you can manually modify individual graphics or groups of graphics by applying a graphic style to the specific graphic or graphics you want to control.
The Prototype Style
The Prototype style is the parent to all other styles. When you set a property for Prototype, every other style inherits the value of that property. Thus, you can use Prototype to quickly apply a property change to all graphics within your project.
Creating Graphic Styles
All images are, by default, set to the Default style. If you need to modify any image properties, you can do so through the Default style. However, if you wish to control a smaller set of images, even just one image, you will need to associate a unique graphic style to those images.
|
|
This section only applies to Adobe FrameMaker or MS Word content. The DITA spec requires all graphics to be web ready (.gif, .jpg, .png) therefore the ePublisher Plaform will not generate any DITA compliant graphics |
To create a new graphic style:
|
1. |
From your source document, insert a new image or find the image that you want to associate with a new graphic style. |
|
b. |
Right-click inside of the text box and choose Marker... from the right-click menu. |
|
c. |
From Marker Type:, do one of the following: |
|
|
If the GraphicStyle marker does not exist, choose Edit..., type GraphicStyle as the new marker name, click Add, then click Done. |
|
d. |
In the Marker Text: field, enter the name of the graphic style you want to use. For example, if you want to create a particular file type when you generate output, you may want to name your style JPG or GIF. |
|
e. |
Click New Marker to insert the new GraphicStyle marker into the source document. |
|
a. |
Right-click on the image and choose Format Picture... from the right-click menu. |
|
c. |
Click on Advanced.... |
|
e. |
Click OK and then OK again. |
|
f. |
From the Draw toolbar in Microsoft Word, draw a text box on the image. If a drawing canvas appears, you may delete it. |
|
g. |
To ensure that the text box does not appear as part of your image, make the textbox transparent: |
|
|
Right-click on the border of the text box and choose Format Textbox.... |
|
|
From Fill, choose No Fill for Color:. |
|
|
From Line, choose No Line for Color:. |
|
|
Click OK. |
|
i. |
Click the Marker |
button in the WebWorks toolbar. If the toolbar is disabled, you may need to initialize it by going to |
j. |
Choose GraphicStyle from the list of markers. In the Value: field, enter the name of the graphic style you want to use. |
|
k. |
Click OK. |
|
m. |
While holding down the Shift key on the keyboard, click on the image, making sure that the image and text box are both selected. |
|
n. |
Right-click on the selection and choose Grouping → Group from the right-click menu. |
|
5. |
From the Document Manager, right-click on the document that has the new GraphicStyle marker. Choose Scan Selected from the right-click menu. |
|
6. |
Open the Style Designer. Click on Graphic Styles. The value you used to define the GrapicStyle marker will appear in the list of graphic styles. |
Setting the Border of Images
Borders are lines that can be drawn around any or all of the four sides of an image. In terms of the CSS box model, increasing or decreasing padding for an image will increase or decrease the space between the image and the border.
Keep in mind that not all browsers render border styles the same way; some may not differentiate dotted lines from solid lines, for example, or the size and spacing of the dots in a dotted line may appear differently between browsers and operating systems.
To set the border of an image:
|
2. |
|
3. |
From Border:, choose which sides of the image will display a border. |
|
4. |
From Color:, select a color from the color chooser in the drop-down menu, or, if you know the RGB value of a color, enter that value in the Color text field. |
|
5. |
From Style:, choose the type of border you wish to display (e.g., solid line, dotted line, etc.) |
|
6. |
From Width:, choose the width of the border. |
Modifying Image Size
ePublisher automatically converts images in your source document into Web-ready formats. However, the size of your print image may not be appropriate for online delivery. Because of this, ePublisher Pro gives you several ways to modify the size of your images for online environments, without affecting the original images.
Modifying the Height and Width of an Image
If you know the exact dimensions you want to give an image, you can use the height and width attributes. However, it is important to keep in mind that you will be defining the dimensions of all images that are using the same graphic style. Thus, unless you want all of your images to be, for example, 150 pixels high and 275 pixels wide, this option is not necessarily the most efficient way to modify the size of your images.
For most situations, it is more efficient to define the maximum height and width for an image as opposed to assigning a fixed height and width.
To set the height and width of an image:
|
2. |
|
3. |
Under Size, enter a custom value and specify a unit of measure for Width:. Leave this blank if you do not need to modify the image with this property. |
|
4. |
Under Size, enter a custom value and specify a unit of measure for Height:. Leave this blank if you do not need to modify the image with this property. |
Setting Maximum Height and Width for Images
Most images in your documentation are of variable heights and widths. However, for your online documentation, you need to ensure that all of the images will fit within the constraints of their new medium. In most cases, you will have a maximum height or width constraint. For example, although some of your images may only be 250 pixels wide, you want to make sure that none of your images are larger than 275 pixels wide.
ePublisher Pro provide a way to ensure that you have control over your images; you can set maximum limits for the size of your images. By modifying the size of your images in this way, you ensure that the resized images will retain their original aspect ratio.
To set the maximum height and width of images:
|
2. |
From the Options tab, enter a value for Maximum height and/or Maximum width. The values entered will be measured in pixels. |
Modifying Image Size by Scale
If you are not concerned with actual image size (i.e., the actual width and height are not an issue), you may wish to control image size by using Scale %. This control will allow you to modify the size of all images associated with the modified graphic style in relation to its original size. Modifying images in this way will retain the images’ original aspect ratio.
To resize images based on percentage:
|
2. |
From the Options tab, enter a value for Scale %. The values entered will be measured in percentages. Entering a value of 50 will result in an image half the size of the original. |
Modifying Image Resolution
If the image resolution of your original source images is set for print (usually a resolution of 300 dots per inch [dpi] or higher), you will likely want to reduce the image resolution for online delivery. High dpi images create a larger file size, which means a longer download time for your end users. Additionally, most monitors will only display a resolution of 96 dpi, so anything higher than that will only result in larger file sizes and will not increase the quality of the image on a monitor’s display.
It is important to note that, although the process of transforming an image from 300 dpi to 96 dpi will help optimize your images for online delivery, you will likely experience some significant modifications to the size (height and width) of your image as a result.
Because a resolution of 300 dpi contains more dots per inch than a resolution of 96 dpi, when the transformation occurs, the image will be roughly 68% smaller than the original image.
For example, a 300 dpi image that is 100 x 100 pixels will be 32 x 32 pixels when transformed to a 96 dpi image.
To counter this effect, you can use the Scale % option in conjunction with the Render DPI option to control the size of your image. In the example of transforming a 300 dpi image to 96 dpi, set the Scale % control to 312, which will then generate an image that has roughly the same dimensions as the original source image.
Additionally, you can also use the Scale % and Render DPI controls together with the Maximum height and Maximum width controls to ensure that your images are controlled properly.
To set the image resolution (dpi):
|
2. |
From the Options tab, modify the value of Render DPI to reflect the image resolution for your online images. By default, this value is set to 96. |
Modifying the Position of Images
In most cases, you will probably want to mirror your original source document and leave your images exactly as they are. However, ePublisher Pro allows you to set the position of any image according to CSS rules. Thus, you can visually enhance the layout and presentation of your online documentation to better reflect your content.
To set the positioning of images:
|
2. |
|
3. |
From Type:, define the values you will be using. The effect of the values you use for Left, Right, Top, and Bottom will be defined by the type of position scheme you choose: |
Static – The image will reside in the same location as it would normally occupy in a normal flow, thus, the Left and Top properties do not apply.
Relative – The image’s position is offset from its normal position, but ignores any other objects that are positioned outside of the normal flow (i.e., with the Absolute value).
Absolute – The image’s position is not considered part of the normal flow, which means that it is not considered in the layout of objects that follow (i.e., Absolute images do not affect objects using the Static or Relative value).
|
4. |
From Left:, enter a custom value and unit of measure. This property specifies how far an image’s left edge is offset to the right of the left edge of the image’s containing block. Percentages refer to the width of the containing block. Leave this blank if you do not need to modify the position with this property. |
|
5. |
From Top:, enter a custom value and unit of measure. This property specifies how far an image’s top edge is offset below the top edge of the image’s containing block. Percentages refer to the height of the containing block. Leave this blank if you do not need to modify the position with this property. |
|
6. |
From Right:, enter a custom value and unit of measure. This property specifies how far an image’s right edge is offset to the left of the right edge of the image’s containing block. Percentages refer to the width of the containing block. Leave this blank if you do not need to modify the position with this property. |
|
7. |
From Bottom:, enter a custom value and unit of measure. This property specifies how far an image’s bottom content edge is offset above the bottom of the image’s containing block. Percentages refer to the height of the containing block. Leave this blank if you do not need to modify the position with this property. |
|
8. |
From Float:, set this value to Left, Right, or None. To float an image means that you have shifted it to the left or right on the current line. This may mean that content may flow along an image’s side (or be prohibited from doing so by using Clear). If an image spans the width of an entire page, you may not see any noticeable change unless you assign an appropriate width (i.e., a width that is less than the width of the HTML page). Leave this blank if you do not need to modify the position with this property. |
|
9. |
Clear: This property indicates which sides of an image may not be adjacent to an earlier floating box. When the property is set on floating images, it results in a modification of the rules for positioning the float. Leave this blank if you do not need to modify the position with this property. |
Left – The top margin of the image is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
Right – The top margin of the image is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
None – There is no constraint on the image’s position with respect to floats.
Both – The image is moved below all floating boxes of earlier elements in the source document.
|
10. |
Display: This property controls how CSS boxes are generated for the selected image. More specifically, the Display property specifies the box’s type. Leave this blank if you do not need to modify the position with this property. |
None – This value causes an image to generate no boxes in the formatting structure (i.e., the image is not displayed and is treated as though it doesn’t exist).
Block – This value causes an image to generate a principal block box.
Inline – This value causes an image to essentially take on the layout properties of the previous element.
List item – This value causes an image that would not ordinarily output list-item output (e.g., a bullet or a number) to include a list-item output if it is inside of a list.
|
11. |
From Z-Index, enter an integer (negative values are allowed), which corresponds with the position of the image on the z-axis. Elements with a lower value (e.g., 1) will be displayed behind other elements with a higher value (e.g, 2). Leave this blank if you do not need to modify the position with this property. |
Modifying the White Space Around Images
There are two different ways that you can adjust the white space around an image: with Margin or with Padding.
In terms of the CSS box model, modifying the padding property will adjust the space inside of the border area; that is, if you have created a border (or background color) for an image and you increase the size of the padding, the border will, in effect, move away from the center of the image.
Modifying the margin property will adjust the space outside of the border area; that is, if you have created a border for an image and you increase the size of the margins around it, the border will remain the same distance from the center of the image, although the position of the content may be altered since there will be an increase of white space between the modified edge of the image and other elements.
To set the margin of an image:
|
2. |
|
3. |
Enter a value and select a measure of unit for the Left, Right, Bottom, or Top margin. |
To set the padding of an image:
|
2. |
From the Properties tab, click on Padding. |
|
3. |
Enter a value and select a measure of unit for the Left, Right, Bottom, or Top margin |
Setting Color Bit Depth
The range of colors available via digital computer graphics is normally expressed in terms of bit depth. The expression refers to the number of bits of data carrying the color information. Current common levels of graphics include 8-bit and 24-bit color. In general, the more bits of data, the more colors that will be available.
This setting is only applicable to GIF and PNG images; JPG images will always generate 32-bit images.
To set the color-bit depth for GIF and PNG images:
|
2. |
From the Options tab, choose a value for Color bit depth from the drop-down menu. |
Choosing a Graphic Format File Type
By default, all images in your source document, regardless of what file format they are in originally, will be transformed to Web-ready images, specifically JPG images.
However, in some instances, it is desirable to use other image formats for delivery to online environments. You can choose GIF images, which can sometimes yield similar quality images as JPG, but create smaller files sizes. GIFs can also create transparent colors.
You can also create PNG images, which combine some of the better qualities of both JPG and GIF; however, this file format is not as widely supported by browsers as the other formats.
To choose the file format type for online images:
|
2. |
From the Options tab, modify the value for Format. Choose either GIF, JPG, or PNG. |
|
3. |
Enter the proper file extension for Output file extension in accordance with your chosen file format: .jpg for JPG images; .gif for GIF images; .png for PNG images. |
Setting JPG Image Quality
If you are creating JPG images as part of your output, you can modify the quality of the images by adjusting the JPG Quality property. This will give you some control over the quality of the image (i.e., ensuring that it appears as you desire), while simultaneously influencing the size of the file. Higher-quality images will result in a larger file size (and thus a longer download time for the end user).
To set the JPG image quality:
|
2. |
From the Options tab, modify the value for JPG Quality. Values entered are based on percentages. A value of 100 would be the highest quality (mimicking the original image) and will result in the largest file size; the default value is 75. |
Creating Grayscale Images
ePublisher provides an easy way to transform your original color images into grayscale versions for online viewing. This is done by removing the color saturation of the original images when those images are prepared to be delivered with your online content.
|
|
You will see color versions of your images in the Preview pane, as ePublisher Pro uses the original source images to generate the preview more quickly. |
To create grayscale images:
|
2. |
From the Options tab, modify the value for Grayscale to Enabled to create grayscale images or Disabled to replicate the color properties of the original source images (if the original source images are grayscale, choosing Disabled will not add color to these images). |
Setting Image Transparency
In some images, it is desirable to have a color set to transparent. For example, if your source document has a white background, images with a white background will essentially appear as though they do not have a background.
If your online environment has a different color background, the background of the image suddenly becomes obvious. However, if you enable the transparency option in ePublisher Pro, the white background will be transformed into a transparent one, thus mimicking the behavior and layout of the original source image.
To set an image transparency:
|
2. |
From the Options tab, modify the value for Transparent to Enabled to transform all white regions of an image to transparent. |
