This lecture deals with the basics of 2D digital drawing. you may need to use it in conjunction with the image editing lecture.
Bitmap (raster) or vector?
When drawing digitally, your first choice is bitmap (raster) or vector? Vector drawing is clean, precise, and it can look somewhat inhuman (although clever artists can overcome this). Some simple examples. That’s because it is the result of algorithms working out how to join two points together. Bitmap drawing tools replicate the pressure of your mouse, stylus or finger by translating that pressure into a series of tiny dots (pixels). The result can be much more like a hand-drawing – but it can also seem very crude in the hands of an unskilled user. Digital photographs are, ultimately, bitmaps.
The aesthetics of your project should determine your choice (if your drawings are part of an animation, you are likely to be doing vector drawings). One thing to bear in mind is that vector images are more manipulable because they don’t lose quality at different resolution. However, vector drawing is a little less ‘natural’, and you might find the learning curve is steeper.
Some software allows you to do both bitmap and vector illustration. I will refer to Inkscape and Illustrator (vector illustration) and Gimp and Photoshop (bitmap). However, Gimp and Photoshop also have vector drawing capabilities.
Increasingly we will see the use of HTML 5 to create simple vector shapes on websites, however that is beyond the scope of this introduction.
From hand to tool: the cognitive challenge
Particularly for bitmap drawing, how you make the mark on your digital page is important. You could use a mouse or a trackpad, or a stylus or even your finger. Either way, how you make your mark is something you have to learn. Personally, I find drawing with a mouse or a trackpad rather difficult. I need the sensual contact of pressure and motor control. My preferred way is a stylus on my tablet, using drawing software (of which there is a wide, and very cheap, range).
Bitmaps
In Gimp or Photoshop, choose the paintbrush or the pencil from the tools menu. Remember to use layers (see the image editing lecture). Note the options you have to change the style and weight of the brush. I usually find the paintbrush with the soft edge is what I want. I rarely use the pencil.
Another technique I really like is doing a fill (with paintbrush or the spraypaint tool) then selectively erasing. Consider setting up your image in this way:
- Do the rough in line art with a thin pencil.
- Create a new layer underneath the first layer.
- Do 1 colour of fill in the new layer, selectively erasing the fill to have it conform with the outline on your first layer.
- Repeat 2 and 3 for the different colours.
- Hide the line art.
Vectors
I will introduce a series of principles, with how-to instructions for Inkscape (free downloadable software) and Illustrator (the industry standard).
1. Open a file
In Inkscape, go file (top menu) – open and navigate to the file.
In Illustrator, go file (top menu) – open – then navigate to the file.
2. Create a file
Inkscape will open with a default A4 portrait file. Go file – new to choose other dimensions.
In Illustrator, go file (top menu) – new, then choose dimensions, etc.
3. Layers
It is very important to organise different aspects of your image into layers. Also, when you are experimenting with a part of an image, make a copy of that part so you can go back to the way it was.
In Inkscape, Layers (top menu) – add layer.
In Illustrator, go Window (top menu) – layers to display the layers window. Then click the top right corner of the Layers window to create a new layer.
4. Drawing a line
 |
| Drawing a line in Illustrator using the pencil tool |
They may look like ordinary lines when you draw them, but they are vectors, as you’ll see when we come to edit them. Unlike a bitmap line, you can resize and distort them very easily (use the arrow tool).
In Inkscape, there are three tools in the lefthand toolbar; their icons are a pencil for freehand lines; a pen for Bezier curves and straightlines, and a fountain pen for calligraphy.
In Illustrator, use the fountain pen tool or the straight line tool in the lefthand side toolbox for straight lines, and the pencil or the paintbrush tool for curved lines.
5. Editing the line
In Inkscape, click on the second tool in the left-hard toolbar (the one with the blue line). It will reveal the nodes in your line. Click on a node and drag it.
 |
| Editing a vector image in Inkscape |
In Illustrator, hold down the pen tool (the one that looks like a fountain pen) to see a variety of things you can do to edit the anchor points in your image. The anchor points control the line shape, and you need to experiment with them to see what they do.
6. Filling a shape
 |
| Filling a vector shape in Inkscape |
To fill a shape with a colour, you need to draw a shape which is entirely enclosed – the line must join up. After you have done this:
In Inkscape, highlight the shape using the arrow tool, then click on the colour at the bottom of the window.
In Illustrator, highlight the shape using the arrow tool. While highlighted, choose the colour in the colour chooser (which is near the bottom of the toolbox).
7. Saving / exporting the file
In Inkscape, file – save as – choose file type. If you want to keep the vector information, save the file as Inkscape SVG (it will open in illustrator and Inkscape with all its vectors; it will also open in Gimp, but not with the vector information). If you want to use it in Photoshop, choose eps.
In Illustrator, file – save as (for print, or to save the original) and file – save for Web & devices – then either gif or jpeg or png. If you want a transparent background, the gif is the easiest way to do that.
8. Zoom
In Inkscape, the magnifying glass in the lefthand toolbar.
In Illustrator, the magnifying glass in the lefthand toolbar.
9. Paths
Paths are an important concept in vector drawing. In the following vid, malgalin shows what the term means, and incidentally uses Gimp to create a vector image (some of the details will differ from software to software, for example, how to close the shape. I suggest you choose one software and stick with it).
Some resources
Tracing a photo to create a vector.
Great techniques and tutorials listed here.
There are many video tutorials for Photoshop and Illustrator on Lynda.com (and a couple for Gimp but none for Inkscape). To access Lynda.com as an RMIT student for free, go to the RMIT library website and chose the databases tab. Choose Lynda.com in the database titles menu, then ‘go’. You need to create a different Lynda password.
Top 5 alternatives to illustrator
Interesting digital imagery
[post written for Contemporary Media Work Practices, a course at RMIT University]
