Tuesday, 13 May 2008

Creating Speedlines on Photoshop part 2: Using the brushes

Now that you've created some brushes, it's time to put them to use. Depending on what kind of image you want, there are two methods we can use. We're going to start with the linear kind, where the speedlines all run parallel to each other.

Linear Speedlines

1) The first thing we need is an image. Something inked, black and white or screentoned will work best. For this one I've drawn a quick shot of a guy reacting to something off panel. If you've not flattened it, put all the layers you've used to make the image so far into a group, to make it easier to see what you're doing.

Note: These techniques work best on images smaller than 2000x2000, though that's not a hard and fast rule.

2) Before we make our speedlines, we need to mask out the areas we want them to appear in. We're going to want two main masks: a foreground and a background. To make this easier, create a new group for each on the layer pallet.

3) The easiest way to create the masks is to select the areas you want the speedlines to appear in, select the layer group and then click the 'add layer mask' button (pointed out on the screenshot). This will make a little thumbnail of the mask appear, which can also be edited with the painting tools.

Note: If you have any dialogue in your panel, you don't want your speedlines to cover it. Use your masks to protect dialogue that is part of the artwork. Where it has been added separately, just put your dialogue layers above the speedline layer groups.

4) Once you have your masks set up, it's time to use your brush. Create a layer in your background speedline group. Select the pen tool, and make a straight path. This should be 90 degrees anti-clockwise from the direction you want your speedlines to be going. Here I wanted them pointing left to right, so I made a path going from the bottom to the top of the panel.

5) This is where some trail and error comes in, as the next few steps will vary depending on your image. Switch to the brush tool, pick one of your speedline brushes and adjust the master diameter to the length you want the longest speedlines to be. Then, making sure you still have the path selected, hit the enter to stroke the path. I tend to prefer thinner brushes, but it will depend on the size of your image. If the speedlines are too thick or too long, adjust their size in the brush tip shape pane and try again. If you see any 'blunt' ends appearing, drag the path back towards the edge of the panel.

6) Our speedlines are still looking a bit sparse, so lets add some more. Adjusting the spacing and size if you like, stroke the path a few more times. The lines can be made thinner by dragging the path back towards the edge of the panel. You can either keep building the speedlines up on the same layer, or make a new layer for each stroke to give yourself a little more control.

7) Make a new layer in your foreground speedline group. Drag the path back a little and then stroke it a couple of times to put some speedlines in front of the character.

8) And there you have your linear speedlines. If they don't give you quite the effect you want, try experimenting with angles. Generally, diagonal lines will look more unstable or uncomfortable than lines that follow the shape of your panel— which can be just what you need for a particular moment. For example, this image looks more dramatic if the lines follow that character's gaze rather than the edges of the panel:

Radial Speedlines

Radial speedlines are often used to highlight a particularly dramatic moment, although you can also use this technique to suggest movement towards or away from the 'camera'. They can be created in much the same way as we made our linear speedlines, the key difference being we use a circular path instead of a straight one.

1) Here's my starting image, of my character Ray calling out a bad guy. Set up your masks and groups like before.

Note: You can use larger images for this than you could with the linear speedlines. However, as there is a limit to the brush spacing allowed, using too large an image can lead to unnaturally regular speedlines.

2) Grab the circle tool, set to path rather than shape. Hold option and shift then click on the focal point of your image and drag outwards to make a perfect circle. This circle will run through the centre of each of the speedline strokes, so make it nice and big or they'll protrude too far into your image.

3) Now all you need to do is stroke the path as before, and you're done! Usually there'll be fewer lines in this kind of image.

There are plenty of ways to modify this technique. You can double up layers to make some lines bolder, use the eraser to get rid of awkward looking lines, and adjust the presets on the fly to tailor your speedlines to your image. You can even try adding some in white, or creating your own hand drawn brushes instead of the vector triangles. Experimentation is the key and there are lots of different effects that you can create with this technique.

Good luck!

Creating Speedlines on Photoshop part 1: Brushes

If you're not familiar with the term, 'speedlines' are lines added over a comic panel or illustration to give a sense of movement. They emphasise things by directing the readers eye towards them and can also give a sense of the motion blur of a camera movement; standing in for the zooms and pans you find in film and animation.

Speedlines are one of the most simple ways to add energy and drama to a comic panel, but unfortunately they're also one of the most tedious things to actually draw. However, Photoshop's powerful and versatile brush settings can be used to create them much more quickly.

This section of the tutorial will talk you through the process of creating a set of speedline brushes. In the second part, I'll show you how to combine the brushes you've created with the path tool to quickly create linear and radial speedlines. It's worth bearing in mind that this method does not give the exact control and results of painstakingly creating them by hand with a pen and ruler. Also, while there's nothing hugely advanced in this tutorial, I'm going to assume the reader has at least some familiarity with Photoshop before trying this.

Making the Brushes

A Photoshop brush is composed of 2 parts: tip shape and presets. We're going to make the tip shape first.

1) Create a new, transparent file 30x30 pixels in size. Next, click View>New Guide and create a vertical guideline 15px in.

2) Create a new layer and turn on snap (View>Snap) if it isn't on already. Select the pen tool, make sure it is set to shape (circled on the screenshot) and use it to make a symmetrical black triangle, pointing up like this.

3) Go to Image>Image Size, deselect 'constrain proportions', and resize your image to 2500 pixels tall. This is the largest size a photoshop brush can be in any dimension, which will make your brush as versatile as it can be.

4) You now have the base you're going to build the brushes from. Save it, so that you can come back to it. We're going to make a few different brushes from this. Our first brush is going to be a fairly thick speedline. Click Edit>Define Brush Preset... and name it 'Thick Speedline'. We're going to adjust the presets in a moment.
Note: Photoshop CS3 does not appear to let you define the brush if the vector mask (the black triangle) is the active layer, but it works fine if the other layer is selected. If this does not work on your version of photoshop, try rasterizing the shape layer.

5) Let's make some thinner ones. Resize your image to 20px wide and define another preset called 'Medium Speedline'. Resize it again, to 10px wide this time, and call this one 'Thin Speedline'. You're going to need these names because the thumbnails will look very similar. You can make further, thinner versions if you like, though the thinner you go the less smooth the tapering will be.

The Presets

6) Now it's time to make those shapes into useful brushes. Make yourself a nice big image for testing them out on as you work. Go to your brush pallet, select the thick speedline and input these values:

This will give brush that will create this in a few strokes:

Feel free to tweak these settings a little. Lowering the minimum diameter setting will give you more variance in the length and thickness of the lines. If you want to alter the length without effecting the thickness as much you can do that with the roundness jitter settings. Set the controls to 'off' for random, or 'pen pressure' if you'd like to control it manually. You can adjust the angle in the brush tip shape pane to whatever angle you like, and simply paint the speedlines onto your image. It's worth saving this preset somewhere as it is fast, easy and quite useful for linear speedlines. However, for this tutorial we're going to add another setting, which will allow us to use it with paths.

7) Set the angle to 180 degrees on the tip shape pane, and the angle jitter to 'direction'. Make sure the slider is set to 0. Click the little menu on the brush pallet, select 'New Brush Preset...' and name it something like 'Thick Path Speedline'.

8) Click the little lock next to 'Shape dynamics' so that it is closed. On the Brush Tip Shape pane, select your medium speedline. Drag the spacing back up to the maximum, and set the angle back to 180 degrees. Make a new brush preset with it and name it Medium Path Speedline.

9) Repeat the previous step with your thin speedline tip shape.

10) Save your brushes. Photoshop will save every brush you have in your pallet when you do this, so you may want to delete all of them but the ones we've just created so that you can save them separately.

On to part two...

Kickstart in the park

To wake myself up and kick the creeping cabin-fever that's been setting in, this morning I went to the park. Armed with some Solid Steel mixes and a camera and backed up by blue skies, bright sunlight and a crisp breeze, it was a nice way get back in touch with the world after the long weeks of being chained to my desk.

Here are a few of the things I saw.