V2 supports several image file formats including PNG, JPEG, GIF and BMP. To load an image select the Mona Lisa button on the component (left) toolbar or select the Image File command in the Object menu. This will open the standard File Dialog. Navigate to the desired directory to locate the image you wish to import, select it and select OK to exit the dialog. The image will be displayed at its actual resolution at the center of the screen.
Select the Mona-Lisa button or press Ctrl-I to open the Open Image File Dialog.
Navigate to the /clipart/ directory where you installed the program.
Select the file "Arrowside-1.gif". You should see a red arrow in the Preview window. Select OK to load the image.
The arrow will be positioned at the center of the work window. Use your mouse to move the arrow to any location on the screen. If you wish, you can also stretch the image on the X and Y axes with your mouse.
When you Publish your project using the Gather Option, the original image file will be copied to the Web Site or to the output directory if it is not being re-rendered. If it is being re-rendered, the rendered copy will be transferred instead.
Rendering an Image
Web Engine V2 and SiteSpinner V2 can either use the original image that you have loaded or they can re-render it to provide numerous additional features. Re-Rendering an image provides the following capabilities:
The ability to skew and rotate the image to any angle
The ability to anti-alias a rotated image
The ability to add transparency to the image
The ability to generate a thumbnail of the image
The ability to enhance an images color, brightness and contrast
Creating Thumbnails and Image Galleries
If the Quick Editor is not visible, select the Quick Editor icon on the file toolbar above the work-window (or press Ctrl/Q).
Click on the arrow that you loaded to select it. Select the Object tab of the Quick Editor. Make sure that 'Re-Render' is checked - this will cause the image to be scaled at whatever resolution it is being displayed at.
Scale the image smaller and Preview with the single > preview button or by pressing the F9 function key. The image of the Arrow will have been re-rendered at the smaller size.
When you publish, this smaller image will be transferred to your Web Site.
To create a link to the original image, go to the Quick Editor and select the 'Link' tab. Check the 'Pop up full sized image' check box. Now, when you click on the thumbnail image, the original image will open in a new browser window. Furthermore, if you use the Gather option when you Publish, the images will be uploaded to your site automatically.
Rotating and Skewing an Image
When the Thumbnail button is checked, the Skew and Rotate boxes will also be highlighted.
Rotate the arrow to any angle by either holding the Ctrl Key down on your keyboard and pressing the Up or Down arrows or else use the Up/Down arrows adjacent to the Rotate Box on the Quick Editor. You can also enter an angle directly into the Rotate box in the Quick Editor.
Use the Skew arrows on the quick editor to Skew the Image on the horizontal and vertical axes.
Return the Skew values to zero.
Adding Transparency
You can make an image transparent by adding shading. Only the transparency operation will be applied to an image Object.
Select the picture of the leaves at the left and then select the Shading Dialog (Shd) in the quick editor. If it asks you to "Create a new Shading definition?" say yes. If it does not ask, select the "New" button to add shading to the Image.
Use the Transparency slider to adjust the transparency of the image.
Note that you should not place a transparent Object over a Text Object when publishing HTML since it will produce erroneous results. This is not a problem when publishing SVG.
Brightness, Contrast and Color Enhancement
(not available in Web Dwarf V2)
Images can be enhanced to change their brightness, contrast and color levels.
Make sure the Quick Editor is visible and check the Hi Render work window box so that the color enhancements will be visible in the editor. When the Hi-Render box is not checked, the color enhancements will still work but will not be visible until you Preview or Publish.
Select the image of the leaves at the right and select the Shading Dialog in the Quick Editor.
Say yes if asked to assign Shading or select the 'new' button to assign a shading component.
Select the Brightness button and use the RGB sliders to adjust the relative brightness of the Red, Green and Blue components. Levels from 0 to 127 will make it darker. Levels from 127 to 255 will make it brighter.
Select the Contrast button and use the RGB sliders to adjust the relative contrast of the Red, Green and Blue components. Levels from 0 to 127 will reduce the contrast. Levels from 127 to 255 will increase the contrast.
Adjust the sliders again to see the effects.
Exit the the geometry editor. The color enhancements will not be visible in the work window unless the Hi-Render option is enabled. Try toggling it on and off to see the effect.
Enhancements are only applied to a re-rendered version of the image. The original image will not be effected.
Anti-Aliasing (smoothing images)
(not available in Web Dwarf V2)
A rotated or skewed image may display significant aliasing (jagged edges) depending upon the angle it is rotated to. This can be minimized by enabling the Anti-Alias operation. You can see the effect of anti-aliasing in the work window if the Hi Render option is enabled but this may cause the Work Window to appear sluggish when a complex project or a slow computer is being used. Note that anti-aliasing cannot repair an image that already displays aliasing.
Select the leaves and use the Quick Editor or keyboard to rotate the image to approximately 10 degrees.
Check the Anti-Alias box in the Quick editor.
Toggle the Hi-Render box On and Off the see the effect of anti-aliasing on the arrow.
Try rotating the image with the Hi-Render option on and off to see the effects of anti-aliasing at different angles.
Hi Render will automatically be enabled when you Publish or Preview your project.
