A few hints on using the Clone Stamp tool in Photoshop to remove objects from photos.

Open the image that you want to work with. You can practice with this image of a church with a telephone pole and lots of other objects: removeobjectsmall.jpg

Rotate the Image by 90 degrees counter clockwise. Image > Rotate Canvas > 90 CCW.

Set the Zoom on the image to 100% by clicking View > Actual Pixels from the menu.

Before you make any major changes to an image, you should make a duplicate of the image. You can do this in the Layers panel (Window > Layers). Right click the Background layer and select Duplicate Layer. Name the layer church copy and click OK. This protects the original image. If you decide that you don’t like your cloning and you want to start over, drag the church copy layer to the trash icon in the Layer panel.

Select the Clone Stamp

In the Clone Stamp options (top of the screen, below the file menu) select a brush size that’s not too large. You want the brush to be slightly larger than the object you want to remove.

I set my brush to a 17px soft brush tip. The soft brush tips have a blurred look to them. I think using a soft brush with this technique makes the editing less noticeable.

In the options set the Mode to Normal and the Opacity and Flow to 100%.

We are going to essentially copy (or clone) blue sky and clouds over the telephone wire. First you must set the source (or area that you want to copy from).

Scroll to the top of the image so that you can see the top of the telephone wire. Make sure that the church copy layer is selected in the layers panel. Position your mouse to the right of the wire. Hold down the Alt key on the keyboard (you will notice that the cursor changes - see image to the left) and click the mouse once. You have set the “source” for the clone.

Move your mouse over the wire, hold down the left mouse button and paint over the wire with up and down strokes. The circle in the image to the right indicates the area being painted, the cross indicates the source area. You want to work parallel to the wire, do not move the mouse left and right; instead brush up and down. If you move the mouse to the left and right you will end up painting the wire in a new location.

As you work down the wire you may need to increase or decrease your brush size. You may also need to set new source points along the way.

Another technique for removing objects is using the lasso tool. You could use this technique to remove the concrete fence, garbage can, and car. You can cover all of these objects with snow.

Make sure that the church copy is selected. Click the Lasso tool . Set the Feather to 5 px in the options (this helps to blend the edited area). Draw a selection around a patch of snow. Press Ctrl+J on the keyboard to copy the selection to a new layer. You won’t be able to see the copy of the snow, but it’s there. It’s been duplicated right over the original. If you look at the layers panel you will see that there is a new layer called Layer 1.

Select the Move tool . Hold down your left mouse button on top of the area that you selected earlier and drag the new patch of snow over the fench.

You can repeat this process to cover the fench. You need to be sure to select the church copy layer each time you want to make a new copy of snow. You also need to be sure that you are selected “snow” from the original image and not from a layer copy. You can also duplicate patch of snow, Layer 1, by right clicking the layer and selecting Duplicate Layer. Remember, each time you duplicate something it is placed directly over the original object.

Here are a few additional tutorials for using the Clone Stamp in Photoshop:

Cloning Stamp - The Basics of the clone stamp tool.

Photoshop: Clone Stamp - The basics of the clone stamp tool. There are a few other Photoshop tutorials on Stephanie’s site that you may enjoy.

Clone Stamp - Using the Clone Stamp to copy an image from one document to another.

Creating Full Photo Backgrounds Using the Clone Stamp - This tutorial was written for people who are into scrapbooking, it’s a cool technique for creating greeting cards, post cards, and web images.

Since most of you will be in a postition to have to provide feedback or receive critiques regarding web site designs and usability, I thought that you might find this article by Scott Berkun on How to give and receive criticism helpful.

WhatTheFont? allows you to submit images of fonts that you are trying to identify to a font forum where “font gurus” may be able to help to identify the font.

I have heard a lot of positive things about the Job Connections’ meetings in Danville on Saturdays. You can learn more about this networking group at their web site.

Here are some of the galleries from out photographic adventure on May 17.

Lillian - http://llee.f2o.org/photogallery/
Rebecca - http://rebecca.f2o.org/farmer
Georgia - http://gwill.f2o.org/psslideshow/index.html
Yvonne - http://yvonne.f2o.org/samplegallery/index.htm
Yoko - http://aimawaru.f2o.org/paint/index.htm

If you didn’t send me your gallery address, please add it to the comments below. We want to see your results!

Workshop Prep:

Please create a folder called f2o in your PM directory (drive F:\) using Windows Explorer. Move the photo gallery that you would like to upload into the f2o folder.

For our workshop today I thought I would post a few resources on removing objects from photos:

Removing a person or object from a photo - This technique uses the pen tool, it may be more difficult if you don’t have a handle on how the pen tool works

You may also want to extract an object from the background, here is a tutorial on extracting.

While we’re on the subject of Photoshop, Tutorial Outpost has over 1,600 Photoshop tutorials for you to try. There are also quite a few links to Photoshop Retouching tutorials at PhotoshopRoadmap.

We will also use WS_FTP to FTP our Photoshop galleries to f2o.org.

The Web Design References at Duluth are filled with useful links to sites on CSS, Color, Dreamweaver, Typography, Flash, etc. A site worth bookmarking!

What Every Web Site Owner Should Know About Standards: A Web Standards Primer - an easy to read article on standards.

File Hippo - Freeware that’s free of Spyware!

You may find this article on IE-PNG transparency with PHP helpful for some of your web projects.

Jason Santa Maria has a great article on Maintaining Motivation when you’re a freelancer. I think this is a good article for everyone to read.

MarkTAW.com also has an article on Getting Things Done. I’m starting to see a theme here.

For those of you working on the PHP/MySQL unit, bookmark and print these MySQL and PHP cheatsheets. I love Jack Daniels!

80×15 Brilliant Button Maker creates 80×15 pixel “badge” buttons that are very popular on blogs.

Exalead is a new search engine. Here are a few of the features:

• Spelling suggestions, approximate and phonetic searches, automatic word stemming, etc.
• Visual tools for the search results such as thumbnails and “safe page preview”.
• Ability to sort search results by relevance, source, or even by date.
• Guides to help you quickly refine your search based on keywords, categories, language, document format, and even by country.
• Bookmarks to save the pages you find interesting as you navigate through the search results.
• A smart translation system.
• A breakthrough real-time Web indexing technology.

Ten Mistakes Writers Don’t See (But Can Easily Fix When They Do). One word, excellent!

Images from Iceland - Rob, my significant other, is Icelandic, so I really enjoyed viewing the beautiful imagery at this site. I also like the general layout and gallery presentation.

I have to throw a little CSS in here, otherwise I feel remiss. How about this article About Elastic Layouts.

Last week I showed your browsershots.org for testing your web sites, this week I have one better, BrowserCam.com. From the BrowserCam web site:

“Frequently web pages will look dramatically different depending on the configuration of the visitor’s computer. Internet users utilize a broad range of operating systems, browsers, screen resolutions, and plug-ins. Nothing is more tedious for Web Developers and QA Engineers then testing HTML and CSS for each possible scenario. All too often comprehensive testing is not feasible, and in the best case takes several hours to properly review and test even a small site. But now with BrowserCam cross-platform compatibility checking is fast and easy.”

BrowserCam will create screen captures of your web site in all the popular browsers on Mac, Linux, Windows 2000, Windows 98, and Windows XP platforms. BrowserCam can also create a Photoshop file that includes all of the screen captures.

David told me about an educational special that he read about on the BrowserCam site. They have given us a free account for the next six months. This is an awesome service for testing out sites! I will give you our account username and password in class.

To continue our Photoshop theme I thought it would be fun to create a Web Photo Gallery in Photoshop. For our practice session you can use the photos that we worked with yesterday during the “Heal Thy Self” lecture or I have a folder of cute doggie images you can use at J:\webclass\galleryoriginals.

Here are sample two sample galleries Gallery 1 and Gallery 2 so you will have an idea of what we will create.

Notes: If you want your images to appear in a certain order you must rename them appropriately; images will be displayed in alphabetical order in the gallery. If you plan to display this gallery on f2o.org you should set the file extension to .html under the General Options in the gallery wizard.

1. Open Photoshop
2. Click File > Automate > Web Photo Gallery. The Web Photo Gallery wizard will appear
3. From the Styles drop down list select the gallery style you would like to use
4. The email address is optional
5. Under Source Images click the Browse button and navigate to the folder that contains the images you would like to display in your photo gallery (for this exercise navigate to F:\Photoshop for Digital Photographers\Version CS)
6. Click the Destination button and navigate to drive F:\Photoshop for Digital Photographers. Click the Make New Folder button, type samplegallery as the folder name and click OK
7. Under Options select Banner; complete the site name, photographer, and contact information boxes
8. Under Options select Large Images - here you can make adjustments to the size and quality of the image. You can also add borders to the images and titles and descriptions
9. Under Options select Thumbnails - the settings are similar to the large images; adjust the size and appearance of the thumbnail images
10. Depending on the gallery style that you selected you can also set custom colors in the Options and there are also security settings for the gallery
11. After completing the Web Photo Gallery wizard, click OK and the images will begin processing (resizing)

Once the gallery has completed processing it will display in your default web browser.

For students who do not have an f2o.org hosting account already, today is the day to sign up. Please visit the f2o.org sign up page to sign up for your free account. Be sure to ask me for specific sign up details.

After completing this workshop you should correct the photos that you took last Tuesday for the scavenger hunt and create a gallery with Photoshop. On Friday I will conduct a workshop on uploading the galleries to f2o.org and you can share your galleries with your classmates.

You can edit your galleries in Dreamweaver or your favorites text editor if you would like to make changes to the appearance of your gallery.

Open the index.html file to investigate the HTML code in Dreamweaver. Switch to split view and examine the code that Photoshop generated. Photoshop creates a frameset in the index.html file. The index.html frameset uses files located in the pages folder and a file called ThurmbnailFrame.htm. The actual thumbnail images are located in the folder called thumbnails and the larger images are in the folder called images. If you would like to inspect the gallery code, click this link and then click View > Source in Internet Explorer (you can also use Firefox). To view the source code for individual frames, right click the frame and select View Source from the menu.

While inspecting the code I found that the gallery was linked to an external css file called galleryStyle.css in the images folder. You can open the galleryStyle.css file and adjusted the css styles to your liking in Dreamweaver’s CSS Styles Panel or in your text editor.

In order to add file names, descriptions, credits, etc. to the gallery pages you can open the individual files located in the pages folder in Dreamweaver. (I added this item to my task list to do later).

Here is a challenge for students who have completed Flash. Try to Build A Video Jigsaw Puzzle in Flash.

The Weekly Standards features corporate web sites that use standards based design.

Modular stylesheets at Content with Style is an article about grouping related styles into separate stylesheets. A CSS Framework illustrates the basic steps to creating a reusable CSS framework that can be used on different project.

I know that some of you really enjoy Photoshop, so I thought you might like to enter some of the Photoshop contests at Worth1000.com. In addition to the contests, the site also has a lot of fun tutorials.

Since many of you hope to become independently employed I thought you would enjoy the tips in Andy Budd’s Top Tips For Freelancers.

Web Design Practices is a site devoted to helping designers understand what design practices are currently in use on the Web. You may also find the author’s blog, IAThink, very insteresting.

How about an HTML Cheatsheet with descriptions of what each tag does.

I mentioned a few of programs today during our workshop.

1. Gimp is a free image editor
2. Irfanview is a free image viewer that can be used to convert and optimize images
3. The Adobe Studio Exchange has all kinds of free Photoshop actions, filters, brushes, and other goodies.
4. Photofiltre is also a free image editor

I personally use BreezeBrowser to view images from my digital camera and to convert RAW images. I’ve used this program for years it’s fast and easy to use.

Have I mentioned NoNags lately? There are all kinds of great freeware applications listed at this site including graphic editors and viewers.

Simple Bits has made a Call for Typography Resources. There are a lot of resources listed in the comments.