Archive for October, 2005

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.

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

Select the Vector Pen Tool from the tools palette.

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.

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

Note
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.

Select the pencil tool from the menu.

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.

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

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.

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).

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:

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

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.

Note
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 +

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.

Sidebar
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.
Narnia/main.html
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,
Jools