Raster Vs Vector Assignment 1

After trying the experiment below answer the following questions:

1. Vector graphics are different from raster graphics in some significant ways.
Give a definition of a vector graphic, explain important features of a vector
graphic and provide an example.

2. Give a definition of a rastor graphic, explain when you would use a rastor graphic
and provide and example.
3. Explain the advantages of creating logos as vector graphics.
Photoshop Experiment

Make a new layer by clicking on the

"New Layer" icon at the bottom of
the Layers Palette. Opposite click
(right-click) this layer, choose Layer
Properties, name the layer
"experiments" and click OK.

Put your cursor on the canvas and

drag out some ellipses.

As you drag, try clicking the shift

key on your keyboard. What
happens? How about when you
hold alt down as you drag your
ellipse? Experiment with this a bit.
After you have had your fun, Ctrl-s
to save, then turn off the eye on this
layer to make it invisible.

Now click on the foreground colour

on the color picker squares and
choose your favourite colour.

Make a new layer by clicking the

New Layer icon in the Layers
Palette. Name this layer "Raster."

With the "create filled region button

still selected, drag out a small
ellipse.

In the layers palette, drag the

Raster layer to the New Layer icon.
Now there are two! Opposite click
the top one and change its name to
"Raster - enlarged."
Ctrl-S to Save.

Now in the top menu choose Edit ->

Free Transform. You will see a
bounding box with handles appear
around your ellipse. Grab one of the
corners and hold shift down. This
constrains your proportions. Drag
your ellipse as big as you can so
that it fits in the canvas. Click Enter
to apply the transformation.
Eeek! What happened to your nice crisp
edges?
Ctrl-s to Save.

C. Making a Vector shape.

Now let's do this again, but with a

difference. Make a new layer as
you did before, naming it "Vector."

Choose the ellipse tool again, but

this time, in the options bar, choose
New Shape Layer. Drag your ellipse
out as before, making it small to
start.


Notice the tiny black line around the
outside of your ellipse? This is the vector
path. You can toggle the path off and on
by clicking on the right-hand box in your
layers palette for that shape layer.

Ok.. but now here is one of the cool

things: Edit -> Free Transform Path
and hold shift as you drag your
bounding box out large as you did
before. Toggle your path off and
look at our boy Vector compared to
Raster.
How are these two different? What is
going on here?
Actually, Vector just LOOKS like an
ellipse. What he actually is, is an editable
path, which only fills in when you tell him
to! You can use the arrow tool to select
the path and then drag handles out on the
anchor points, drag the anchor points, and
mangle this thing all out of its ellipseness.
We will do that in Part H below when we
make it into a teardrop.
You can also change the color. Double
click the color thumbnail in the layers
palette and choose a different colour just
to see how this works.
Ctrl-s to save.
(You may have noticed that, after you did
your ellipse shape layer, there appeared a
collection of icons with little overlapping
squares just to the right of your ellipse in
the options bar. We'll explore those in
another tutorial... soon!)



Raster Vs Vector Assignment 2
Ok, now pick your eraser from the toolbox
and erase a chunk out of the middle of
your ellipse. You can't? Why not?
Well then... grab a paintbrush and paint a
rim around it. .. Why is this not working?
I'll answer this one for you. <g> Here's
why not: Because the colored region of
this vector shape is still changeable; it
does not contain actual pixels till you tell
them that you are done changing the
shape as a path.
There are some changes you can make
either to the SHAPE of the object or to the
COLOR of the object. But pixel changes
like erasing and painting, you can't do
unless the shape is rasterized!
D. Rasterizing the Shape.
You rasterize the shape by going to Layer
-> Rasterize -> Shape. (In Elements, you
click the Simplify button in the Options
bar.)
Go ahead and do this and test out your
paintbrush to show yourself that it still
works!
In Photoshop, the images you output will
be rasterized. That is, you will be
outputting pixels. However, your work in
progress can be in vector format. What's
the advantage in this?
Using and Creating Custom
Shapes

Custom Shapes came along beginning with
version 6 of Photoshop. With Custom Shapes,
you can do much more with vector graphics
than you could before.
Once you have made a path into a
Custom Shape, you can, with a click-drag
of the mouse, create a new copy of that
shape, in any size, color, or layer style you
want, anytime and anywhere.
Let's have a look. We'll begin by making
some stars, using the Shape tools. Then
we'll have a look at custom shapes, make
a custom shape, and finally look at some
ways to combine the paths of Photoshop's
built-in shapes to make new shapes!
This tutorial, which is written with
beginners in mind, will show some of the
cool ways to use the shape tools in
Photoshop version 6 or 7.
Along the way, you will learn about or
practice the following ideas and skills:

Arrows, Stars, and Custom Shapes

Making a Shape Path

Creating Custom Shapes from scratch

Saving Custom Shapes

Making your own Shape Library from

scratch.
You will also work with these skills: Saving
a file, Making a new layer; Naming a
layer; Using the color picker; Duplicating a
layer; Using some keyboard shortcuts;
Making transformations; Using the Pen
tool; Playing with Paths.
Elements has Custom Shapes, too, but
you can't create new ones or manipulate
them in the same ways you can with
Photoshop, since Elements doesn't have
the same kinds of path manipulations.
Though little of this will be directly useful
to you if your Photoshop is a version
earlier than v.6, you may want to read this
anyway, to prove to yourself WHY you
want to upgrade!
Stars
We do stars by using the Polygon tool and
one other little trick. Here we go:
1. File > New .. and make it large enough
to take up most of your window. You are
just going to play here a bit, so you don't
have to save this unless your teacher has
asked you to. :)
2. Make a new layer by clicking the New
Layer icon at the bottom of the Layers
Palette.
3. Choose the shape tool and then the
polygon tool in the geometry options.
4. On the right side of the geometry options bar, you see an arrow. When you have selected
the polygon tool, clicking that arrow will give you the polygon options.
5. Tick off "Indent Sides" and put in a
percentage. Choose a number of sides
and what sort of shape you want (shape
layer, shape path, or filled region) and a
color. If you make a Shape Layer, you can
do more finagling with it later, like
changing its color (double-click the color
thumbnail) or changing its shape (In
Photoshop only).
6. Make a new layer and then drag out
your .. STAR!
I chose to make a shape layer, so that I
could manipulate the path to make this
little flower. In "Making a Shape Path,"
we'll look at how to do this..



Fun with Custom Shapes
Custom Shapes are very fun to make and
to use. Let's explore some of the native
custom shapes that PS gives us. Click the
dropdown arrow to the right of the Shape
showing in the Options bar. This shows
you the shapes you have loaded now.
Click the little arrow to the top right on this
window and you will see more options.
First, you see the different ways that
PHotohsop lets you view the shape
thumbnails. Then there's the Preset
Manager. This is where you rearrange the
shapes or delete them from a Shape
Library.
Then you see Reset Shapes, Load, Save,
or Replace Shapes. At the bottom are
Libraries of custom shapes you have
loaded. (New libraries you create will not
show up there till after you have closed
and reopened Photoshop. For now,
choose All from this group.
Make a new layer and click the eye in the
star layer you just made so that you have
a clean canvas.
Click on the Custom Shape tool and then
on the little arrow just to the right of the
"Shape" box. choose filled region, pick
your favorite shape, and your favorite
color and drag out some shapes!


Making your own Shape Library
Well.. so far these "custom" shapes are
just someone else's creations. How do
you make and store your OWN shapes?
Let's begin this by making an empty
library where you can begin to stash your
own shapes.
1. Click the down arrow (marked in green
to the right) next to the shape in the
options bar.
2. Go to Replace Shapes in the arrow on
the top of that box. Choose Tiles, because
that is the smallest of the Default groups
of shapes.
3. Hold Alt and you'll see your scissors.
Alt-click to delete... and delete all but one
of the shapes there. Don't worry about
deleting all of these shapes in reality. You
will be able to retrieve them again. 4.
4. Click that right-hand arrow again and
choose Save Shapes. Name this new
Shape Library "Blank." You'll be able to
call up this library if you ever want to build
a new one.
Now we'll add a shape of our own creation
to this "Blank" library and rename it.


Making a Shape Path.
We are going to make a teardrop shape
which we will create from an ellipse made
with the Shape Work Path format.
File > New.. and make it pretty large, like
1000 pixels square. File > Save as .. and
make it PSD format and name it
teardrop.psd or raindrop.psd. Hey.. I can
be flexible!
Here's how to make an ellipse Shape
Path:

Choose the Shape tool and then the

ellipse from the Options bar.

Click the Work Path button.

Drag out an ellipse. We will use this

ellipse in the next part. Waste not;
want not!

Creating custom shapes
Photoshop comes with some custom
shapes and you can get others from the
'net and from other sources, but it can be
very handy to be able to make your own.
Here, we are going to make our own
custom shape, a teardrop.

Start with the ellipse shape path that

you just made. (A)

Choose the Delete Anchor Point tool

(under the pen tool). Notice that the
tool is now a white arrow. But when
you touch it anywhere on the ellipse, it
selects the path so that you can work
with it! (B)

Using the Delete Anchor Point tool,

click the two anchor points on either
side of the ellipse. This leaves just two
points, one at the top and one at the
bottom of your ellipse. (C)

We need to make the top point..

pointed. To do this, choose the
Convert Point tool located under your
pen. Click it on the top vertex and
watch it go pointed! (E)

If you want to make the point more

pronounced, drag your Convert Point
tool off from this pointed vertex and
handles will come out. Release your
mouse. Pull the handles down into the
shape as i have done here to make
your teardrop. (F)

If you need to move the points around,

while you have the convert point tool in
use, hold ctrl and your tool will turn to
the white arrow! Touch it on the point
you want to move and scoot it along.
Try dragging your top point a little
higher and make your drop thinner.
Then adjust it back where you want it.

A B
C
D

Next we will make this into a custom

shape. First, be sure that you have
open the Shape Library to which you
want to add this new shape. Click the
dropdown arrow next to the shape
itself in the Options bar. Then click the
arrow to the top of that window.
(Shown in green)
If you've been following along above, you
will have the Blank library open. This is
good. Once you add your teardrop, you'll
rename the Library.

Click your Paths Palette and then click

your path in the palette. Edit > Define
Custom Shape.
(If this option is grayed out, make sure
that your path is selected. Click its path in
the paths palette if it is not selected. Still
not available? Choose the white Direct
Selection Arrow from the toolbox and click
the path on the canvas.)

Now, click your custom shape tool in

the toolbar and then on the arrow
beside where it says "shape," and
there it is! Your own teardrop!
Saving the new Shape Library
Now to save this so that it will be there for
posterity, click the little arrow to the top
right of that dropdown and click "Save
Shapes." (Notice while you are there, that
this is the same box you would use to load
new shapes from another source.) Give
your new library a descriptive name.



Using your Custom Shape
Try out your teardrop!

Make a new layer.

Choose your favorite color for tears

from the color picker and then choose
the shape tool and the custom shape
tool.

Click on your teardrop in the dropdown

under the "Shape" arrow.

Now drag out drops to your heart's

content! For more on making rain look
rainy, check out my Raindrops tutorial.
I Ctrl-clicked my layer with the raindrops
to convert all of the drop pixels into a
selection. Then I dragged a gradient
across it. A Layer Effect (bevel/emboss )
later, here is my result!
Love your Pen 2:
Enlarging a Logo
Enlarging a logo... when would you
ever want to enlarge a logo? I don't
know, but it is something that I find
myself doing from time to time.
For example, if you are given a logo
that is 100 pixels wide, and you need
to put it on a 9' x 7' banner... well, you
will need to enlarge it. Just
transforming won't cut it, because you
need crisp edges!
As you work through this tutorial, you
will work with some skills which will
serve you well:

Using Shape tools and Pen tools

to make and edit a path.

Enlarging a Path.

Filling and stroking a path.

Any graphic image will work fine for the
purposes of doing this tutorial. If you want to
use this dinosaur, for use ONLY with this
tutorial, here's how:

Right-click the picture.

In the dropdown, choose Save As...

Put it where you will find it.

Filling and stroking a path.

This tutorial is for you if you have Photoshop
and want to get a bit more familiar with the
wonders of the Pen tools.
I wrote this with Photoshop 7, but it will work
with other versions. It will not work with
PS Elements, since Elements doesn't use
paths.
For this tutorial, I'll work with this little
dinosaur I made for my recent
Elements 2: Tips & Tricks book, (now
being reprinted by Apress.. yay!). I
actually made the dino in Elements,
using shapes, my eraser, and lots of
patience! (Elements doesn't have the
natural tool for this job, the Pen!)
1. Open the logo file. My file is tiny, just
100 pixels wide. I'll show here how to
enlarge this so that it could cover the
side of a blimp!
2. Choose your Pen Tool from the
toolbox.
3. With the Zoom tool, zoom in tightly
on your logo.


4. Tap your pen around the edges of
your logo dropping anchor points.
NOTE: Only drop them at the points
where the curve changes direction. If it
is heading around in a clockwise
circular direction it would be a change
in direction if it suddenly gets straight
and goes out from there. You will have
a harder time making a smooth curve if
you have too many anchor points.

NOTE: If you click that same point
again, OR if you click one of its
handles again, using the Convert Point
tool, your point will become a corner
point again, and you can manipulate
the handles separately.
6. Choose the Convert Point tool.
Click-drag it on one of the Anchor
points. As you drag, you will bring out
the handles for the tangent line.



You now have a bunch of corner
points. Not the goal! We need smooth
curves. What you will do next is to use
the Convert Point tool to drag out
handles which will be TANGENT to the
curves you are forming. By
manipulating these handles, pulling
them longer, and changing their
direction, we shape the curve.
5. To begin shaping the curves, you
need to click the path with the Direct
Selection arrow, first. This will make
the Anchor Points show once more.


Another NOTE: If you don't want a
corner point and you need to go back
to manipulate the handles, hold the Ctrl
key. This changes your tool to the
Direct Selection arrow again, enabling
you to do this.
Eventually, you will have the whole
outline shaped.
TIP: Hide that Path!
When you are working with paths,
sometimes that little line gets annoying
or you need to see what's behind it. To
hide it, either click the checkmark in
the options bar or click the empty
space below the paths in the Paths
palette.




But what about the eyes and the black
contour lines for the leg and arm? You
can make them part of the path, as
well!
7. Begin with the eyes. Choose the
Ellipse shape tool, the Path option, and
the Subtract from Path button. (See
right.) Now, when you make your
ellipse, it will be subtracted from the
path, creating an elliptical hole in your
shape.
8. Drag out the ellipse for the left eye..
then the right. Or the right...then the
left. Hey.. be free! As long as the
Subtract from Path choice is clicked,
whatever path you make will be
subtracted.
9. Continue in this way to make a path
for each nostril, for the mouth, for the
leg and for the lines for his arm. This
part will be subtracted from the shape.
So when you fill in the dinosaur, these
places will not be filled.
If you want the eye pupils filled as i did,
click the Add to Path choice. Then
make the circles for the pupils.
Clicking the tab for the Paths palette
will give you this view.




Now let's try enlarging this path.
10. Make a New document at whatever
dimensions you like. If you are going to
print it, make it 300 ppi. If it is for the
web, 72 ppi will suffice.
You should now have both documents
open on your desktop with your paths
palette open on the first file.
11. Drag the path from the Paths
Palette of the first file onto your canvas
for the second file.


13. Make a new layer for the second
file. This is where you will put the
pixels for the enlarged and quite
fiersome dinosaur.
12. Edit > Free Transform Path.

15. And holding Shift to constrain your
proportions, drag the path as large as you
want it.


14. Choose a color for your dino (this is
#01AF6C) and hit the Fill Path button
at the bottom of the paths palette.
15. But what if we want to fill in the
places where there is black? We have
a couple of different ways we can
proceed here. If you want to use the
paths we made, you can fill them in like
this:

Make a new layer, onto which

you will put the black parts.

Use the black Path Selection

arrow to click the part of the path
you want to use.

Click the ADD to path choice in

the Options. Otherwise, it will
think that you want to fill in
everything BUT this. (Doesn't
make much sense to me, either,
really.)

Choose a different color (like

black!)

Click the Fill Path button on the

bottom of the Paths Palette.

Repeat for any other parts of the

path.


16. So... what's the big deal about this?
Well, for one thing, now that your logo
is in vector path format, you can scale
it larger or smaller, still maintaining all
the crispness of the original.
Matchbook or mailbox... either will be
crisp and clean.

Edit > Define Custom Shape.

Now your shape will appear at the

bottom of your shape set.

Go a little wild making dinos with

different colors or layer styles.
Digression: Making the graphic into
a custom shape.
Another cool thing you can do with this
path is to make it into a custom shape!

First be sure that you have the

right Shape Set open. This is the
Shape Set to which your new
shape will be added. To load a
new Shape Set, in the Shape
Options, click the arrow that
appears just to the right of the
shape as shown in my
screenshot to the right.

With the Direct Selection arrow,

click the path in the Paths
palette.