EQ Lessons: Tracing in PatchDraw

by Andrea Poulimenos

EasyDraw is easy, but PatchDraw can be that way too, once you know what you're doing. We're going to trace something that has a lot of smooth curves and is very symmetrical, so let's brush up those PatchDraw skills and trace away!

Well, first let's put the picture on your computer.

Setup

Click on this link. A second window will appear with just a picture in it. Point your mouse cursor over the picture of Penny's car and right-click.
AOL users, if the picture looks fuzzy and you're wondering how you are ever going to trace the car, check out this page on graphics compression.
Choose the "Save Picture As..." or "Save Image As" option. This will make a new window appear.
Browse to the drive and folder you want to put the picture in. If you don't have a preference, you could put it in either of the following:
- My Documents\My Pictures
- C:\My Documents\My EQ5\bmp
- Or, you can create a new folder and call it whatever you want.
Next to the "File Name:" box, you can leave it as is.
Next to the "Save As Type:" box, click its down arrow, and choose Bitmap (*.bmp) if available. Otherwise, you may only have the option to save it as a JPEG (*.jpg).
Click Save. Close the extra window.
Click the Windows START button, point to Programs, point to Accessories, and click on Paint.
On the FILE menu, click Open. Browse to the same drive and same folder you saved the picture in.
Click on the picture to select it. (It should be called "CarFront.") Click Open.
On the FILE menu, click Save As....
In the "File Name:" box, change the name to "CarFront2." In the "Save As Type:" box, click its down arrow, and choose 256 Color Bitmap (*.bmp; *.dib).
If you've made it this far without any problems, skip to Step 13.
If your only option when right-clicking on the image is to save as a JPEG, and your version of Paint will not open JPEGs, try this:
Click here to download the file of images. They are already in the 256 color bitmap format... all you have to do is unzip the file. You'll need to know where these unzipped images are hiding on your computer's hard drive in order to trace them.

Setting up EQ

Open EQ and start a new project. Name it "EQ Lesson-TracingBeetle".
From the WORKTABLE menu, choose Work on Block.
From the BLOCK menu, point to New Block, and click on PatchDraw.
From the BLOCK menu, choose Drawing Board Setup.
Enter the following for your settings:

Snap to Grid Points: 24 horizontal, 24 vertical
Block Size: 6" horizontal, 6" vertical

Snap to Grid Points are important when Snap to Grid is enabled. These grid points "pick up" the lines or "hold" your nodes when you draw. Setting the horizontal grid points to 24 on a 6" block means we will have a grid point every 1/4". If the length of your block were not divisible by the number of grid points you set, you would notice that the lines would "jump" or "snap" to the wrong places.
Click OK. Now the box you draw in is a 6" square block.

Importing the Bitmap

From the BLOCK menu, choose Import for Tracing. A pop-up directory menu will appear.
Click the down arrow beside the "Look in:" box, and scroll to find your bitmap.
Click the folder where you saved your bitmap. Click Open.
Click on your .bmp and click Open. (It might be named "CarFront" or "frontfeathered".) You will be back to your block, the image will be imported, and you will be on a new tab called Bitmap.

Resizing

Before beginning to trace the image you will probably need to resize the graphic. Click the Resize tool and click the graphic.
Position your cursor over the center of the bitmap. Click and hold with your mouse over the bitmap. Move your mouse all around your screen in big circles (while still holding) and then eventually back to the original position. Release the mouse button. Notice how the bitmap moved with your cursor. Moving is one of the functions of the Resize tool.
Now, let's really move it into position. (If the top left corner of the block outline already matches up with the top left corner of the bitmap, skip to Step 26.)

Do you see how the bitmap has a black dotted line around it? Do you see the other square, made of grayed out dotted lines, on your screen? The gray dotted line represents the block outline. Position your cursor over the center of the bitmap. Click and hold with your mouse over the bitmap. Looking at the top-left corner, move your mouse (i.e. the bitmap) until the black dotted line is overlapping the gray dotted line. Release your mouse button.
OK, so the bitmap is at least into position, but it is still probably too big. What's the other function of the Resize tool you ask? Um... well, resizing is the other function of the Resize tool. So... we were just focusing on the top-left corner... let's change that focus to the bottom-right corner. Do you see how the black dotted outline of the bitmap has little black squares in the corners and on the sides? Those are "handles." We use those to resize all sorts of stuff in EQ4, not just bitmaps.
Click and hold on the handle in the bottom-right corner of the bitmap. Move the handle (while still holding), until the dotted line of the bitmap overlaps the dotted line of the block outline. Release the mouse button.
Click the Fit to Screen button.

I'm not so mean in this lesson, that I would give you an image you need to crop. But for those curious minds, here's how the crop tool works. You crop an image when there are parts around the edges that you don't need. For instance, if I left the rest of the parking lot and the sky in the picture, you would want to crop out the other cars and the extra white space, until Penny's car were the center of attention, umm.... I mean the center of the image. To crop a graphic is to select part of an image and discard the rest. Just like when you were resizing the image, you use the handles. This time when you move a handle, the image does not scale to fit the new size, it is chopped off to that new size. Now, if you've been trying all of this out on Penny's poor car while you've been reading this, you'll need to Import for Tracing (again), choose "yes" to replace the existing image, and resize the bitmap to fit the block outline. This way we're all looking at the same thing.

Click the PatchDraw tab. You will still see the image. Do you see the new tool at the right? Yes, this is the "Hide/Show Bitmap" tool. Click it once, then click it again. The bitmap will disappear, then reappear. It helps to turn off the bitmap sometimes when you are drawing, so that you can estimate a curve, and then turn the bitmap back on and polish the curve.

Drawing Necessities

The trick to drawing in PatchDraw is drawing closed patches. The letter "O" is a closed patch (you start in one place and end up back in the same spot to close it), the letter "C" is not. What am I saying? Don't use the Arc tool. I always use the shape tools, that way there's no guessing game as to whether or not you've connected your arcs to form a closed patch. The shape tools are already closed and all you have to do is edit them.

When someone paints a portrait, I am sure they don't start out drawing the eyelashes and the twinkle in the eyes. They would probably start out drawing an outline of the head. So, let's do the same. Let's start with the big stuff and then worry about details.

Tour of the Shape Tools:


Simple Shape Tool	Polygon Tool	Simple Oval Tool

How to use the Shape Tools:

Position your cursor over the tool you want to use.
Click its small black triangle in the top-left corner of the button.
On the flyout menu of choices, click on the shape you want to use.
The flyout menu will disappear and the selected shape will now be the "featured shape" on that button.
Later, if you click on the button, but don't click on the black triangle to change the shape with the flyout menu, you'll be drawing with the featured shape again.

The Edit buttons you'll be using frequently:

Add

Click on a line or an arc with the Bezier Edit tool, and click the Add button. Your selected line or arc will be split in half, because you just added a new node.

toCurve

Click on a line with the Bezier Edit tool, and click the toCurve button. Your line is now an arc and will have "handles" on it, with which you can shape the arc.

You access the Edit dialog box by doing one of the following:

Click on the small black square in the bottom left corner of the Bezier Edit tool.
Click the Bezier Edit tool (anywhere), then right-click on your node or arc, and choose Edit.

Not all of the buttons will be enabled (lit up). Which buttons are usable depends on what you clicked on. Here's what the buttons do:

Click on a Node

Click on a Line/Arc

Delete - removes the node
Break - separates two lines/arcs at that node
Join - when two "loose" nodes are multiple selected (by using the SHIFT key), they will be joined together GREAT for fixing open patches
Corner - makes the handles independent
Smooth - makes the handles 180 degrees from one another
Cusp - lines the handles on top of one another
Symm(etrical) - makes the handles the same length and 180 degrees apart from one another

Add - adds a node
toLine - changes the selected arc into a line
toCurve - changes the selected line into an arc

OK, so now you know what the Shape Tools are like and what all those Edit buttons are for, so let's trace Penny's car!

Drawing

Click the small black triangle of the Simple Shape tool and click on the rectangle.
Move your cursor over the car. Start in the top-left corner of the roof. Click and hold. Drag your mouse diagonally down and right, until the rectangle is as wide as the roof and as tall as the car.
Now we're going to zoom in on the roof, so we can see it better. Click the Zoom In tool. You want to start just above and to the left of where you began the rectangle, click, hold and drag out a box that fits around the roof line of the car (about the size of the image below).
Are your nodes (endpoints of the lines) at the edges of the roof? Click the Bezier Edit tool. Click directly on one of the nodes that is in the wrong place and hold. Move it to the edge of the roof. Move the other node if necessary.
While still using the Bezier Edit tool, click the top line of your rectangle, so it is selected. Then, right-click on that same line and choose Edit.
The Edit pop-up window will appear giving you two choices. Click the "toCurve" button. This changes your line into a curve and adds little handles to your curve, which you can lengthen or reposition to bend your curve into the shape you need.
Click on the square at the end of one of the handles and move it to a new position. Move it so the curve across the top of the car starts to look like the roof.
Click on the other handle and move it, so it too makes the roof start to look like a roof.

Handles redrawn in red to show that you can still estimate the curve of the roof, without having your handles be perfectly symmetrical.
Yippeee, we have a roof! Now, click the line on the left side (of our edited rectangle), so it is selected. Right-click on that same line and choose Edit.
When the Edit pop-up window appears click the "Add" button. This adds a node right in the middle of your line (shown in red in sketchbook picture).
Click on the line on the right side and add a node to that line also.
Move the newly added nodes over to the seam of the hood, where the hood meets the bubble of the hubcap. (See picture at left.)
Change the top 2 lines to curves.
Use their handles to follow the shape of the car.
Move the bottom two nodes to the points near the grate (blue).
Add a node to each side (red).

Move the newly added nodes down near the base nodes (right near the tire, just before the outline of the car changes from a line to a curve).
Change the large section at the left to a curve.
Use its handles to follow the shape of the car.
Repeat Steps 47-48 for the other side. Turn off the bitmap as needed and use the Refresh Screen button as needed.
Convert the last two (very short) lines to curves and polish the shape of the car.
Click the Simple Shape tool again to choose the rectangle. Move your cursor over the car. Start in the top-left corner near the roof. Click and hold. Drag your mouse diagonally down and right, until the rectangle approximates the windshield.
Click the small black square in the bottom corner of the Bezier Edit tool. Then click the top line of the windshield rectangle. In the Edit box, click ToCurve. Move the handles to help the curve follow the curve of the windshield.

Click and hold on a bottom node of the windshield rectangle. Move it to the outer edge of the car. Repeat for the other bottom node of the windshield rectangle.
Click the left edge of the windshield. Click the ToCurve button. Use its handles to follow the edge of the windshield. Repeat for the right side.
Click the bottom edge of the windshield. Click the ToCurve button. Use its handles to follow the bottom edge of the windshield.
Click the Simple Shape tool again to choose the rectangle. Move your cursor over the car. Start in the middle near the bottom of the windshield. Click and hold. Drag your mouse diagonally down and right, until the rectangle approximates the hood.
Click the Bezier Edit tool. Click and hold a bottom node of the hood and move it in closer to where the seam of the hood is. Repeat for the other side.
Do you think you understand the "ToCurve" button yet? Click the bottom line of the hood and change it into an arc. Shape it with the handles.
Click the top left node for the hood and move it up just over the bubble of the hubcap.
Change the left line of the hood to an arc and shape it with the handles to follow the curve of the hood.
Repeat steps 59 and 60 for the right line of the hood.
Click the top line of the hood. Change it to an arc, and add two nodes (with the Add button).
Move one of the new nodes to line up with the nodes for the bottom of the windshield. Do the same for the other side.
Use the handles on large top part of the hood to make it follow the shape of the bitmap and the bottom of the windshield.
You are sooooo close, I am so proud of you. It is really starting to look like a car. Let's add some details!

Details

Click the small triangle on the Simple Oval tool and select the circle.
Draw a circle over the left headlight.
Click the Bezier Edit tool and click on one half of the circle. Use the handles to shape the circle around the headlight.
Repeat for the other half of the circle.

Ready for a neat trick? Our graphic designer Jill took such a great picture, straight-on, that the left and right sides of this picture are almost perfectly symmetrical.
Click the small black square Select tool.
Click the left headlight to select it. Then click the Clone button and the FlipH button. You just made the right headlight.
Click and hold this new patch (still with the Select tool) and move it into position over the right headlight.
Click the Simple Shape tool (you should still be on the rectangle).
Draw a rectangle around the little yellow reflector on the bottom left side of the car.
Click the Bezier Edit tool.
Click and hold on a node for the reflector and move it to form a parallelogram around the reflector.
Change the left and right sides of the reflector to arcs.
Use their handles to make the "rounded rectangle" shape.
Click the small black square Select tool.
Click the left reflector to select it. Then click the Clone button and the FlipH button. You just made the right reflector.
Click and hold this new patch (still with the Select tool) and move it into position over the right reflector.
Click the small black square on the Select tool again.
Click the left reflector to select it. Click the Clone button.
Click and hold this patch and move it over the front license plate.
Click the Bezier Edit tool.
Move the nodes to the corners of the license plate.
Use the handles to polish the shape of the license plate.

Now that you have got the hang of tracing in PatchDraw, do the following:
Use the Simple Shape tools to estimate the patch.
Use the Bezier Edit tool to polish the shape of the patch with the handles, add nodes, and change lines to curves or curves to lines.
Click the small black square Select tool, and clone or flip selected patches to speed up the design process.
Finish off your car and draw...

	the side mirrors -they are symmetrical, so draw one, clone it and FlipH.
	the circle thinga-ma-bob (yes, I know that's very technical) -it's in the bitmap near the left tire, so let's put it in the drawing -just draw a circle -use the handles to line it up over the one in the bitmap
	the logo -draw the outside circle -(1) use the leaf shape and change one side to a line -(2) move the corners of a rectangle -(3) use the triangle shape -clone and FlipH for patches 1 and 2 -clone and FlipV to make the bigger triangle
	the tires -draw a rectangle -reposition the corners -change the outer edge to a curve -polish to make the tire
the "grate" (and I was doing so well with those car terms 'til now.) -use rectangles to start out the grate -reposition the corners -change the lines to curves, as necessary, to properly estimate the curve
	the reflectors in the "grate" -draw the outer circle -draw the inner circle -select and clone them -move the 2 new patches over to the other reflector

Color

Click the Color tab. Your patches may not be layered in the order you want them (most likely the tires). They are layered in the order they were drawn, with the newest patches closest to the top.
Click the Select tool.
Click the tire patch, hold down your keyboard SHIFT key while you click on the other tire patch, and then the PatchDraw background square. You just selected 3 patches.
On the BLOCK menu, choose Send to Back. (You must send the background square to the back also, otherwise it will cover the patches you drew for your block.)
Click on any other patch you want to re-layer, hold down SHIFT, and then click the background square and choose BLOCK-Send to Back again.
Once the patches are re-layered properly, click the Paintbrush tool.
Click on a color in the palette and click on the patch you want to be that color.
Color the entire block as you wish.
To print out a block, click the FILE menu, point to Print, and click on Block or Templates.
In Block Size, enter the size you wish to make the block.\
Other important options you may want to consider:

Seam allowance - put a check next to seam allowance to add a 0.25" (default) seam allowance.
Line thickness - click the arrow next to the line to drop down the line thickness choices. Click on the line you want.
For a colored Block printout - click the colorway arrows to choose the coloring you want to print, then click to put the dot next to "showing fabrics", and you're set.

Click Print.

And you're finished. Congratulations!

If you want to keep practicing, download and unzip either of these files. They contain different views of Penny's car, already saved as 256-color (8-bit) bitmaps. Have fun!

zip#1

zip#2

Now your EQ webmaster is going to go take a nap.

Check out these other EQ Lessons.

If you have any suggestions for EQ lesson topics, please email them to penny@electricquilt.com.

REQUEST A CATALOG REGISTER ONLINE NEWSLETTER DOWNLOADS clubEQ CONTACT
^ Top	All Content on these pages, unless otherwise noted is Copyright © 1991-2010 by The Electric Quilt ® Company and may not be reproduced in any form.