This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
Do you like to read assembly instructions? I certainly don't! If you're like most people, you would rather skip the text and try to assemble something using the illustrations only. Am I right? Some people like to try to assemble things using no instructions at all! Sadly, there is nothing we can do about this group.
In this tutorial, you will learn how to create concise, easy to follow, text-free technical illustrations for people who need a little guidance but prefer to skip all the reading. As a bonus, you will learn how to make an outdoor broom from discarded two liter soda bottles. You, lucky dog, you!
1. Before You Begin
Choose a line style. Most assembly illustrations are black and white line drawings and either use a single line weight or the "thick-thin" method. I prefer the thick-thin method because it adds depth and dimension.
The single line weight is just that. One line weight is used for the entire illustration with no variation.
The thick-thin method typically uses two line weights. The thick line being two or three times thicker than the thin line. So, if the thick line is 1.5 points, the thin line will be either 0.75 points or 0.5 points. It's a matter of taste.
You're probably wondering how to determine when to use a thick line and when to use a thin line. It's not as confusing as it sounds. In fact, it's quite simple. If an edge meets air, it needs a thick line. If an edge meets another visible edge, it needs a thin line. Thin lines are also used to show surface texture or detail.
Pick a perspective. I'm not talking about where you stand on gun control or the unionization of carpenter ants. I'm referring to physical perspective.
Two of the most common perspectives used in technical illustration are parallel perspective and true perspective.
Illustrations created in true perspective have a vanishing point, which means that objects in the distance are smaller than those in the foreground. True perspective is a good choice when you want a less formal, more natural feel to your work. This is the technique we will use for the bottle broom assembly instructions.
Parallel perspective, on the other hand, does not make use of a vanishing point. The most common type of parallel perspective is isometric. In an isometric illustration, no allowance is made for objects in the distance or foreground, as all objects are aligned on a grid. The advantage of this technique is that pieces can be rotated and used over and over again since they do not have to be adjusted according to their placement in the illustration. While the look is more rigid and is not as appealing, it is definitely a time saver.
2. Illustrate the Assembly Steps
First, illustrate the components and tools needed to assemble the product: five two liter soda bottles, a broomstick, a small nail, a large nail, wire, a scissors, and a hammer.
Since the project requires five bottles, draw five bottles, not just one. It's important to be specific. Imagine yourself as the clueless assembler. Ask yourself things such as how many bottles will I need for this stunning project, what size dowel should I use, what type of nails are required, etc.
It's also very important to show the relationship of one piece to another. For example, the nail should go through the bottle and the dowel but no further. Make the nail a length that will secure the pieces without poking through the other side of the dowel. This seems like common sense, but I can't tell you how many times I've seen assembly instructions with parts that are not in proportion to each other. This makes for a frustrating, confusing experience. And, in extreme cases, can lead to tears and fits of rage. Not that I would know.
Now, for a little action!
The first step in the assembly process is to show where to make the initial cuts in the bottles. Start by illustrating the bottom of one of the bottles being removed. The best way to do this is to show the bottle being cut from the perspective of the person cutting it. It's not necessary to draw a hand holding the scissors, unless you are working for an hourly rate, that is. In that case, go ahead and draw the entire arm. Add a nice watch and a fancy cuff link, too. (I'm kidding, folks. Never cheat your clients. Seriously. Don't do it!)
Use a dotted line to suggest the cutting path. To create a dotted line, use the Direct Selection Tool (A). In the Stroke panel, you will see a section for dashed lines. If you don't see it, click on the tiny arrow (the fly-out menu) in the upper right of the Stroke panel. Check the Dashed Line box and enter values in the dash and gap fields until you are happy with the spacing.
Notice how the dotted cut line goes around the entire bottle. Where the cut line would not be visible to the assembler, I ghosted (grayed) the dotted line. I also ghosted the tip of the scissors inside the bottle. That is probably not necessary in this simple illustration, but in more detailed instructions with hidden parts, this technique could clear up a lot of confusion.
To show the assembler that four of the bottles need the same cut, create an "after" illustration of four bottles. Position them near the illustration of the bottle bottom being cut off. Since these assembly instructions do not use text, visual cues are very important.
This step in the assembly process demonstrates an additional cut that needs to be made on four of the bottles. Illustrate a dotted line and a scissors cutting the neck off of a bottle.
Again, I used a ghosted gray dotted line. It's important to maintain consistency throughout a set of instructions. Not only is it visually more pleasing, but it also speeds up the job of the assembler. He or she will not get hung up on why one illustration didn't show a detail that was present in another.
To show the assembler that four of the bottles need the same cut, create an "after" illustration of four bottles with their necks removed. Place it near the illustration of the bottle top being cut off.
Always try to see things from the perspective of the assembler. They will thank you.
The next step is to cut the "straws" of the broom.
Illustrate the scissors cutting on a dotted line path. The width of the individual broom straws isn't critical, so exact measurements aren't necessary. However, you will need to show approximately how many cuts need to be made. Do this by creating cut marks on the bottle. This will give the broom maker a general idea of how to space the cuts.
Once again, to help the assembler understand which bottles need to be cut into broom straws, illustrate a lineup of four bottles cut into strips. Place this reference illustration next to the broom straw cutting illustration.
It is seemingly insignificant details like this that are sometimes left out. Have I mentioned lately that it is very important to see things from the assemblers point of view?
Now it's time to illustrate the part that holds the broom straws together.
Illustrate a scissors cutting the final bottle in half.
In this assembly project, exact measurements are not critical. However, if they were, it would be helpful to add an illustration of a ruler or tape measure next to the object. Below is an example of how you could use a ruler to indicate where to cut the bottle. I grayed out all but the 6 inch mark. The assembler will now immediately know the correct measurement. Keep extraneous objects, such as this ruler, as simple as possible. In this example, it would be overkill to add additional tick marks to the ruler.
The simplest solution, of course, is to show measurement lines, as shown in the second example below. It's not as interesting, but it does the job.
Finally, it's time to illustrate how the sweeper end of the broom goes together.
Create an exploded view illustration showing the order of assembly for the parts. Use arrows to show how the pieces go together. Here, I ghosted the part of the arrow that is inside the bottles. This tells the assembler that the bottles nest into each other. By extending the arrows to the tip of each bottle, it also shows the assembler that the bottles nest tightly.
Exploded views are especially handy when a series of parts needs to come together in a particular order. It's better to show the entire assembly in one illustration than to show the assembly step by step. This way, a quick glance will give the assemblers everything they need to know in one clear illustration.
Time to make some holes to wire the broom together.
First, illustrate the hammer and the large nail making two holes through all layers of bottles. Create an additional straight on view of the nail hole locations for reference. I added arrows to further explain where to make the holes.
This example uses the ghosting technique and indicates that the nail must go all the way through the bottle. It also shows the assembly from the point of view of the assembler.
It's also important to note that, until this step, the bottles were perfectly round. Illustrating the broom at this angle not only shows the hole-making procedure, but it shows that the broom head has been somewhat flattened. When you can find a way to combine steps, do it!
Show the wire going through the two holes and being twisted closed. To help the assembler understand the path of the wire, create a ghosted section of wire behind the broom.
The only thing this spiffy broom needs now is a handle. Illustrate the broom handle being inserted into the sweeper end.
The nice thing about several of the illustrations in these assembly instructions is that the components can be used over and over again. I reuse illustrations as often as possible. It saves time and it also keeps the look of the instructions simple and consistent.
Finally, illustrate the small nail being hammered through the sweeper end into the broom handle. This illustration also uses recycled parts. There's no reason to draw the hammer from several different angles when one will work in every situation.
Always include an illustration of the assembled product. It's a nice way of saying "The end" , "Yay, you did it" or "Oops. Something isn't right."
Awesome Work! You're Now Finished!
Congratulations. You now know how to create concise, easy to follow, text-free technical illustrations. You've learned about technical illustration styles and picked up a few important tips about how to enhance your technical illustrations using line weights, symbols, textures, exploded views, and ghosting. You also know how to make a nifty little broom. Now, go sweep something!