SiteSpinner Tutorials: Add Straight Shapes to Web Pages

Straight Shapes

See first: Introduction to Shapes.

This tutorial deals with how to make straight shapes on your pages -- here we cover:

Preamble
Rectangle
Rounding corners off
Add color to shapes
Rounded buttons as tabs
Polygon
Vertex Editor
Extrude -- a new term
BIG CAUTION (extrude)
Linear Extrusion checkbox
Adding and deleting points with the Vertex Editor
Apply and Restore buttons
Other polygon shapes

Preamble

The geeky types may call it "Vector Geometry" -- a vector is a line that has a direction. But we'll stick with "Shapes". The objects above illustrate some of the different types of straight shapes possible: rectangular, and polygon. The star, triangle and lines are just special cases of the polygon.

The curvy shapes have their own page -- circular (or elliptical) and curve (or path). But here, we'll concentrate on the straights. You'll also find rectangles with rounded corners on this page.

For this tutorial, turn the snap grid off -- this will allow you much finer adjustments. Or, use the Shift key to disable it temporarily.

Rectangle

Create a rectangle object by selecting the rectangle on the Tools toolbar at the left.

Click your workpage where you want the rectangle to be placed.
SiteSpinner will ask for the size of the rectangle
If you know the size you want, enter the values in pixels and click OK
If not, just click OK -- you can easily resize later
The square or rectangle will appear on your workpage where you clicked
Use your mouse to move it to a convenient location for editing. Drag any corner or side to change the square into a rectangle, or to resize
Hold the Ctrl key down to maintain the proportions while you drag.

Rounding corners off

A vertex is a corner of point in a shape. And guess what? There is a Vertex Editor to change any of them.

To round the corners or the rectangle, select the Edit Object Vertices button -- towards the top left of the left toolbar. When selected, the rectangle will display little black controls at the top left and bottom right corners.

Image 1 shows the rectangle made, the Vertex Editor selected, and the mouse cursor approaching the top left corner.

Image 2 shows dragging the top left "x" with the mouse to the right. Notice how the last selected point shows as a little red square. Also notice that there is no visible effect on the rectangle yet.

Image 3 shows the treatment for the other little "x" in the top left corner. This time we are dragging the x downwards. The rounded corners have appeared.

Image 4 shows dragging a corner to resize the rectangle.

Think of the little x as "the place on an edge where the rounding is to start". If you move one x and leave the other right on the corner, the rounding for that edge will start right on the corner. You will see no rounding then, because that is the same as no rounding at all. To see some rounding you have to move both x's in from the corner.

The little red rectangle indicates the last little control point that was active.

The circle in the center is the "origin" used for scaling and rotations. You can drag this around to shift it.

Don't forget the zoom -- that can make these operations easier.

Make sure you have snap grid off -- this will allow you much finer adjustments.

To deselect the Vertex Editor, click the Object Select button to the top right of the Tools toolbar.

Try all this out for yourself -- there's no substitute for practice!

Add color to shapes

Enhance any shape by adding color.

Use the Shading Editor to fill an object with a flat or gradient fill color or a scaled, stretched, or tiled image. The Quick Editor > Shading tab has similar but more restricted operations.

Modify any shape by adding or removing a border. All shapes have a starting border of one pixel width. You can change this width in the:

Quick Editor > Outline tab where it is called Thick for thickness
Geometry Editor > Outline tab where it is called Line Width

You can also set the border color in the same tabs, but you are limited to flat colors only.

Rounded buttons as tabs

If you want to use tabbed navigation on your pages, use rounded rectangles as tab buttons:

Starting with a basic rounded rectangle
Give it a shade (button shown above)
Clone it as many times as required to make a row
Hide the bottom edges of the buttons with a rectangle of the same shade

Polygon

A polygon is a many-sided figure with "many" for us here being one or more! Create a polygon as a series of connected points. As you create each point, a line to the potential next point will rubber band from the last. There are two modes:

Normal: move the mouse to the next point and click when satisfied with its location.
Freehand: hold the left mouse button down and move the mouse. A new point will be created every 25 pixels or so. Control this value by the Freehand Draw Resolution in the Workspace Guide/Display Options.

There are two kinds of polygon, open and closed:

Closed: the last point will automatically connect to the first
Open: there will be no line connecting first and last points

Examples of both types are on the right.

Set the kind of polygon from the Polygon right-click menu shown above or from the Geometry Editor > Outline tab, or from the Vertex Editor.

Drawing will stop when you:

double-click the last point (giving you an open polygon); or
select one of the stop options from the Polygon right-click context menu

Having created the polygon, you can adjust the position of each point by selecting the Vertex Editor. You can then move the polygon point control boxes to any desired location. First click on on the vertex to select it -- it should turn red. Then you can move the vertex by:

The normal drag-and-drop
Using the Align Bar to snap the active vertex to a tab position
Using the keyboard arrow keys to nudge the active vertex to a precise position

Remember the active vertex is the one with the little red square.

Vertex Editor

The Vertex Editor has two faces. Until now, we have been looking at its public face. To access its private face, select the main menu Object and check the item Show Vertex Editor. Now whenever you click on the Vertex Editor button you will have some added features available (shown on the right below).

You can also activate the Vertex Editor from the Quick Editor > Outline tab.

These extra functions are available only for curves and polygons.

Extrude -- a new term

When you squeeze toothpaste that's an extrude. Squeeze horizontally onto your toothbrush (that's X direction). Squeeze vertically on the wall (that's Y direction). Children -- ask an adult first! If you twist the tube as you squeeze, you Rotate through an Angle that depends on the amount of twist. If you could adjust the size of the nozzle you could Scale the extrusion up or down. Number of Copies is like the amount of toothpaste you squeeze.

The same ideas apply when you extrude shapes. The starting shape is the nozzle. You can make copies of the starting shape along the X or Y directions. You can rotate -- progressively twist each new copy. You can scale -- make each new copy bigger or smaller. You can make many copies -- that's when things start to get interesting.

BIG CAUTION (extrude)

An extrude operation can involve many thousands of points, so can keep your computer very busy. It can appear to have locked up, and you may eventually feel the need to reboot. For this reason, make sure you save your work before making or editing complex images.

Try the following steps (first saving this project if you want to!). Start with a simple polygon like a triangle:

Set the number of copies to 2 -- keep it simple to start
Click the Rotate button in the Vertex Editor and see the effect. Change the Angle slider.
Click the Move button to do the same thing for movement in the X and Y directions. (Change the Move X and Move Y sliders)
Click the Scale button for scaling (Change the Scale X and Scale Y sliders)

The pictures below show some examples of this:

When you want finer adjustment, You may find it convenient to nudge the Vertex Editor sliders with your keyboard arrow keys:

Click on the slider to select it. It should show a little dotted box around it
Press the arrow keys

Or you can enter a number directly into the box alongside the slider.

The end effect of any extrusion is to make a more complex polygon from a relatively simple one.

Linear Extrusion checkbox

There are two types of extrusions. The normal ones you have been using until now (non-linear) and the linear ones, set by the Linear Extrusion box in the Vertex Editor.

Normal -- the space between copies changes as the number of copies changes. The two endpoints are fixed in distance or angle. Increasing the number of copies squeezes more copies into the same distance.

Linear -- the space between copies is equal regardless of the number of copies. There are no fixed endpoints, so you can, if not careful, extrude way off the edges of your screen. (And make your computer very slow!)

The easiest way to see the difference is to make a sloping line (two point
polygon) on the left side of your page and select the Move mode in the Vertex
Editor. Move the Copies slider from 0 to 10 and back Repeat this in both modes.

Angle works similarly. The maximum rotation you can apply is 360 degrees (full circle). In normal mode, the extruded copies are distributed evenly between 0 and 360 degrees. In linear mode the total rotation from endpoint to endpoint can greatly exceed 360 degrees.

You will see the effect on scale better with a triangle.

Adding and deleting points with the Vertex Editor

All the points are connected. All are numbered roughly in the order in which you created them. If you add or delete points, SiteSpinner adjusts the numbering so that the points run in sequence from one end to the other. To find the ends, check the box Open End, and a gap should appear between the two ends.

The bottom half of the Vertex Editor is for editing points on the polygon. To edit a point, first select it with your mouse by clicking on it. It will display a little red box to show it is selected -- i.e., the active point. Then:

Move a point (method 1):

Drag it

Move a point (method 2):

Enter the new X and Y coordinates in the point boxes
Click Apply.

Delete a point:

Click the Delete button.

Insert a point:

Select the point just before where you want to make your insertion
Click Insert
This should create a new point, now red very near to the first point
Drag the point to its the location you want.

Apply and Restore Buttons

There are two buttons which have related functions:

Apply: click Apply to remember the current changes. Restore will restore to the last applied version or the original is no save was made
Restore: click Restore to revert to the original (or last saved) version of the polygon or curve

If you are doing something that involves a number of steps, you may wish to Apply your changes periodically. When you know you don't want go back. This sets the new Restore point -- if you click Restore, this will revert the polygon to the state it was after the last Apply.

Other polygon shapes

There are other shapes available which are just pre-made polygons:

Star
Triangle
Horizontal line
Vertical line.

To access these shapes, use the main menu items:

Object > Shapes; or
View > Toolbar Options ... > Customize. This allows you to put the extra shapes on the Tools bar. More on Toolbars. Then select the shape from the Tools bar.

To re-scale these or any shape to the size you want:

Click one of the arrow buttons at top left on the tools toolbar
Drag an edge or a corner
If you want keep the same proportions (aspect ratio), hold down the Ctrl key as you drag.

A line theoretically has no short dimension so don't try to scale it across its short dimension.

See also:
Curvy Shapes tutorial