SiteSpinner Pro Tutorials banner
< Tutorials Home
SiteSpinner Pro logo
Fat vertical line
Medium vertical line
Polygon
Thin vertical line
Thin vertical line
Rounded rectangle
Star
Triangle
Thin horizontal line
Thin horizontal line
Medium horizontal line
Fat horizontal line
Straight Shapes

See first: Introduction to Shapes.

This tutorial deals with how to make straight shapes on your pages -- herel 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.

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.

Rectangle button
Rounded rectangle
Edit Vertices button
Little controls
Rounding a square
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.

Little x
Active control point
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!

Little x
Active control point
Little circle
Zoom in or out button, and Unzoom
Snap grid on/off
Move and stretch tool
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, other than paths, have a starting border of one pixel width. You can change this width in the:
You can also set the border color in the same tabs, but you are limited to flat colors only.

Colored rectangle
Rounded buttons as tabs

If you want to use tabbed navigation on your pages, use rounded rectangles as tab buttons:
Blank tab
Home
Blank tab
Blank tab
Home
See also:
Buttons tutorial
Curved tab buttons
Drop-Down menus
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:
There are two kinds of polygon, open and closed:
Examples of both types are on the right.

Polygon button
Closed polygon
Closed
Open polygon
Open
Polygon right-click menu
Polygon right-click menu
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:
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:
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.


Active control point
Active control point
Edit Vertices button
Object Menu with Vertex Editor showable
Vertex Editor
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.


Vertex Editor button
QE Vertex button
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:
The pictures below show some examples of this:

Extruding triangles
Image 1 shows the triangle having just been made

Image 2
shows rotations at an angle of 120
°

Image 3 shows Move Xs

Image 4
shows Move Ys

Image 5
shows Scale X and Scale Y together
Vertex Editor: adjusting from keyboard
Angle slider selected
When you want finer adjustment, You may find it convenient to nudge the Vertex Editor sliders with your keyboard 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!)


Vertex Editor
Checked
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.


Diagonal line
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)
:
Move a point (method 2):
Delete a point:
Insert a point:


Apply and Restore Buttons

There are two buttons which have related functions:
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:
To access these shapes, use the main menu items:
To re-scale these or any shape to the size you want:
A line theoretically has no short dimension so don't try to scale it across its short dimension.


See also:
Curvy Shapes tutorial
 


Tool: draw a star
Tool: draw a triangle
Tool: draw a horizontal line
Tool: draw a vertical line
Move and stretch tool
Tutorials banner