photoshop » geniwate.com

digital drawing techniques

Contemporary Media Work Practices, graphic art, resources Comments Off

Jan 102013

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.

Character design

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.

More Illustrator exercises

Top 5 alternatives to illustrator

Interesting digital imagery

deep maps

[post written for Contemporary Media Work Practices, a course at RMIT University]

image editing software

Contemporary Media Work Practices, Contemporary Media Work Practices 1 Response »

Jan 102013

Image shows a problem to beware of in Gimp: a dialogue box is hidden behind the toolbox.

This lecture introduces image editing software. It assumes you already have an image – either a digital photo or a digital drawing. You may wish to do the digital drawing techniques lecture first. It would be best to be playing with a pre-existing image while you work through this lecture.

I will be introducing various principles for editing digital images. Good image editing software will allow you to do these (and much more). I will refer to Photoshop, the industry standard, and GIMP, which is a free download. There are many resources available and I’m not going to reinvent what already exists. This lecture will present basic image editing principles in an appropriate order. The software does much much more than this – if you’re into it, you’ll explore further on your own. There are often quick keys associated with these processes, which will speed up your workflow.

1. Open and Save/Export

You need to open your image in the software and save/export it. You may be able to drag the file icon onto the software icon to open it. Otherwise, go file (top left hand menu) – open – then navigate to your image. If you want to create a file, go file – new – then determine the dimensions etc in the resulting dialogue box.

Note: In GIMP, there is often an extra dialogue box that you have to go through when you are doing something. This often hides behind the toolbox (yes, its a design flaw, but GIMP is amazing and free! I’m not complaining!). If nothing is happening, hunt around for this dialogue box.

Saving is more complex. There are many different image file types, some appropriate for web (jpeg, png and gif) and others appropriate for higher quality print (TIFF, eps). You can also save as a pdf – the digital publishing standard run by Adobe. This is for stand-alone digital files (ie, not viewed via a browser or other software). Make sure you are choosing the right file type for its final destination. For Web and other digital contexts, you would usually save a photograph as a JPEG, because it compresses the image while maintaining the image quality quite well. A gif file will have a certain (somewhat outre) appearance without as much detail. Possible for cartoons etc, but even then, a jpeg is more likely unless you want that retro look. A PNG file may be a good alternative to a jpeg.

To save/export:

In GIMP, go file – export – then select file type at the bottom of the screen.

In Photoshop, go file – save as – then select file type. There is also a ‘save for web’ option which is great if you want to fiddle with the options and get immediate feedback on the effects.

Tip: make sure your image is the correct dimension (ie pixel/millimetre size) for its final destination before saving/exporting (see resizing).

2. Resize and crop

Resizing refers to changing the pixel or mm dimensions of the image. Cropping means removing one or more sides of the existing image to re-position some part of the image that you like. These are very different activities, and sometimes you may need to do both. However, make sure you keep your original intact. Always work on a copy, not the original.

To resize:

In GIMP, go image (top menu) – scale.

In Photoshop, go image (top menu) – image size – then make you adjustments.

Note: Resizing an existing image may not work too well if the original is of low resolution.

To crop:

In GIMP, find the toolbox tool (it looks like a scalpel) and select the area, then return.

In Photoshop, find the angular tool in the toolbar (fifth from the top). Draw a square representing the area you want to keep. Hit ‘return’.

3. Layers

Any action which edits the actual image requires you to work with layers. If you don’t work with layers and do something you later want to undo, you may not be able to undo. Each layer should contain one aspect of an image – for example, one text, one photograph, or one drawing. Make copies of important layers, then hide them, in case you need them later. Experiments should be carried out in layers, so you can trash the layer if you don’t like the experiment, but you don’t lose the rest of your work.

To show layers:

Both Photoshop and GIMP have a new window for layers. If they are not obvious, In GIMP go to the top menu ‘Window’ – ‘dockable dialogues’ – layers’. In Photoshop, go to the top menu ‘Window’ – ‘layers’.

Once you have the layers window showing, you need to learn how to create and trash (bottom of layer window for GIMP and Photoshop, the bin icon) layers. Note there are different sorts of layers for different types of actions.

To create a layer

In GIMP, Layers window top arrow – layers menu – new layer. This generates new (sometimes hidden) dialogue box that you need to agree to. Usually you’ll want a transparent layer.

In Photoshop, Layers window top arrow – new layer.

4. Altering the colour range in an image

You may need to do this to make the image blend better with a pre-existing colour scheme, or you want to digitally improve the brightness, etc. There are a variety of tools, and no matter how you good you get at it, experimentation is always necessary.

Altering the colour range:

In GIMP, go to the top ‘Colors’ menu, then you need to play with the first 7 of the options.

In Photoshop, go Image (top menu) – Adjustments – then you need to play with the first 8 functions in that drop down menu.

Tip: You’ll find that many of them won’t have any impact on a black and white image (or they’ll be unavailable).

5. Adding effects

Referred to as filters in both Photoshop and GIMP. They can be over-used, and if you have a series of images, it is important to write down what effects, and what order, you are using them in, so you can re-create them. (Advanced users can set up rules). A commonly used and very valuable effect is blur.

To add an effect:

In GIMP and Photoshop, go to the ‘Filters’ top menu then (for example) blur – Gaussian Blur.

6. Tools

Gimp and Photoshop offer a variety of tools in the toolbox window (some of them have already been mentioned). these are bit of programming which require you to use your mouse/trackpad. I mention only the most commonly used ones.

Drawing/painting

You may need to draw on an existing image (eg, to touch up a bit that you don’t like). Remember to do anything like this on a different layer so you can get rid of it. To draw, you will need to know how to select a colour. You will probably also need to zoom (in Gimp, toolbox magnifying glass; in Photoshop, lower left corner – change the percentage) in on the image (possibly until you can see individual pixels).

In GIMP, pencil and paintbrush in the toolbox. Alter the color in the box colour box under the tools.

In Photoshop, pencil and paintbrush in the toolbox.

Erasing

In GIMP, the pink eraser tool in the toolbox.

In Photoshop, the rectangular eraser tool in the toolbox.

selecting an area

Important if you want to do something to a specific part of an image but not all of it. Make sure you are working on the correct layer. In the toolbox, you have a choice of a rectangle, a lassoo, or an elipse.

In GIMP, toolbox – first three tools.

In Photoshop, toolbox – first two tools (clicking and holding the tool gives you more options).

writing text

In GIMP, the ‘A’ tool in the toolbox.

In Photoshop, the ‘T’ tool in the toolbox.

drawing lines

In GIMP, use the shift key and the pencil (among others)

In Photoshop, the line tool in the toolbox (near the T)

Learning more

Look on Youtube for tutorials. There are also lots of books. Make sure whatever you use, it is referring to the correct version of the software.

Further resources for Photoshop

I tend to rely on the Photoshop help menu.

Photoshop tutorials

Further resources for GIMP

Text effects

There are lots of online video tutorials for learning Gimp.

There are many video tutorials for Photoshop on Lynda.com (and a couple for Gimp). 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.

I heart Gimp!

[Written for Contemporary Media Work Practices, a course at RMIT University]

Layers

Creative, This working life Comments Off

Nov 192011

A friend of mine took a look at my work in progress, now titled into smithereens (but for how long …) and said, ‘I love the layers’.

Hmm. Hadn’t thought about it like that. She was referring to layers of meaning, but for me, it has no layers of meaning, because it’s linear. So its a layering up of meaning, one after another?

I’ve never spent such a lot of effort on a moving image work before. But since she’s said that, I’ve sumperimposed a poem – another layer – on top of the layers that she felt already existed. This new poem is, for me, more ‘layered’, because it simultaneously competes with the previous work / meanings aleady there. It refracts / infects the meaning of the initial work (I hope).

But there are other layers. Layers in my photoshop files, layers on layers, developed over the months that I have been working on it. I think a still is finished (it’s stop-motion – in a sense), then two weeks later I’m back in it, making a new layer. Many of the layers are ‘turned off’ – invisible, but there, in the .psd file, they exist. Witness to the history of the image.

So layers are about history and technology and aesthetics, all together. That’s layers for you.

I think the limitations of linear work might be summarised in the limit to layering that you eventually reach. If it’s non-linear, its exponential, layers upon layers upon layers, as some famous muppet Swedish cook once said…