WebDwarf Tutorials banner
WebDwarf logo
Introduction to Images

No need for a separate photo editor! With WebDwarf, you can edit your images right in the work-window. Change the size, color, rotation of an image, add transparency. Create pop-up thumb-nail photo galleries easily.
Image rotation
Rotate images easily by dragging the rotation handles of the image object with your mouse. To rotate an image using the keyboard, hold the control key (Ctrl) while pressing the arrow keys until it is rotated as desired. You can also use the Quick Editor to set a precise rotation. Preview or publish and WebDwarf will automatically generate a rotated replica of the original image as it appears on your workpage. More in the Manipulate tutorial: Rotating, scaling and skewing.

Most objects including images and titles can be assigned transparency. Select the object and assign a shading component through the Quick Editor. Use the transparency slider to set the desired level of transparency. Preview or publish, and WebDwarf will create a new image with the transparency you set. More in the Image tutorial: Adding transparency to an image.

Gradient shading
Shapes can be assigned flat, linear, cylindrical or radial shading  through the Quick Editor. More in the Render tutorial: Gradient fill (or shading).

Anti-Aliasing (smoothing)
Shapes, titles and images can be automatically anti-aliased to produce smooth edges without the need to transfer images from a paint program each time you make a change.

WebDwarf will anti-alias titles and imported images even when they are rotated or shaded. When you publish, text objects and images will automatically be shown with any changes you have made. Does the background color need just a minor change in intensity or hue? All anti-aliased objects will be automatically drawn with the new background. More in the Image tutorial: Anti-aliasing (smoothing) images.
Girl rotated
Girl flipped
Gradient shading
Radial shading
Not anti-aliased
Not anti-aliased
^ click me ^
Create thumb-nail images easily by reducing the size of an image on the workpage. The new image is re-rendered (drawn) at the size it is displayed at, reducing the download time. Using the Link tab in the Quick Editor, if you create a link to a larger image and select "Open link in a new window" the browser will open the larger image in a new window. For the '"click me" link on the left to work properly in preview, you will need to copy the iimage (girl.jpg) from the Clip Art folder to your a folder named "image" in your WebDwarf preview folder -- more in the Image tutorial: Popup images.

Image adjustment
Images can be adjusted to alter their brightness, contrast and colors. Adjustments are applied to a re-rendered version of the original image and will not affect the original.

Use this feature to lighten scanned images, to correct color imbalances or to change the mood. More in the Image tutorial: Contrast, brightness and color adjustment.
Original image
Green shading
Blue shading
More blue shading
Girl scaled
Girl popup
< Tutorials Home
Virtual Mechanics Logo