SiteSpinner Tutorials banner
Virtual Mechanics Logo
Introduction to Images

No need for a separate photo editor! With SiteSpinner, 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.
SiteSpinner logo
Image rotation
Rotate images easily by selecting 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. Or click on the object to select it and simply drag it around. You can also use the Quick Editor or Object Editor to set a precise rotation. Preview or publish, SiteSpinner will automatically generate a rotated replica of the original image.  More in the Manipulate tutorial: Rotating, scaling and skewing.

Any object, including images and titles can be assigned transparency. Select the object and assign a shading component through the Quick Editor or Shading Editor. Use the transparency slider to set the desired level of transparency. Preview or publish, the object will show with transparency. 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 or Shading Editors. 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.

SiteSpinner 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 scaled
Girl rotated
Girl flipped
Gradient shading
Radial shading
Not anti-aliased
Not anti-aliased
Thumb-nails and pop-up galleries
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. When you select "Pop-up full sized image" under the Link tab in the Quick Editor, the original image is automatically opened in a new pop-up window - more in the Image tutorial:  Popup images.

Texture mapping
Texture mapping enables you to assign an image to fill a shape. A Scaled texture will scale the image to the best fit in the shape without distortion; areas that are not covered by the image will be filled in with the shading color. A Stretched texture will stretch the image to fill the entire shape. A Tiled texture will repeat the image without scaling until the entire shape is filled. More in the Render tutorial: Texture mapping.

Transparency mapping
Use transparency mapping to make a certain color, or a range of colors transparent in an image or a shape.More in the Render tutorial: Transparency mapping.

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.
Girl popup
^ click me ^
Transparency mapping
Original image
Green shading
More blue shading
Blue shading