Arrange your workspace

Step 1: Pop open the photo and immediately duplicate the background layer by pressing Command + J (PC: Ctrl + J). You don’t have to do this, but it’s a good idea to protect thyself from, well, thyself and it’ll also give you a way to back off of the effect in case you overdo it.

NOTE: You could also select just the iris area with the Lasso tool and jump that up onto its own layer. If you have other retouching to do, that might be the best choice.

Step 2: Choose Window > Arrange > New window for [document name]. Zoom into the new window so you can see what you’re doing by pressing Command + (PC: Ctrl + ), and keep the original window at roughly the size the image will print at. This will allow you to see how much of an effect the enhancement is having. Anything you do in one window is automatically reflected in the other. It’s a handy way to work when you’re retouching.

This is what my workspace looks like now:

Enhance the iris

Step 3: Grab the Dodge tool (circled in red below), and immediately cast your eyes upon the options bar at the top of your screen. Lower the Exposure to about 30%. Mouse over to the photograph and size the brush cursor so that it fits only the iris area (be careful not to brush over the dark outer edge of the iris).

TIP: Press the left bracket key, [, to cycle up in brush size, and the right bracket key, ], to cycle down.

That’s really all there is to it. Because we lowered the Exposure, we can “build” the effect to the intensity we like by continuing to dodge the iris. If we go a little too far, we can decrease the opacity of the duplicated layer to lessen the effect, like so:

Here’s our before and after:

A simple, yet effective technique. That’s the way I like ‘em! Until next time, may the Photoshop force be with you all.

I have been working on several actions (I think I’m up to 30 variations now) for getting some use out of these photos. Most of these first turn an image into an artistic rendering and then warp said photo into something seamless, giving it a Goth-like quality that on occasion is pretty creepy but generally always cool. How could I describe the process without taking a full month of tutorials is the question. I think I’ve found an answer. Why not use an existing online tutorial for the first portion of the process, and then complete the effect here? I’m not sure if this will work, but we can surely give it a try.

For the first part of this tutorial, please direct your browsers to an excellent Photoshop Tutorial Resource, Access Denied (http://www.axxessdenied.com/). This site is fantastic and has quickly become a personal favorite of mine. In the upper right corner of the main page you will find a navigation menu. Go into Tutorials, then Click Photoshop. Scroll down through the long list of tutorials (maybe stopping to perform a few on the way) until you find one entitled “Photo -> Sketch by axxessdenied”.

Open an image/photograph, preferable a head shot as these work best for the rest of the tutorial I’ll be covering here.

I’ve just gone through the tutorial, and here is the before image alongside the after image:

I love the process the author of the tutorial uses to create the subtle brushing in that effect. Nicely done!

Ok, now to my portion of the tutorial.

1) Once you have your image ready, collapse it. Duplicate the background layer.

2) With the duplicate layer selected in the Layers Palette, go to Edit>Transform>Flip Vertical.

3) This next part of the process is basically covering the seamless tutorial we did on texture photos a few weeks ago, but wait until you see the result! With the duplicate layer selected, click the ‘Add a mask’ icon on the bottom of the layers palette. The foreground/background colors should default to Black/White respectively.

4) Before we apply the mask, let’s square things up a bit. Go to Image>Image Size and set the size to 3 inches x 3 inches, resolution 96 DPI.

5) Now select the Gradient tool. Set your gradient up so that there is a fairly stark division between the 2 colors.

Also, make sure the Linear Gradient is selected.

6) Starting at the top edge of the image, draw the gradient down to the bottom edge. Use a strait vertical line… any variation will mess up the end effect. Your image should appear reflected, like this example:

7) Go to Layer>Merge Visible. Duplicate this newly merged layer. Select the Duplicate again and go to Edit>Transform>Flip Horizontal.

Again, Click the Add a Mask Icon. This time draw your gradient from the left edge to the right edge, as strait as possible. Here is the result:

Have a great week, everyone!

http://actionfx.com

Documentation is superb, with a full color manual and an updated quicktime tutorial on the enclosed CD. In about 15 minutes I was ready to try out the software.

Installation was a snap on OSX as the product is fully carbonized for OSX. To date, Corel Corp. have more products for OSX than any other company. (It also works on 8.6 and up and Windows 98, 2000 and XP.) Knockout 2 is the 3rd Program to be released from Procreate. Procreate is a new branch from Corel which handles the professional graphics side of things. The previous 2 releases are Painter 7 and KPT effects.

The first improvement to strike me immediately is that Knockout is now a plug-in instead of a stand alone product. This saves a lot of time and hassle with alpha channels. Another great improvement is the memory hungry beast has been put on a diet. The folks at Procreate have reduced its memory demands, and anyone who has used 1.5 on the Mac can now allocate that RAM somewhere else. It also now supports CMYK images.

Using Knockout 2 is more streamlined than before with the addition of Photoshop Shortcuts, no more having to learn a whole new arsenal of keyboard tricks. It did a splendid job of quickly lifting this image.

KO is fairly easy to use and had 4 different levels of masking. I was surprised to find that version 2 doesn’t just have a lot of usability enhancements but also does an even better job than 1.5 of detecting the edges of an image. If you don’t get the image quite right there are tools that enable you to fine tune the selections.

There is also the welcome addition of the “touchup tools” yes, we now have a paintbrush and eraser tool for quick fixes, this is one of my favorites. You can view your work as an alpha channel or choose different colors to display against your masked image, you can even choose another image as the background. If you totally mess it up you can revert the file and there are now 99 levels of undo.

If you look at the close up here, you can see how clean the masking is around the hair. I was very impressed with the results. With a little practice and time you could remove almost anything.

My conclusion is that Knockout 2 is well built and the new features certainly make it worth the upgrade. It is a strong program that does what it is designed to do very well. If you are a professional designer who regularly extracts images from their backgrounds it is a must buy. The only draw-back is a pretty steep recommended price of $329 and the upgrade for US$149.

In my review of Knockout 1.5 I said “with a stronger undo feature, 1.5 would receive a solid 5 out of 5.” Version 2 definatly deserves that rating.

Until next week, see you at the café www.photoshopcafe.com

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.

Last week, we mentioned the beginning stages of what analogous color is. I mentioned that we can have several colors that are similar to one another, but yet different. That’s almost right, but not quite. What we looked at last week is really what is called “monochromatic”. I didn’t want to confuse you with the term monochromatic, because a lot of people that hear that think that we are talking about a single color. What we are really talking about when we say monochromatic is a single hue, but several tints or shades. This is what we looked at last week. Remember, as a scheme, this is monochromatic.

Now to truly discuss analogous color schemes we have to break out the color wheel. The color wheel is a circular pattern of colors that go from one hue to the next in a continuum. Take a look at the next image.

You see that there is an arrow going accross a series of hue values. These would be analogous to one another. As monochromatic was the use of a single hue with different shades, this is the use of two or more hues to provide a color scheme. In other words, you use two different colors next to each other on the color wheel. So this could be purple and blue or red, purple and blue etc… Take a look at the next color scheme to see what I mean.

You can see that we have a couple of actual hues here. I am being subtle, so that you can see the usefulness of the idea. I don’t particularly like the combination of a fully saturated yellow coupled with a fully saturated green. But when you desaturate the two, you get a nice combination. Compare the next two images.

While the first one is sort of light and Springish (as in the season of Spring), the second one actually makes me feel a little queasy. That’s just my opinion, but you may feel the same way. That doesn’t mean that the second combination doesn’t have its place in the world. A few colleges have chosen green and yellow for their school colors. And you all know about those Oakland Athletics right?

Just to recap, let’s go over what we have talked about. We have spent the last two weeks talking about designing using analogous color. Analogy means that things are alike, or have something in common. We talked last week about Monochromatic color schemes using a single hue with several shades. See the image below.

This week we talked about using two or more colors that are next to each other on the color wheel. See the image below.

I hope you have soaked this all in. I know it can be a little confusing if you have never been exposed to this, but practice at home playing with these colors and others. You might also go out on the web a see what people are using as color schemes. Next week, we will continue with more color theory.

This week I want to begin talking about color theory. Before I do, I want to stress that some of this is hard and true “Color Theory” as it has been written for the past 100 years. Some of it is my own personal opinion about color. As an artist we must rely on intuition as much as we rely on theory and practice. It’s like a musician; you can teach them all the music theory you want, buy you should never “train-out” their ear. That’s what makes them an artist. Let’s begin this week by talking about some really simple ideas about color and then move on later to more complex ideas, psychology and practice.

I am going to introduce you to a term in color theory called “analogous color”. What this means is that you have a series of colors that are the same hue, but a different shade or saturation value. Look at the image below to see what I mean.

Here is a series of brown colors going from a dark shade to a light one. You should be able to feel a sense of something with this color scheme, but we will talk about that later. What we have here is a series of analogous colors. Now brown isn’t the best example, so let’s look at blue.

Here we have the same series, but with blues. Now, analogous colors can be any hue. If you were using a greyscale version, they would go from black to white through a series of grays. Technically, black and white are not colors per se, but you get the idea right?

So why do you care? Well, you care because the values you choose in your color scheme whether your scheme is for print, the web, or anything is vitally important. Choosing analogous color schemes is very useful for tying together elements in a layout. You can use it to evoke a sense of structure, simplicity and sophistication. It is also useful as an underlying color scheme, for which elements can compliment it. We will talk about complimentary colors later, but think about how often you see combinations of blue and orange, or blue and yellow on the web. Those colors are complimentary to one-another.

The level of saturation in color is important in making sure your color scheme works. Take a look at the image below.

This is the blue image that has been completely saturated. I used the Hue and Saturation command in Photoshop to do this. See how different it feels from this next image.

The first image is not my idea of sophistication. Typically, web sites and print material that are trying to evoke calm, structure and maturity use soft, desaturated colors. Full saturation is sometimes useful for work that is aimed at younger folks.

Just for clarity here are the brown images to look at.

The saturated one:

The desaturated one:

So that is your first taste of color theory. We will continue to talk about this and how to work with color in Photoshop in the next few columns.