Stepping Back In Time With Your Post Production

Marc Goldstein once told me that it is useless to create effects with

an image unless you have a purpose for those effects. Altering
images to create necessary effects is part of learning the artful
application of Photoshop, but making a modern image look like it is
decades older and has seen physical wear and tear requires a bit of
a reversal of thought with the use of filters and effects. This tutorial
takes an image of a woman dressed in a period style of the early
20th century and literally sends it back in time by combining
different effects to create conditions of time and wear. Find an
image that you want to give some antiquing to and then cut loose
with the steps below…

1. Open your image and then duplicate the background. Name it the
Sepia layer. Go to Image>Adjustments>Hue/Saturation. In the
dialog box check the Colorize box and then drag the Hue slider to
around 40. Set the saturation to 23 and the Lightness to between
+6 and +10, depending on how well lit your image is. Now your
image has been sent back to the early part of the 20th century.

2. The contrast may be too much at this point with the previous
adjustments, so go to Image>Adjustments>Levels to tone down the
contrast. In the dialog, locate the Input Levels and change them
from left to right with 18, 1.50, 235. Mess around with these
settings within a 10 point spread to get the Levels where you want
them to be.

3. Add a new layer. This will be the layer that holds the thick
borders so common to antique photographs. Go to Select>All.
Change the foreground color swatch to something like a light cream
color and then go to Edit>Stroke. Make the Stroke Width 45 and
choose Inside for the Location. Click OK and see your border
appear! Press Ctrl/Cmd + D to deselect the area on the border
layer.

4. This next part might be a bit confusing, so follow along closely.

You’re going to create the paper seen under the scratches of the
image that you’ll be making shortly. Click on the very first layer, the
original background layer and then press Ctrl/Cmd + Shift + N for a
quick way to add a new blank layer right above the original
background layer. Go to Edit>Fill and choose the foreground color
you used for the border. Now you’re ready to start making this
image look its age.
5. Select the Sepia layer and go to Layer>Layer Mask> Reveal All.
The next thing you’re going to do is age a smudge a corner of the
image to give it a rubbed off appearance. Choose the Brush tool
and go to the Brush picker palette. Find the Rough Round Bristle
and select it. You may need to reset your brushes and choose to
show text descriptions if you don’t know which one is the Rough
Round Bristle.

6. Still on the Sepia layer, click on the layer mask with your
paintbrush and then set your Foreground color to black. With your
big burly brush, brush away at one or two of the corners. Use the
History Palette or Cmd/Ctlr + Z to move backwards if you aren’t
satisfied with a stroke. Work until you’ve aged a corner or two to
your satisfaction. Now reduce the brush size all the way down to 6
pixels. Using this tiny brush, mark all over the image to give the
impression of scratches.

7. Now you’re going to recreate foxing to make the image look as if

it got a little damp at some point and you’ll do this by using Filters.
Add a new layer to the top of the layer stack. Reset your foreground
and background colors to the default of black/white. Next, go to
Filter>Render>Clouds and then go to Filter>Render>Difference
Clouds. At the top of the Layers palette, pull down the blend mode
menu and choose Difference. Set the opacity to anywhere between
15% and 25%. Next, clear up the face a little by using the eraser tool
to clear some of the filter from the face, but make sure not to make
it too obvious!

8. At this point the image is very nearly completed. You’ll now use a
gradient and filter to create some creases to make it look like the
image has been bent or damaged. Add another layer at the top of
the stack. Now choose the Gradient tool and click on the Gradient
Picker in the Options menu. The gradient you want is the
Foreground to Background gradient. Click on that and then choose
Linear Gradient from the Options menu. Now that you have your
gradient options defined, click the Gradient tool against the image
in the lower left corner and drag it up and to the right, releasing the
mouse to apply.

9. Next, go immediately to Filter>Render>Difference Clouds

(remember this filter?). Now you’ll adjust this filtered gradient to
get the crease effect. Go to Image>Adjustments>Levels. Enter 0,
2.62, and 51 in the Input Levels boxes from left to right. Again,
remember this step? That’s right, you saw it earlier when you
created the sepia layer. For this layer change the blend mode to
Color Burn and adjust the opacity down to anywhere between 25%
and 40%, again depending on how intense you want this effect to
appear.

10. Press Ctrl/Cmd + J to duplicate this layer and then go to

Image>Adjustments>Invert. Change the layer blend mode to Screen
and bring the Opacity down to around 55%, give or take 10 points.
Move this layer around until the crease is positioned where you
want it. You can also duplicate this layer and reposition it,
transforming the size and orientation to quickly create another
crease effect.

Tada! You’re done. You’ve taken a modern image and given it an

antique, period look. Good job! These steps were based on a
technique published by Duncan Evans & Tim Shelbourne.
Bodily Abstractions

Using Layer Blend Modes is a cheeky and inventive way to create a

piece of abstract art. For this tutorial you can use just about any
image because the whole point is to go away from the
representational and as deeply into the abstract as you can stand.

1. Find a color image to experiment with. You’re only going to use a

small part of it, so don’t get hung up on how the entire image
looks. You’ll be using the crop tool quite a bit, so choose an image
that is fairly large. If you don’t have a large image to work with,
then follow the instructions for Smart Object conversion.

2. Open your image and then select the crop tool. Click and drag
the crop in the image. If the tool options bar set the color of the
crop shield to black and the Opacity to 100%. This makes it much
easier to actually see what you’re looking at in your crop box. Move
the box around and drag the handles in or out to find the area of
the image that you want to crop then hit enter to make the crop.

EXTRA: If your cropped image is smaller than you want it to be, then
right click on the layer and select Convert To Smart Object. This
converts the layer to a smart object that will not lose sharpness
when you size it up. Go Image>Canvas Size to set the canvas to the
size you want your image to be and then size up the smart object
layer to fit the canvas. When your done, right click on the layer
again and select Rasterize Layer so you can get back to editing.

3. Duplicate the background layer (Ctrl/Cmd+J) then with the

duplicated layer selected go to Image>Adjustments>Invert. Go back
over to the Layers palette and change the Blend mode to Difference.
That was such an easy tweak! Crazy, isn’t it?
4. Now you’re going to use the Crop tool to actually add some
background to your image, taking it from the realm of plain to
poster cool. First thing first, change your background color to
whatever you want it to be. Sampling the pixels in the image is a
good way to choose a harmonizing color.

5. Now, select the Crop tool and drag it inside the entire image,
from corner to corner. Here comes the cool part… Drag the handles
on each side of the crop shield outward until you’ve created the
border that is just right for your image. Apply the crop by hitting
Enter and watch your matte appear! Now THAT is just efficiency,
pure and simple.

6. Now separate your image from the background by adding a drop

shadow to it. Make it dramatic by changing the settings in the Drop
Shadow dialogue box. Set the Distance out somewhere around 40
to 50 pixels and the size to 95 pixels. Click OK and watch the
image jump up from the background.

7. One more finishing touch to go. Hold down the Cmd/Ctrl key and
click on the thumbnail of the image layer. This creates a selection
that only affects the layer transparency. Hang on, it gets better! Go
Edit>Stroke and choose a stroke width that will work a balance for
your image. Double click on the color swatch and choose white for
the border color. Click OK and then Cmd/Ctrl D to deselect the
area. You now have a very groovy border around your image.

Finish up by adding your own presentational touches and then go

grab a cuppa and take a break. Great work! These steps were based
on a technique published by Duncan Evans & Tim Shelbourne.
Lively Traces

One of the things I so enjoy about the workflow of Creative Suite 3

is how I can go back and forth with ease between Photoshop to
Illustrator and back again. For instance I can take a portrait image
and remove the background in Photoshop, open it in Illustrator and
tweak it to all get out using Live Trace and Live Paint and then send
it right back into Photoshop to do color correction and final
touches. And that is just what I’ve done here! I took this image
(found on Clipart.com)

and made it into a Warhol retrospective.

Using Photshop CS3 with the onOne MaskPro 4.1 plugin and
Illustrator CS3, these are the steps I took for this project…

1. Duplicate your source image. Open up the duplicate and get

ready to rock and roll…

2. Right click on the background layer and select Layer From

Background.

3. Click on the Add Vector Mask button at the bottom of the Layers
panel.

4. Go to the onOne menu and click on MaskPro 4.1 (or whatever

version you have installed). This opens up the layer in the MaskPro
plugin.

5. Select the Keep Highlighter Tool and paint over the part of the
image that you want to keep.

6. Select the Drop Eyedropper Tool and start sampling colors all
over the background area that you want to erase. This adds those
colors to the Drop palette.

7. Select the Magic Brush Tool and dial up the diameter to as large
as you need to swipe over the entire area of the image in just a few
strokes. Now, get to swiping and watch the background disappear
without one pixel on the head of your portrait being touched!

8. Modify your color selection as you need to in order to let the

Magic Brush Tool eat up those colors too. Otherwise, choose the
Brush Tool and clean up the stray pixels that the Magic Brush didn’t
quite capture.

9. Select File>Save/Apply or press Command+S to apply these

changes to the vector mask. You’ll be taken back to your image in
Photoshop, sans background. If you’re satisfied having masked out
the background then by all means stop right here. But if you want
to delete the background, then carry on…

10. Right click on the mask and choose Apply Layer Mask. Voila!
You have successfully removed the background!!
There were a few things I could have done with the extracted figure
in the foreground of that image in order to make it more polished
or appealing, but extracting the figure from the background was
the first step in creating an entirely different image, and any other
alterations (feathering, etc.) would have defeated the larger purpose
of this image. But now that we have the foundation of this project
set up, what’s next?

Beginning with Illustrator CS2, Adobe has added a very interesting

bit of functionality to Illustrator called Live Trace. The Live Trace
function works on raster images, detecting and tracing the color
and shade areas in the way that if done by hand is extremely time
consuming. Now, Live Trace won’t meet all of your illustration
needs and will not completely replace creating paths by hand. What
Live Trace will do is expand your own design vocabulary and
toolbox.

Inspired by the assembly line production methods of the iconic

Andy Warhol, I’ve created this tutorial to demonstrate some of the
capabilities of Live Trace.

1. Taking the portrait that you just removed from the background
save a copy of it as a JPEG image. This step is very important
because saving a JPEG copy reduces the file size and gives you a
white background to work with in the Live Trace.

2. Find the JPEG copy and open it in Adobe Illustrator. Select the
image with the Select Tool then right click on the image and choose
Scale. Select Uniform and set it to 50 percent and click OK.

3. Copy the image and paste it into three new layers so that you
have four copies of the image on your artboard. Arrange them
evenly so they are touching but not overlapping each other.

Now the next set of steps is very important to get your colors
arranged for the Live Trace.

4. Go to Window>Swatches to open the Swatches panel. Click on

the Swatch Libraries icon at the bottom of the panel (left most icon),
choose Scientific>Analogous. Select a set of colors swatches and
click on the file folder to the left. This action places that set of
swatches into the Swatches panel.
5. Go back to the Swatches panel and click on the Swatch Libraries
button again, this time choosing Save Swatches. Save these
swatches with a distinctive name (i.e. analogousWarhol). Repeat
steps 4 and 5 three more times until you have four swatch libraries
that you have defined.

6. Now you’re going to load the swatch libraries that you just
defined so that Live Trace can access them. Go back to the
Swatches panel and click on the Swatch Libraries button again.
Select User Defined and open up the first library you created.
Repeat this action until you’ve opened up each library that you
defined. These libraries will be available to Live Trace now.

7. Go back to the Layers palette and lock Layers 2, 3 and 4. Select

Layer 1 and then select the image in that layer with the Select tool.
Go to Object>Live Trace>Tracing Options. Keep the Preset at
Default and immediately check Preview and you will see the default
settings applied to your image. Pretty cool, right?

8. Before start adding color, go and adjust the Threshold value to

where you want it to be for your image. In this example I set the
Threshold example to 150 (the default is 128). The Threshold value
serves as a baseline against which the pixels will either be
converted to black or to white. This step is essential to getting the
Warhol look we’re aiming for.

9. Once you’ve set the Threshold value where you want it to be, go
up to the Mode menu and choose color. Since Preview has been
enabled, you’ll see the default color setting applied to your Trace.
Simply go to the Palette pulldown menu and choose the first of your
User Defined libraries. This will apply the colors that you defined in
that library.

10. Tweak out the other settings in the Tracing Options dialogue to
your heart’s content and watch your Trace take on a whole different
personality. You can change the Preset to one of the predefined
settings that shipped with Illustrator, or you can adjust your
settings to how you want the and then choose Save Preset. This
would be a useful step to take because you have three more images
to apply these settings to!
11. Save your preset and then click Trace. Go back to the Layers
panel and lock Layer 1. Repeat steps 7 through 10 for the each of
the other images. When you’ve finished, be sure to save your work.
Finish up by putting your presentational touches on it and there you
have it! You have just completed a color study a la Andy Warhol
style!
Lightroom 2 and Photoshop CS3 Playing Nicely

Whether of long, breathless vistas or of the or the tiny habitat in

your backyard, stitching together images to make a panorama is
absolutely so utterly easy to do with Adobe Lightroom 2 and
Photoshop CS3 that you’ll stitch one up and have plenty of time to
catch up on Heroes…

1. With at least four images you can make a pretty great panorama.
Open up your images in Lightroom 2 and select one of the images
that is at or near the center of the intended panorama. Apply all of
your retouches and tweaks to that single image. One tweak you
don’t want to apply just yet is vignetting. Save that for later.

2. All the corrections you made are recorded in the History palette.
Just below that palette are two buttons: Copy and Paste. Click Copy.
Now, staying in Develop mode click on each of the other images
and apply the adjustments to each one in turn by clicking Paste. All
of the adjustments that you made for the first image are now
applied to the other images and you now have a uniform
appearance for each of the panoramic players.

3. Select all of the images at once and then right click on them. In
the popup menu go to Edit In>Merge To Panorama In Photoshop…
Ohhh the magic!!! A dialog box will appear for you to choose the
images you want to take into the panorama and other settings for
you to choose from. Make your selections then press OK.

Though this step can be very RAM intensive do give Photoshop

some time to sew things up. If you’re working with hi-res images
then the time it takes for Photoshop to work its magic is time well
spent because when you’re finished fixing the seams in the next
step they will be virtually impossible to find at lower resolutions.
This is a muy good thing.
4. Once the images have been stitched together and Photoshop
presents them in a single file, you’ll notice that some cropping will
need to be done because the edges probably didn’t line up politely.
Select the Crop tool and then drag it across the image. Adjust the
handles of the crop box to get the panorama cropped just so and
hit Enter to apply it.

5. If there are any stitch lines at all there are a few techniques you
can do to smooth them out. First, look to the layers palette and try
moving the layers around pixel by pixel to get them to match a little
more closely. Then use the Blur tool to smooth the edges together.
In the tool options bar, choose a brush with soft edges such as the
Soft Round 13 pixels. Set the Strength to 50% and start moving the
brush over the seam. Adjust your settings as you go, and be sure to
zoom in tight to the seams so that you can keep the blurring to a
minimum to avoid an obvious edit.

6. Once you’ve cropped the image and concealed the seams it’s
time to resize this image so that it doesn’t try the “showing up
fashionably late” trick of taking forever to load from your website or
the email attachment that you might send to Mom. First, go to
Image>Image Size and reduce the document size down to
something more manageable. Keep the Constrain Proportions
option checked and reduce the Width in Pixel Dimensions down to
1000 pixels. This will bring the file size down to a significantly
more manageable size. However, if your image isn’t so large as to
need this sort of reduction, then don’t worry about this step.

At this point you can further reduce the file size by reducing the
image resolution to 72 ppi if it isn’t already there. If you decide to
do this, I suggest duplicating the panorama and reducing the
resolution of the duplicate. Once you size down, there’s no going
back without losing detail and sharpness unless you do convert it
into a Smart Object. Now just add your final presentational tweaks
and you’ve got yourself a panoramic image of your very own! Great
work!!
Using Layers to Simplify Life

Ok, maybe the Layers palette in Photoshop won’t simplify your life
to an incredibly sublime degree, but it will simplify the process of
creating assets for your website, THAT I can guarantee! Click on the
image below to get an idea of what this tutorial is all about…

The biggest headache in creating images for rollover buttons is

keeping things in line. Come to think of it, that is also the biggest
challenge in raising kids, but I digress… With savvy use of the
Layers palette in Photoshop it is an absolute cinch to make rollover
buttons without making more duplicates of shapes than you can
hope to keep count of. The Layers palette also gives us the ability to
make as many buttons as we need with just one document.
Photoshop is a virtual rollover-button assembly line!

Feel free to adapt the settings and adjustments as you go along in

the tutorial. After all, it’s mutual creation that we’re after here!

1. Open up Photoshop and create a new document and use these

settings:
Width: 100 pixels
Height: 33 pixels
Resolution: 72 pixels per inch
Color Mode: RGB
Background: Transparent

2. Select the Rounded Rectangle Tool found in the Rectangle Tool

pullout. In the tool options bar set the radius to 10 pixels. Next,
draw a rounded rectangle that fits in the document. This is the
basis of your new set of buttons.

3. Click on the Layer Style icon at the bottom of the Layers palette
and select Gradient Overlay. In the settings dialogue change the
angle to -90 degrees and then double click on the Gradient color
bar to bring up the Gradient Editor dialogue. There are two sliders
at each end of the color bar. Double clicking on these sliders brings
up the Color Editor dialogue and this is where you adjust the start
and stop colors of the gradient. Experiment here to see how your
adjustments make the your gradient look. When you’re pleased with
your gradient, click OK to exit the Gradient Editor and OK again to
exit the Layer Style Editor and apply the gradient to your button.

4. Go to Layer>New Layer to create a new layer. Rename this layer

Brush Stroke. Make an embellishment on the button with a brush
stroke making sure that it is done in the Brush Stroke layer.
Experiment with the brush and layer settings to get the look you
want to accomplish here. When you’re satisfied with your
embellishment, link the Shape layer and the Brush Stroke layers
together by selecting both of them and choosing Link Layers in the
Layers palette pull down menu and then IMMEDIATELY LOCK THE
BRUSH STROKE LAYER!! If the position of the brush stroke moves
even one pixel, you’ll end up trashing these layers and starting over
just to avoid the headache of repositioning. Trust me on this.

5.With both layers still selected, go back the the Layers palette
pulldown menu and select New Group from Layers. Name this group
Normal State. Select the group and go back to the pulldown menu
and select Duplicate Group. Name this duplicate group Over State.
Do this as many times as you need for the various states of the
button that you need for your design.

6. Turn off the visibility of the Normal State layer by clicking the eye
to the left of the layer. Now you’re working with only the Duplicate
Group. Open up this group and Gradient Overlay sub layer. You’re
going to change the color of the gradient so just double click on the
Gradient: bar to bring up the Gradient Editor dialogue. Again,
experiment here to get the color and gradient the way you want it
for the Over state of your button. Click OK to exit the Gradient
Editor dialogue and OK again to exit the Layer Style editor and apply
the gradient. You have just created two states of your button.
Repeat these steps for any other button states that you need.

7. When your done adjusting your gradients and you have your
buttons looking the way you want them, right click on the Normal
State folder and select Merge Group. This merges all the layers and
sublayers in the group together making the Normal State button
into a single object. Do this for each of the other button states that
you’ve created.

8. Now, rather than duplicating these buttons and wasting hours of

your life and precious sanity, we’re only going to create the text
labels that you need for your buttons and then use the power of
layer visibility to create each set of button states for you. This is
one of my favorite features of the Layers palette! Create a new text
layer by selecting the Text tool and setting your your text
preferences, then anywhere on the button type Home. Duplicate
this layer and select the word that you just typed, replacing it with
About. Repeat this step for as many labels as you need to make,
ensuring that each label gets it’s own layer. Don’t worry about
positioning just yet, we’ll take care of that in the next step.

9. Once you have all your labels created it’s time to get everything
lined up. Using the Move tool, go to the Layers palette and make
sure that every layer is visible. Select all of the layers and then
going over to the tool options bar click on the Align Vertical Centers
icon. This lines up all the layers vertically. (If you don’t know which
icon is which, just let the pointer hover each icon till the icon label
pops up in a tool tip). Now move over and click on the Align
Horizontal Centers icon. This lines up the layers horizontally so now
each layer is perfectly lined up like a deck of cards.

10. If you need to reposition the labels to balance the composition

of the button, then go back to the Layers palette and
Cmnd/Ctrl+Click on the Normal State layer and the Over State layer
to deselect them. Then using your arrow keys, nudge the label
layers around as a group till you get them where you want them.
Doing this as a group will keep the labels centered on each other,
thus keeping the balance of the design consistent.

11. Now all that is left to do is save new documents of the various
combinations of layers that you need to make each button and each
button state. Don’t worry, it’s really easy! Turn off the layer visibility
for all layers except the Normal State layer and the Home label
layer. Go to File>Save For Web and Devices. In the dialogue that
shows up, choose PNG-8 as the file format so that the button
transparency is preserved and you don’t end up with white visible at
the corners of your buttons due to the curve of the shape. Save the
document as Home_Normal so that it’s readily identifiable amongst
all the other button documents in the source file where you’re
saving everything.

12. Repeat this step for each label and the Normal State layer and
then repeat this process for each label and the Over State layer.
This ensures that all of your buttons look uniform and consistent
and all of your button states are consistent with the Normal state
when the mouse rolls over or down-clicks. There is nothing more
irritating than to have a button label move around in the various
states because of the work involved in trying to fix it. It is much
easier to trash the layers and start all over again to fix the problem
than it is to try and figure out how you need to nudge this layer or
that layer to get everything to line up.

Now that you’ve created the various buttons and their states which
you need for your site, use JavaScript or CSS to rock the
functionality and take pride in what you’ve just accomplished! Great
work!!