(ebook-pdf) advanced photoshop techniques.pdf

1Adobe Seminars: Web Page Designby Lisa Lopuck and Sheryl Hampton

Adobe Seminars: Web Page Design is a portable seminar on web page

design taught by experienced professionals that documents Adobe

software such as Adobe Photoshop 4, Adobe Illustrator 7, and Adobe

PageMill 2, as well as the latest HTML language protocols.

This October 1997 Adobe Press book will bring all the essential information

of a two-day seminar into a compact and reusable format, complete with

CD and step-by-step techniques. Two noted Web seminar instructors, Lisa

Lopuck and Sheryl Hampton of ElectraVision, have distilled their training

sessions into over a hundred two-page techniques using popular Adobe

applications to simulate how Web pages are actually created. The result is a

reference book of clear, simple explanations and designs that are reusable

page after Web page.

Adobe Seminars: Web Page Design

Publication Date: Oct. 1, 1997

US $40

ISBN: 1-56830-426-9

4-color, 264 pages, includes ImageClub CD

The techniques withinthis Acrobat PDF fileare from the upcom-ing Adobe Press bookAdobe Seminars:Web Page Design.

excerpt from the adobe press book, adobe seminars: web page designcopyright 1997, adobe systems inc.

Often times images that you scan or

illustrate need to be touched up

increasing highlights and shadowsuntil

you have a perfect, natural image. In

Photoshop, there are two painting tech-

niques that essentially allow you to paint

with natural light and shadow. For instance,

you can add natural shines to hardwood

floors, glows around light bulbs, or natural

shadows to help add depth to an image.

step 1: painting with light

In Photoshop, open an image that needs to be touched up. Create a new

layer and set its mode to Overlay in the Layers palette. Using the airbrush

tool and a large brush, paint broad strokes of a light, off-white color. Notice

how the image underneath appears to brighten as if natural light has been

cast upon it. Change the layers mode back to normal and notice the large

patches of solid color that, when in Overlay mode, create the lighting effect.

Adding Natural Light and ShadowsC11Lesson

photoshop 4.0


step 2: painting with shadow

Adding shadow effects to an image is the same process as adding highlights.

Create a new layer, and set the layers mode to Multiply as shown. Paint with

a medium-dark color using the airbrush. Notice that, rather than covering

over the underlying image, the medium-dark color enriches underlying

colors while creating a shadowed effect.

For Suspect, Dead Birds Dont Sing, an online murder

mystery, the Surround Video room environments were

first created and rendered in Strata 3D before being

brought into Photoshop for finishing touches. These two

images show how the rooms looked before and after

Photoshop was used to enhance the highlights and shad-

ows using the Overlay and Multiply modes.

BEGINNER

Layers

on

LuanneCohen

LuanneSeymourCohen,CreativeDirectorat AdobeSystems,shares somesuper tipsforworkingwithlayersin Adobe

Photoshop 4.0

2CREATING DROP SHADOWS USING LAYERS

Layers paletteThe active layer ishighlighted and has apaintbrush icon next toit. The eye icons let youturn layers visibility onand off.

Drop shadows are easy to create using layers in Photoshop 4.0.In this example, the framed picture is on its own layer (pictureframe). The area around the frame is transparent, allowing thebackground to show through.

1. Make a copy of the firstlayer (picture frame) bydragging the layer name tothe New Layer icon at thebottom of the Layers palette.This copy (picture framecopy) is placed on top of theoriginal layer.

2. Select the original pictureframe layer in the palette,and then use the move toolto offset the layer (which isunderneath the copy).Release the mouse buttonwhen the layer is slightlyoffset. This will become thedrop shadow. At this stage,the original and the copy arethe same color(s).

FinetuningThe arrow keys on thekeyboard allow you tomove the layer in one-pixel increments.

3. For a more realisticshadow, select a foregroundcolor other than black. Inthis example, we used theeyedropper tool to select adark brown from the image.

3CREATING DROP SHADOWS USING LAYERS

4. Choose Edit > Fill. SelectPreserve Transparency, andfill using the foregroundcolor.

PreserveTransparencyThere are typically athousand ways to doeverything in AdobePhotoshop, butselecting PreserveTransparency is thetrick that makes thistechnique the fastestway to create a dropshadow.

ShadowsShadows add theillusion of threedimensions and arerarely hard-edged.Blurring the shadowadds realism andmakes the main imagestand out.

Multiply modeUsing the Multiplymode on the shadowlayer gives the effectof adding the shadowvalue and color to thetexture and image ofthe background. Thismakes for a morerealistic shadow sincewe usually see sometexture and detail inreal shadows.

5. Use the Gaussian Blurfilter (Filter > Blur >Gaussian Blur) to soften theshadow. Here we used aradius of 7.0 for a 72-ppiimage. For higher resolutionimages, youll need to use agreater radius value.

6. Combine the drop shadowwith the background usingthe Multiply mode in theLayers palette.

4Layer masksYou can create layermasks two ways.Choose Add LayerMask from the Layersmenu. Or you cancreate a selection andchoose Select > SaveSelection. Instead ofcreating a newchannel, choose themask option from theChannel pop-up menu.

BLENDING FROM ONE IMAGE TO ANOTHER

Blending one image gradually into another is easy to do using layersin Photoshop 4.0. In this example, we will blend the red satin fabricfrom one layer into the floral fabric on another layer by using a layermask on one of the layers.

1. Select the top layer (floral)and choose Layer > AddLayer Mask > Reveal All.

2. With the layer maskselected, choose the gradienttool and create a gradient.Make sure your foregroundand background colors areblack and white. Rememberthat you are drawing on alayer mask that is grayscale.The areas that are white andgray will reveal the colorimage. The areas that aresolid black will block it out.

GradientsYou can use any anglefor your layer maskgradient. If you want asmall transition areawith larger solid areasof the two images,draw the gradientvector well inside theimage areas instead offrom edge to edge.

3. You may want to experi-ment with different mid-points for the blend. Double-click the gradient tool iconto bring up the Gradient ToolOptions palette. Select Edit,and here you can set themidpoint. Then redraw thegradient in the layer mask.

5BLENDING LAYERS WITH THE LAYER OPTIONS PALETTE

Blending parts of one layer into another is easy to do using the layerssliders in Photoshop 4.0. In this example, we will show just a few ofthe hundreds of possible combinations you can use when you playwith the options in the Layer Options palette.

1. Create or open an imagethat has two layers you wantto blend together. In thisexample we want to revealthe lower layer imagethrough the dark back-ground color from the lacelayer. Select the top layer.

2. Double-click the layername in the Layers palette tobring up the Layer Optionsdialog box. Since we want todrop out the dark back-ground on the lace layer, wewill move the shadowtriangle on the This Layerslider to the right.

3. Another effect might be tohave the floral backgroundshow through only thehighlighted areas of the lace.To do this, split the highlightslider triangle by holdingdown the Option/Alt keyand drag it to the left.

Smooth blendingFor smoother transi-tions, you can split thetriangles in half. Holddown the Option/Altkey while dragging thetriangle, and it willsplit. For example, instep 3 the range forhighlight values is nowbetween 23 and 255.This means that all thepixels between thosetwo values will appearwith only some of theiroriginal colors.

Blending slidersUse the sliders in theLayer Options palette todefine which pixels willappear in your compos-ite image. For example,if you want to hide allthe dark areas, movethe shadow slider to theright. All the pixelvalues between 0 andthe new shadow valuenumber will not showin the composite image.

ShortcutsThroughout thisdocument, Command/Ctrl means Commandon the Macintosh andCtrl on Windows.Option/Alt meansOption on the Macintoshand Alt on Windows.

6BLENDING LAYERS WITH THE LAYER OPTIONS PALETTE

4. In this example we createdthe effect of applying the lacetexture to the fabric whilestill retaining the folds andshadows of the underlyingfabric.

5. This example is similar tothe one in step 4 except thatwe moved the highlightslider for the Underlyinglayer. The result is a muchlighter image.

6. Experimenting withdifferent modes will giveyou even more options forinteresting visual effects. Inthis example, we split thehighlight slider triangle forthe lace layer. This allowssome of the colors of thefloral fabric to come throughthe light-colored lace. To givethe colors more punch, weused the Luminosity mode.

PreviewingTurn the previewbutton on while youexperiment. This allowsyou to see what theresult will be as youtry different modesand layer-blendingcombinations.

7MASKING SEVERAL LAYERS WITH ONE IMAGE

Sometimes you want to mask or crop more than one image with thesame shape. To allow for the most flexibility, use a clipping groupwith your layers. In this example we used type as the masking layerand two different fabric layers. We wanted to leave them on separatelayers to allow for more experimentation.

1. Open or create a file thatcontains all the layers thatyou want to mask through acommon mask. The layerthat will mask the othersshould be the bottom-mostlayer. In this example we willmask both the lace and thefloral layers with the big typelayer. Remember to put yourmask shape on a transparentbackground.

2. Make a clipping group byholding the Option/Alt keyand clicking between thelayers that will be in thegroup. Notice how the cursorchanges to indicate that youare making a clipping group,and the Layer thumbnailindents.

3. Option/Alt click betweenall the layers that will be inthe clipping group. Note: Youcan move layers aroundwithin a group, but once youmove a layer outside of thegroup, it will no longer bemasked by the base layer.

Group modesAll clipping groupshave a base layer. Thisis the bottom layer inthe group, and itdefines the shape ofthe mask throughwhich all the otherlayers in the group aredisplayed. The baselayer defines themode and transpar-ency of all the layersin its group.

Clipping groupsAs you click the linesbetween the layers tomake a clipping group,they become dottedlines. The base layer isthe one with theunderlined layer name.

Base layer (mask)The shape that masksall the layers in theclipping group mustbe on a transparentbackground or theeffect will not work.The masking shape iscreated by every pixelon the base layer nomatter what color it is.The edge of the maskshape is whereverthere is a pixel next toa transparent area.

8CREATING LAYER MASKS FROM SELECTIONS

Its easy to add a layer mask to a layer and draw or paint on thatmask. But sometimes you want to mask specific areas of an imagethat are not easy to create on a blank layer mask. This techniquedemonstrates how you can create layer masks from any selectionmade on any layer.

1. In this example we justadded the layer with the eyes,but we want the eyes to showthrough only the glasseslenses.

2. Sometimes its easier tohide all layers except theones you need to create theselection. Use the selectiontools to create a selectionthat defines the area youwant to mask. In this ex-ample, we turned off theeyes layer even though itwill eventually contain thelayer mask.

Viewing layersTo quickly turn off alllayers except the oneyou want to work on,Option/Alt+click theeye icon for that layerin the Layers palette.To turn all the layersback on again, againOption+click thelayers eye icon.

Selections on layersYou can make aselection on any layer,and if you click adifferent layer in theLayers palette, theselection is still active.This is a real time-saver,because you select thearea only once, but youcan make changes tothat same area onseveral different layerswithout reselectingeach time.

3. Once your selection ismade, turn on all the otherlayers (Option/Alt+click onthe eye icon). Make the layerthat will contain the layermask the active layer in theLayers palette. Dont deselectthe selection you made instep 2!

9CREATING LAYER MASKS FROM SELECTIONS

4. Choose Select > SaveSelection. Use the Channelspop-up menu to select theMask option that will benamed after the currentlyactive layer. Instead of savinga channel to the Channelspalette, this will save theselection as a layer mask toyour layer.

Layer masks on/offYou can temporarilyturn the layer mask offwithout discarding it.Simply Shift+click thelayer mask thumbnailin the Layers palette.Click it again to turn itback on.

Layer masksLayer masks are reallyjust alpha channelsthat are attached to alayer. You can editthem just as you dochannels. To view themask as full size, holdthe Option/Alt keyand click the thumb-nail of the layer maskin the Layers palette.To return to the layerview, Option/Alt+clickthe thumbnail again.

5. Once your selection issaved as a layer mask, it willappear as a thumbnail nextto the layer thumbnail in theLayers palette. In this ex-ample we switched the layermode to Hard Light for amore transparent effect.

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated.Macintosh is a registeredtrademark of Apple Computer,Inc. Windows is a registeredtrademark of Microsoft in theU.S. and other countries.

1996 Adobe SystemsIncorporated. All Rights Reserved.

PS4.0 11/96

Color Enhancementusing Digital Gels

INTERMEDIATE

2COLOR ENHANCEMENT USING DIGITAL GELS

1. Heres the image well startwith in Photoshop. Our goalis to add dramatic coloreffects to this conventionalphotography. Well add ablue-violet effect to the skyand gold to the field.

Professional photographers often use gels (gelatin filters) for creativecolor enhancements. Heres how to add dramatic color effects usingdigital gels in Photoshop. With this technique, you can isolate eachcolor effect on an independent layer and get more flexibility and controlthan you would with traditional gels set in front of the camera lens.

2. Select New AdjustmentLayer from the Layers palettemenu, and in the Type pop-up menu, choose Hue/Saturation. Name the newlayer and click OK.

Adjustment LayerWith Photoshop 4.0snew Adjustment layers,you can easily makechanges to underlyinglayers without affectingthe actual layers.

3. The Hue/Saturationdialog box appears. Click theColorize option. This trans-forms the layer you createdin step 2 into a digital gel.Make sure the preview box ischecked. Dont click OK yet.


34. Move the Hue slider tofind the color you want. Usethe Saturation and Lightnesssliders to finetune the color.Click OK when you obtain acolor you like.

COLOR ENHANCEMENT USING DIGITAL GELS

5. Set the mode in the Layerspalette to Soft Light.

TipsPress the D key toset foreground andbackground colors tothe default black andwhite. You can alsouse the X key toexchange these colors.While you drag thegradient tool, pressthe Shift key toconstrain the move-ment to a perfectvertical direction.

6. With the Adjustment layerstill selected, choose thegradient tool. Pressing theD key, set the foregroundand background colors tothe default (black/white).Click and drag upward overthe image from the horizontoward the sky. This willlimit the gel effect to the skyportion of the imagethegradient mask you created.

Lightness settingThe Lightness sliderin the Hue/Saturationdialog box acts like agamma control. Unliketraditional gels, high-lights and shadowsretain their originallightness values as ifthey are auto-exposed.In Soft Light blendingmode, changing thelightness of a layeraffects the midtones ofthe underlying image.

47. To keep the barn uncol-ored by the gel, select thebarn, and fill the selectionwith black in the layer mask.Deselect (Command/Ctrl+D).

8. As we did for the blue gellayer, we next add a gold gellayer (repeat steps 2-7). Bypainting in the adjustmentlayer directly, using a soft-edged brush tool with blackforeground color, you canfade the gel color. Try thiswith different brush opacitysettings. Of course, with awhite foreground color, youcan add back the gel color.

9. You can also adjust thegel color later at any time.Double-click the gel layerand the Hue/Saturationdialog box appears. You canthen readjust the gel coloreasily.

COLOR ENHANCEMENT USING DIGITAL GELS

More shortcuts!Press the bracket keys([ or ]) to change yourbrush size withoutgoing to the Brushespalette. Press numerickeys (1,2,3...9 or 0) tochange brush opacity.1 is 10% opacity, 2 is20% opacity, and soon. 0 (zero) is 100%opacity.

Fill shortcutTo fill a selection withforeground color, pressOption/Alt+Delete/Backspace. If you donot make a selection,doing a fill will fill theentire layer withforeground color.


1996 Adobe SystemsIncorporated. All rights reserved.

Contributing author: Etsuro EndoPhotography: Jules Frazier/

PhotoDisc

PS4.0 11/96
















US $40

ISBN: 1-56830-426-9




To keep the download time to a minimum,

yet keep a rich feel to a Web page, people

often use a decorative background tile. The

problem with background tiles, however, is

correctly preparing graphics so that they

match when placed on top of the tile.

Because you cannot predict where the tile

will fall on the Web page, people often

assume that they need to use rough-edged

aliased graphics. This exercise, however,

shows how to prepare soft-edged, anti-

aliased graphics that will match your tile.

step 1: preparing a single merged layer

Prepare an anti-aliased, soft-edged image merged into a single transparent

layer and set aside for later.

Compositing Graphics to a Background TileC7Lesson

photoshop 4.0 Object Gear, Amusements: Dog Biscuits, CrocodileFont: Image Club Overprint

step 2: filling a layer with a background tile

Create a new layer and fill it with the background tile (To create a back-

ground tile, see Exercise C5.) To fill a layer with a background tile, firstselect the tile with the Marquee selection tool and then choose Define

Pattern from the Edit menu. With the pattern defined, choose Fill from the

Edit menu and select Pattern from the Contents pop-up options.


tip: The Mac system palette includes all of the Web safe colors plus 40 extra.

On 16 and 24 bit displays, you will not notice any change in quality. On

8 bit displays, the 40 extra colors will dither, but the effect is negligible.

note: When you create a new file, its dimensions will

automatically be the size of the copied image.

note: As opposed to generating a shrink-to-fit selection by

Command-clicking on the layer icon, the Magic Wand

works best in this case because you are creating an aliased

selection that will include the soft anti-aliased edges.

step 3: create an aliased selection

Leave the background tile layer and select the image layer. Using the Magic

Wand, you need to make an aliased selection around the image. To do this,

set the Wands tolerance to zero and uncheck the anti-aliased option. Click

on the transparent area around the image and then choose Similar from the

Select menu to make sure you capture all the transparent areas. Invert the

selection so that the object is selected.

step 4: option merge

With the selection still active, merge the image layer with the background

tile layer (or create an option merge, see Lesson B7). Make sure the newmerged layer is the active layer, and copy the selected portion. Although

you have an aliased selection, you will be grabbing the soft-edges that have

been blended to the background tile pattern.

step 5: selecting a transparent color

Create a new file and fill it with a solid color from the web palette (see

Lesson E2 regarding the Web-safe color palette). This will become yourtransparent color so be sure to select a color that is not in your image (a

bright color often works well). Paste the copied image into this new file.

step 6: exporting a gif

Change the images mode from RGB to Index Color and select either the

Web colors or the Mac System palette. Next, export the image as a Gif using

Photoshops Gif 89A export feature located in the File menu. When the Gif

89A interface comes up, position the cursor over the color to be transpar-

ent and click once; the area should turn gray. Decide whether you want the

image to be interlaced or non-interlaced and click OK.
















US $40

ISBN: 1-56830-426-9




tip: Image Club graphics have a perfect selection stored as a path. Simply

go into the Paths palette, and load the path as a selection. To quickly

convert the path to a selection, Hold down the Command key (Mac)

or the Control key (Windows), and click the paths icon.

One of the more common tasks in Photoshop

is combining images to create a custom

collage. In this exercise, you create a Web site

banner, complete with text, that wraps to the

image by combining multiple images in

Photoshop, (see Session D!0).

step 1: open all images for the collage

In Photoshop, open a few images that you would like to incorporate into your

collage so that each image is open in a separate window. Create a new file

with a white background that will be large enough to assemble your collage.

Creating a CollageD9Session

photoshop 4.0 Object Gear Gentlemans Study: Personal LetterObject Gear Travels: Helm, WaterObject Gear Amusements: Starfish 2Font: Adobe Kepler

step 2: combining images into one file

Using the Move tool, click one of the images and drag it into the new file.

Drag the remaining images into the new file in the same way. If the image is

on a solid background, the background comes with the image when it is

dragged into the new file. To bring in just the image, select the background

with the Magic Wand tool set on a tolerance of at least 32, with the anti-

aliased checkbox selected. Invert the selection, and then drag the image

into the new file using the Move tool.


tip: You can access other Free Transform

functions by pressing the Control key

while clicking and holding anywhere in

the document. A pop-up menu

appears with more Transform

functions like Skew and Perspective.

step 3: resizing images

Resize each of the elements of your collage using the Free Transform

function located in the Layer menu. To scale the image proportionately,

hold down the Shift key while dragging one of the corner handles. To rotate

the image, click and drag outside of the envelope.

step 4: creating soft effects

To create the faded effect on the ocean image, create a layer mask for the

ocean layer. Using the Paintbrush tool and a large brush, paint black into

the layer mask. Painting with black is like painting with transparency. The

advantage to using a layer mask is you can erase your image without really

erasing your image. To turn on and off the effects of the layer mask, hold

down the Shift key and click the Layer Mask icon.

step 5: finishing touches

Now that all the images are in place, you can add a few finishing touches to

polish the look. Add an instant drop shadow (see Session D1) for thestarfish, and create cast shadows (see Session D2) for both the helm andthe letter. Enhance the color contrast of the helm using both the Curves

and the Levels functions. Finally, you can add text that wraps to the shape

of the helm by following the instructions in Session D!0 .

Creative Masking Techniquesfor Compositing

Adobe Digital Video Evangelist George Jardinedemonstrates creative masking techniques

with Adobe Photoshop

INTERMEDIATE

2CREATIVE MASKING TECHNIQUES FOR COMPOSITING

Making complex selections and creating the most effective channel(or mask) for compositing operations in Adobe Photoshop can be afine art. Frequently the best mask for a given image already exists,ready to be used. In this exercise, Ill show you a method for creatinga mask directly from an object in an image. This technique worksbest for objects on a dark background.

1. Heres an image wedlike to composite againsta background of anothercolora photo of a cloudedblue sky, for instance. Itsobvious that creating aselection of the bird will bedifficult, especially whileattempting to preserve themotion blur in the wings.

2. It looks as if the luminosityof the RGB composite mightbe a good place to startcreating our mask. Load theluminosity of any group ofvisible layers as a selectionby pressing Option/Alt+Command/Ctrl+~. Next,save the selection into a newchannel by choosing Select >Save Selection. Deselect andgo to the new channel.

3. Use Levels or Curves toeliminate most of the mid-tones in your new mask,preserving only the darkestedges. Notice the gray tonesalong the blurred portion ofthe wings. These areas willcreate semi-transparencyduring compositing. Be sureto use a paint brush to cleanup your mask channel.

Super-user tips!You can load theluminosity of the RGBcomposite as a selectionby Command/Alt+clicking the RGBcomposite channel inthe Channels palette,and you can easily savethe current selectioninto a new channel byclicking the SaveSelection icon at thebottom of the Channelspalette.

ShortcutsThroughout thisdocument, Command/Ctrl means Commandon Macintosh and Ctrlon Windows systems.Option/Alt meansOption on Macintoshand Alt on Windows.

34. Set your target back tothe RGB composite and loadyour finished channel as aselection. Drag the selectedarea onto the new background.

CREATIVE MASKING TECHNIQUES FOR COMPOSITING

5. Notice that the semi-transparent areas along theedges are too dark as theycontain some black from thebackground of the originalimage. Finish the compositeby using the dodge tool tolighten these edges. Set it toShadow mode, and use asoft-edged brush set to 80%or 90% opacity.

Dodge and burn toolsIf the hue shifts whenyou use the dodge orburn tools, try convert-ing your image to LABmode first. The dodgeand burn tools onlyaffect Luminosity whenused in LAB mode.

6. Heres our finishedcomposite. Nice.



Photo 1995 Don Fogg

PS4.0 11/96

DIGITAL DUPLICATION

The new Free Transform in Adobe Photoshop 5.0 can give you a whole newperspective on life! Have you ever wanted to scale and move objects in a step andrepeat pattern, as you do in Adobe Illustrator? Well, now you can. So lets getrolling and discover the secrets of transformation in Photoshop 5.0.

1. Lets say you need an imageof a typical business meeting.You have this image from theAdobe Image Library, but it justdoesnt look like its going to bea very big meeting. Lets implythat were anticipating a fewmore attendees by adding a fewmore note pads. How will wepull this off? Well duplicate thenotepads by scaling and movingthem with perfect perspective.And the one incredible featurewell use to do it is the powerfulFree Transform in Photoshop.

Adobe Senior CreativeDirector Russell Brown

reveals secrets oftransfromation in

Photoshop 5.0. INTERMEDIATE

2. Before we start, its impor-tant to note that this techniqueworks best on images with asequence of objects in per-spective. This technique willattempt to match and copy thesequence so that it createsmore objects with the correctperspective. Now, lets beginby placing guides around thelast object in the sequence wewant to duplicate. (Youll beusing guides in combinationwith the Free Transform.)Choose View > Snap to Guidesbefore you start.

ShortcutsThroughout thisdocument, Command/Ctrl means Commandon the Macintosh andCtrl on Windows.Option/Alt meansOption on theMacintosh and Alton Windows.

GuidesTo create guides, clickand drag from theruler at the edge ofthe image. Show rulersby choosing View >Show Rulers.

Digital Duplication 2

3. Turn off the Guides tempo-rarily by choosing View > HideGuides. Now, select the second-to-the-last object in thesequence you want to duplicate.In this case, I selected thesecond-to-the-last note pad andits shadow using the polygontool found under the lasso tool.(Click and hold the lasso tool toreveal the polygon tool.)

4. Next, while pressing theOption/Alt key, select FreeTransform from the Edit menu.The Option/Alt key willmodify the transformation andmake a copy of the selectioninstead of cutting it out of thebackground image. Thismodification is a very impor-tant step in this process.

5. Turn the Guides back on.Choose View > Show Guides.Move the object you aretransforming over the lastimage in the sequence andsnap it to one of the cornersformed by the guides.

TransformationsYou can move objectsthat are being trans-formed in one-pixelincrements by usingthe keyboard arrows.Using the Shift key incombination with thearrow keys will movethe object 10 pixels.

ShortcutThe keyboard shortcutcombination for thisstep is: Option/Alt+Command/Ctrl+T.

Digital Duplication 3

The Magic Key Combination!7. OK, this is the final andmost important step to thisentire process. Press Option/Alt+Command/Ctrl+Shift+T.This crazy combination of keyswill transform the last trans-formed image again to make acopy. Repeat this combinationof keys until you have as manyobjects as you need to fillyour image.

6. Stretch the four corners ofthe image out to the cornerscreated by the guides. This willdistort the image to match theangle and perspective of thesequence. When finished, pressthe Enter key. The object will betransformed to match yourdistortion and positioning.

8. As you can see, I repeated thesame process down the otherside of the table and now thehigh-powered meeting is readyto start!

PathsThis same keyboardcombination willwork with paths inPhotoshop. Justtransform a path andthen use these samekeys to duplicate asequence of paths.

Adobe, the Adobe logo,Illustrator and Photoshop aretrademarks of Adobe SystemsIncorporated. Macintosh is atrademark of Apple Computer,Inc., registered in the U.S. andother countries. Windows iseither a registered trademarkor a trademark of Microsoft inthe U.S. and/or other countries.

1998 Adobe SystemsIncorporated. All rightsreserved.

Photo Credit Adobe ImageLibrary.

PS5.0 9/98

Russell Brown, Senior Creative Directorat Adobe, shows you how to remove those

pesky stains from your fine imagesusing Adobe Photoshop

ADVANCED

Digital StainRemover

2STAGE 1: THE EASY STUFF

The goal of our project is to remove the stain from this image,without altering the original brush strokes of the painting. The staincould be removed in a number of ways, but this technique is quiteunique and, amazingly, does not require the use of Levels or Curves.This method is also great for removing unwanted blemishes andcolored lighting.

1. Lets start by correctingthe easy portion of thisimage. Notice that some ofthe stain travels over theneutral values in the back-ground of the painting. Wecan easily correct the neutralvalues with the sponge toolusing the Desaturate mode.

2. Use a combination ofpressure settings to gentlyblend the stained area intothe natural background.Also, use a combinationof soft- and hard-edgedbrushes to treat differentareas of the image. In thiscase, I also removed the stainfrom the pearls around thewomans neck.

3. To start the clean-upprocess, we need to makea copy of the current image.The overall idea behindthis technique is to makecorrections to the originalfile and then transfer thesecorrections to a finishedfile. To do this, we will makean identical copy of ourstained original, using Image> Duplicate.

Note: When itscomplete, set theimage aside to workon later. Do not closethe file.

Desaturate modeThe Desaturatecommand convertscolors to their grayscaleequivalent withoutchanging modes.

Brush shortcutsPhotoshop gives yousome great shortcutsfor selecting brushpressure and size. Thenumeric keys 1 through0 change a brushspressure percentage to10 times the number(or to 100% for 0). The[ key selects the nextsmaller brush; ] selectsthe next larger; { selectsthe first brush; } selectsthe last brush.

3STAGE 2: NEUTRALIZING THE STAIN

4. The secret to solving thisproblem is hidden in thechannels. In the channels!Take a close look at theindividual channels and youwill see that they clearlyshow the staining in the grayshades. If we could neutralizethe stain in the channels,then the problem would besolved. Right?

5. Here you can see that theGreen channel has the mostobvious problem. This isbecause green is the colorcomplement to red, and thestain in this image is red.The problem channel for ourimage will vary dependingon the color of the stain.

6. Notice that the Bluechannel is unaffected by thered wine stain. This channelis not a problem, and we donot need to correct it in anyway. The Blue channel alsocontains a significant por-tion of the detail in theimage, and if we do not haveto change it, we can maintainthe integrity of the brushstrokes. This is good!

Note: Earlier wecorrected the back-ground of this image.We should not see anymajor difference invalues between thedifferent channelsshown on this page.

OK, that was the easy part. Now were ready for the hard part. Thestain on the womans neck cannot be removed with the sponge tool orelse all the color would be lost. We could try making a selection of theneck area and then use Levels or any other of the many color controls.But Ive got another technique thats out of this world!

ShortcutsThroughout this docu-ment, Ctrl/Commandmeans Ctrl on Windowsand Command onMacintosh systems.

Channel shortcutsPress Ctrl/Command+1to access the redchannel; Ctrl/Com-mand+2 for the greenchannel; Ctrl/Com-mand+3 for the bluechannel; and Ctrl/Command+~ for theRGB composite.

4STAGE 3: SELECTING THE STAINED AREA

7. Return to the RGB com-posite. Double-click the lassotool and set the Featheroption to a value that willgive you a soft edge. Remem-ber, the value you use isbased on the resolution ofthe image. The higher theresolution, the greater thefeather value. Make a selec-tion of the stained area.

8. Select Quick Mask modefrom the Tool palette andedit the selection area withthe paintbrush tools. This isa great way to create a maskthat matches your imageexactly. Its important to taketime here to create a goodselection; it will pay off inthe end.

9. Finally, paint over anyother areas that do not needto be corrected. In this case,we protected the pearls. Thepearls were corrected earlierand do not need any morecorrection.

Super tipUse the Levels controlsto adjust the area ofthe Quick Mask. Levelsare often overlookedas a convenient way toadjust a selection whilein Quick Mask mode.

Quick Mask modePress the letter Q onthe keyboard to changeto Quick Mask mode.To change the colorof the mask, simplydouble-click the QuickMask channel in theChannels palette ordouble-click the QuickMask icon. An adjust-ment dialog box willappear.

5STAGE 4: NEUTRALIZING THE STAIN

10. Return to Selection modeby pressing the Q key. ChooseLayer > New > Layer ViaCopy (Ctrl/Command+J) tocopy the selected area to anew layer.

11. Invert the new layerfrom the Image menu (Ctrl/Command+I).

12. Set the mode for the layerto Color. The results shouldlook something like this.

613. Next, we need to view theRed channel only. To do this,press Ctrl/Command+1 onthe keyboard. You will beviewing a grayscale represen-tation of the composite ofthe two layers.

14. Here is where the magicstarts! Adjust the opacity ofthe second layer until thegray values in the Redchannel match the surround-ing image. Its magic! Itsamazing! Your friends andrelatives will be thrilled!Here you see that, by adjust-ing the opacity of the in-verted layer, we can neutral-ize the color problems oneach channel. WOW!

Hint: For best results,make sure that theabrupt edges havecompletely vanishedinto the surroundingimage.

15. The next step is a littletricky. Our goal is to get acopy of this corrected Redchannel into the duplicateimage we made earlier. Butwait! Copy and Paste will notwork! Doing a copy and pastewould only copy the targetedlayer. We must use a specialpower-user technique. PressCtrl/Command+A to selectthe entire image. Then selectEdit>Define Pattern.

In the next few steps, we will correct the individual Red and Greenchannels of this image. Then we will copy the corrected results andplace them into the second image. A little complex, but it works!

Define PatternDefine Pattern is oneof the few ways tomake a copy of acomposite image.The Copy commandwill not copy informa-tion on other layers.

Warning: You mustmake a selectionbefore you can chooseDefine Pattern fromthe Edit menu.

STAGE 5: DIGITAL MAGIC

Before

After

717. Next, select Edit > Filland completely fill the Redchannel with the pattern wejust created. Continue thisprocess (from step 14) ofmaking corrections on theGreen channel of the firstimage and then transferringthe results to the secondimage. Remember, theopacity value of eachchannel may differ.

16. After you define thepattern, bring the secondcopied image to the fore-ground. Press Ctrl/Com-mand+1 on the keyboard.This displays the Redchannel only.

18. Here is a comparison ofthe Green channel before thedigital correction (on the left)and after the adjustments (onthe right). The stain has beenliterally neutralized. Amazingbut true!


Note: Copyingcorrections directlyinto the originalwill not work! Thecorrected channelsmust be integratedwith a copy of theimage to make thistechnique work.

Pattern FillRemember, fillingwith a pattern is theonly technique thatworks. In this case,only the Red andGreen channels mustbe replaced.

819. After youve made all thecorrections, press Ctrl/Command+~ to display thefull-color image. OH NO!Theres a slight hue shift tothe image! You will quicklynotice that even the greatmaster is not perfect. Theabrupt edge is gone, but aslight discoloring may stillexist.

20. We can easily fix thiswith a soft-edged brush setto Color mode and opacityof 50% or less. Press the Alt/Option key to sample thecolor you want to use in thatarea (a Sample Size of 3 by 3Average is best), and thenpaint over it with the newcolor.

21. When youre done, theimage should look perfect.No new brush strokesandeverything as good as new!

FinetuningWe still need to doa bit more touchingup to complete thisproject. In this case Itook a color samplefrom the womans faceand transferred it tothe discolored areasof her neck.




Photography: Classic PIOPartners, Doug Menuez andPhotoDisc

Special thanks to Russ Sparkman

PS4.0 11/96

Sample area

DISPLACE SHADOWS WITH PHOTOSHOP

Have you ever wanted a shadow that followed the exact curve of a certain shape.Have you ever wonder just what a displacement map is used for anyway? Heresis your chance to find out. In this technique we will create a realistic dropshadow for a hat, like the one you see to the right.

1. In Photoshop, open up theimage on which you would liketo create the displaced shadow.Here we want to put a hat onthis incredibly good lookingface and give it a realisticshadow. To start, we want tocreate a new image file usingthis image.

2. Go to the Channels palette.Toggle through the threechannels by pressingCommand/Ctrl + 1 = RedCommand/Ctrl + 2 =GreenCommand/Ctrl + 3 = Blue

Find the one channel with themost contrast. In our case it wasthe red channel. With thechannel selected, chooseDuplicate Channel.

ShortcutsThroughout thisdocument, Command/Ctrl means Commandon the Macintosh andCtrl on Windows.Option/Alt meansOption on theMacintosh and Alton Windows.

Adobe Senior CreativeDirector Russell Brown

gets displaced working inthe shadows with

Adobe Photoshop 4.0. INTERMEDIATE

Displacing Shadows With Photoshop 2

3. In the dialog box you willwant to choose New underDocument. Then in the Namefield type in Blur map. Note: ifyou are on Windows you mustgive it the .psd extension.

4. You should now have a newimage with the file name Blurmap open on your desktop.Notice: if you check its chan-nels, it has only one channel.This is important because weonly want to displace ourshadow vertically. In order tohave true horizontal displace-ment there must be a secondchannel.

Displacement mapA Displacment mapis basically a secondimage that theDisplacement filteruses to determine howto distort the selection.Any Photoshop fileexcept bitmaps canbe used.

5. Now we want to smooth outthe gradations in this image andhave detail without any speck-ling. The best way to do this isto choose Filter > Noise > De-speckle. Repeat filter three tofour times. (Command/Ctrl + F)The softer and smoother thedisplacement map, thesmoother the shadow effect.Once you have done this, savethe image and put it aside.


8. Now, we want to create ourshadow. Select the bottom layerand click the new layer icon.This will create a new layerbetween the hat and our face forthe shadow. With this layer stillselected, create an approximateshadow using one of the selec-tion tools. (Remember, the theexact shaping will be done withthe Diplacement filter). Fillyour selection with 50% gray.Deselect, and choose Filter >Blur > Gaussian blur to createa soft shadow.

6. Lets go back to our originalimage. Get back in RGB com-posite mode. (Command/Ctrl +~) Next, open the image thatyou want the shadow to fallunder. In this case, we want tohave a realistic shadow fallingunder the brim of this hat.Ahha, now its starting to makesense! Notice that our hatalready has a transparentbackground.

7. Bring in the second imageeither by copying and pastingor dragging and dropping. Sizeit using the transform tool(Command/Ctrl + T). Place itinto final position. Youll wantto do this in order to see wherethe shadow needs to fall.

ShadowsAnother quick way tocreate a soft shadow ismake your selectionthen choose Select >Feather. Type in a pixelvalue for the selectionedges to be feathered.

Transform!To bring up the dialogbox for the Transformtool, try the shortcutShift + Command/Ctrl + T.


10. Next, a dialog box appearsasking for a file to use for thedisplacment map. Navigate towhere you saved the Blur mapfile and select it. Click OK andwait for the results. Wow! Theshadow magically bends overthe contour of this perfect face.Ahaa.

11. Now, to make it a littlemore realistic, set the mode toMulitply. Looks OK, but wecan do better than this!

9. With the shadow layer stillselected choose Filter > Distort> Displace. Enter 0 in theHorizontal scale and approxi-mately 30 in the Vertical scale.(Although you may want toexperiment with the amount.)The rest of the settings can staythe same. Click OK.

Displacement FilterRemember, the imagewere using for ourdisplacement map hasonly one channel.Through experimenta-tion, we have foundthat only the verticalscale is needed for agood-looking shadow.

Multiply ModeEffectively like sand-wiching two negativestogether, this modelooks at the colorinformation in thechannels and multipliesthe base color by theblend color, darkeningthe color underneath it.


12. For the final touch we wantto add a bit of warmth andcolor to the shadow as therewould be in real life. Fortu-nately, Photoshop 4.0 Adjust-ment layers make this a snap.Choose New Adjustment Layerfrom the layers pop-up menu.Choose Hue/Saturation andmake sure to select Group withPrevious Layer. This way theadjustment layer will affect onlythe shadow layer.

13. In the Hue and Saturationdialog box, select Colorize andthen adjust your HSL levelsuntil you have your desireddensity and shadow color.

12. Voila! There you have it! Theperfectly shaped and shadedshadow. For a finishing touch tomake the hat appear as thoughit were sitting on the head, weadded a single 50% brushstroketo the shadow layer underneaththe hat.

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated. Macand Macintosh are trademarks ofApple Computer Incorporated,registered in the U.S. and othercountries. Windows is eitherregistered in t he U.S. and/orother countries or a trademarkof Microsoft.


Photo credits: Peter Foxand John Greenleigh

PS4.0 11/97

ColorizeYou can use this effectto colorize black-and-white images or tocreate a monotoneeffect. Your selectedimage will be con-verted to shades of red.You can then adjustthe color using theHue slider.

NicerLookingFadeEffect

INTERMEDIATE

2NICER LOOKING FADE EFFECT

1. Lets quickly review how toget a fade effect in Photoshop.Place an image to fade on alayer, and choose Layer >Add Layer Mask > Reveal All.Make sure that the LayerMask Thumbnail icon isselected in the Layers palette.Using the gradient tool, set todefault black and white, andclick and drag over the image.

Have you ever had a fade effect look as if its starting or ending tooabruptlyor almost being cut off? Here we explain how to use AdobePhotoshop to solve that problem and achieve better fade effects.Although the visible quality enhancement with this technique mayvary, its a good tip to know

2. Now lets check out thefade effect youve created.You may notice that the fadelooks as if its starting orending too quickly or almostas if its being cut off. Thehigher the lightness contrastbetween the fading imageand the background, and theshorter the distance of thefade, the more obvious thisbecomes.

Layers PaletteThe eye icon in the firstcolumn lets you knowif the layer is visible ornot. The second columnhas two icons, onebeing the paintbrushwhich tells you that youare painting on thelayer, the other tellingyou that the layer maskis selected.

3. Heres how to solve theproblem. Follow the sameprocess described in step 1,but when you draw a gradi-ent on the layer mask, draw itabout 25% longer than usualtoward both the starting andending directions.

34. With the layer mask chan-nel still selected as the currenttarget channel, choose Image> Adjust > Curves. By addingtwo control points, shape anS-curve as shown here. Youmay want to adjust the curveto change the look of the fadetransition. If you like the fadeeffect in the preview, click OK.

NICER LOOKING FADE EFFECT

5. By applying the S-curve-based tonal correction to thelayer mask, you add speedchanges to the fade transi-tionsome speed accelera-tion at the beginning andsome speed reduction at theend. This prevents the fadefrom starting or ending tooquickly; thus you get a morenatural-looking fade.

Note: Fading edges also canbe created with the Featheroption on the Select menuand some Selection tools.Feather always createsnatural-looking fading edgesbecause it has the S-curveeffect built-in.

Curves dialog boxTo add a control pointin the Curves dialogbox, click and drag onthe graph area. Toremove a controlpoint from a curve,drag the control pointoff the graph area.

Right: Fade createdwith the S-curvetechnique.

Left: Fade effect withdefault gradient.

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated.


Contributing author: Etsuro EndoPhotography: PhotoDisc

PS4.0 11/96

LayerMania

Russell Brown,Senior CreativeDirector atAdobe Systems,performs layersmagic withAdobe

Photoshop

ADVANCED

2BLENDER DEMO PART 1 - LIGHTING EFFECTS

In this demo, we will bring an object that has flat lighting (theblender) into another image (Russ the magician) and light it so thatit appears to be in the scene. We will do all of this without the aid ofthe Lighting Effects filter, or the Levels or Curves dialog boxes. Wewill do this with layers!

1. With both your back-ground and your objectimage open in Photoshop,create or load the selectionof the object. Here we loadedthe selection of the blender,which we already made andsaved as a channel.

Loading selectionsA shortcut to loadingan existing selectionis to press Option/Alt+Command/Ctrl+4(4 corresponds tothe number of thechannel). To load theselection of an objectthat is on a transpar-ent background, theshortcut is Command/Ctrl+click the layer inthe Layers palette.

2. Using the move tool, dragthe selected image into thebackground image. Movethe object into position.Double-click the new layerand name it.

3. The original blenderimage is too light, in relationto the background image.So we need to increase thedensity of the blender. Hereshow we can do that withoutusing levels or curves.Duplicate the Blender layerby dragging it onto the NewLayer icon at the bottom ofthe Layers palette. Set themode of this new layer toMultiply by using the Modepop-up menu in the Layerspalette.

Multiply modeThe Multiply modeis the equivalent ofplacing two transpar-encies over each otherand viewing them ona light table. Multiplymode combines thedensities of the twolayers and darkens theimages, just as it isdoing here.

ShortcutsThroughout thisdocument, Command/Ctrl, means Commandon the Macintosh andCtrl on Windows.Option/Alt meansOption on the Macand Alt on Windows.

Viewing tipDialog boxes are best viewed at 200%.

34. To increase density evenmore, duplicate the copiedlayer two more times. Noticehow the blender darkenswith each layer duplicated.

BLENDER DEMO PART 1 - LIGHTING EFFECTS

5. The top portion of theblender is still not lit cor-rectly. We need to erase someof each of the layers, andwe can do this using layermasks. With the topmostlayer selected, choose Layer> Add Layer Mask > RevealAll. Add a layer mask to thenext two layers also.

6. Target the topmost layermask. Then select the gradi-ent tool, make sure yourdefault colors are white andblack, and click and drag atthe same diagonal as theblender to create a smoothtransition. Repeat this stepfor each layer that has a layermask. Notice how the high-lights start to form along thetop edge. BINGO!

Default ColorsPressing the D key onthe keyboard when alayer mask is selectedgives you the defaultwhite and black asyour foreground andbackground colors.Ifon a Layer image, thedefault colors wouldbe black and white asyour foreground andbackground.


7. Next, a reflection of mynice shiny head and whitegloves needs to appear onthe blender so that it lookslike its really part of thescene. Duplicate the Back-ground layer by dragging itonto the New Layer icon inthe Layers palette.

8. Choose Layer > Transform> Scale, and drag the lowermiddle point up to compressand distort the image. Dontdouble-click yet.

9. The reflection should bean exact mirrored image, sowith the transform pointsstill active, choose Layer >Transform > Flip Vertical.Double-click inside theimage. Then, using the movetool, move the image intoposition.

FinetuningIf the image needsmore adjustments, usethe dodge and burntools or select thepaintbrush tool andpaint black on thelayer mask to addmore highlight effects.


10. The image shouldappear inside the blender.Move the Background copylayer up between the Blenderlayers. Hold down Option/Alt,and move the pointer over theline between the Backgroundcopy layer and the Blenderlayer below it. When thepointer changes to the clip-ping group icon, click todefine the two layers as aclipping group.

Clipping groupsA clipping group issomewhat like usingthe Paste Into com-mand with two layers.In this case, think of theblender layer as themasking shape and thebackground copy asthe image that will bepasted into the mask.

Overlay modeColors are overlaidon the existing pixelswhile the highlightsand shadows of thebase color arepreserved. The basecolor is not replacedbut is mixed with theblend color to reflectthe lightness anddarkness of theoriginal image.

11. With the Backgroundcopy layer still selected inthe Layers palette, chooseOverlay from the Modepop-up menu.

12. Using the move tool,move the image into placeso you can see the reflectionin the surface. If the imageis too light, duplicate theBackground copy layer bydragging it onto the NewLayer icon at the bottom ofthe palette.

Reflections 101Dont forget your basicphysics when makingrealistic reflections.The angle of incidencealways equals theangle of reflection.

Angl

e of i

ncid

ence

Angle of reflection


14. With the Backgroundcopy layer targeted, select theeraser tool with a mediumsize, soft edge. Clean up thehard edge of the reflection inthe blender by erasing theimage. Also, because thereflection would not appearthat high on the blender, takeout some of the reflectionappearing higher up on thesurface. And there you haveit, the fantastic blender trick!

13. Merge the layers thatcreate the reflection forfurther finetuning. WithBackground copy 2 selected,choose Merge Down fromthe Layers palette pop-upmenu.

FlexibilityBy creating thereflection on a layer ofits own, you can easilyedit and reposition itat any time.

7BLENDER DEMO PART 2 - WORKING WITH SMALL ANIMALS

1. Continuing to work withthe blender image from theprevious demo, choosePreferences > Display &Cursors. Select Brush Sizeand Precise. Click OK. Selectthe paintbrush tool with amedium size, soft-edgebrush.

In this next portion of the demo, well experiment with moreadvanced capabilities to enhance the blender. Yes, its a little moretricky, because more layers will be added. First, well tone down thebright highlights on the blender with some great brush tricks, andthen well add a fish so that it looks as if its inside the blender.

Brush size tipTo change your brushsize without going tothe Brushes palette,press the OpenBracket and CloseBracket ([ and ]) keysto reduce and enlargethe brush size.

2. Target the original Blenderlayer. While holding downthe Option/Alt key (whichtoggles you from the paint-brush to the eyedroppertool), select a light coppercolor from the blender totone back the highlight areas.Then check Preserve Trans-parency in the Layers palette.

PreserveTransparencyPreserve Transparencywill protect thetransparent areas inthe image and allowyou to paint onlywhere there are pixels.Preserve Transparencycreates something likean invisible mask.

3. Double-click the paint-brush tool to bring up thepaintbrush options. Choosean opacity of 50% and selectDarken mode in the pop-upmenu.

Darken modeWith Darken mode,the paintbrush willpaint only where thechosen foregroundcolor is darker thenthe highlight color. Itwill not paint in thedark shadow areas.


4. Paint over the highlightareas. Notice that you donthave to worry about goingbeyond the boundaries ofthe blenderPreserveTransparency is at work!Continue painting over allthe highlight areas to tonethem back. Feather thehighlight at the top of theblender to keep the curva-ture of the lid.

Opacity tipWhen a selection toolis active, pressing anyof the numeric keyschanges the opacityto a correspondingpercentage. Press 1 for10% and 0 (zero) for100%, and so on.

5. Now, as a challenge for yousuper users, were going toput a fish inside the blender.With the move tool, drag thefish into the blender imageand position it in theblender. Move the fish tothe topmost layer.

6. Select the lasso tool, andthen target the originalBlender layer. Holding downthe Option/Alt key, click theblender area around the fish,selecting the area that will besandwiched over the fish.

Note: No small animalswere harmed in thecreation of this demo.


7. From the menu bar,choose Layer > New > LayerVia Copy. In the Layerspalette, move the new layerabove the Fish layer.

8. Double-click this newlayer to bring up the LayerOptions dialog box. Option/Alt+click the This Layerhigh-value range slider(white triangle) and movehalf of the triangle to the left.

Blending layersThe sliders here let youdefine which pixels areblended by indicatinga range of brightnessvalues for the replace-ment pixels. In ourexample, the highlightrange was split tosoften the layer, givingit a semi-transparentand fogged look. Thefurther apart thetriangles, the softer theappearance of the layer.



Photography: Doug MenuezSpecial thanks to Ridgley Curry,Classic PIO Partners

PS4.0 11/96

9. You can see the goldfish,semi-transparent inside theblender. There you havesuper advancedthe nextsteps for working with layersand lighting a particularscene.

MAKING SEAMLESS PATTERNS

To make a pattern in Adobe Photoshop, you simply select an area using therectangle marquee tool and then choose Edit > Define Pattern. Almostalways, however, filling an area with this pattern will leave telltale tilinglines, or grids. For a pattern to tile seamlessly, the edges of the pattern tilesmust align exactly to create a continuous image. This technique shows howto create a pattern tile with edges that wont be visible when the tile repeats.

1. Open the image thatcontains the area you wantto use for a pattern tile.

2. Crop the image to the sizeand area you want the patterntile to be.

The tile imageImages with plain ortextured backgroundsare the best candidatesfor a smoothly tilingpattern because it iseasier to smooth awaythe tile lines. Try toavoid images withgradations becausethese are very difficultto touch up. Also,select an image orobject that doesntbleed off the edge ofthe tile.

Luanne Seymour Cohen,Creative Director at

Adobe Systems showsyou how to make aPhotoshop pattern

without seam lines.INTERMEDIATE


Making Seamless Patterns 2

3. Check the size of the file byholding down Option/Alt andselecting the size box in thelower left corner of the window.Make a note of the width andheight pixel values.

4. Choose Filter > Other >Offset. Select the Wrap Aroundoption; for the horizontal andvertical values, enter approxi-mately half the value of the widthand height you noted in step 3.

5. Click OK. The Offset filtersplits the image into four sec-tions. Notice that the left half ofthe image completes the righthalf and the top half of the imagecompletes the bottom half.

The Offset FilterThis filter basicallyslices up your imageand moves it horizon-tally and vertically. It ishelpful to do this sowe can see how theedges of the patterntiles will meet.


6. Now use the rubber stamptool to blend the center seamsbetween the four sections ofthe image. I use a soft-edgedbrush set at 50% opacity. Thegoal is to try to blend thebackgrounds of each rectangletogether and to remove otherelements that you dont want torepeat. (In this example, I re-moved the stem and the straybit of petal.)

Cloning a smoothbackgroundTry to clone usingmultiple, short brushstrokes so that thestroke itself is notvisible. Use a brushthat is similar in sizeand texture to thebackground. For thissoft, diffused back-ground I used a soft,transparent brush.

7. To put the finishing toucheson the pattern tile, we mustreverse the offset process.Choose Filter > Other > Offset.This brings up the filter dialogbox last used. Add a minusbefore each of the pixel valuesto reverse the offset effect.Click OK.

8. Check to see if any problemswere created by painting orcloning near the edge of the tilein step 6. If so, carefully coverthese up using the rubber stamptool again. Use a small brushand be careful not to changeany of the pixels right on theedges of the tile. In this ex-ample, the arrows point to theareas where I painted too closeto the edge and need to repair.

Filter shortcutsTo apply the last filteryou used, simply pressCommand/Ctrl+F. Ifyou want the samefilter but need toadjust some values,press Command/Ctrl+Option/Alt+F. Thedialog box of the lastused filter will appear.


11. Evaluate the overall look ofthe pattern and identify anyproblem areas. If you like theeffect, save the pattern tile file.If you want to touch up the tile,return to step 8.

10. Create a new file to use as apattern fill test. Make sure thatthe file is several times largerthan the pattern tile. Select alarge area (or the entire file),and choose Edit > Fill. Fromthe Use pop-up menu, choosePattern. Use a Mode of Normaland an Opacity of 100% so thatyou can easily identify anyproblems in the pattern. Click OK.

9. Next, test the pattern tile forany flaws. Choose Select > All(Command/Ctrl A); thenchoose Edit > Define Pattern.

PS4.0 12/97

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated.Macintosh is a trademark ofApple Computer, Inc. registeredin the U.S. and other countries.Windows is either a registeredtrademark or a trademark ofMicrosoft in the U.S. and/orother countries.


Photograph: Digital Vision.

PAINTERLY IMAGES1. Open a new CMYK or RGBfile. The best types of imagesfor this technique are ones thatcontain lots of color andtexture. Landscapes and stilllifes work very well. Peopledscenes are fine but close-ups offaces dont work as well becausethe facial features can becometoo distorted or smeared.

2. Optional: If your imagehas flat or dull colors, youmight want to intensify themfor the painting. Create anAdjustment layer by holdingthe Option/Alt+Command/Ctrl keys while clicking onthe new layer icon. ChooseHue/Saturation. Move thesaturation slider to the rightto intensify the colors inyour image.

Adjustment layersAdjustment layersallow you to alter thelook of your imagewithout actuallymaking a permanentchange to the original.They give you theflexibility of being ableto change the adjust-ment as many times asyou want. To readjust,simply double-click onthe adjustment layername and makechanges in the dialogbox that appears.


Adobe Systems, makesa good impression withAdobe Photoshop 4.0.

BEGINNER

Learn how to create a painting from a photograph. In justa few simple steps you can turn a run of the mill snapshotor stock photo into a digital painting.


Painterly Images 2

3. Now we will make a copyof the background layer bydragging it to the new layericon. The original backgroundlayer will be left as is and wewill paint on the copy.Important: Save the file atthis point.

Custom brushesYou can use any imageor part of an image tocreate a custom brush.The most effectivebrushes are created withblack and gray pixels ona white background.Once youve created thebrush image, select itand choose Define Brushfrom the Brushes palette.

5. Before you begin painting,youll need to choose a brushthat approximates the texture ofthe subject matter. You can usethe default brushes in yourbrush palette. But for the flowerfield in this image, Im going touse a custom brush. Select LoadBrushes from the Brushespalette. Go to the Photoshopfolder and open Brushes >Assorted. (Mac users: Goodies >Brushes & Patterns > AssortedBrushes.) The extra brushes willappear in the brushes palette.

4. Double-click the rubberstamp tool and change theOption in the Rubber StampOptions palette to Impressionist.

Painterly Images 3

6. Select your brush and beginpainting the image. The impres-sionist tool samples the colorsthat are in the saved image andallows you to smear them. Its asif the photo was made of wetpaint and you are moving itaround with a brush. Note: Donot save the file while youpaint! If you want to keepinterim copies, choose File >Save a Copy. If you save the fileduring the painting process youwill no longer be painting withthe original source pixels.

7. You may want to zoom in topaint certain sections or objectsin your image. Or change thebrushes or brush stroke direc-tion based on the subjectmatter. In this example, I triedto match the brush strokedirection to the texture of therusty shed.

8. Continue brushing the entireimage until you are satisfiedwith the result. You may want togo back over certain areas witha smaller brush, if you want torecover detail that might havebeen lost.

ImpressionistoptionWhen you use theImpressionist option ofthe rubber stamp tool,Photoshop reads thepixels from the last-saved version of thefile. As you drag overan area with the brush,it smears the pixels fromthe image to create animpressionistic effect.

PS4.0 12/97

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated.Mac and Macintosh aretrademarks of Apple Computer,Inc. registered in the U.S. andother countries. Windows iseither a registered trademarkor a trademark of Microsoft inthe U.S. and/or other countries.


Photograph: DigitalVision.


Adobe Systems, Inc.,shares a technique on

how to create coolposterized images with

Adobe Streamline,Adobe Photoshop and

Adobe Illustrator.INTERMEDIATE

1. Open the original image inPhotoshop. For best results, usea higher resolution image. 300-600 pixels per inch will give thebest results in Streamline.

2. To get the best results inStreamline you must firstsimplify the shapes in yourimage using Photoshop. To dothis choose Image > Adjust >Posterize. Play around with thenumber of levels, and turn onthe Preview button to see theresults. Dont worry about thenumber you end up with, justpick a number that gives youthe best shapes while stillmaintaining detail.

Posterizing inPhotoshop6 levels of posterizationmeans that Photoshopwill use 4 tonal valuesin each channel. Thismeans that for a3-channel RGB image,youll end up with4x4x4 colors or 64colors.

POSTERIZED IMAGES WITH STREAMLINE

Sometimes you want to make a photographic imagelook very graphic with crisp, sharp edgesand high contrast colors. You can dothis by first posterizing it inAdobe Photoshop, tracingit in Adobe Streamline and thenediting and finessing the colors andshapes in Adobe Illustrator.This technique shows you how.

Posterizing Images With Streamline 2

3. Save the file with a new name.You can save the file in TIFF,TIFF compressed, PICT,Photoshop, or Photoshop 2.0format.

4. Switch to Streamline andopen the Photoshop file youjust saved. Choose Options >Settings. Select one of the presetColor settings. Dont worry ifthe number of colors is differentfrom what you want because wewill adjust that later.

5. Choose Options > Color/B&W Setup. This is where youwill experiment with theMaximum # of colors for yourposterization. Select the Add newcolors to custom color list. SelectReduce detail. Deselect (forphotographic image) or selectColor averaging (for imageswith large areas of color).

StreamlinesposterizationStreamline creates agraph of the imagecolor values (histo-gram). Then it dividesthe colors evenly into acolor palette thatcontains the numberof colors selected inthe Color/B&W Setupdialog.


6. Click the Preview button tosee how the images colorshapes will be divided up. Keeptrying different numbers ofcolors and complexity levels,(dont forget to click Preview),until you are satisfied with theshapes and level of detail in thepreview. The actual colors canbe changed later in Illustrator.

7. Choose Options >Conversion Setup. ChooseOutline for a photographicimage. If your image has a lot ofnoise correct it by increasingthe Noise Suppression slider. Ifyour image has straight andcurved lines, make thatselection also.

8. Because youve changed someof the specifications, Streamlinehas given your settings a newname. You can change it in theSettings dialog if you want, thenclick Create.

Experimentationpays offIn the image at the left,I tried several differentcolor settings startingwith 6 colors. I foundthat 16 was theminimum number Ineeded to retain thedetail in the flowercenters. Anything lessand the detail I wantedwas lost.

Noise SuppressionPixel areas with adiameter measuringthe number of pixelsselected in the NoiseSuppression setting areignored duringconversion.

Naming SettingsIf you make a changeto either the ConversionSetup or Color/B&WSetup after you havesaved your settings youwill need to resave thenew settings with adifferent name.


9. Once your settings areadjusted, you are ready toautotrace the image. ChooseFile > Convert and Streamlinewill begin the autotrace process.When the tracing is complete,choose File > Save Art As andsave in Adobe Illustratorformat. Streamline will add orreplace a suffix of .ai to the filename.

10. Open the .ai file in Illustrator.Choose Window > ShowSwatches and view by Name.Notice that there are nowseveral new spot colors at thebottom of the Swatches palette.They are named Auto Colorfollowed by a number.

11. To adjust or change a color,double click on an Auto Colorin the Swatches palette. Movethe Swatch Options dialog soyou can see the image. Adjustthe sliders to the desired color.The artwork will update in thewindow so you can preview thenew color change. Click OK.

Smoothing pathsIf the shapes thatStreamline created aretoo complex or havetoo many anchorpoints, use the SmoothPath feature. Select thepath or paths thatneed simplifying.Choose Edit > SmoothPath. Choose Minimum,Medium or Maximum.

Auto ColorsThe colors created byStreamline are namedAuto Color and arespot colors inIllustrator.


12. To adjust the tone of a spotcolor, select its name in theSwatches palette and move theslider in the Color palette. Thenew tonal value of the autocolor can then be dragged tothe Swatches palette. The addedswatch will retain the originalcolor name and have a percent-age after it. You can then make aselection in your artwork andtarget the tonal color.

13. To clean up your file youmay want to remove unwantedshapes, breakup complex pathsor remove points from a path.To clean up shapes, zoom in onthat area. Depending on thecomplexity of the image youtraced, you might have someunwanted lumps and bumps insome of the paths. Use thedelete anchor point tool, thescissors tool and/or the knifetool to simplify and split uppaths.

14. Once youve removed orsimplified the really complexpaths, youre done. In the imageat the right, I added a gradientand a stroke to the backgroundshape. This adds visual depth tothe image.

Adobe, the Adobe logo,Photoshop, Illustrator, andStreamline are trademarks ofAdobe Systems, Incorporated.

1997 Adobe Systems,Incorporated. All rightsreserved.

Photography: PhotoDisc

PS4.0, SL4.0, AI7.0

QUICK PICTURE FRAMES

Adobe Photoshop 5.0 comes with more than 100 different Actions. Several ofthese Actions create frames. If you like the frame but want to customize it foryour image, you can do so easily. In this technique, you will make a pictureframe for your image and then change its color using an adjustment layer.Adjustment layers allow you to alter thecolor of the framewithout losing itsshading, bevelingand texture.

1. Open the image you want toframe. The image size must bemore than 100 pixels in bothwidth and height. This actionworks best on a flattened or aone-layer file. Here we are usingthe Wilderness file found in theAdobe Photoshop 5.0 GoodiesSampler folder.

2. Choose Window > ShowActions to display the Actionspalette. Open the DefaultActions set.

100 free ActionsPhotoshop 5.0 shipswith eight Action setscontaining more than100 different Actions.You can find them inthe Goodies folderinside the Photoshop5.0 application folderfor both Mac andWindows versions.

Luanne Seymour Cohen,Adobe Imaging

Evangelist, customizes Actions inAdobe Photoshop 5.0.

BEGINNER

Quick Picture Frames 2

3. Select the Wood Frame - 50pixel Action and click the Playbutton. Once you click the Playbutton a dialog box will appear.Click Continue if you have atleast a 100 pixel wide and tallimage. Click Stop if your imageis smaller than this. Applyingthe Action to your image willmake your image 100 pixelswider and 100 pixels taller thanthe original image.

4. The Action creates a woodframe around your image. Ifyou are satisfied with the image,save the file now and you arefinished. If you want to changethe color of the frame, go tostep 5.

5. Select the frame layer. Fromthe Layers palette, choose NewAdjustment Layer.

Layer EffectsTo change a layereffect setting, double-click on the layer effecticon, located in theLayer palette.

Quick Picture Frames 3

Adobe, the Adobe logo, andPhotoshop are trademarks ofAdobe Systems Incorporated.Macintosh is a trademark ofApple Computer, Inc. registeredin the U.S. and other countries.Windows is either a registeredtrademark or a trademark ofMicrosoft in the U.S. and/orother countries.


Photo credit Adobe ImageLibrary.

PS 5.0 5/98

6. Choose the type of adjust-ment you want to make. In thiscase we want to change thecolor of the frame so chooseHue/Saturation. Click GroupWith Previous Layer so that thecolor adjustment affects onlythe frame layer.

7. Select the Colorize option.Then move the Hue slider untilyou find the color you want. Tomake the color more or lessintense, adjust the Saturationslider. To make the color lighteror darker, adjust the Lightnessslider.

8. Click OK to view the results.Remember, you used an adjust-ment layer for maximumflexibility, so you can doubleclick on it at any time andchange the values.

Adjustment LayersIf you want to experi-ment with color orcontrast adjustmentsbut you dont want topermanently changethe original, useadjustment layers. Theyfloat above the layersyou want to alter. Ifyou dont like theeffect, just double clickon the adjustmentlayer and change thevalues. You can applyan adjustment layer toan entire file or to justone layer at a time.

Adobe Senior Art DirectorRussell Preston Brown in

a virtual paradise withAdobe Photoshop 4.0

INTERMEDIATE

RAINBOW IN PARADISE WITH PHOTOSHOP 4.0

For all you Photoshoppers wanting your own slice of paradise, here is the tip foryou! You will learn how to create your own rainbow using the new Photoshopgradient tool, along with channels and layer masks. Its a virtual pot of gold.

1. Open the image you want tobegin working on. As you cansee, I have chosen an imagethat lends itself to a natural-looking rainbow, with a darkstormy background and fronthighlights.

2. Open Gradient Tool optionsby double-clicking on the Gradi-ent tool. Click the Edit buttonto bring up your Gradient Editordialog box.

ShortcutsThroughout thisdocument, Command/Ctrl, means Commandon the Macintosh andCtrl on Windows.Option/Alt meansOption on theMacintosh and Alt onWindows.

Rainbow in Paradise with Photoshop 4.0 2

3. Next, select New to begincreating your rainbow gradient.Once you name the new gradi-ent, start adding colors bysimply clicking below thegradient bar. Edit your newcolor by clicking in the colorswatch area.

4. The key step here is to makesure that your color bands areat one end of the bar, as in theexample shown. Ive chosenthe following simple set offour colors: 28-137-18 / 210-255-0 / 255-60-0 /0-0-0 for black

You can also experiment to findyour own color solutions, if soyou might be tempted to createthat soft blend right herebutdont do it! We will do that later.Click OK once you have thegradient you want.Download gradient for PCDownload gradient for Mac

Duplicating ColorsBy holding down theOption/Alt key whileclicking on any colorsquare, you canduplicate that color.

Tab Tab Tab!When your colorsare close together,use the Tab key tomove through yourselections to ensureyou dont accidentlyselect the wrong one.

5. Finally, set the Type ofgradient to Radial.


6. Create a new layer for therainbow by pressing the newlayer icon. Then zoom out sothat you can start the gradientwell below the actual image.

8. So first, set the Layer mode toScreen and move the opacityback to 60%.

Screen ModeThis Blend mode is liketaking two separatetransparencies andprojecting them on topof each other. Resultingcolors will always belighter. Black willchange nothing andwhite remains white.

7. Click and drag your gradienttool about two-thirds the wayup the image. Yikes! Right awayyou will notice two obviousproblems: The gradient will beblack with harsh bands of color.


9. Next we want to soften thebands of color. Choose Filter >Blur > Gaussian Blur. Yourimage resolution will determinehow much you will want to setyour blur to. I chose about 9pixels for this 72-dpi image.

There is still one thing that weneed to do. We need to makethe rainbow appear as thoughits coming from behind thetrees. We can do this using asimple layer mask.

How much blur?The degree of Gaussianblur will depend onyour image size andresolution. For lowerresolution, less blur willbe sufficient, for higherresolution you willneed to go higher.

11. Duplicate this channel bydragging it over the new chan-nel icon. To heighten thecontrast as Ive done, you canadjust the levels by choosingImage > Adjust > Levels.

10. You could paint a mask tohide parts of the rainbow orstart with one of the channelsin your image. I am going touse the channels, but somephotos may not work as wellas this one. First turn off theRainbow layer (click on the eyenext to the layer) and go to theChannels palette. Now, vieweach channel separately tofind which one has the bestcontrast to make a layer mask.

Display ShortcutTo go through yourchannels quickly youcan use these shortcuts:Command/Ctrl+1 = RedCommand/Ctrl+2 = GreenCommand/Ctrl+3 = BlueCommand/Ctrl+~ = Composite


13. Switch back to the compos-ite channel and then back toyour Layers palette. Target yourrainbow layer. With the channelas your selection click the layermask icon.

Layers ShortcutTo load the channelselection from yourLayers palette, press:Command/Ctrl +Option/Alt + 4

14. There you have it! Theperfect rainbow in paradise.

12. Turn this new channel into aselection either by dragging itover the dotted circle at thebottom or using the shortcut:Command/Ctrl + click on thetarget channel.


1997 Adobe SystemsIncorporated. All rightsreserved.

PS4.0 8/97

RepairingDigitalPhotographs

Adobe Senior Creative DirectorRussell Brown shows you how to repair your

digital images with Adobe Photoshop

ADVANCED

2REPAIRING DIGITAL PHOTOGRAPHS, PART 1

In this demo, we will repair a photograph taken with a low-resolutiondigital camerain this case, the Kodak DC50. Often these camerasproduce excellent results, but they have a few deficiencies that can berepaired digitally using layers. This technique is also quite useful forrepairing badly scanned images.

1. Open your digital imagefile in Photoshop. Zoom inon the image and take a closelook at the problem areas,especially noting the skintone in this image.

2. Go through the RGBchannels. Press Command/Ctrl+1 for the Red channel,Command/Ctrl+2 for theGreen, and Command/Ctrl+3 for the Blue channel.Notice the artifacting andextra noise in the Bluechannel. The Blue channelis the telltale channel of ascanned image and often willshow the errors of the scan.

Blue channelThe CCD (ChargedCouple Device) inthe camera is leastsensitive to the blues,and it is more difficultto interpret those colors.Also, when you capturean image with a digitalcamera, its compressedwith JPEG compression.The combination ofthese two factorscreates noise in theblue channel.

3. Zoom out of the imageand return to the RGBcomposite. Heres how toeasily fix this image usingPhotoshop layers. Duplicatethe Base Layer by dragging itonto the New Layer icon atthe bottom of the Layerspalette. Double-click thisnew layer and rename itColor Blur.

PreferencesFor this demo, wechose Preferences >Display & Cursors, andselected. Brush Sizeand Precise.

ShortcutsThroughtout this docu-ment, Command/Ctrlmeans Command on theMacintosh and Ctrl onWindows. Option/Altmeans Option on theMacintosh and Alton Windows.


4. Choose Filter > Blur >Gaussian Blur. Choose valuesbased on the resolution ofthe image. You want to softenthe imagenot lose theimage completely, but softenitespecially in the troubledarea of the blue channel.

5. With the Color Blur layerstill targeted, create anoverlay of the two layersusing Color mode from thepop-up menu in the Layerspalette.

6. Zoom in to the imageand look at the same area.Press Command/Ctrl+3 togo to the blue channel again.See how the noise has beensmoothed out. Amazing buttrue! But wait, theres more...

Color modeColors are overlaid onthe existing pixels whilethe highlights andshadows of the basecolor are preserved.The base color is notreplaced, but is mixedwith the blend color toreflect the lightness anddarkness of the original.


7. Lets continue workingwith this image and give itmore of a portrait look bysoftening the focus of theimage, as if it were shotthrough a special filter.Duplicate the Color Blurlayer by dragging it to theNew Layer icon, and thendouble-click the new layerand rename it Soft Focus.

8. With the Soft Focus layertargeted, change the modeback to Normal and setopacity to 30%. This createsa nice soft look around theedges of the image, especiallythe face, hair, and hat areas.

9. The eyes are also beingsoftened, which is notsomething we want, so wewill create another layer tosharpen parts of the image.Duplicate the original BaseLayer, and then move it tothe top (above the Soft Focuslayer). Name this layerSharpen Details.

Opacity TipWhen a selection toolis active, pressing anyof the numeric keyschanges the opacityto the correspondingpercentage. Press 1 for10%, 0 for 100%, andso on.


10. Create a new layer byclicking the New Layer icon,and then move it to thebottom of the stack. Option-click the eye icon for thislayer, and then choose SelectAll and fill the layer withwhite

(ebook-pdf) advanced photoshop techniques.pdf

Documents

adobe photoshop

adobe systems

web page designcopyright

adobe illustrator

web pages

web pagedesign

page techniques

natural image