How to create a triptych in Photoshop or Elements

Intro
Triptychs date back to the Middle Ages, but that doesn't mean that creating one should be a years-long quest.

I perused a few forums and here are some of the suggestions for making triptychs:

• use a program that does collages for you (such as Picasa)
• use an action (from some action site or other)
• use the Photoshop picture package option
• print your photos and physically cut and paste

Any of those suggestions will work, but I wouldn't choose them because:

• I'm a control freak and I really like Photoshop.
• Most actions aren't very flexible and I don't want to download, install, and try out a dozen just to find one that suits my needs (especially when triptychs are so easy to make).
• "Picture packages" make me think of school pictures—and that's never good.
• I don't like getting glue on my hands.

So why not learn a few basic Photoshop tricks that will help you with any type of photo collage? Don't answer that. Just a rhetorical question. Read on...

The tutorial
To make a triptych (or diptych or polyptych or...) you need only do a few things:

1. Choose your photo(s).
2. Choose the size of your triptych and of each section.
3. Put the photos on one digital canvas.
4. Add a border. Or don't. Whatever works for you.

I will leave step 1 and most of step 2 up to you. Step 3 is almost embarrassingly easy, and I will give you several ways to do step 4. Once you do this, you, too, can be a control freak who lazily shuns actions, mocks picture packages, and never touches a bottle of glue.

Part 1: Choose your photos
Hey! I said I wasn't going to do this part, but since we're on the subject, here are a few things to consider: Do you want one photo broken into three parts? Three separate photos? Do you want your photos to tell a story or to have a different connection? Do you want to use color, black and white, or a combination of the two? You decide.

Part 2: Choose the size of your triptych and the size of each section.
You can either decide in advance what size your finished triptych will be and then make the photos fit, or you can decide the ideal size of each part and then make the canvas fit. In either case, you will:

a. create a blank canvas,
b. probably do some cropping, and
c. drag photos onto the canvas.

a. create a blank canvas
I prefer to make the blank canvas first and then crop the photos to fit it. Why? Because I want my finished product to correspond to a certain print size (such as a panoramic frame).

Let's pretend I just bought this panoramic frame from Target (which I didn't because it's $69):
It fits a 4 x 11 inch photo, which means that I will want to create blank photoshop document that measures 4 x 11.

Whether you're in Elements or Photoshop, all you have to do is create a new document (at 300 dpi) with those measurements:


b. do some cropping (if necessary)

Open the photos you want to use in your triptych:
If I want the three photos distributed evenly across my 4 x 11 inch canvas, they will each need to be 4 inches high and 3.67 (or better yet, 3.6666666) inches wide—definitely NOT a standard size.

So we crop...

Select the crop tool (c) and enter the proper width, height, and resolution in the toolbar at the top. You can now crop each photo (click and drag, then hit return when you like what you see) in preparation for your penultimate step!


c. (the embarrassingly easy step): Put the photos onto the digital canvas.
Your one obstacle to moving the photos to your blank canvas is that annoying little lock on your background layer:
To get rid of it, double click on the thumbnail-sized photo in the layers palette. This will bring up a dialog box:
Don't even worry about renaming it. Just click "OK" and now you are free from the shackles of the insidious lock.

Now you can use the move tool (v) to drag each photo onto the canvas. With the move tool selected, just click on the photo you want to move and drag it onto your triptych canvas.

Repeat with your other photos, dragging each into position with the move tool. Each photo you drag will be on its own layer. To change the order of the photos, make sure the proper layer is active.

Now you have a triptych on your canvas!


You could flatten and save your new triptych right now OR you could keep those layers (i.e. don't flatten yet) and add a nice border.

Part 4: Add a border
This step is optional, but I usually prefer at least a small border. There are several ways to do this, but I will use the "stroke"—a word which here means "border" and should in no way make those of you who are old enough to remember Billy Squire burst into song. Some things are best left to drunken karaoke.

Option 1: the stroke
This works differently in Elements and in Photoshop, so I will show you the Elements way first and then note this Photoshop differences at the end:

ELEMENTS

Select the photo to which you want to add a border. Then, in the top menu, choose Edit-->Stroke:
You will then see a dialog box like this:

You can now choose:
a width for your outline (I used 10 pixels in this case),
a color (click on the box and bring up a color picker. If you drag outside of the box you will see an eyedropper tool that lets you sample a color from your image. I sample his shirt, for example.),
a location (center, which means that half the line is inside and half is outside the photo.), and
opacity (100% for solid; less for a more subtle look)

BUT WAIT! There's a catch. If you apply a stroke to the center of each photo, the lines in the middle are perfect, but everywhere else you are losing half of your stroke off the edge of the canvas (i.e. you are only getting the half on the inside):

Luckily, there's an easy fix. Select your three picture layers (you can leave the background layer alone) and then click the little arrows at the top right of your layers palette to get this menu:
Select merge layers. Now you can add a stroke all around your image (remember to select "inside" from the stroke dialog box), and everything will be perfect (Although my example is admittedly thin and hard to see on screen here).


PHOTOSHOP users:
Same principles as above, except you will be doing the strokes as layer styles.
Double click on the thumbnail photo in a layer to bring up the layer style box:

Make sure that "stroke" is both checked and selected (i.e. highlighted). You can then set the width, position, and color of your stroke. Just so you can see the results better, I chose 25 pixels, center, and red.

Click OK, and then either repeat the process, or copy and paste the layer style by right-clicking in the layer.

When finished, you will merge the three layers and repeat the stroke—but on the inside—for an evenly framed triptych.


Variations
You can use the same principles for any photo that needs a border and for any kind of collage. Don't feel like you have to make the photos the same size. Experiment with proportion and with horizontal and vertical layout.

Try it out, and when you do, share your results by linking back in the comments section of the Monthly Special.

Clone out distracting backgrounds in Photoshop (and Elements)

As promised, I want to give you more detailed explanation of some the fixes for bad backgrounds that I mentioned in my last post. In this post I will show you how to get rid of a distracting background.

Let's say that in the photo above we don't like the swingset and the kid on the swing. Maybe instead of the juxtaposition of play and quiet reading, you just want to emphasize the solitary reader. I have to warn you that this kind of fix takes time and that I hate doing it. Consequently, I'm not going to do a pro-worthy retouch, but I'll do enough to give you the idea.

1. Open the document with the distracting background and duplicated the layer (Mac: Command—J or PC: Ctrl—J). You never want to work on the background layer.
2. Select the clone stamp tool (S), and in the top menu bar select a medium-hard brush (at least 50%). Your opacity and flow should be set to 100% and the "Aligned" option should be checked (it's the default setting). Throughout the process you will change the brush size and shape (and possibly opacity) as needed.

You are about to begin the tedious process of cloning. The basic principle is simple: with the clone stamp tool selected you will set a source point and then clone that point wherever you want. Place your cursor in a part of the image you want to copy, hold down Alt and click to set a source point. Now (without holding down alt or anything) you can click anywhere in the image and clone from the source. Try it. Once your source point is set, anywhere you click will be aligned with that point and the surrounding area.

Time for tedium. This is why I hate cloning out things. See that clubhouse and swing set? I am going to set a source point on some nearby greenery and then clone leaves over the distracting parts of the image. It won't look convincing, but for now the main objective is to cover up the swing set with green. If you look at the image below, you will see that I have cloned out the boy's head. Now all I have to do is repeat that process about a hundred times. Ugh! To be fair, the number of times you have to choose new source points and the size of the brush you use vary greatly according to the size of the area you want to cover.

Check out a detail of my sloppy effort to cover the clubhouse:
So much for good bokeh. More careful cloning can get better results, but you will most likely not be happy at the stage.

3. Let's assume you are not a pro retoucher (if you are, I'm flattered that you're reading my tutorial and all, but get back to work). Once you have cloned over your cluttered background, you may want to improve it with a two step touch-up. First, do more cloning to break up unnatural repeated patterns. Next (and Elements users do not have this option), you can select the patch tool (J)—the one above the brush tool that looks like a patch—and smooth out the rough spots. I love the patch tool because you can make really jagged and sloppy selections, drag those selections to a new spot, and presto! thanks to a complex algorithm the source and destination merge into a "healed" final product.
In the image above (click to see it larger), I clicked down and drew a circle around a light area, then dragged it over a not-so-smooth transition to a dark area, and then it created a better transition (not pictured).

I LOVE the patch tool. I use it all the time in portrait retouching (but more on that in another tutorial). The only thing you should watch for is that if you use it too close to something you don't want in the blended mix (for example, near the pink sweater), you will get an unappealing blog (say, a pinkish green leafy blur). There are ways around this, but they are too complex for (read: I am too lazy to write them in) this tutorial.

I used the patch tool until I was sick of it, and was left with a still unconvincing background.

4. Blur to the rescue!
In order to beautify the bokeh, I selected Filter-->Blur-->Gaussian Blur, and dragged the slider until things began to look better:
Now the background has a better blur, but what about the girl?
5. Time for a layer mask. In the layers palette, click the layer mask icon to add a blank white layer mask:

NOTE to Elements users: Photoshop doesn't want you to have access to layers that aren't "Adjustment layers," so you have to do the following cheat:

• add a new adjustment layer such as Levels (we won't actually change the levels, we just want to steal its layer mask). When the dialog box comes up just click OK
  

• Now copy the photo layer and make an adjustment layer sandwich by dragging your new copy to the top like this:
• Now create a clipping group:

What you have just done (you cheater, you) is make that layer mask in the middle work as a mask for the photo above it.
Now you can go back to following the Photoshop directions.

6. Time to mask out the blur where we don't want it. Select the brush tool (b) and then use a medium hard round brush at 100% opacity with your foreground color set to black (the squares at the bottom of the left toolbar should show black in front and white in back. If they have another color, just hit "d" to return to default.) Because the layer mask is white, you will be painting out the blur filter wherever you paint black. You can toggle between black and white by hitting "x" (if you want to add blur back in somewhere, for example).

Three helpful hints:

• As you mask out the blur, you can use the right and left bracket keys to increase (right) or decrease (left) the size of the brush. Hold the shift key and use the bracket keys to make the brush harder (right) and softer (left).
• Use a soft brush wherever you want a smoother transition between sharpness and blur
• Hit the backslash key (\)to check your progress (This is called a "quick mask." See image below). Hit it again to return to normal view.

Anywhere you see red is where I have painted on black. You can leave it in quick mask mode as you paint. If the switch to quick mask mode has also switched from black to white (or vice versa), just hit "x" to get the color you want. You will have to watch out for that when switching between quick mask and normal view.

One last hint:

• As you paint blur in or out, experiment with different opacities on transitional areas. Thanks to the mask, you can even experiment with that selective blur look that has been popular for a while now.

Finally, we're done. It was a lot of work, wasn't it? The whole thing would have been easier if the picture had been right from the start. But sometimes we don't think ahead, so it's good to know how to fix an image.

Here is the "before" image:
And here is the "after" (I warmed it up a little as well—see my "adjust tone and color" post):

Finding, Installing, Loading, and Using Brushes in Photoshop and Elements

Finding Brushes
Finding free brushes for Photoshop is easy. In fact, the number and variety of free brushes can be overwhelming. Google "free photoshop brushes" and you will see what I mean. I will do a future post with links to some of my favorites, but for starters, check out this list of 75 hi-res brushes picked by Elite by Design (I will be writing four posts for them in January, by the way). Once you have found some brushes that you want to download, pay attention to the following:

• Compatibility. Not all brushes work in Elements or in every version of Photoshop, and many brush sets won't specify compatibility. If you like it, go ahead and try it. Either it will work or it won't, but it shouldn't crash your system or anything (Should I be putting a legal disclaimer here? hmm.), so give it a try.
• Brush size. If you want to use brushes to create a new banner for your blog, pretty much any size will do. Larger images, however, may demand larger brushes. Look at the maximum pixel size of a brush to see if it's hi-, medium-, or low-res. 2500 px, for example, is hi-res.
• Price. With so many free brushes out there, I would think twice before buying a brush set . If you see a must-have set that is not free, check places like deviantart to see if something similar is available for free. Another thing to consider: you can make your own brushes. I will teach you how this month.

Installing Brushes
The process is the same for Photoshop and Elements. Once you download (and unzip as needed) a brush set (should be a .abr file)...
Go to Applications-->Photoshop (or Elements)-->Presets-->Brushes and drop it in. That's it.


If you had Photoshop open at the time, you will have to quit and re-open before you can access your new brushes.

Loading Brushes
Select the brush tool (b), and look at the brush menu bar on top. In Elements, you will see (on the left side) a swoosh-like image of one of the basic brushes:
In Photoshop, you will see (second from left) a dot representing the active brush:
Click on the arrow to the right of your brush image (swoosh or dot) to get a menu with Thumbnails of your brushes. From there, click on the small arrow(s) for a menu that lets you change the size of the thumbnails (I like to make them larger so I can see the custom brushes more clearly). You will also see a "load brushes" command, but you will not use it because you have already put the brushes in their proper place. Instead, in Elements (I'm using Elements 6 for Mac), you will locate the pull-down menu just above the thumbnails...
where you will find a list of your brushes (including any that you dropped into the brushes folder before opening the application). Select a set you want to use, and you're ready .
In Photoshop, the brushes will all be listed in the menu that pops up when you click the small arrow. (In CS3, you can hit F5 and bring up a brushes palette on the right that will do the same things).
When you select one of the sets, a dialog box will ask if you want to replace the current brush set with the new ones. You do. No worries, your other sets will still be there in that same menu when you want to switch.

Using Brushes
This tutorial will only cover the basics, and in a future tutorial I will talk about some of the options.

• Changing brush size: You can either use the slider in the brush palette, or (and I highly recommend this shortcut) use the left ([)and right (])bracket keys to change brush size. Also, for brushes that have hardness/softness settings (such as basic brushes), hold shift while pressing the left or right bracket keys.
• Opacity: There is an opacity slider in the top brush menu, or you can make a new layer for your brushes and change the layer opacity—although the latter option will uniformly change the opacity while the former allows you more control.
• Color: You can change the color of the brush by clicking the foreground color box and selecting a new color.

This should get you started on the December Monthly Special.

A stylish holiday card from Walmart?

Meet Esmé and Finn.

Esmé just finished her residency at Johns Hopkins. She dabbles in auto repair in her spare time. She adores sushi, strolls in the park, and vintage vinyl.

Finn knits (yes, knits) when he's not teaching sign language to underprivileged children. He loves pasta, and always loads up on carbs before a marathon in spite of what Esmé says about current research on the topic. Much to Esmé's chagrin, his idea of the perfect date includes three or four lively hours at a local Karaoke bar.

Esmé and Finn's favorite colors (this season, anyway) are purple and orange.

Aren't they adorable. No one has to know that the New Year's cards they just sent out were printed at—gasp!— Walmart.

Esmé and Finn aren't real, but I did have fun inventing them. My point in so doing is to suggest some photo-based card alternatives to the family newsletter approach.

No offense to anyone who sends one of those typed brag-fest missives touting everyone's accomplishments throughout 2008. But here is my opinionated take on it: The people you keep in contact with already know what you've been doing, and the ones you only send cards to once a year are probably wondering why you only give them this information once a year—or so I imagine.

Maybe visual clues could replace the newsletter this year. A picture is worth a thousand words, right?

Besides, if you blog, the full story is all there for the reading (and you could always have your blog address printed on the back of the card). So why not send a "year in photos" card or some variation thereof. We might be doing a less-hipster version for our own family card, but I may have said too much already. When I did the Christmas "dots" card tutorial in October, Michelle said she liked it but that now that everyone had seen it...

So, at the risk of ruining another card idea for our own family, let me tell you how easy it is to do something like this.

It's all based on a grid. Back in June, I did a grid tutorial that teaches the basic principles behind creating a grid. I used some of those same methods in creating this card. In a nutshell, here is what I did:

1. I created a document that was 5x7 inches at 320 dpi.
2. I went to Preferences-->Guides, Grid (etc.) and set the grid lines to appear every inch:
3. Now it was just a matter of selecting photos, cropping them, and dragging copies to a space in the grid. All of my photos are either 1x1 in or 1x2 in, so it was very easy to just drag each one to a square in the grid (easy, provided you selected View--Grid so you can see the grid).

4. For the colors, I used the rectangle shape tool and changed colors using the menu at the top. Look at step 10 in my dots grid tutorial if you don't remember how to do this.

5. For the text, I just added it the same way that I have explained in the "add text to photo" starter.

6. Those black lines around the photos were created by adding a "stroke" in the layer styles box. Just double click the thumbnail image of the layer in the layers palette to get the "Layer Style" box. Highlight "stroke" and adjust the settings/color to your liking. These were my settings:
Once you have the stroke on one layer, you can copy and paste it in the layers palette or simply drag it onto another layer (rather than go through the process each time).
It was really pretty easy.

And here's the great thing...
No assembly required. Once you prepare a file, you can have a 5x7 card printed at your local Walmart (I assume they have taken over the world by now, haven't they?). What is great about the cards is that you have the option (unlike Costco, for example) of uploading your own photo to a 5x7 folded card without using one of their holiday-themed templates. This means total control (perfect for fellow control freaks). They happen to have a 12 photo collage option (for which I applaud them), but I would rather have the freedom to design something exactly as I please.

I braved the stench of cheap hairspray this morning (I'm not kidding, that was the smell of our local Walmart) to check out the quality. They couldn't show me a finished sample, but they showed me the paper and it was a bit on the flimsy side. But at $1.42 per card including the envelope, it is still at least as inexpensive as something you would make with photos and card stock. And the bonus is that you will save a lot of time.

If you want to bump the quality up a notch, try the Moo Holiday Cards option. The printing and paper quality is unbeatable for the price. Two possible deterrents: increase in price, and the 4.1 x 5.8 inch size that is less neat and tidy for a grid. And one more: less time to procrastinate. They ship from England and take about 10 working days to arrive. Of course, any printing place will do as long as it will let you print photo cards from a full photo instead of a template. Just be sure to get the dimensions and design accordingly.

Let your imagination run wild and think of alternatives to the family newsletter this year.

A "dots" Christmas card tutorial

If you don't want to create templates and clipping masks, if you prefer eyeballing it, then this is for you. Beware, however, that a more free-form style of creation can lead to imperfections (or shall we call them "variations," as in "variations in fabric should not be considered imperfections in manufacturing..."?).

That said, keep in mind the "galloping horse" rule. We learned the rule in our household back in our quilting days. It goes like this: If you don't notice the mistakes when riding by on a galloping horse, then it's good.

Now, on to the tutorial.
If you want to do a grid of dots, why not incorporate a few round things? Pumpkins come to mind for a Halloween card. But we have a hard enough time sending out Christmas cards, so I will use Christmas ornaments. Here's how I did it:

1. Create a new document that is 5x5 inches at 320 dpi (this is because 5x5 is a good card size).

2. Get into those grid preferences and adjust the settings for nine equal squares (just like we did in the previous "dots" tutorial).
I set the main divisions at 1.66666, but I put the subdivisions at on 16 (as opposed to the 32 on the previous tutorial—galloping horse rules, right?).
3. So now that you have a nice little blank document with a grid (if you don't see the grid, turn it on in the menu: View--> Grid), you need two things: those ornaments, and some round pictures. First, the ornaments...I really didn't feel like having an ornament photo session, so I bought a photo from iStock Photo (this one). Stock photography is a great way to get good quality images quickly. For certain purposes, the price of a stock photo is worth the time it would take to do your own. Just make sure to buy an image size big enough for your needs. As for your own family photos, well, unless you want to construct the perfect artificial family (which, for the right person, might be very entertaining), you had better take your own portraits.

4. Now you need to separate those ornaments and drag the ones you want onto your card-in-progress. The advantage of stock photography is that you can get clean photos on white (read: extraction-friendly) backgrounds. Every Photoshop user has their favorite method of extracting an image. In this case, here's what I did:

Maybe it's because Halloween is near, but I chose the "Magic Wand" tool (W). When it is selected, you can put a number between "0" and "255" in the "tolerance" box. Because I am a reasonably tolerant person, I set it to "40" for starters. But, no! That just wasn't tolerant enough. When I was hoping for a completely outlined ornament, I got something like this:

It turns out, if I had put "200" in the tolerance box as seen below...
...I would have been able to select it in one click. So the lesson here is to play around with tolerance numbers. Oh, and just so you know, what those numbers really mean is how closely the magic wand will match colors (i.e. larger number=wider selection).

One more thing before we move on: if you make a selection that isn't wide enough (such as in the image above), you can keep adding to it until you get what you want. Just click the "add to selection" box in the magic wand menu bar (it's the second from the left) and click in areas that aren't selected until you finally get something like this:
5. Now it's time to get that selection on its own layer and drag it onto your card. Hit Command-J (PC: Ctrl-J) and you have a new layer with nothing on it but that one ornament. Now you can use the move tool (V) to drag it onto your card.

6. Congratulations! Your card is looking much more festive already. But are you happy with the size of the ornament? If not, hit Command-T (Ctrl-T) to bring up a transform box around it (see below).
Just grab one of those corner handles (while holding shift to keep the aspect ratio) and drag out or in to change the size. Hit "Return" to apply the transformation. You will be using this step many times before the card is done.

7. So let's say you have got one ornament to just the right size. What about the others? First, you need to extract them one by one (as seen in step 4), drag them onto the card and into the same approximate space as the already-transformed ornament (step 5), and then—because we are not going to be too picky—put the new ornament layer below the perfectly sized one and use it as a guide:
Make sure the appropriate layer is selected, and then bring up that transform box. If you line up the bottom and then drag the top corners down (a little from one side and then a little from the other), you should be able to get pretty close. You can move it around at any time by clicking in the box (not the handles) and dragging. Once you think you've got it right, apply the transformation. Then, to double check, change the layer order so the model ornament is on top. If it still looks good you've done it. If not, just transform it some more until you've got it.

8. Repeat the above process until you have all the ornaments you want.

9. Time for the photos. Open a photo. Select the elliptical marquee tool (seen for Elements at right, and CS3 at left). Now click and drag in your photo while holding the Shift key (this keeps it circular) until you have the area you would like to crop. Hit Command-J (Ctrl-J) to copy your selection onto its own layer. You can now move it (V) onto your card and transform it as desired. I used the ornament for a general guide on the first one:
But after that, I used the first photo as a guide for the others as described in step 7. If you look at my card, you will notice that I decided to make the photos larger than the ornaments (not that you have to do the same).

10. One more thing you may notice is that I removed those little loops from the top of the ornaments. They were getting in the way. I simply selected the rectangular marquee tool (right up there sharing menu space with the elliptical one), selected the offensive loop, and then cut it out (Mac: Command-X, PC: Ctrl-X or choose Edit-->Cut).
Make sure you are on the correct layer when you do this or you will cut a hole in another image.

11. Finally, you are free to arrange the photos and ornaments as you like. Use the subdivisions in the grid to help you keep things in line. When you are happy (or at least "galloping horse" happy), you can flatten your card, print it, and glue it on to card stock and impress all your friends.