Tutorial 2: Basic Line Creation
In this tutorial you will learn how to use the Line Tool.
In vector-based graphics programs, you create graphics by drawing path segments. Every graphic is composed of at least one Path Segment, bounded by two Anchor Points on either end. The more complicated your graphic, the more Path Segments and Anchor Points it will need.
In this tutorial, you will learn how to draw lines. A line is composed of a single path segment, bounded by two Anchor Points on either end. Lines are open Path Segments, meaning there are two Anchor Points on either end of the line, and the path segmented is not connected to itself, as opposed to, for example, a circle. Other examples of open Paths are spirals and arcs.
Key Learning Points:
- Line Creation
- Transform Tool
- Selecting Lines
- Moving Lines
- Resizing Lines
Prerequisite Knowledge:
- Boxy SVG Interface
- Saving files
- Opening and closing files
Step 1:
- Open Boxy SVG. Name your file (following the steps laid out in Tutorial 1) Basic Lines.
- Navigate your cursor to the left-side of your screen. The icons you see here represent the Tool Panel. They contain the basic drawing and shape-editing tools you will be using. These tools can also be accessed from the drop-down Tools menu at the top of the screen.
Step 2:
- Navigate to the bottom of the Tool Panel. You will see the Line Tool. Click on it to select the tool.
- Navigate your cursor to the Artboard and Work-plane. Click once to begin using the tool, then draw out your cursor to create your line. Click again, to finish the action. You will now have a line drawn on the work-plane. Experiment with lines in different shapes and directions.
- When we create a line on the work-plane, we are moving from Anchor Point 1 (the first place you click) to Anchor Point 2 (the last place you click). Keep this in mind, as it will be very important when working with Bézier curves later in the manual.
Step 3:
- You should now have several lines laid out on the Work-Plane. Now it is time to learn how to move them around.
- To select a line for manipulation, select the top arrow on the Left Menu. This is the Transform Tool. When you select this tool and click on an object (to Select it), a number of blue squares will appear. These squares are the Transform Anchor Points -they are used to resize an object in the direction the cursor dragged.
- If you click on the object again, orange squares and red circles will appear on the object. These Anchor Points are used to rotate an object. We will learn about how to do so in a later tutorial. If these Anchor Points appear, simply click on the object again to return to the Transform Anchor Points.
- Once the Transform Tool is selected, click on the line and drag to move it around. The Move Cursor will appear as you do so.
- You can also move the lines up or down, to the right and left using the keyboard arrow keys.
- Begin moving the line around the page. Experiment moving all lines to a different location using both the mouse/trackpad and the keyboard arrow keys.
- If you deselect the object by clicking elsewhere on the work-plane simply hover over until a red highlight appears and click to reselect.
Step 4:
- Now that we know how to move the lines around, let's try resizing them.
- Select (grab) one of the Anchor Points, and drag it around the screen to resize the line.
- Experiment with the Anchor Point on each line. Resize each line to be either larger and smaller, using different anchor points around the line and investigating how the different points change the lines in different ways.
Step 5:
- Create a new file, and save it as Line Graphics.
- Draw a simple graphic using lines, resizing each line as needed. You must make use of horizontal, vertical and diagonal lines. Use at least 10 lines to create a cohesive graphic (i.e. do not just place lines randomly on the page). Try to be as creative as possible.
- Don't worry if there are small gaps between the lines -we will go through how to address the gaps in another tutorial.
- See the example below:
