According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS.

Thankfully, Safari on iPhone OS is a really great browser. Just like Safari 4 for the desktop, it has great CSS3 and HTML5 support. It also has some slick interface elements right out of the box, which sometimes vary between the iPhone and iPad. Lastly, because the iPhone OS has been around for quite some time now, a lot of resources are available.

I know that most discussion about the iPhone OS platform centers on native applications. But you can still create powerful, native-looking applications using HTML, JavaScript and CSS. This article focuses on three phases of building and optimizing your website: design, coding and testing.

Before we get into the three phases, let’s look at some of the advantages and disadvantages of building a Web app rather than a native app.

Advantages of building a Web app instead of a native app:

1. No Apple approval process or red tape, which is especially important given the terms of service dispute going on right now.
2. Optimizing your Web app for other popular platforms like Android and Blackberry with the same code is much easier.
3. You don’t have to learn Objective-C.
4. If you’re charging users, you don’t have to share revenue with Apple.
5. You get 100% control over the means of payment, promotion and distribution to users… which could also be a negative, depending on how you look at it.

Disadvantages of building a Web app instead of a native app:

1. No presence in the App Store.
2. Installing the app on a device is a little trickier.
3. No access to some of the features that are native to the iPhone OS, such as push notification and GUI controls.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Design

Designing a Web app for this platform is much like designing a native app, so you’ll have access to some really great tools. Whether your wireframing tool of choice is pencil and paper or desktop software, you’re covered.

Inspiration

Not many people know that Apple has a “Web apps” section on its website, which is dedicated to showcasing optimized websites.

Featured Web app on the Apple website

There are also some galleries elsewhere that showcase the finest in mobile Web design:

• Apple Web Apps Listing
• Mobile Awesomeness Design Gallery
• CSS iPhone Design Gallery
• Well Placed Pixels
• Apple App Store (Even though these are native apps, you can find great visual inspiration here.)

Paper

Paper prototyping has long been my tool of choice for wireframing new ideas or websites. What I really like about the tools below is that they provide perspective on the size and dimensional constraints that you’re dealing with. To successfully optimize a Web app for the iPhone OS, you have to cut things out. I suggest keeping the design minimal by wireframing with a sharpie and one of the tools listed below.

Notepod is great for sketching out rough ideas for the iPhone and iPad.

• Notepod: iPad and iPhone sketchbooks
• App Sketchbook
• PixelPads
• UI Stencils sticky pads
• Apress iPhone Application Sketch Book
• Printable iPhone Wireframe Template (free)

Digital

Once you know exactly how things will lay out in your design, we can move to the desktop and get specific. I really like wireframing with OmniGraffle, but sometimes diving straight into Photoshop makes sense. Either way, these tools are a huge help in making it happen.

iPad GUI preview from Teehan + Lax.

• iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)
• Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox
• PSD Vector Kit (Photoshop), from Smashing Magazine
• iPad and iPhone stencils; see more at Graffletopia (OmniGraffle)
• iPhone and iPad Development GUI Kits, Stencils and Icons

Hungry for more? This article has a good rundown of additional design tools.

Coding

When you start coding for Safari on the iPhone OS, understanding how the browser works is important. Also, there are subtle differences in the iPhone and iPad’s browsers, such as how form-select boxes work. Most importantly, Safari has great CSS3 and HTML5 support, so you can use modern code without having to worry about cross-browser compatibility.

Education

Apple actually does a really good job of documenting Safari for the iPhone OS. The only shortcomings in my opinion are a lack of help with browser detection and window orientation. Read each of the articles below for everything you need to know about coding for this browser.

iPhone Human Interface Guidelines for Web Applications
This is a good overall summary of how Safari for the iPhone OS works. It’s certainly worth scanning through, because it has some good advice, although no specific coding examples.

iPad Human Interface Guidelines
This document does a good job of distinguishing iPhone elements and iPad elements. This is also worth scanning through, because it has some great advice on designing for the iPad.

Safari Web Content Guide
This document gets specific about the viewport, webclip icons, unique meta tags and event handling, among many other topics. Code examples are provided. I recommend reading it cover to cover before getting started.

Preparing Your Web Content for the iPad
This document provides tips on testing your website on the iPad, but its discussion on browser detection isn’t as detailed as I would like.

Browser Detection
David Walsh provides good examples of proper browser detection for the iPad and for the iPhone on his blog. Options for PHP and Javascript are included.

Detecting iPhone Window Orientation
This iPhone development tutorial from Nettuts provides a good example of how to vary style sheets according to the iPhone’s orientation.

Detecting iPad Window Orientation
Detecting iPad’s window orientation is much easier. Here’s what the code looks like (no JavaScript required):

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

jQTouch Mobile Framework

While the iPhone has a few mobile development frameworks, jQTouch is far and away the best. jQTouch gives you all of the tools to make your mobile Web app look and feel like a native one. Visit the website, and go to the demo website from your iPhone to get a feel for it.

My only complaint when building my first website with jQTouch was a lack of documentation and tutorials. I had to figure it out by playing with the demo website’s code. Here are some jQTouch articles that proved helpful in coding my first website:

• jQTouch Wiki on Google Code
• Building iPhone Apps with HTML, CSS and JavaScript, Chapter 4: Animation
• PDF slides about getting started with jQTouch, by Philipp Bosch

Testing

A crucial and somewhat tricky part of building a website or Web app for the iPhone OS is testing. It’s a little more complicated than testing in a web browser, but familiarizing yourself with a couple of tools should make the process simple.

Liveview

Liveview is a really clever testing tool for when your app is in the design or initial coding phase. It allows you to broadcast an image from your desktop onto your phone so that you can see what it looks like. This is useful for getting text size and the visual specifics just right, because sometimes visualizing from Photoshop is hard.

Using the iPhone Simulator

In my opinion, no good iPhone or iPad emulators are available. The ones that are available are a waste of time. Much better is to download the latest version of the SDK and use Apple’s official iPhone OS simulator, which of course supports the iPad as well.

Setting up the SDK and a local testing environment takes a few minutes but is well worth the effort, rather than depending on unofficial and often inaccurate emulators. I’ve written a step-by-step tutorial about setting up a local testing environment that’s worth a read. One great thing about local testing is that it’s faster and does not require an Internet connection. I highly recommend going this route until you are ready to launch.

PhoneGap: Best Of Both Worlds?

PhoneGap is a game-changer for Web developers. If you would rather create your app in HTML, CSS and JavaScript but want it to run natively and have it be available in the App Store, then PhoneGap is the solution. It’s an open-source development tool that not only compiles your code for native use on the iPhone OS but also works for Android, Palm, Symbian, Windows Mobile and Blackberry devices.

PhoneGap also steers clear of the recently controversial 3.3.1 clause of Apple’s terms of service. In other words, apps compiled with PhoneGap will still be approved. Check out the list of apps that are built with PhoneGap to learn more.

Feeling Overwhelmed?

If you are, then some good hosted services will make it easier to optimize your website for multiple platforms without having to start from scratch. There are various levels of flexibility available, but all the services use a WYSIWYG-like editor to help you create mobile websites on the fly. Depending on your Web app and client, one of the following may be a good fit:

Mobify is a great alternative if you don’t care to build from scratch.

• Mobify (which powers Smashing Magazine’s mobile website)
• Wapple
• Mofuse
• Mobi10

Conclusion

It’s a great day to be a Web developer, because non-desktop platforms like the iPhone OS open up greater possibilities for us to express our creativity and entrepreneurial savvy, while allowing us to adhere to modern Web standards. All of the tools you need to create great a Web experience on the platform that’s currently dominating the mobile space are out there. It’s up to you to make the most of them!

(al)

© Nick Francis for Smashing Magazine, 2010. | Permalink | 70 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ipad, iphone, mobile

  

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Where do I start?

One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.

Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.

Example #1: CSS3 Transitions

A safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.

Start with your link CSS, including the hover state:

a { color: #e83119; }
a:hover { color:#0a99ae; }

Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.

a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}

You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:

a { -webkit-transition: color .4s ease-out; }

View the live example here

The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.

To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:

border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }

To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:

border-nav a { -webkit-transition: border .3s ease-out; }

View the live example here

Examples

This is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:

Team Excellence
The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.

Ackernaut
Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.

SimpleBits
The SimpleBits main navigation transitions over .2 seconds with linear timing.

DesignSwap
On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.

Jack Osborne
Jack Osborne transitions all of the blue links as well as the post title link on his home page.

Eric E. Anderson
Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.

Example #2: Background Clip

When connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:

<div class="bg-clip">
<h3>kablamo!</h3>
</div>

Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.

.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View the live example here

This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);

Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.

View the live example here

Examples

This is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:

Trent Walton
An experiment of my own, combining bg-clip and @font-face to recreate a recent design.

Neography
An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.

Everyday Works
One of the earliest innovative implementations of CSS text rotation I’ve seen.

Panic Blog
The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.

Sam Brown
Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.

Example #3: CSS Transforms, Box Shadow and RGBa

What used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.

Here’s the HTML:

<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>

Let’s set up the CSS for the RGBA Shadow:

.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}

Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.

RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.

Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:

.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}

.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}

.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}

.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}

View the live example here

Examples

Here are a few additional sites with these properties implemented right now:

Butter Label
This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.

Hope 140
Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.

For A Beautiful Web
For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.

Simon Collison
Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.

Example #4: CSS3 Animations

If you really want to push the envelope and truly experiment with the latest CSS3 properties, you’ve got to try creating a CSS3 keyframe animation. As a simple introduction, let’s animate a circle .png image to track the outer edges of a rectangle. To begin, let’s wrap circle.png in a div class:

<div class="circle_motion">
<img src="/img/circle.png" alt="circle"/>
</div>

The first step in the CSS will be to set the properties for .circle_motion, including giving it an animation name:

.circle_motion {
-webkit-animation-name: track;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
}

Now, all that remains is to declare properties for each percentage-based keyframe. To keep things simple here, I’ve just broken down the 8 second animation into 4 quarters:

@-webkit-keyframes track {
0% {
margin-top:0px;
}
25% {
margin-top:150px;
}
50% {
margin-top:150px;
margin-left: 300px;
}
75% {
margin-top:0px;
margin-left: 300px;
}
100% {
margin-left:0px;
}
}

View the live example here

Examples

A few examples of CSS3 animations online now:

Hope 140
Hope 140 subtly animates their yellow “Retweet to Donate $10” button’s box shadow.

Hardboiled Web Design
Andy Clarke puts iteration count, timing function, duration and delay properties to good use when animating a detective shadow across the background of Hardboiled Web Design.

Optimum7
Anthony Calzadilla has recreated the Spider Man opening credits using CSS3 with JQuery and HTML5. You can also learn more about the process in his article “Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!”.

The Many Faces Of…
The Many Faces Of… animates the background position of a div to create an effect where characters creep up from the bottom of the page.

Trent Walton
I recently wrote a post about CSS3 usage, and animated a blue to green to yellow background image for the masthead.

OK, Dots connected! Now what?

Yes, all of this CSS3 stuff is insanely exciting. If you’re like me, you’ll want to start finding places to use it in the real world immediately. With each new experimental usage come even more concerns about implementation. Here are a few of my ever-evolving opinions about implementing these properties online for your consideration.

• CSS3 enhancements will never take the place of solid user-experience design.
• Motion and animation demands attention. Think about a friend waving to get your attention from across a crowded room or a flashing traffic light. Heavy-handed or even moderate uses of animation can significantly degrade user experience. If you are planning on implementing these techniques on a site with any sort of A to B conversion goals, be sure to consider the psychology of motion.
• Don’t make people wait on animations. Especially when it comes to hover links, be sure there is an immediate state-change cue.
• Many of these effects can be used in a bonus or easter-egg type of application. Find places to go the extra mile.

This is a group effort. Don’t be afraid of failure, enlist the help of other developers, join the online discussions, and above all, have fun!

Further Reading

• Using CSS3 Transitions, Transforms and Animation
  A very extensive and detailed overview of CSS3 techniques for transitions, transforms and animations, with numerous examples.
• Sexy Interactions with CSS Transitions
  many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world. This article explains how to create nice CSS transitions with CSS3.
• Examples of CSS3 in the Wild
  Showcase of sites using CSS3 properties.
• CSS3 Transitions – Are We There Yet?
• Cross-Browser Animated CSS Transforms — Even in IE.

Related Articles

You may be interested in the following related posts:

• CSS3 Solutions for Internet Explorer
• The Future Of CSS Typography
• Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation

© Trent Walton for Smashing Magazine, 2010. | Permalink | 71 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3, HTML

  

Photoshop’s wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

The Clone Stamp Tool

The Clone Stamp tool is the oldest and most widely known of the cloning tools. The basic concept is that you duplicate certain portions of an image using a source, destination and brush.

Use the “Option” key (”Alt”) to set the source.

To clone out the name on the tombstone above, you would select a source that shares the texture of the area you want to replace. In this case, the area around the words provides an ample source of stone texture from which to clone.

To begin, simply click on the preferred source area while holding down the “Option” key (”Alt” on a PC). Then, with no keys held down, begin painting over the area you want to replace. The image area from the source will be transferred to the destination.

To be able to use this tool effectively, let’s look at the relevant settings.

Basic Settings: Brush

Below, you’ll find the default settings when the clone stamp is selected.

The clone stamp’s basic settings.

The first setting you’ll want to familiarize yourself with is for the brush. Photoshop does not restrict cloning to a basic default brush. Instead, it allows you to use any brush you want, allowing you to create an unlimited number of effects. In the example above, and in most cases in fact, a small to medium-sized round soft brush gives the best result.

A hard brush creates noticeable seams.

As you can see, a hard brush often creates visible edges along the path of the clone. The transition is much smoother on the left side, where a soft brush was used. Both sides suffer from noticeable replication, but this was intentional to exaggerate the cloned area. We’ll discuss how to avoid this later.

As stated, while a soft round brush is recommended for basic cloning, a number of interesting effects can be created using alternate brushes. For instance, below I’ve used a scatter brush shaped like a leaf to add some visual interest to the photo.

Use a scatter brush to create interesting particle effects.

Experiment with the opacity, blending mode and brush flow for an even wider variety of results. For more information on using these features, check out the article “Brushing Up on Photoshop’s Brush Tool.”

Basic Settings: Sample

Under the “Sample” menu are three options: Current Layer, Current & Below and All Layers. These options affect the area you are sourcing. Here’s a visual illustration of how each mode works:

The area cloned depends on the selected layer and sample mode.

As you can see, with Current Layer selected, the clone stamp ignores pixel data contained in any other layer. Conversely, All Layers ignores all layer distinction and clones any visible pixels in the document (invisible layers will be ignored). Finally, Current & Below samples pixels from the selected layer and any visible layers behind it.

Basic Settings: Adjustment Layers

The final basic setting (the circle with a diagonal line through it) lets you decide whether the clone stamp tool should sample adjustment layers when cloning. Adjustment layers, such as Hue/Saturation and Levels, are meant to be a non-destructive way to change the appearance of layers. So, you can make drastic changes to a layer or group of layers without destroying the original pixels.

Because of this, turning on Ignore Adjustment Layers When Cloning is almost always a good idea. This allows you to clone the original image, which can then be affected by an ever-changeable adjustment layer. If you do not choose to ignore the adjustment layer, the adjustment becomes permanent in the cloned areas.

In the layer set-up below, turning on Sample All Layers would by default clone pixels from both the background layer and the adjustment layer in the foreground. Turning on Ignore Adjustment Layers prevents this.

You can choose to ignore adjustment layers when cloning.

The Spot Healing Brush

As you can see below, the Spot Healing Brush tool is located under the Eyedropper tool and above the Brush tool, and it can be accessed quickly by hitting J on the keyboard.

Type J to bring up the Spot Healing Brush.

The Spot Healing Brush is by far the simplest cloning tool in Photoshop. With little to no experience, you can repair small areas of an image. The secret to using the tool is in the name: Spot Healing. The tool is intended not for large areas of replacement, but rather to remove little unwanted spots, such as a scratch on an old photograph or a mole on a person’s face.

To use the tool, simply hover over the area you want to replace and click once. Photoshop does all the work by examining the pixel data around the spot and seamlessly integrating the data into the destination.

The Spot Healing Brush is perfect for repairing old photographs.

As you can see above, the tool does a remarkable job of not leaving behind any noticeable artifacts or repeating patterns. The trick is to go slowly and work on very small portions of the image. Select a spot to fix, and use a brush that’s only slightly bigger than the selected imperfection. The larger the brush, the more likely you are to clone unwanted portions of the surrounding area, and the more noticeable the repetition of pixels will be.

Use a brush slightly bigger than the target spot.

The Healing Brush

The Healing Brush tool, located under the Spot Healing Brush tool, is very similar to the Clone Stamp tool. To begin, Option + click (Alt + click on a PC) to select your source, and then carefully paint over the destination to transfer the pixels. The Healing Brush performs this operation with more built-in intelligence than the Clone Stamp.

As with the Spot Healing Brush, the Healing Brush attempts to automatically blend in the cloned pixels with the environment around it.

The Healing Brush tool automatically blends the source with the destination.

As you can see, using the Clone Stamp to clone the puppy’s eye results in a straight copy of the pixels, while the Healing Brush does a much better job of blending with the background.

This built-in intelligence proves extremely helpful when cloning a subject with diverse colors, textures and lighting conditions. Using the Clone Stamp in these situations can leave you with a lot of noticeably patchy spots that really stand out from the surrounding area.

The Healing Brush Tool makes it easy to clone visually complicated areas.

The photograph above is a good example of a subject with a fairly complicated surface. Using the Clone Stamp tool would have made it quite difficult to paint over the cracked areas while retaining the integrity of the stained stone. Much of the discoloration would have been sacrificed as you sourced smoother areas to erase the cracks. However, the Healing Brush was able to effectively replace the cracked areas with smoother areas, while sampling from the surrounding area to replicate the stains.

The Patch Tool

The final healing tool we’ll examine is the Patch tool, which can be found under the Healing Brush tool, as seen below.

Tip: hit Shift + J to cycle between the tools in the fly-out menu.

The cloning tools we’ve examined so far are best when used meticulously on small portions of an image. By contrast, the Patch tool is the best way to clone large, relatively uniform areas. As with the other healing tools, the Patch tool not only performs a straight clone but attempts to blend in the edge of the selected area with the target environment.

To use the Patch tool, either make a selection with any of the selection tools, or simply select an area with the Patch tool’s built-in lasso. There are two modes to choose from for the behavior of the patch: “Source” and “Destination” (found in the menu bar above the document area).

Source Mode

With the source mode selected, first select the area of the image you want to replace, and then drag that selection to the area you want to source. For instance, to eliminate the golf ball in the image below, you would first select the area around the golf ball, and then drag that selection around to find the best source.

In source mode, first select the area you want to replace.

As you drag the selection around to find a suitable source, watch the destination (i.e. your originally selected area) for a preview of what the source pixels will look like in that area. Keep in mind that this preview is a straight clone without any blending (the final image will look much better). Release the selection to see the actual result.

The Patch tool’s result.

As you can see, it does a pretty impressive job of blending the source and destination pixels all on its own. But going over areas that need improvement with the Healing Brush is good practice.

Destination Mode

With “Destination” mode selected, the area you select first will be the area that is replicated elsewhere. For instance, if we start with the same selection as before, dragging the selection this time gives us a preview of copying the ball to a new location.

Patch tool destination mode.

After you release the selection, the golf ball is copied to a new area of the image and blended with the surrounding pixels.

Result of “Destination” mode.

The Clone Source Palette

The Clone Source palette (found under Window → Clone Source) is an invaluable resource for professional-quality cloning. This tool gives you much more control over the results and functionality of the Clone Stamp and Healing Brush.

The Clone Source palette contains three primary sections: cloning source, offset adjustment and overlay options.

The Clone Source palette.

Cloning Sources

In the first section in the Clone Source palette, you can define multiple areas of an image as a source from which to clone and/or heal.

Defining multiple sources.

The image above illustrates an example of when you might want to define multiple sources. To save a source, click on one of the five source buttons, and then Option + click (Alt + click) with either the Clone Stamp or Healing Brush. That location will now be saved to that button. Now, select the next button in line, and do the same in another part of the image. Once your sources are loaded, you can quickly shift between them simply by clicking the related button.

Notice that the file name appears just under the clone source buttons. This is because you can actually select a clone source outside of the image that you’re working on. Simply open a different file and set the clone source. Then, when you go back to the primary file to paint with the Clone Stamp or Healing Brush, the pixels from the other image will function as the source of the clone.

Offset Options

The second section of commands in the Clone Source palette really increase the variety of cloned results available to you. You can set exact coordinates for the source, change the size of the cloned result relative to the original source, tweak the rotation of the result and set a precise offset (again, relative to the original source).

Tweaking the cloned results.

You can see these transformation effects in action in the example above. The two bails of hay are actually one and the same, but they look considerably different because of the offset options. First, I set both the width and height to 90%, so that the cloned bail would appear slightly smaller than the original. Then I changed the width to -90% to flip the clone horizontally (you could change the height to a negative number to flip the image vertically). Finally, I set the rotation to 10° to give the illusion of a small hill.

Overlay Options

The overlay options are among the most helpful features in the Clone Source palette. Years ago, cloning involved a lot of guess work because it was difficult to tell exactly what the selected sample would look like without actually applying it. The guesswork has been eliminated with the “Show Overlay” command. When “Show Overlay” is selected in conjunction with the “Clipped” option, your brush is shown with a preview of the clone source inside. This is extremely helpful when attempting to clone inorganic areas with straight edges, such as a brick wall.

An overlay of the source is displayed within the brush.

Note that if you choose to turn on the overlay but turn off “Clipped,” then your entire clone source layer will be shown surrounding the brush.

An overlay of the source is displayed within the brush.

Working this way is actually quite difficult because the source significantly blocks your view of the destination. But if you prefer it, try reducing the opacity of the overlay so that you can see the image below.

Vanishing Point

Vanishing Point takes cloning to an entirely new dimension, literally. The tool makes it possible to set up primitive planes across your artwork, which a clone then follows to simulate a three-dimensional space. Vanishing Point has a ton of features and potential applications, and it really merits its own entire article, so this will be just a brief introduction.

When you open up the Vanishing Point dialog (found under the “Filter” menu item), you’ll see a large preview of your image, along with a small set of tools on the left side.

The Vanishing Point dialog.

Grab the tool sitting second from the top to set up your initial plane. With this tool, click once on each of the four corners, outlining the desired plane. Once you’ve created an initial plane, you can Command + click (Control + click on a PC) to extend the plane perpendicularly. Some images, though, like this old barn, won’t have perfect angles. In this case, you’ll have to create a second plane, entirely distinct from the original.

Setting up planes.

Once you’re satisfied with the planes, grab the Clone Stamp (fourth from the top), and Option + click the desired source (in our case, the barn door). Then clone the door onto the front-facing wall using the same method you would use with the normal Clone Stamp tool. Turn “Healing” on in the drop-down menu above the image preview to ensure that the source is properly blended into the destination.

Vanishing Point result.

As you can see, Photoshop interpreted the planes fairly well. Some fine-tuning and clean-up are definitely necessary if we want a believable image; but overall, the result is extremely impressive, given the lack of work required.

5 Quick Tips For Better Cloning

Now that we’ve examined each tool in depth, let’s close by recalling a few things to keep in mind if we want to clone with professional results.

Take Your Time

As you undertake a cloning project, the quality of the result is directly proportional to the amount of time you put into it. Cloning photographic details can be incredibly tedious work. The world has become well acquainted with Photoshop magic, so never assume that no one will notice your blunders.

Duplicate the Active Layer

The very first step to take when cloning parts of an image is to duplicate the layer you’ll be working on (or to just work on a new transparent layer). Realizing that you made a mistake so long ago that your “Undos” don’t go back far enough to fix it is beyond frustrating. Keeping the original image on a hidden layer gives you the flexibility to revert any part of an image to its original state.

Be Selective With Your Tools

Each cloning tool has its strengths and weaknesses, as outlined above. Never arbitrarily grab a tool and stick with it for the duration of a project. Consider which tool is best suited to the particular area of the image you’re working on. On large projects, no single tool creates believable results on its own. Use two or more tools in synergy to achieve a realistic result.

Watch for Obvious Duplication

Sloppy cloning results in noticeable patterns.

If you’re not careful, duplicated pixels can become painfully obvious. This is especially true of areas that should look fairly organic, like the grass above. Instead of appearing natural, an obvious pattern emerges when you use the same section of an image over and over. To avoid this, make heavy use of the Clone Source palette. Use multiple sources; and change the size, rotation and orientation of the areas you’re cloning to give the illusion of an unmanipulated image.

Avoid Disasters

When retouching significant parts of an image, overlooking certain areas becomes all too easy.

Where did her leg go!?

If you’re not careful, you could eliminate enough vital body parts to make the image humorous. Your goal is to prevent your work from showing up on Photoshop Disasters, which is where you’ll find the image above.

Conclusion

Cloning in Photoshop is a difficult task that requires significant time, studious attention to detail and an in-depth knowledge of several tools and commands. To improve the quality of your results, invest some time learning Photoshop’s entire cloning arsenal. Experiment with all of the options for each tool to get a better feel for where you can excel.

Additional Resources

• Vanishing Point Video Turorial
• How to Use the Clone Stamp Tool in Photoshop
• Cloning and Healing: Photoshop Tutorial
• How to Mirror Your Clone Stamp (video tutorial)
• Retouching and Healing Tools, Tutorial9

(al)

© Joshua Johnson for Smashing Magazine, 2010. | Permalink | 73 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: photoshop, psd