First let's start out with what Photoshop vector shapes are. They aren't really vector shapes at all. In fact they are a solid fill of color with a mask or clipping path over the top of the color to make it appear as a vector shape. The mask can be edited just like a vector shape is in Illustrator or Freehand, which makes it appear as though the shape is a vector.

Let's start with a simple shape. This is a rabbit that ships in the Photoshop shapes palette. As you can see, it looks like any other rabbit you've seen.

Now take a look at the layers palette. On the layer with the rabbit you see two things - a color portion and a vector mask portion. The color portion can be changed in real time just like a vector program does. When you double click on the layer color swatch, a color picker appears. When you select a color the entire shape is instantly converted to that color. This is much nicer that selecting and filling a shape as you would traditionally with a raster shape, since it leaves no halo or jaggy leftovers after a few fill changes.
Let's look at the image up close.

Now that we are zoomed in, you can see that Photoshop is smoothing the image boundaries just as would happen with any other rasterized image. A true vector program would allow you to zoom in as close as you could and you would still see a perfectly smooth line. So this really isn't a vector shape at all- it only appears to be in the way that Photoshop let's you manipulate it.

So in the above image I have simply messed around with the paths on the shape. Photoshop updates the shape according to my changes in real time. I am really altering the mask, but it appears as though I am altering the shape itself. You can see the path around the image easily here.

In the above image I have selected a new color which Photoshop again updates in real time. This is a nice feature that keeps one from having to do a select-fill. It also preserves the edges of the image much better than it would otherwise.

So to answer your question Alexandro, the mask is created so you can manipulate the image before you rasterize it. It creates a vector-like shape that can be manipulated in real time without loss of clarity. This is a real time-saver and it allows you the freedom to make changes easily. I hope this answers all of your questions.

Talk to you all soon.

When you want to use a mask in a more traditional way, use a quick mask. It works very similarly to the way a mask in the real world works. Say you were painting a room and you didn't want to get paint on the trim. You would use tape right - masking tape? Quick masks act very much the same way. Rather than create a mask layer, that works to show or not show a layer below it using an alpha channel, quick mask is much more intuitive to understand. Let's show an example.

I am going to start with this basic shape that Photoshop 7 ships with. I have this shape on its own layer. To enter the quick mask mode, simply hit the letter Q on your keyboard. You won't see anything happen, but your history palette will show that you have entered quick mask mode.

Now using the default color swatches (black and white), select your gradient tool and swipe a gradient from the upper left hand corner to the lower right.

Notice how the pink gradient appears after you do this. This is the mask. Think of it as masking tape with holes in it. The gradient acts as a way to go from small holes to large holes. So if you were painting, more paint would go through the large holes than the small holes and you would get a gradient effect with your paint.

Now to exit quick mask mode, hit the Q key again. Photoshop will give you a selection based on your quick mask. I am going to use my mask to make a split-screen effect with my flower. I simply go Image -> Adjustments ->Hue and Saturation. Make the necessary changes, and you can see the result.

Now you can deselect the image area and you are done. It's as easy as that. The best part about this is that you don't have to take all that masking tape off after you get done!

Now I encourage you to experiment with this and see what you can do with it. Try different filters while you are in quick mask mode and you will get interesting effects. Talk to you soon.

In order to create a mask for multiple layers at once, I combine all of the layers I want to mask into a layer set. This allows me to continue to be able to edit each layer, but mask them all at once,

Let's say we have an image like this one with 4 layers.

What we want to do is to click the link box for all of the layers you want to mask. Here I am linking all 3 layers above the background layer.

Once you have done this, click the arrow button in the upper-right-hand corner. A flyout menu will appear. Choose "New set from linked".

This will combine all of the layers into one set.

Now that this is done, you can create a mask layer above the new set by clicking the new Mask Layer button at the bottom of you layers palette.

As you can see here, I have added a mask layer and swiped a gradient from left to right with the gradient tool using white as my foreground color and black as my background color.

Here is what it looks like.

You will find a use for this little trick. I am sure of it. I love the fact that I can do this without having to permanently combine the layers that I want to mask. Before Photoshop 6.0, this was the way it was done. Take advantage of this if you can. Talk to you next week.

Above I have a photo. I would like to change the hue of the pill in the foreground from green to blue. But I don't want to mess with the rest of the image too much. So how do I do that? We first thing to do is to open the Hue and Saturation adjustment box. Go Image->Adjust->Hue and Saturation.

Above is the dialog box that appears when you have done the previous steps. I have already made some adjustments but let me explain what I did.

1) The first thing I did was to change the color edit drop down menu to Greens. This will allow me to make adjustments to the green pixels in the image.
2) Once I have selected green as my editing choice, I can use the ink dropper tool that Photoshop automatically provides me to select the green in the pill. I had to try a few times to get it in the right place.
3) Once I had selected the correct green hue, I just made some Hue adjustments by sliding the Hue slider to the right. I also made some slight adjustments with the other sliders. The actual adjustments are up to you, of course.

Above you can see my results. Using the Hue and Saturation tools to adjust images is a very powerful way of making subtle changes to an overall image. It can also save you a lot of time if you have a single entity like this one that needs changing. Play around with this idea and see what you can do with it. It's a lot of fun.

Because Photoshop is a "bitmap" graphics package, everything it deals with is in pixels. You can create all sorts of images because of this. You can manipulate photos, erase backgrounds, bevel, emboss and even paint like a traditional artist. As we talk about traditional artists, there is something that we should be thinking about... brushes. Painters use brushes to create their work. In Photoshop you have brushes too. But Photoshop brushes are infinitely more powerful than horsehair. Almost anything is possible.

To demonstrate, I am going to show you how to create a brush that is beyond a traditional painter's imagination. It's a simple way to do a complex thing... create art.

I am going to start with an image. This happens to be a turntable. I bring the image into Photoshop and begin.

To create a brush, I want to create a grayscale image that will serve as a bitmap for my brush. A greyscale image is based on 256 shades of grey, from white to black. When creating brushes, remember that the black will be solid and the white will be transparentis. This will all be more clear in a moment.

With your image in Photoshop desaturate it. Hit Image -> Adjust -> Desaturate. This creates a black-and-white (greyscale in digital terms), image. Now you want to hit Image -> Adjust -> Auto Levels. This will balance the white a black parts of the image. It makes it more clear.

Now select the entire image. Hit Edit -> Define Brush. It will ask you for a name. I chose Turntable. Once you choose a name, hit OK. Now start a new canvas. Make it much larger than the image that we just created the brush in. Select your Brush tool, and in the options palette click the drop-down brushes box. The last brush in the palette will be your new one. Select a color and click once inside the image area. Poof, instant art. The brush is now your's forever.

Notice how the darkest areas in the greyscale image are now solid. The grey areas are slightly more transparent. I hope that makes i t slightly more clear.

Anyway, this is a great little trick. You can even save brushes to disk and share them with friends or give them to me. It only takes a second and you have created a lasting piece of art. You can do this for texture too.

Scan some scotch tape on a piece of paper, or anything you can think of. You will create strange grungy brushes. It's great.

The pen tool or Bezier as it is called in some circles is a great feature. It allows you to be really bad at drawing by hand because you can get curves and lines close to perfect, and then adjust them afterwards if you need to. Let's start with the basics.

Select your pen tool and get a clean canvas. This is how the pen tool works.

1. When you click once, you start a new anchor point, or a point of junction.

2. If you draw the line out (you don't have to hold the button), it creates a straight line.

3. If you click again somewhere and let go immediately, it creates a sharp angle.

4. If you click again somewhere, hold the button down and "pull" the mouse, you create a rounded curve.

5. When you have created all the anchor points you desire, you can select the direct selection tool. It's a white arrow in the tool bar above the pen, and make adjustments to the path you have created.

For the most part, that's it. There are a few other details to the pen tool, but the basics are exactly that.

Somebody told me an analogy awhile back and it really made a difference for me. Imagine your pen tool is a car. The edge of the object you are drawing is a road that you are driving down. Now every time you come to a curve, you have to hold the button down and steer towards that curve. That will create a pretty close approximation for what you want to do. Remember that if the turn is abrupt, you just click and let go so that it is a sharp angle.

The other thing that should help you is practice. Nobody masters that pen tool on the first try. You have to experiment and make mistakes to get it right. It's sort of like riding a bike. It takes awhile, but once you get it, you never forget.

Below I have created a oval shape and then traced around it with the pen tool.

Notice the points at which I made anchors. Keep that driving analogy in mind when you do so. Now these points and curves are not perfectly precise, but that's OK, because I can go back and make some minor adjustments if I need to.

Here I have made a star with sharp edges and did the same thing, only I clicked and let go at the anchor points to make sharp angles.

To give you something to play around with, I have created a few objects for you to trace. Just save this image, bring it into Photoshop and then have at it. If you can trace these perfectly, you are off to a great start.

I'm going to show you how to use the clone stamp tool this week. You'll love what it can do for you. I know I have really made some clients bow down at my feet in astonishment over some pretty easy tasks.

Remember to always say "sure, I can do it, but it's gonna cost you." Just kidding.

Let's start with a photo. This is the first one I found.

See the lady in the background between the two plants? I don't like her. Let's get rid of her.

Now get your cloning stamp tool. I have it pictured below.

The trick to this is that you want to find an area that matches the color and pixel assortment of the area you are going to change. Zoom in to your picture very closely. Here you can see that the brick pattern has some obvious areas that are different from one another. The brick where her head is, is darker than the lower ones. Let's take a sample of that area to "erase" her head.

Hold down your option/alt key and click in that area. Select a brush size by hitting your [ key for smaller sizes and your ] key for larger before you do this. Pick a size that will fit within the brick area by her head. Use something small. Now go over to her head and makes some clicks right on top of. You should get something like this. I circled the area that I took a sample from. The circle is a little bigger than the sample brush size I used.

To finish the remaining portions, just do the same thing. Match the color with the area you are going to "erase" by looking closely around the area and finding a match. Then you can click on the area to get rid of.

Here are a few tips:
1. Use a smaller brush when in doubt.
2. Only make a few clicks at a time, and then go back to take another small sample. The results are always better this way.
3. Try not to take sweeping strokes as you would with a paintbrush. You lose control and your computer will sometimes bog down a bit.
4. Take your time and use your histroy palette if something goes wrong. You can always do it over.
5. Always make a copy of the layer you are going to work on. You'll save yourself a headache. Trust me.
5. Have fun

Here is my final product. Not too bad for about 25 seconds of work. Especially when everyone thinks it's so hard! Now you will find much more challenging pieces to deal with than this one, but in time you'll have it mastered.

You've seen those old photos that are not black and white, but more like brown and white right? That brown and white tone is called Sepia tone. In Photoshop you can do these very easily with some of the basic tools the software provides for you. But you don't have to have just brown, you can have any color you want. Whether it be brown, blue, green or purple, it's very easy to do. I'll show you how.

First thing is you need a photo. Any one will do, even a black and white shot. Color shots are just fine too. Bring your photo into Photoshop and do any cropping and adjusting you need to do to make it a perfect snap shot. Now we are going to colorize it. The first thing to do is to hit Image -> Adjust -> Desaturate. This will turn your color photo into a greyscale photo. Basically just black and white. Now hit Image -> Adjust -> Hue and Saturation. Look at the image below.

There are three sliders to work with. One adjusts the hue, the second adjusts the saturation and the third adjusts the brightness. In the lower right-hand corner is a checkbox that says Colorize. Click that now. Now you will have an image that is based on the color of the top slider. As you move the slider back and forth, you will see a color change throughout the image.

The saturation slider adjusts the amount of color that the image has. So the farther right the more color will be applied. As you move left of the center point, you will begin to see the image go back toward black and white or desaturation. Saturation means simply what it says. The higher the saturation, the more color. Think of a towel that you are soaking with liquid color. The more color you add, the more saturated the towel becomes.

The last slider will adjust how light or dark your image is. The middle is fairly neutral, and as you move left or right of that point, the lightness changes.

To demonstrate, I have taken a simple snapshot of some ladies watching the television. I brought the image into Photoshop and did some cropping. I also adjusted the levels to make it more balanced. When I was satisfied, I desaturated it and then added a nice brown Sepia tone. Take a look at the first image.

You can see that this is just a plain, old photograph. Now take a look at the finished product.

If you look closely, I also added some noise to the photograph to give it more weathered and old look. I simply hit Filter -> Noise -> Add Noise... I added a bit of Gaussian noise and voila, I'm done. Try doing this with some of your favorite photos and then printing them out on your laserjet. You can get some great wall photos out of this little trick. See ya next week.

After looking at the above image, do you feel hungry? Do you feel happy or sad or anything? Actually, in this context, you probably don't feel anything. Let me ask you this; other than blueberries, when is the last time you ate something blue? How about a blue, hard-boiled egg? Does that sound disgusting? It does to me! How about some blue pasta? Sounds great huh? No, it doesn't.

There are colors that affect us psychologically. The reason I wanted to compare the upper image of oranges and yellows with blue is that the former is much more appealing with regard to food than the latter. In other words, you can accept the idea of orange and yellow when it comes to food, but blue? I don't think so.

Companies like McDonald's, Burger King, Wendy's etc. take advantage of these psychological effects, and so should you. When you design, you should at least consider the implications of the colors you use. Many of you have heard this before. Some of you have no idea. This week, I am speaking to those that have no idea.
Let me ask you how green makes you feel. How about white? Your answer will depend on where you come from in the world. For us in the United States there is a set of "cultural" rules that define what colors mean. White is pure, like in weddings. Black is solemn, like at funerals. These colors do something to use mentally. They affect how we think about what we look at. Take a look at the graphic below. On each color is the general meaning in conveys in the United States.

Do these colors and descriptions make sense to you? They do to most people. In fact, a number of studies have been conducted to find qualitative evidence that they do affect people in ways that we sometimes don't even realize. Hospital rooms have certain colors such as yellow and green to help soothe patients back to health. Martha Stewart uses greens in her branding to convey a sense of nature and serenity. Take a look at a bank's logo. Most times, they will be blue, conveying a sense of security, calm and strength. And of course, all your favorite fast food places use orange to make you hungry. Kinda' makes you think huh?

So my point is that color is vitally important. As a designer, don't pick colors that are your favorites. In fact... don't even have favorites. I was filling out at online survey the other day, and they asked me what my favorite color was. I was stuck.

Since I have really been paying close attention to the importance of color, I have lost my love for any one particular hue. I like every color when it is used well. And that does not mean that you can't break the rules! Break 'em since they are there I say! But you have to know the rules before you can break them right? Just be mindful of color in design. It is important to your subject matter. Use color to make your desings more user friendly, and more usable overall. The color should be a reflection of the site's content and the company's branding. Or, just from a completely artistic point of view, color can bring harmony or clash to a site. Both are cool, but you have to know what goes with what to pull it off. So break out the color wheel and have a go mate. See you around.

Look at the image above and notice that the arrows point in opposing directions. This is demonstrating the concept of complimentary colors. First of all, consider the color directly across from any other color as being completely opposite. They are as disimilar as you can get. The theory behind this concept is that you have colors so different that they compliment each other like a symbiotic relationship. One color compliments the other. That is the bare-bones version of the theory. You get combinations like green/purple or blue/orange. How this is works is that you can have tension come out with your color. Instead of having a peaceful feel, you get a degree of contrast or conflict. This of course does not mean that it's a bad thing. Contrast is a good thing, if that's what you are going for. Take a look at the next image.

Here you have red stripes against green stripes, or the opposite if you like. Notice how the two colors are fighting for your attention? The red one sort of wins out, but that is because it is a warm color. Warm colors are considered to be "advancing". So what they do is appear to jump out at you from the image. This is especially true if you place them against an opposing cool color.

Here you have another version using orange and blue. Yellow and blue also works. You'll see a lot of web sites using this combination. My own site uses this. I use orange color against a monochromatic blue color scheme to draw your attention. It sort of jumps out at you. It sticks out like a sore thumb so to speak. But it also compliments the layout and adds a little spicey spice. Enough cliches? Ok.

Now let's talk about good ways and bad ways to use complimentary colors. One great way to do this is when discussing type. Why is type so important on web pages, and why does it matter what the color of it is? Well, because you have to be able to read it, right? So what if I was to have an all orange site that used blue text? It would looke horrible for one, and you would have a heck of a time trying to read the text, unless I made it large and extremely dark. The same goes with red/green combinations or red/purple combinations. They just hurt your eyes, unless you use the warm color as the text against the cool, complimentary color background. Take a look below.

Can you see what I mean?

Now remember that color theory is a "THEORY". That means that it is not written in stone. I am by no means a color theory guru. I encourage you to go out and learn more about color theory. There are sources on the web, if you search for them, or you can buy a book. I myself sometimes think it is kinda cool if a designer steps out of bounds so to speak and uses a non-traditional color scheme. But please don't go out and make a red page with green text on it in a 7 point pixel font. We can't read that! What you can do is experiment with these techniques on your own, and see how things feel and look. Always keep these basic concepts in your head, and you will be better off for it. Next week we will discuss why McDonalds and Burger King use orange and red in their signs' color schemes. You'll have to tune in for that. Go out and surf the web, making note of how designers use color. What sites do a good job and what sites do a bad job? You now have at least some power to decide.