RISCOS.com

www.riscos.com Technical Support:
RISC OS 3 User Guide

 

RISC OS 3.7 User Guide

Draw tutorial

This tutorial section introduces Draw by helping you create the picture below. If necessary, remind yourself of general RISC OS ideas and terms before you start, by going back to your Welcome Guide.

The drawing above shows a six mile walk through the countryside and is divided into four parts:

The following pages will take you step-by-step through the process of creating the above drawing, showing you how to draw a map compass, lake, roads, road scale, woods and rivers. You'll also learn how to drag text files (created by Edit) and sprites (created by Paint) into a Draw window.

Undoing your mistakes

If you do something by mistake while you're working through this tutorial, try pressing F8. This is a keyboard short-cut for the Misc/Undo option, and should undo your last operation. If you decide that you didn't want to undo something after all, just press F9 (Redo).

Selecting Draw objects

Before you start on the map it's worth spending a short time practising how to select objects. This is important. Before you can do anything to a Draw object - move it, for instance, or change its colour - you need to select it.

A Draw picture will typically contain lots of objects overlapping each other, and often one object will be completely behind another. Selecting just the object you want to alter needs a bit of skill.
Open the Tutorials.DrawTutor directory and double-click on the file called Sign. Once this file is loaded it looks as shown on the left.

This drawing consists of three objects:

Choose the Select tool from the toolbox (if it's not already highlighted). The toolbox is the strip of icons down the lefthand side of the Draw window - click on the arrow at the bottom of the toolbox and it will be highlighted. Click on the circle to select it. A dotted box (known as a bounding box) will appear around it, indicating that it is selected.

Selecting 'buried' objects

When an object's bounding box extends beyond others it's easy to select as long as you click on that part of the object, it will be selected. When an object is in front of others (as the circle is), again you'll have no problem<, click anywhere within it to select it.

However, it can be difficult to select an object that's 'underneath' other objects. You can often see many objects apparently occupying the same physical place, but in fact they're 'stacked' on top of one another.

For instance, clicking on the triangle will in fact select the circle, because the circle is in front of the triangle. To select the triangle, you need to double-clickon it.

If you double-click many times, you'll 'tunnel down' through the objects that are stacked on top of each other, selecting each one in turn.

Changing the 'stacking order' of overlapping objects

The exclamation mark is behind the triangle, so you could select it by double-clicking and tunnelling down through the stack of objects to reach it. However, another way of getting to a buried object is to send the objects covering it to the back of the stack.

To do this select the circle, press Menu and choose Select/Back from the Draw menu (or press Ctrl-B).

Select the triangle (by double-clicking) press Menu and choose Select/Back again. Now you can select the exclamation mark by single-clicking on it.

Now the exclamation mark is always at the front; you don't need to double-click repeatedly each time you want to select it.

You can change the stacking order of objects using this method (e.g. you could bring the circle to the front of the stack by selecting it and choosing Select/Front).

Moving selected objects

Once you've selected an object, you can drag it anywhere within the Draw window. For example, select the exclamation mark and move the pointer inside the bounding box. Now hold down Select and drag the exclamation mark outside the circle (don't click on the 'handles', these stretch and rotate the object).

Having practised selecting objects there is nothing else you need to do with this file, so you can close it by clicking on its Close icon. If during your experimenting, you have changed the file at all, you'll see a message warning you of this; click on Discard to tell the computer you don't want to save your changes.

Start the drawing: create the map symbols

Six different symbols are used on the map; two types of tree, a picnic site, a mountain, an historic building and a parking site symbol.

The first part of this tutorial takes you through creating these symbols.

Set the size of the drawing area

The first step in creating the map is to load Draw (if it's not already loaded) and click on the Draw icon on the icon bar. This displays an empty Draw window. You should now check that the drawing area is A4, landscape.

Move your pointer into the Draw window and press Menu. Make sure both Landscape and A4 are ticked in the Misc/Paper limits menu.

Make the Draw window larger

The Draw window that is displayed is quite small, so you will need to increase the size of this window.

Make sure that the zoom is 1:1 (press Menu and check the Zoom option). Drag the window to the top left of your screen. Drag the Adjust size icon down and to the right so the window is larger and looks nearly square.

Switch on Draw's grid

To superimpose a grid within the window press Menu on the Draw window. Choose Grid/Show by clicking with Adjust. Now Choose Grid/Lock (this time click Select and the menu will disappear).

The easiest way to create most of the map symbols is to draw them large and then shrink them down to the size you want. When you have finished creating all the map symbols your Draw window will look something like this:

Create the hall symbol

There are five steps involved in creating the hall symbol:

  1. Choose the Rectangle tool from the toolbox, then move the pointer over one of the grid markers near the top lefthand corner and click. This marks one corner of the rectangle. Move the pointer down two grid units and right three grid units and click again. The rectangle will be displayed, locked to the grid. LI> Now choose the Straight line tool. Create two vertical lines within the rectangle. To draw a single line, click once at the start point of the line, move the pointer, then double-click at the end point of the line.
  2. Now draw a two-segment line for the roof. Move to the top left of the rectangle and click once. Move right one and a half grid units and up one grid unit and click again. Finally move to the top right of the rectangle and double-click.
  3. Next, to make the rectangle and all the lines in the symbol into one object, you have to select them all and then group them.
  4. Choose the Select tool at the bottom of the toolbox. Select all the objects in the hall symbol by dragging a select box around them, press Menu and choose Select/Group.
    If you now click outside the new bounding box, it will disappear. To select the symbol again just click on it.
  5. Finally, thicken the lines in the symbol to make it stand out more. Select the hall symbol, press Menu and choose 4 from the Style/Line width menu. All the lines in the symbol will be redrawn 4 points wide (a point is 1/72 inch).

Create the conifer tree symbol

  1. Choose the Straight line tool in the toolbox.
  2. Move to the right of the hall symbol and draw a vertical line four grid units high (notice that the lines you draw now are very thick).
  3. Move to the left of the line and create a two-line segment to act as the top two branches of the tree. Do this in the same way you created the roof of the hall symbol.
  4. Now move down and create two more sets of branches.
  5. When you've finished the tree choose the Select tool, drag a select box around the tree and group it into one object.

Create the picnic site symbol

The picnic site symbol is much easier to create than it looks.

  1. Select the tree symbol you have just created, press Menu and choose Select/Copy. A copy of the tree will appear slightly below and to the right of the original. Drag this copy several grid markers to the right of the original tree.
  2. Choose the Straight line tool and add three lines to the copy of the tree to make up the remainder of the picnic site symbol.
  3. Once again make the symbol into a single object by grouping it.

Create the mountain symbol

The mountain symbol is just a solid triangle and is very simple to create.

  1. Choose the Joined line tool.
    This tool allows you to create straight lines with the added feature that, when you double-click to end your path, an extra line is drawn to join the last point to the first point.
  2. Move to the right of the picnic site symbol and draw a triangle as shown above on the left. The third line is drawn automatically when you double-click on the last point as is shown im the centre picture.
  3. Now colour the inside of the triangle black. Choose the Select tool and Select the triangle, press Menu and go into the Style/Fill colour box. Click on the black patch near the bottom right of the Fill colour box and click on OK
  4. The triangle will now be filled with black as shown on the right.

How style options work

Before you draw your next symbol it is important that you understand how the Style menu works. Every time you choose a style, e.g. Fill colour, it stays in force until you change it again, and it affects other tools. So if you set Fill colour to black, any subsequent rectangles, lines and curves you draw will also be filled in black. To avoid drawing an object in the wrong style, each time you choose a new tool check that you have the correct fill colour, line width etc. before you draw the new object.

Create the deciduous tree symbol

The deciduous tree symbol requires a little more time and 'artistry' to create. Draw this symbol below the other symbols. All your symbols will then be in full view without the need to scroll.

  1. Choose the Straight line tool. Move the pointer near to the bottom right of the window and draw a small vertical line.
  2. Turn off the Grid/Show and Grid/Lock options. It's very difficult to draw curves with the grid switched on.
  3. Choose the Curved line tool.
  4. Choose None in the Style/Fill colour box, then click on OK. This will ensure that whatever you draw next will not be filled in.
  5. Move the pointer to the top of the small vertical line and click. Now move very slightly down and to the left.
    You will notice that there is a small blue square over the point where you first clicked Select, and as you move the pointer a small orange square will also appear. The blue squares are simply to show you where you clicked Select as you build up a curve. The orange squares are control points. They help to show you how the curve is being generated. There's more on this in the section Editing curves. Both types of square will disappear when you finish your curve. For the time being, just build up your curve clicking Select at roughly the points shown below.

       

    When you come to the end of the curve double-click (and leave your pointer where it is). Don't worry if your curve isn't exactly the same as the one above.

  6. Now you can create the other two curves in the same way. By starting the next curve where you finished the previous one you will create a smoother, more continuous effect to the outline of the tree.
  7. Finally, make the symbol into a single object by grouping it.

If you are dissatisfied with your curves you can either delete them and start again, or edit them. You can delete a curve (or any object) by selecting it and choosing Select/Delete. If you want to learn how to edit curves see Editing curves.

Create the parking symbol

There are five steps involved in creating the car parking symbol.

  1. Turn on the Grid/Show option (but leave the Grid/Lock option off). Then choose the Rectangle tool and set the Style/Line width to Thin.
  2. Now move to the left of the deciduous tree symbol. Click and drag the pointer to make a small rectangle, about half a grid unit wide, and almost one grid unit tall.
  3. Choose the Select tool and select the rectangle. Then press Menu and go into the Style/Fill colour box. Click on the black patch near the bottom right of the box and click on OK. This will fill the box with black.
  4. Choose the Text tool. Position the pointer near the rectangle you've just drawn and click. A red vertical bar (known as a 'caret') will appear. Type the letter P.
  5. Use the Select tool to select the P. Now go into the Style/Font size box and click Adjust on 14pt. The size of the P will increase to 14 points. Now move to the Font name submenu and choose Homerton/Bold. The P will be changed into the new font.
  6. While the P is still selected go into the Style/Text colour box and change the colour of the P to a light grey. Then drag the P so that it is centred inside the rectangle.
  7. Now go back into the Text colour box and change the colour of the P to white.

Note: Never leave text colour set to white or you won't see anything next time you type in any text. Always change it to black again. To do this, choose the Text tool, then click Menu and set the Style/Textcolour to black (don't forget to click on OK).

Finally, choose the Select tool and group the rectangle and the P to make a parking symbol.

Scale the map symbols

Now reduce the size of the first five symbols to the correct size for the map.

  1. Begin by selecting the hall and mountain symbols by clicking Adjust on each symbol. Press Menu and copy them using Select/Copy.
  2. Now drag the two selected copies down towards the bottom lefthand corner.
    Notice that both selected objects move as you drag one of them. Deselect them, drag each one separately into the bottom lefthand corner, then select them both again.
  3. Press Menu and move to the Transform/Magnify box. Use the Delete key to delete any value already in the box then type in 0.2 and press Return. The two symbols will be reduced in size.
  4. Select and copy the picnic site symbol, reduce the copy of the symbol to 0.15, and move it near the two already reduced.
  5. Select and copy the two tree symbols, reduce the copies of these symbols to 0.1 and move them near the three already reduced.
  6. Now move the parking sign symbol to the right of the five reduced symbols.
  7. Finally, select all five original, large symbols and press Delete. All that you should now see are the six symbols at the bottom left of the window

Now is a good time to save the work you've done so far. To do this:

  1. Make sure that you have a directory display visible.
  2. Press Menu over the Draw window, go into the Save/File/Save as box, delete the word DrawFile and type in a new filename, for example Map1.
  3. Drag the Save as icon to your directory display.

Drawing the map compass

The next task before actually drawing the map is to construct the map compass.

Draw the first compass quadrant

The compass is made up of four quadrants, but you only need to actually create one.
Turn on Grid/Lock (Grid/Show should still be on).
Choose the Joined line tool. Change the Style/Fill colour to white. Move to the middle of the Draw window and click on one of the small grid markers. Now move up 1.5 units and right 0.5 units and click again. Finally move down two grid units and double-click to create a closed triangle.
Move to the top of the triangle you've just created and click. Now draw a second triangle in the same way as the first alongside it.
Choose the Select tool and select the first triangle (the lefthand one) and fill it in black using the Style box
Finally, group the two triangles into a single object.

Create the other quadrants of the compass

The next step is to make three copies of this quadrant and rotate them to form the four quadrants of the compass.
With the quadrant selected, copy it three times (instead of using the menu, just select the quadrant and then press Ctrl-C three times). As each quadrant is copied it will be drawn in front of the previous one.
The last quadrant copied will still be highlighted. Press Menu and type '90' into the Transform/Rotate box, then press Return. The quadrant will be rotated anticlockwise around its centre by 90 degrees. Then highlight the quadrant above this one and rotate it by 180 degrees. Rotate the other quadrant by 270 degrees

Fit the quadrants together

The four quadrants overlap each other at the moment but it's easy to separate them and then join them together to form the star.

Add the text

The next step is to add the text indicating north, south, east and west.

  1. Choose the Text tool from the toolbox. Press Menu and choose Style/Font size/20. From now on the size of any text you type into the drawing area will be drawn at 20pt.
  2. The font should still be set to Homerton/Bold but if not do so now
  3. Position the pointer just above the top of the first quadrant and click. A caret will appear. Type N.
  4. Move the pointer and click where you want to put the E. Type in the E then move the pointer again and add the S and W.
  5. Press Menu and switch off Grid/Show and Grid/Lock.
  6. Now choose the Select tool and drag the letters into the correct positions.

Scale and move the compass<

When you finish drawing the compass drag a select box around it and group it. Then press Menu and Transform/Magnify the compass by 0.5. Finally drag it to the top right corner of the Draw window.

Save your work as you go along

Now is a good time to save your drawing. The easiest way to do this is to use a shortcut - press the F3 key at the top left of the keyboard. This displays the Save as box. You've already saved your work in a file called Map1, so just click on OK and the work you've done since you last saved your file will be saved.

Note: It's a good idea to save your work every 10 minutes or so.

Drawing the map

The next stage is to draw the map itself. When you have finished the map your Draw window will look something like this:

The sequence in which you'll build up the various parts of the map is:

  1. Main road to Swafford
  2. Road to Burfell and river
  3. Hardley Lake, Garston Hall and picnic site
  4. Path and Brooks Farm
  5. Mountain and parking area
  6. Conifers and deciduous trees
  7. Map scale
  8. Map text.

Draw the main road to Swafford

Choose the Curved line tool and set the Style/Fill colour to None. Move the pointer above the Hall symbol and create the following curve (don't forget to double-click at the end of the curve)

Once you've created the curve, copy it and drag the copy so that it is just below the original curve. The second curve should be parallel to the first curve to give the appearance of a road. Select both lines and group them.

Note: If you accidentally select one of the symbols immediately beneath the two lines, you can deselect it by clicking Adjust on it.

To add the circle to the road first choose the Ellipse tool. Then turn Grid/Show and Grid/lock on, click on any grid marker, and drag the pointer in any direction until a small circle is displayed. Click again to finish the circle. Then turn the Grid off again. Select the circle and magnify it by 0.5. Then go into the Style/Fill colour box and fill the circle with white. Now drag the circle so that it sits on the road as shown below.

Draw the road to Burfell and the river

The road to Burfell can be drawn as one thick line. Choose the Curved line tool and set the Style/Fill colour to None. Set the Style/Line width to 1. Move the pointer to the upper line in the main road and draw a road going upwards almost to the top of the window (see the picture below).

The river can be drawn using a thinner line. Set the Style/Line width to 0.5, then go into the Style/Line colour box and choose light blue (the patch at the bottom right of the box). Now move to the left of the window and draw the river.

Construct Hardley Lake, Garston Hall and the picnic site

Choose the Joined curve tool. Now draw the outline of the lake. (Remember that the Joined curve tool will join your last point and starting point when you double-click. Notice also that the line is drawn in blue, because you selected a blue line colour to draw the river.) Select the lake and fill it with light blue.

Drag the Hall symbol near the bottom left of the river, and then drag the picnic site symbol to the right of the lake. Your Draw window should now look like this.

Draw the path and Brooks Farm

The path is made up of a number of filled circles. Select and copy the circle on the main road, then magnify the copied circle by 0.5. Go into Style/Fill colour and change the colour of the new circle to light grey.

Now drag the new circle to the right of the Hall symbol. Then repeatedly copy the circle and drag the copies to form the entire path (see the picture overleaf). If you drag the wrong object, don't forget you can press F8 to undo a mistake!

Make one more copy of the circle and drag it below the picnic site symbol (this will become the symbol for Brooks farm) then click Adjust on each circle in the path and group them all. (If you accidentally click Adjust on an object you don't want to group, click Adjust on the same symbol to deselect it and continue.)

Finally, magnify the circle below the picnic site by 1.2 and fill it with dark grey.

Now is a good time to save your work again.

Draw the mountain and parking area

Drag the mountain symbol near the top lefthand corner of the Draw window.

Drag the parking symbol below and to the left of where the road to Burfell first passes through the path.

Your map should now look something like this.

Draw the conifers and deciduous trees

Creating the conifer wood is very simple. Drag the conifer symbol near to the Hall symbol and copy and drag it until you have created a wooded area.

Creating the deciduous woods is just the same. Drag and copy the symbol to each of the three deciduous woods shown.

Draw the map scale

  1. Begin by switching on Grid/Show and Grid/lock.
  2. Choose the Rectangle tool and set the Line width to 0.25, the Line>colour to black and the Fill colour to white.
  3. Move below the circle on the main road and draw a rectangle one grid unit long and half a grid unit high.
  4. Draw three more rectangles, joined together.
  5. Select the first and third rectangle and fill them in dark grey
         
  6. Turn Grid/Lock and Grid/Show off, select the four rectangles and group them. While the grouped rectangle is still selected, click on the handle at the bottom right and drag it up so that the rectangle becomes thinner
         
  7. Choose the Text tool. Set the Font name to Homerton/Medium and the Font size to 12.
  8. Type in 0 at one end of the scale, and 1 mile at the other.
               
  9. Finally group the scale and text.

Add the map text

  1. Type in the following text at the positions shown on the map.
          Garston Hall
          to Burfell
          R.Ley
          Garside Fell
          Hardley to Swafford
          417
          Brooks Farm
  2. The text you have just typed in should still be in Homerton Medium 12pt. To make the text stand out, change to Swafford and to Burfell to Trinity/Medium.Italic. Then change R.Ley to Trinity/Medium.
  3. Use the rotate handle to rotate R. Ley so that it is parallel to the direction of the river. One the angle is correctly set you can then select the name again to move it to the correct position adjacent to the river.
  4. Rotate the text Garside Fell in the same way.

Your map should now look like this.

Now is a good time to save your work again.

Adding a written description of the walk

Now to add a written description of the walk immediately above your map.

Add the title

Drag the scroll bar on the righthand side of the Draw window up as far as you can, then choose the Text tool. Set the font to Trinity Medium.Italic at 20pt.

Click at the top left of the window and type in: 

      A circular walk around Hardley lake

The text should look something like this.

             

Import a text file into your drawing

You can include the contents of a text file into a text area in a Draw file. A text area is a special object which accepts text from another file. A Text file called MapText has been included in the Tutorials.DrawTutor directory which contains a description of the walk around Hardley lake. The first few lines of this file contain commands which specify the font, paragraph spacing and so on.

For a full description of text areas, and the special commands that you can include in a text editor to describe how to format the text, see the section Text areas.

  1. Choose the Select tool.
  2. Open the Tutorials.DrawTutordirectory and you'll find a Text file called MapText. Drag this file onto your Draw window. When you release Select some text will be displayed.

  3. The text that is displayed is only part of the text contained in the Text file. To display the entire contents of the file first select the text area and drag it beneath the title. Now drag the bottom handle down and to the right so that all the text in the file is displayed.

The text should now look like this.

Importing a picture

Now to import a photograph of the lake, which has been scanned into a sprite file.