Placing Pictures

From Documentation
Jump to: navigation, search

Placing Pictures

You can enhance your pages by placing pictures in the Layout area and MasterBorder. This section tells how to add pictures and modify their size and appearance.

Choosing an Image Format

To display a picture, most browsers require the picture to be stored in one of the following Web-standard formats:

  • Joint Photographic Experts Group (.jpg) supports 24-bit true color.
  • Graphics Interchange Format (.gif) supports 8-bit, 256-color images. NetObjects Fusion also supports GIF 89, a format for transparency, interlacing, and animation, as well as animated .gifs. An animated .gif file contains multiple images that a browser plays in sequence, adding movement to your pages without browser plugins.
  • Portable Network Graphics (.png) supports any color-depth image.
  • If you try to place a picture that is in .bmp, .pcx, .pct, or .psd format, NetObjects Fusion offers to convert it to .gif or .jpg format. NetObjects Fusion copies the file, converts the copy, and stores the converted copy in the site's \Assets folder.

Adding a Picture

  1. In Page view, choose the Picture tool from the Standard toolbox, and click where you want to place the upper left corner of the picture.

The Picture File Open dialog appears.

  1. Select the image file you want from your hard disk or LAN, select an image already in use in the site from the Image Assets tab or use an image from a remote location on the URL tab. See Managing Assets or Placing Pictures Using the Picture Tool.

You can do advanced image editing such as set the size, color depth, and compression scheme in NetObjects Fusion.

From the Files of type drop-down list, select:

  • Web Images, to see a list of all image files that can be viewed in a Web browser, including .gif, .jpg, and .png.
  • A specific file type, to see only files of that type. You can select GIF, JPEG, PNG, BMP, PCX, PICT, or FPX.
  • All Images, to view all files that are image files.
  • All Files, to see all files in the selected folder.
  1. Make sure Show thumbnail image is selected if you want to preview your image in the dialog.
  2. Make sure Copy to Site's "Assets" folder is checked if you want to keep a copy of the original file in your Assets folder.

If you plan to edit your images, it is recommended you choose to save a copy to your site's "Assets" folder. This will allow you to easily revert to the original image and remove all changes.

Images added to the Assets folder must have a unique name. If you copy an image that has the same name as an existing image in the site's Assets folder, you will be prompted to either rename the image you are adding or continue using the image without adding it to the Assets folder.

  1. Click Open to place the image on the page.

If you select a non-standard Web format, the Unsupported File Format dialog appears.

  • If you convert to .gif, NetObjects Fusion reduces the image to 256 colors.
  • If you convert to .jpg, NetObjects Fusion retains the color information from the original file.
  • If you choose not to convert, NetObjects Fusion positions the image in HTML using the <EMBED> tag. Only browsers that have the appropriate plugin installed can view the image.
  1. Choose the appropriate conversion format and click OK. NetObjects Fusion copies the file, converts the copy, and stores the converted copy in the site's \Assets folder. Both the original file and the copy are listed in Assets view. Only the converted copy is required fro your site, so you can delete the original file.

If the file is in a supported format, the file is not copied and it remains in its original location. The picture and Picture Properties panel appear.

  1. Type a description of the picture in the Alt Tag field.

See Adding and Modifying Alt Tags.

Using the Image Inspector

The Image Inspector offers you the possibility to resize and modify the aspect of the picture before you add it to the page.

  1. In the Height and Width fields, select the desired dimensions.

From the Unit drop-down list, you can choose to display the image dimensions in Pixels or in Percentage.

You also have the option to change the image dimensions from the slider on the Size section. Make the picture bigger by moving the slider to the right and smaller by moving it to the left

  1. Select "Maintain Aspect Ratio" to maintain image height and width proportions.
  2. Rotate the picture to the desired position using the two buttons on the left side of the Orientation section:
    • The arrow oriented to the right rotates the picture clockwise in 90-degree increments.
    • The arrow oriented to the left rotates the picture counterclockwise in 90- degree increments.
  3. Flip the picture to the desired position using the two buttons on the right side of the Orientation section.
    • Click the horizontal arrow to flip the image horizontally.
    • Click the vertical arrow to flip the image vertically.
  4. Make only a part of the picture visible with the Crop option:
    • Click the Crop tool icon. The crop marquee will appear on the selected image.
    • Drag any selection handle to adjust the size of the marquee, enclosing the part of the image you want to preserve. The portion of the picture outside the enclosed part will be cropped.
    • Click the "Apply Crop" button to crop the image.
  5. Click the "Revert to Original" button to return to the original variant of the image. This action will undo any changes you have made to the image during the current work session.
  6. Click the Done button to apply the changes and add the image to the page.

The picture and Picture Properties panel appear.

Note: If you do not want to add the picture to the page, click the Remove button.

  1. Type a description of the picture in the AltTag field. See Adding and Modifying Alt Tags.

Using the Picture Properties panel

In NetObjects Fusion, you can perform advanced image manipulation using the Properties panel. If you chose to Copy to site's Assets Folder, then when you crop an image, tile an image, rotate an image, create a transparent GIF, or add text to an image, NetObjects Fusion generates a new file, referred to as an auto-generated image. The original image is unchanged and is listed in Assets view.

To revert back to the original image file:

  1. In Page view, click on the image you want to work with.

The Picture Properties panel appears.

  1. Click on Revert to Original.

This restores only changes made to the image file, such as cropping or flipping. To restore the original image, add the image from the assets folder.

Warning: You cannot use Revert to Original if you did not select Save a Copy to site's "Assets" folder. See Adding a Picture.

Optimizing Images

Optimization is the process of fine-tuning your images for use on the Web and minimizing the time it takes for the images todownload. You can use the optimization settings in the Picture Properties panel and the file size information in the Optimize Image editor to keep track of and adjust download time while maintaining image quality. See Choosing an Image Format for information on image file types supported. You can optimize your images in 2 ways:

  • Select a common, predefined setting for basic optimization.
  • Preview the image in different file formats and with different file attributes for advanced image optimization.

You may choose (Not optimized) from the Settings drop-down list if you prefer not to optimize your image.

To control the image format using standard settings:

  1. In Page view, click on the image you want to optimize.

The Picture Properties panel appears.

  1. Select an optimization setting from the Settings drop-down.

The following standard optimization settings are available:

Best GIF Best JPG Good JPG Progressive Good JPG Small JPG
Quality 100% 100% 75% 75% 50%
Blur NA 0 0 0 10
Colors 256 NA NA NA NA
Dither Floyd- Steinberg NA NA NA NA
Progressive NA No No Yes No

Advanced Optimization Settings

To optimize your images with more precision or define your own optimization settings:

  1. In Page view, click on the image you want to optimize.

The Picture Properties panel appears.

  1. Click Edit.

The Optimize Image editor appears.

  1. In this editor you set the quality of the selected image. As you make changes, NetObjects Fusion displays the approximate download time for the file.

You may choose to save and apply previously defined settings.See Saving Optimization Settings.

  1. Select the File type.

For GIF or PNG-8 file types, set the color reduction, colors, and dither.

  • Set the color reduction first to change the set of colors available in the color table. Then choose the maximum number of colors to display in the Colors drop-down.
  • Floyd-Steinberg dithering is a common algorithm used to simulate colors that are not available in the color display system of your computer.
  • Select Transparency to create a transparent GIF. See Creating a Transparent GIF.

For JPG file types, set the Quality and Blur. These fields both affect image quality. 100% is the highest quality, 0% the lowest quality.

  • Set the Quality field first. Each setting corresponds to a range of percents. Low corresponds to 0-39%, Medium to 40-75%, High to 76-99%, and Maximum to 100%.
  • Use the Percent field to fine-tune the quality setting.
  • Select Progressive to create an image that displays progressively in a Web browser. The image will display as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely.

As you adjust the settings, the image in the Preview field changes. If the Preview image is scaled down, you can close the editor and check image quality in Page Design view.

  1. Click OK to close the Optimize Image editor.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Saving Optimization Settings

To save your optimization settings:

  1. In Page view, select the image with the optimization settings you want to save.

The Picture Properties panel appears.

  1. Click Edit.

The Optimize Image editor appears.

  1. In the Settings area, click the plus (+) button.

The Save Settings dialog appears.

  1. Type a name for the new output setting.
  2. Click OK.

To remove a custom optimization setting:

  1. In the Settings area, choose the saved setting you want to remove.
  2. Click the plus (-) button.

The setting is removed.

Creating a Transparent GIF

When you place a .gif image on a page, you can make every pixel of one color transparent. Although only part of the image is transparent, it is called a transparent .gif. You can use transparent .gifs to blend an image background with the page background, or to silhouette an image against the page background.

An image with a solid background works best because only pixels of exactly the same color can be transparent. If the image background is dithered, it contains several colors.

Transparency only works with .gifs and pngs. You cannot set a transparency for a .jpg or other image file format.

To create a transparent .gif:

  1. In Page view, select the picture for which you want to create a transparent .gif.

The Picture Properties panel appears.

  1. Click the General tab.
  2. Click Edit to open the Optimize Image editor.
  3. Click the Transparency check box.
  • To make a transparent color opaque, clear the Use color check box.
  • To add a color, use the color picker.

You can also click the Transparency dropper, then click the color in the picture that you want to make transparent.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Resizing a Picture

When you resize a picture and publish the site, NetObjects Fusion changes the HTML <HEIGHT> and <WIDTH> attributes of the image, so the file is displayed in the new size.

  1. In Page view, select the picture you want to resize.

The Picture Properties panel appears.

  1. Click the Geometry tab.
  2. To maintain the picture's scale so the height and width are proportional, select Maintain Aspect Ratio.
  3. In the Height and Width fields, select the desired image dimensions.

You can select to display the image dimensions in Pixels or Pecent from the Unit dropdown.

To return the selected picture to its original size, either:

  • Click on Revert to original in the Picture Properties panel.
  • From the Object or shortcut menu, choose Restore Original Size.

Tiling a Picture

You can create multiple instances of a picture by tiling it.

  1. In Page view, select the picture you want to tile.

The Picture Properties panel appears.

  1. Click the Geometry tab.
  2. Select Tile.
  3. Drag a selection handle to enlarge the box and display more or fewer tiled images.

NetObjects Fusion displays multiple images of the picture in the box. Each image is the size of the picture in the source file.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Rotating a Picture

You can rotate pictures in 90-degree increments.

  1. In Page view, select the picture you want to rotate.

The Picture Properties panel appears.

  1. Click the Geometry tab.
  2. In the Rotate field, select the desired rotation.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Flipping a Picture

You can flip pictures horizontally or vertically.

  1. In Page view, select the picture you want to flip.

The Picture Properties panel appears.

  1. Click the Geometry tab.
  2. In the Flip field, select:
  • Horizontal to flip the image horizontally along the vertical axis.
  • Vertical to flip the image vertically along the horizontal axis.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Cropping a Picture

You can crop a picture to make only part of it visible.

  1. In Page view, select the picture you want to crop.

The Picture Properties panel appears.

  1. Click the Geometry tab.
  2. In the crop area, click on the crop tool icon.

The crop marquee will appear on the selected image.

  1. Drag any selection handle to reduce the size of the box enclosing the picture. NetObjects Fusion crops the bottom and right sides of the picture.
  2. Click Apply in the Picture Properties panel to crop the image.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Adjusting a Picture's Color

You can use the Picture Properties panel to adjust a picture's overall color.

  1. In Page view, select the picture you want to adjust.

The Picture Properties panel appears.

  1. Click the Adjustment tab. You will have the ability to edit a picture's:
  • Brightness to adjust the tonal range.
  • Contrast to adjust overall contrast and mixture of color.
  • Hue to adjust the color and represent a move around the color wheel.
  • Saturation to adjust the purity of the color and represent a move across the radius.
  1. Adjust the color properties.

You can adjust a color property by dragging the slider on the properties panel, or by entering the width directly in the Properties panel.

  • To adjust the color property by dragging the slider on the Properties panel, drag the slider to the right to increase the property, or to the left to decrease the property.
  • To adjust the color property by entering the value directly in the Properties panel, type a number in the correct field.

As you make changes to the color, view the Spectrum bar at the bottom of the Properties panel to get an idea of the color range your image will be displayed in. Also, as you make changes, you can preview the image.

To reset your image back to the original color, set all values to 0.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Creating a Border Around a Picture

You can use the Picture Properties to add a border around a picture.

  1. In Page view, select the picture for which you want to create a border.

The Picture Properties panel appears.

  1. Click the Borders tab.
  2. Click the Border check box to add a border around the picture.
  3. Choose a border style from the Line Style drop-down list.
  4. Click on the color icon to open the Color Picker.

Select a color and click OK.

  1. In the Border field, specify the thickness of the border.

The border color is controlled by the site visitor's browser and the page text color settings. Check the border appearance in the appropriate browsers before publishing your site.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Adding Text to a Picture

You can add text to a picture and format its font, size, and alignment. The text you add becomes part of a new image file when you publish the page containing the picture. When you add text to a picture and publish the site, NetObjects Fusion generates a new file listed in Publish view as an auto-generated image. Your original file is unchanged and included among the site assets. The new file is included in the published site on the server. See Adding Text to a Shape or Picture.

Removing Red Eye in a Picture

You can use the Picture Properties panel to remove red eye in an image.

  1. In Page view, select the picture you want to remove red eye from.

The Picture Properties panel appears.

  1. Click the Red Eye Removal tab.
  2. Click the red eye icon.

The red eye marquee will appear on the selected image.

  1. Drag any selection handle to adjust the size of the marquee enclosing the part of the image you want to reduce the red eye on.
  2. Select the strength and eye color.
  3. Click Apply in the Picture Properties panel to remove red eye.

If you chose "Copy to site's Asset's" folder, you can restore the original image by clicking "Revert to Original Image" on the general tab of the Picture Properties panel.

Editing a Picture's Hotspots

You can edit hotspots from the Picture Properties panel once they have been added using the Links editor. See Creating an Imagemap.

  1. In Page view, select the picture you want to work with.

The Picture Properties panel appears.

  1. Select the hotspot from the current list.

The Current list displays all the selected image's hotspots.

  1. Type a description in the AltTag field.
  2. Click the Link button to edit the hotspot. See Creating Links.