Archive for the ‘Tutorials’ Category

Here is my latest work. It started life as a sketch of my husband Thatch while he was reading. I then painted it in Illustrator, using a Wacom tablet. I completed the painting over two days. I am very pleased with it – although I still have a lot more to learn about this amazing program.

Thatch drawn then coloured in Photoshop illustrator

Thatch drawn then coloured in Photoshop illustrator

Illustrator has always intimidated me – but it can do so much more than I ever imagined. Thanks to all the people out there on the net whose tutorials I devoured and in turn learned many of the techniques that I used and some that I made up in the course of experimentation.

One of my many faults is that I change my mind often. This is one of those instances. Instead of continuing the tutorial series about the various vector tools we are going to have some fun.

Time to put those skills you’ve already learned to use.

Download the picture of my nephew Nathan and open it in Photoshop.
Nathan.jpg link at bottom of the page.

Meet Nathan, you are going to become very well acquainted by the time this tutorial is finished.

My nephew Nathan

My nephew Nathan

This is an example of what we will be doing today. It’s very rough just to give you an idea. We will go into detail on how it was constructed.

Nathan vectorised

Nathan vectorised

Begin by selecting the pen tool you feel most comfortable with and also select Paths Fill Options from the top palette.

Pen Tools Palette

Pen Tools Palette


We will fill the shapes we make because the Shape Layers tool obscures what you are doing making it impossible to see where you are going.

Outline Nathan’s face, ears and neck. You don’t have to be exact when it comes to the hairline or neckline because we can shuffle layers later if necessary to cover over these areas.

You should have something that looks similar to this

Vector path outline of head

Vector path outline of head

From bottom of the paths window select Fill
Fill icon from bottom of layer palette
The fill tool uses the foreground colour unless you change it. Pick shade of pink.
Colour tool in Photoshop
This creates a shape layer in PS – name your layer.

Layer palette with shape layer

Layer palette with shape layer

Repeat the process for the shirt and the hair. Put each element on a separate layer.
Click on the eye icon Eye Icon from layer paletteto turn off the layers you are not using so you can see what you are doing. To begin a new layer click on any other layer or use the New Layer Icon in the Layers Palette.New layer icon

You should have something not unlike this

3 layers with hair, face and shirt

3 layers with hair, face and shirt

To change the fill colour choose the layer thumbnail and click on the colour indicator (circled in red) when the colour palette pops up – choose a colour and press okay.
Layer thumbnail
Next, on separate layers, block in the eyes, brows, and mouth shapes. Zoom in to get the shapes as accurately as you can.

If. When you zoom in, the handle you are controlling forces the page to scroll, just let go of the handle and select the magnifying glass. Zoom out till you can see what you are doing again, reselect the pen and keep working. You may have to step backward.

Detail added to eyes

Detail added to eyes

Sometimes if the picture is not large you can easily move the handles to bring you back to your starting point. On a large picture though it can get a bit tricky scrolling back and forth, but as long as you don’t let go, and with a little perseverance you should be right.
You should now have something that looks a bit like this.
lips, eyes and brows added
Give Nathan irises, pupils and eyelashes. You can add more detail around the eyes too.

For the pupils I created a new blank layer and used the ellipse tool from the shape palette.

Nostrils - detail

Nostrils – detail

Add nostrils, make the colour a little darker than the other features.

Nathan is really starting to take shape.

Nathan with features

Nathan with features

Next we’ll work on the chin and face shape.

I duplicated the background layer and multiplied it to emphasis the detail, you might like to try this too.

Detail of chin

Detail of chin

Teeth added

Teeth added

Add some more detail around the mouth, nose, upper lip and ears
Shadow shapes added
Give him some teeth

Add shadows to the face using the gradient tool rather than solid colour. You may have to fiddle with the setting to get it just the way you want it, but that’s part of the fun.
I drew the shapes with the freehand tool for the shadows on the face in the original version (at the top of the page).

Add a background and some detail to the hair if you like.

The more you practice these skills the better you will get and I’m sure your results will reflect this.

Nathan completed  image

Nathan completed image

Nathan finished.

I’ve also uploaded the completed PSD file with all the layers so that you can see how the layers all fit together.

What colours you use is entirely up to you but here are a couple of links to skin tone colour charts that you may find helpful.
Retouch Pro

The next tutorial will be about building complex shapes, turning paths into selections and selections into paths.

Back to drawing with pencil and paper for a while.
Until next week – Logging off,

Tutorial 3 – Pen tools and what to do with them.

If you’ve followed the previous two tutorials you can draw simple shapes and have an idea how to control the vector pen. Today we learn what the rest of the vector tools palette can offer.

To do this you need to familiarise yourself with the menus.
Under the pen tool are four further options

Pen Tools Palette

Free transform
Add Anchor Point Tool
Delete Anchor Point Tool
Convert Point Tool

Convert Point Tool

Convert Point Tool

But first, using what you have learned so far open a new file about 200 pixels square with a white background. Use this space to draw a vague S shape with a pen tool. Don’t worry about how rough it is, we will fix it with the convert tool. You should have something like this

Rough vector path in"s" shape

Now select the Convert Shape Tool from the menu bar.
First using this new tool, left click on the curve that you would like to alter.
The pointer will be a white arrow until you move over an anchor point

Modifying vector path in "s" shape

You should now have an anchor that you can adjust your curve with. Like this

Modifying vector path in "s" shape

Select another curve to adjust and left click to convert the tool and make your adjustments

Modifying vector path in "s" shape

To get this:

Modifying vector path in "s" shape

Not happy about where you placed an anchor? Want to move it? You need the Direct Selection Tool.

Direct Selection ToolDirect Selection Menu

Use it to move the anchor around until you are happy with the position.

Modifying vector path in "s" shape

Reselect the Convert Point Tool and continue or use the handles to redefine the curve.

With a bit more adjustment I turned the red shape into the black one.

Modified and unmodified shapes superimposed

You can also select the Convert Anchor Tool directly while using the Direct Selection Tool by pressing Alt and Control while your mouse hovers over the anchor you want to change.

Instead of selecting an anchor point, click on your path when you hold down Alt key and drag, this duplicates it.

You can do the same thing by choosing the Move tool Move Tool

Draw a box around your path Can’t see a box outlining it? Don’t worry, you don’t need to see it, All the anchor points will be displayed. If you hold down the alt key and use the arrow keys it will move the image one pixel at a time. Hold down the shift key and it will move 10 pixels.

If you hold down the Control key and use the arrow keys it will reposition your entire path by one pixel.

To bring up both handles of an anchor point click twice on the anchor point of your choice, this creates a smooth point and affects positioning of the adjoining segment too.

Adding Add Anchor Tooland deleting Delete Anchor ToolAnchor Points

Use these tools to add and delete anchor points. Self explanatory I think. The same tools are also automatically available to you from the regular pen tool. Click on a curve segment to add a point to it and click on an anchor point to delete. PS automatically allows you to do this but you can turn off the automatics by unchecking the Auto Add/Delete function in the additional options bar.

Auto Add/Delete Option

Freeform Path Tool Freeform Tool

Select the Freeform tool from the menu, open a new file about 300 wide and 200 high.

Make sure that you uncheck the Magnetic function Magnetic Pen Option in the additional options bar.

Draw your name.

Name drawn with pen tool set to default setting

Now in the Additional Options bar at the top open the pop up menu and change the curve fit setting to .5 to get a smoother line with more points. The larger the number you put in here (from .5-10) the smaller the number of points that PS puts in, the rougher the outline. Conversely the smaller the number the smoother it becomes.

Freeform Options Menu

Here is a version with the curve fit option changed to 0.5

Name drawn with pen tool curve fit set to 0.5

Similarly there is a hidden submenu when drawing with the Pen Tool. You can turn on the Rubber Band feature, which I sometimes prefer, makes it easier to see what you are doing.

Rubberband Option

The magnetic Option works like the Magnetic Lasso Tool but we will go into it in detail later.

I’d like to quickly cover the Shape Tools that come with PS before we go onto Clipping Paths and Shapes and all the wonderful things we can do with them in the next tutorial.

Shape Tools

Shape Tool Menu

Rectangle Tool
Draws rectangles unless you constrain the proportions to make a square by holding down the shift key as you draw out the shape. Hidden contextual menu in the same place as the others

Rectangle Shape Tool Options

Unconstrained: default – rectangles any size any shape
Square: Same as holding down the shift key
Fixed Size: put in the dimensions you require
Proportional: put in the dimensions you require but it is scalable
From Center: Where you click becomes the centre point of any box shape you draw.
Snap to pixels: This is from the PS help files – Snaps edges of a rectangle or rounded rectangle to the pixel boundaries. Helpful? Not really. What this means is once you enter your proportions all you have do is click where you what your shape to appear and hey presto, it appears. Can be a timesaver.

Rounded Rectangle Tool
The same as the Rectangle Tool but with rounded edges. Has the same contextual menu as that tool

Draws elipses of any shape or size unless you constrain the proportions to make a circle by holding down the shift key as you draw out the shape. Hidden contextual menu in the same place as the others. Has the same functions as the previous two with the exception of the Snap to pixels function.

Polygon Tool
Draws polygons. Hidden contextual menu in the same place as the others. The tools are different however. The options are self explanatory.

Polygon Options Menu

These are just some of the shapes you can make using the Polygon Tool by changing the options and the number of sides.

An Assortment of Polygons

Line Tool
The contextual menu refers to the arrowheads and Weight to the line thickness.

Arrowhead options

Custom Shape Tool:
These are preset shapes that you can use. As well as the ones that come with PS, there are many more available on the net, either free or for sale. Just type Photoshop and custom shapes into your favourite search engine and follow your nose.

A good place to begin is the Adobe Exchange which has over 300 sets available for download. These are vector shapes and you can create and save your own too.

The contextual menu has the usual settings and there is an additional pull down menu.

Custom Shapes Menu

Use the scroll bar to search for the shapes already loaded on your system. To add more click on the arrow by the scroll bar.

Custom Shapes Pulldown Options Menu

You can Rename existing shapes or delete them.
You can view the shapes as text only (not really useful for ones you download from the Internet because they often are just called ‘shape 14’ or similar which doesn’t give anything away.) You can view them as small or large thumbnails or as a combination of both.

The bottom section is the list of custom shapes that come with your copy of PS and you can load the lot in one hit (All) or one set at a time as you like. Once loaded they remain until you delete them.

In the centre section we have a bit of duplication going on.

The Preset Manager
This is typically for when you create your own shapes and sets. (To save a shape you simply make your vector shape and then from the Edit menu in the top menu bar select Define Custom Shape, give it a name and it is ready to use.)

Reset Shapes
Reloads the default set and replaces those currently in the list

Load Shapes
Lets you load preset sets

Save Shapes
Click on a shape and save it with a new name

Replace Shapes
Replaces the current sets with the one you choose.

Some Final Things

Fill Options

The first tool creates filled shapes or shape layers.
The second is the tool you have been using until now and it draws paths
The third (only accessible when using shapes) fills the shape you draw with pixels

Add/Subtract Paths Options
Add/Subtract Paths Options

These two last groups of tools need a better explanation than time permits, so they will be covered in detail as part of the next tutorial.

Lots of new ideas for you to play with until next time.
Logging Off,

This is the second in what will be an ongoing series of tutorials on vector graphics.

Please note that I am using PS CS2, which uses a hybrid system but the principles
can be used to create vector graphics in other vector drawing software.

If you haven’t already done so, open Photoshop and then open a shiny new blank image.

Make it about 500 pixels square and give it a white background. Call it anything you choose.

New Image window

Make black your foreground colour. It doesn’t matter what colour you choose for this exercise because all the outlines (vector paths) come out black anyway.

Colour tool in Photoshop

Select the Pen Tool from the tools palette.

Pen Tool

When you choose this tool, a number of additional options appear in the bar
at the top. Choose the option circled in red. This is the PATHS tool.

Path Tool

You draw lines and curves with this tool to make outline shapes also known as paths.

This is where it starts to get interesting, but you can’t run till you learn to walk so more exercises I’m afraid.

Click on the page and this time don’t let go. Instead move the mouse down the screen.

An additional line is extending up and down from your starting point. Neat eh? These are the direction handles.

Still not letting go of the right mouse button, circle your mouse around your starting point.
Notice that the mouse pointer is an arrow now, no longer a pen nib.

Pen nib is now a pointer

Okay you can let go now and select edit and clear from the menu at the top.

Click and let go once to create a new anchor point then move the mouse, click and hold. Don’t let go of the mouse button but move your mouse down the screen and watch what happens.

With secondanchor point and handles

You should have something that looks like the picture above. Still holding down that mouse button move your mouse in circles. When you are ready clear the screen and read on for a bit.

The closer your mouse is to the anchor point (short handles) the shallower the curve produced.

Short handles - shallow curve

Conversely the further your mouse is away from the anchor point (long handles) the deeper the curve.

Long handles -deep curve

At this point the middle ground is no handles to get a straight line as we’ve already seen.

But wait, there’s more:

The curve always points away from the handle you are dragging around the screen. For me, this is like driving by watching the road through your rear view mirror. I find it counter intuitive – but your mileage may differ. I think that may be why I had such a lot of trouble getting the hang of these suckers.

Not finished yet:

My expectation (based on my complete ignorance of the mathematics involved) was if you had two anchor points and moved the mouse down you would get a nice even parabola with its midpoint halfway between the two.

Given the same parameters these vector/ bezier thingies behave quite differently.

I think I’ve just had a “Eureka” moment. By the way you don’t have to read this part – but it might help you visualize what is happening. The answer my friends is we need to see in three dimensions. Simple eh?

I kept playing with the exercise above and instead of seeing a badly behaved line I realised that what I was looking at was a representation of a curve moving in three not two dimensions.

The curve was not flattening rather it’s just the same curve seen from different angles. Like taking a flexible ruler or plastic pipe between your palms (One end in one palm, the opposite end in the other palm). Hold it in front of you so that all you can see is a straight line put a little pressure on it so that it curves towards you than get someone else to push the middle of the ruler towards you 90 degrees and then back 180 degrees so that it spins between your hands. Try not to move your hands.

Swap places with your assistant and get them to hold the ruler as described, move around the ruler and view it from as many different angles as you can. Any of the shapes look familiar? Now I’m not sure if this is actually what is happening on the screen, but it sure looks like it to me. The viewing perspective changes, but the two points remain fixed.

When you move the handles around your view of the curve changes. The perspective moves up, down, sideways and forward and backward. If I’ve got this right and I’m not saying that I have, it’s a pretty neat trick. I will include a short video to illustrate this if you are interested.

Okay, back to the tutorial.

The following pictures show how it works. Pull the handle straight down, the line curves up, push the handle straight up and the line curves down, move the handle right and the line curves left and finally move the handle left and the line curve right. In combination you can make just about any size or type of curve that your heart desires.

Illustration to show direction handle behaviour

Now what happens if you want to add another line – make another curve? Couldn’t be easier.

Instead of hitting Edit clear to begin again, you can:

Click on your starting anchor point to close the shape or

You can hold down the Control and windows keys and click on a blank bit of your image.

These controls close the path so that you can begin another path without deleting the old one.

Click, let go, move to the right, click again and pull the mouse down and to the right to make a nice even curve, let go, move the mouse to the right then click and let go again. You should have something like this:

Illustration continuous curve

Why is this so? After everything I’ve told you? It follows the new handle to the new point. It will draw continuous curves as long as you keep adding points.

But if you drag the handle down again at this point you get a complex curve.

Illustration S curve

To avoid this hold down the Alt key and click on the anchor point to give you a corner anchor.
When you make your next anchor point instead of getting a curve it reverts to a line. Like this:

Illustration corner anchor

I have included some exercises you can do to help you practice what you have learned. (exercise one) (exercise two). They are Gifs so choose Image Mode (from the menu at the top of the screen) will have to be changed back to RGB before you can add a layer and play with it.

Illustration change mode menu

Just a note about vector paths in PS they can’t be saved until you render them. So if you want to save anything that you draw at this point use the path selection tool located above the pen tool.

Path selection tool

Draw a box around your path or click on it to choose it, right click to bring up the menu and select stroke path.

Illustration Select path menu

Then you can save your work. You don’t have to do step this in Illustrator – one of the many differences.

That’s it for this week -“ next week we move on to the other pen tools, and start looking at shapes and how to use them.

This week I am going to dive in with my first tutorial for the web. I use Adobe Photoshop daily and I am quite adept at pixel manipulation. The vector drawing tools gathered dust after the few times I had tried and failed to use them successfully.

This tutorial is for anybody who has lost control of those little vector handles and given vectors up as too difficult. Believe me, I know how you feel.

The key, my friends is perserverence and practise. So these tutorials will be in baby steps, even though the pages are long.

Open Photoshop (I’m doing this in CS2 but the instructions work for the last few incarnations of PS too.) File – New and open a shiny new blank image. Make it about 500 pixels square and give it a white background. Call it anything you choose.

New Image window

Make black your foreground colour. It doesn’t matter what colour you choose for this exercise because all the outlines come out black anyway.

Colour tool in Photoshop

Select the Vector Pen Tool from the tools palette.

Pen Tool

When you choose this tool, a number of additional options appear in the bar at the top. Choose the option circled in red. This is the PATHS tool.
You draw lines with this tool to make outline shapes also known as paths.

Path Tool

We are now ready to begin, but first an explanation about how vector graphics versus pixel graphics work.

PS uses a hybrid system (more about that later) that seems to use vector outlines and then pixelates/rasterises/bit maps them. Vector based programs like Illustrator, Freehand, Flash and others don’t do this.

Pixels Generalised
Imagine your screen is a grid made up of pixel sized squares. (Um.. duh you don’t have to imagine this.) Each pixel contains the colour information for any picture displayed on your screen.

The image editing software, when you resize a pixel/raster/bit map image like a jpg, bmp, gif or png has to extrapolate which pixels get what
colour information. They either throw away or add pixels to make up the difference and so you loose quality.

Pixel/raster/bit map images are great for displaying photorealism and can be displayed on the web.

Vectors Generalised
Vectors mathematically calculate the relationships between each point and then plots them to the screen.

This means that you can rescale vector images without loosing any detail because the relationships between the points remain unchanged no matter how big or small you make the image.

Vector graphics are much better for illustrations, graphics creation
like logos, generally vectors make smaller files and can’t be viewed on the web, (yet).

To demonstrate
With the pen tool, click once (and let go) on the empty page you have ready. You will have made a small black square. You’ve created a vector object, an anchor point in this case.

Next Select a one pixel pencil and click once, close to your vector point.

You do this by left click and hold on the brush tool. Wait for the tool to be highlighted and the menu to appear.

Brush Tool

Select the pencil tool from the menu.

The Pencil Tool

The mark you make with ths tool will be very small and you may have difficulty seeing it depending on your screen resolution.

Now select the magnifying tool and click on the image until you can’t magnify any further.

Magnify Tool

See the difference? The pixel point grew each time you magified the page. The vector point did not change.

Illustration - vector versus pixel

Here is an example I made but I went further and I resized the result by 500%.

Pretty radical but it really illustrates the difference between the two types of graphics.

Illustration of difference between vector and pixel magnified 500%

Now that’s out of the way, let the lesson begin.

Still in magnify mode right click your mouse on the image and select Actual pixels to reset your view to 100%. Then choose Edit and Clear from the top menu bar.

Change to the vector pen tool, click once (and let go) move the mouse right slightly and click once (and let go).

Pen Tool

Two things worth noting have happened here:
1. the first point is now hollow (inactive) and the new point is black (active).
2. there is a line between the two anchor points.

You should have something that looks like this:

Illustration - vector line showing active and inactive handles

Click the pen tool once above and halfway between the existing two anchors.
Yes we are making a triangle. (Remember – click and let go)

Illustration - two sides of vector triangle

Finish the triangle by clicking once on the first point you made.

1. the ending point flashed black then disappeared.
2. All the anchor points have vanished because the object is now closed.

1. Before you begin there is an X beside the pen tool (X marks the spot I guess).
2. This changes to a / when you make the first point. This indicates that the point is active.
3. After making another point and you return to your starting point, this is indicated by a circle. (Closed loop?). If you ever get lost and need to find your starting point – look for this indicator.
4. All other points are indicated by a +

Illustration - triangle closed

Try the exercise again with four anchor points to make a square. Experiment a little by adding more points before you close the object. Make yourself familiar with the changes and the tool.

You can see from this exercise that by adding more anchor points you can make increasingly complex and varied shapes.

A circle is made up of heaps of these points with lines joining them. The more points – the finer the curve. In fact any line is really just made up of points with very short lines between them – any of which can be turned into anchor points.

Preparing for the next tutorial, I’ve been doing some reading about the geometry involved in creating vectors. What I wrote above is right and wrong. If vectors were created using Eclidean geometry it would be true but they don’t use Eclidean geometry – the geometry taught when I was at school (calculus I never understood).

Vectors use Bezier curves. Now, I always thought that they were bits of plastic used for drawing – what do I know? In any case they work on a different principle that assumes the anchor points are connected by curves.
End Sidebar

End of tutorial one. Next Week – Curves.

Before I go, here is a link which has absolutely no bearing on this tutorial.
It arrived in my inbox by way of Thatch. It’s the promo website for the new Disney movie due out in December. Breathtaking is the word for it. Slow to load and a bit jerky on my broadband connection, but if the movie is as impressive as the website – this movie will be a winner.

That’s it – Logging off,

You are currently browsing the archives for the Tutorials category.