SiteSpinner Tutorials: Curved Shapes

Curvy Shapes

The Straight Shapes tutorial covers mainly shapes with straight lines. Whether rectangles with rounded corners are straight or curvy is something of a gray area. We've opted to think of them as straight.

In this tutorial, we'll look at the curvy shapes -- ellipses (circles) and curves (paths).

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

Ellipse (and circle)
Create an ellipse object as you did a rectangle, but this time select the Ellipse on the left Components toolbar, or again, from the Object menu.

To convert the Ellipse into a pie shape, select the Vertex Editor and adjust the control boxes to get the size of pie desired.

There are two sizing handles top left and bottom right. Drag either of these to change the size and shape of the ellipse.

There are two little x's at the right hand edge of the ellipse. Drag one or both to make your pie.

Image 1 shows the ellipse, the Vertex Editor selected, and the mouse cursor approaching the right-hand side.

Image 2 shows dragging the inside little 'x' with the mouse downwards, clockwise. Notice how the last selected point shows as a little red square.

Image 3 shows the same treatment for the outside little 'x' of the pair the top left corner. This time we are dragging the x upwards and around, anti-clockwise.

Image 4 shows the result of dragging the bottom little x anti-clockwise too.

It's easier to do than read about, so do it!

Don't forget to deselect the Vertex Editor when you are done. Use one of the arrow buttons at the top left. If you forget, and you will, seeing the little elves on the left will remind you!

Curve or path
Curves are also called paths, splines, or Bezier curves. Select the Curve tool on the left hand toolbar, and then click on the page to place a point. Two subsequent mouse clicks set control points that you can use to transform the curve. A fourth click is the end point, or the start of the next section of curve if you choose to continue.

Use the Vertex Editor to change the position of any point afterwards. Or insert and delete points. You can insert only straight section polygon style, but you can delete curved sections.

Once again, you will learn best by doing, but here are a few pointers that may not be so obvious when you are starting out.

As with polygons, holding the left mouse button down and dragging will produce a freehand curve.

To produce a symmetrical shape, both drag handles should be at comparable angles, and both should be of the same length.

Using the grid guide and zooming in will help. To disable the snap grid temporarily, hold the Shift key down.

To produce a smooth curve, keep both drag handles parallel to each other. Any angle between the two will cause a discontinuity.

To produce a discontinuous straight section insert a new point at point 0 with the Vertex Editor. Then by adding more points, you can make a polygon which forms part of the shape.

When creating you curve, start with more curved sections than you really need -- you can delete curves with the Vertex Editor, but you can't add any more in. With one exception ...

You can add another curve by extruding a copy. As with a polygon, use the Vertex Editor to extrude. There is a step-by-step example in the Online Help: Curve Objects

Use Webdings, Wingdings, or any other font to make a title and convert that title to a path.

Use the Quick Editor > Object tab to scale up a shape to work on it -- then scale down again to set the final size.

Curved tab buttons
In the Straight Shapes tutorial, we looked at using rounded rectangles as tab buttons. In the same way, we can use curved shapes as tabs too.

To help get a symmetrical tab, you may find it helpful to turn the grid guide on and zoom in.

Titles as paths
Right click on any title object and click Convert to Path from the popup menu. This will convert a Title into a Path object, what we are calling a Curve. From there, you can do all the operations you would do on any other curve.

This is useful if you want letters or anything in a fantasy font to form the base of your shape. You are not restricted to letters and numbers, nor do you have to worry about web-safe fonts.