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, 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.
- Quick Editor > Outline tab where it is called Thick for thickness
- Geometry Editor > Outline tab where it is called Line Width
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
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:
- 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.
Examples of both types are on the right.
- Closed: the last point will automatically connect to the first
- Open: there will be no line connecting first and last points
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:
- double-click the last point (giving you an open polygon); or
- select one of the stop options from the Polygon right-click context menu
Remember the active vertex is the one with the little red square.
- 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
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:
The pictures below show some examples of this:
- 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)
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
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.
- Click on the slider to select it. It should show a little dotted box around it
- Press the arrow keys
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):
Move a point (method 2):
Delete a point:
- Enter the new X and Y coordinates in the point boxes
- Click Apply.
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:
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.
- 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
Other polygon shapes
There are other shapes available which are just pre-made polygons:
To access these shapes, use the main menu items:
- Horizontal line
- Vertical line.
To re-scale these or any shape to the size you want:
- 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.
A line theoretically has no short dimension so don't try to scale it across its short dimension.
- 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.
Curvy Shapes tutorial