Exercise in Photo Editing

I thought some people might be interested in seeing some examples of photo editing. As I mainly work in web design, I have an easier time with photo editing because web images are relatively low resolution and don’t require as much painstaking attention to detail.

Below are two photos of a condo development and some comments about the process.

Here is the original photo. I was asked to remove the tree on the right side, and, of course, straighten the photo.

Original photo

I used the Crop tool in Photoshop to crop the photo, rotating the cropped area to straighten the building. I also used the Levels command to lighten the picture slightly.

Straightened and cropped

I created a new layer and then worked on cloning the sky to cover up the tree (the cloned areas are tinted green). The clone tool has an option where you can “select all layers” — this allows you to clone from below layers onto a new layer. By cloning onto a new layer, you don’t “mess up” the original photo and can make edits more easily later. This is one example of nondestructive editing!

I then used the marquee tool to select a part of the building (the next “section” over) that didn’t have a tree over it and pasted it into a new layer (tinted purple). I created a layer mask for that layer and carefully blended out the edges.

Edited photo

Here is a closeup of the photo with tree:


And a closeup of the edited sky is below. The landscape is a bit blurred together, but when shrunk down to web resolution, it doesn’t really matter.

Closeup edited

And a closeup of the edited building as well:

Closeup edited

Now, the final picture at approximately the final dimensions:

Final photo

The next photo was a bit more challenging. Here’s the original:

Original photo

Unfortunately, the marina buildings (with the red frame and yellow stairs) were blocking the specific units that needed to be shown in the image. I was asked to do some “Photoshop magic” to show those units as well as get rid of the light posts — the one on the left of the building, and the one sticking up right in the middle.

I worked a little differently on this photo. Instead of working first with a high resolution photo, I worked directly with the smaller web-resolution photo size. I wouldn’t recommend this, but I was basically short on time and needed to work faster! (So, no close-ups for this picture.)

Cropped photo

First, I copied the middle two floors on the left side and pasted them onto a new layer (purple). Moving these down “one floor,” I was able to get the bottom unit to show up. I used a layer mask to fade out the edges, then used the Warp Transform command to add the tiny bit of perspective needed for the bottom floor to look “right.”

Creating a new blank layer, I used the clone tool to remove the light posts. You can see the edited results in the pink-tinted layer.

Unfortunately I had no idea what the bottom part of the building looked like just below the windows and balconies. I copied the middle bottom section (where the formerly edited light post used to be) with the bottom wall and balcony shadow and pasted it twice to continue the wall to the left (yellow). Finally, I removed the marina buildings by grabbing a piece of the retaining wall into its own layer, then stretching it and masking it (green).

Photo editing

And here’s the final edited photo. It’s a pretty rough job, but again, at web resolution, it doesn’t matter too much and gives the viewer a decent idea of what the building looks like!

Final photo

Shameless plug: I have a few tidbits about photo editing in my book, The Photoshop Anthology, which is written specifically for web developers/designers who want to learn more about Photoshop. Through the different solutions presented in the book, I talk about the clone tool, layer masks, and the other tools and techniques mentioned here. If you found this article interesting and would like to buy the book, please consider purchasing it through my affiliate link above!


7 thoughts on “Exercise in Photo Editing

  1. Great article. WoW. You explained everything in a way that everyoen can profit from it: from the Frontpageuser-that-has-just-bough-photshop to the i-will-improve-the-skills user (like me).
    p.s. Great Blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s