Band on beaches of Negril, Jamaica (April 2005)

Bright sun can counter a great beach shot. It’s easy to fix the typical problems with beach photographs in bright sun. Take look at the problems with the original photo that I would like to fix:

1. Sky is a bit washed out
2. Color is not popping
3. Some of the faces are shadowed, especially the guy with the cap
4. The reflective sand washes out details
5. There’s a bit of shake to the focus
6. Needs serious cropping
7. Could be straightened
8. A few background distractions that are not relevant to the photo

There are many different ways to approach it, but here is a fast way to get you to a decent rendition fairly quickly. Here is the original photo. 

 

For those of you who are super fast and want to run through the steps to get to the final version, here are all the Windows shortcuts used in order:

• Crop
  • Hit C
  • Adjust photo frame with mouse
  • Hit ENTER to crop photo
  • Hit CTRL 0 (zero) to fill the image into the workspace
• Adjust highlights/shadows with Levels
  • ALT L, J, L, ENTER –this will add a new level. Press ENTER to use the defaults for now.
  • Use mouse to slide histogram black/white towards center to remove empty space. Always check the image as you go.
• Brighten sky
  • CTRL SHIFT N - Add a new blank layer. Call it “Brighten sky”
  • D – resets colors. Use W to swap to ensure black is the foreground
  • G – selects Gradient tool, Drag a line perpendicular with the horizon line
  • Right click image to choose Foreground to Transparent
  • Change blend mode to overlay
  • ALT L, M, R - Add a layer maskrengthen overall colors
  • B – set to brush
  • Use mouse to paint – brackets [] to enlarge and reduce the brush size. SHIFT to soften the edges
• Remove distracting clutter
  • Select the background and press CTRL+J to duplicate it.
  • S - Choose the clone stamp tool.
  • Press ALT at the left side of the swimmer or any other unwanted objects, removing them with clicks.
• Sharpen image
  • Alt T, S, U - this will apply the Unsharp Mask
  • Alt A. Type 90 to Choose 90% as the Amount. Radius is ok at 2.
• Spot adjust dark and light spots
  • Create a new layer – name it Dodge and Burn
  • Choose Overlay as the mode, set opacity to 10% and check the box to fill with overlay of 50% gray.
  • D – for default colors of black/white. X to swap
  • B – for brush. Use the foreground as black to darken the sand. Use the foreground as white to lighten any shadows, such as the one cast by the cap.

Let’s walk through these steps with photos. You can follow along by clicking on the original photo and then saving it to your hard drive.

Obviously the easiest place to start is by cropping the photo. After you hit C, you will get the crop indicator that you can adjust to a size that gets rid of the ugly date/time as well as the foreground distractions.

Add a new layer for Levels. You can do that from the lower right hand icon menu, or with the keyboard shortcuts mentioned above. To change the level name you can just double click on the name.

This is actually not a bad level  histogram – the first thing I do is look to the far right and far left for any empty “hills”.  If I see them, I drag over the black or white arrows to remove them. In this case, you can see that there is a gap on the far left of the histogram, so I just slide the black arrow a bit over to the left, to look like such. It’s always a good idea to play with the center grey arrow to help adjust midtones. When I am done, this is what my histogram looks like:

Next let’s play with the sky and make it pop!  Create a new blank layer (CTRL SHIFT N). Give it a name, e.g. brighten sky. Click D to get the default foreground color as Black. Hit G to get the Gradient tool activated and then drag a line from the top of the sky into the horizon. Ensure it’s perpendicular to the horizon as such:

Now you’ll end up with what looks like an ugly dark fog settling into the band.  Now right click on the image to choose Foreground to Transparent (The second box from left in top row).

In layers windows, change the blend mode to overlay:

Immediately you will see the sky darken. The same happens for the band’s face. We will need to delete the unwanted darkening with a mask. Add a layer mask: Select the Brush tool (Press B). Now you will erase the dark fog from the unwanted parts of your photo. Ensure that the foreground is set to black.  And “paint” with the brush, erasing the darkness.

When you are satisfied, we will move onto the next step, which is removing the distracting background clutter, such as the boat and the swimmer:

Select the background and press CTRL+J to duplicate the background into a layer that we can edit. Double click on the name and call it “Remove clutter”. Select the clone brush, using ALT to select a starting point a little left of the swimmer, and then “erase” him, by clicking over his body until he is gone. Do the same for the boat.

We can use this same image to sharpen the features of our singers. Select Filter, Sharpen, Unsharp Mask. Use 90% as the amount and 2.0 as the radius. Feel free to play around with these numbers, examining the preview for impact:

Lastly we are going to create a Dodge & Burn layer to spot adjust dark and light areas.  Create a new layer, name it Dodge & Burn. To create a new layer, click on the layer icon along while pressing the ALT key, this will pop up the dialog box:

Choose Overlay as the mode, set opacity to 10% and check the box to fill with overlay of 50% gray.  Click D to set the default foreground colors of black and white. Use the foreground as black to darken the sand. Use the foreground as white to lighten any shadows, such as the one cast by the cap. Click B to activate the brush and make your changes.

That’s it, you have made considerable progress since the flat, damp state before these changes.

At the Web Camp event in Dubai, Ronald Widha presented a session on creating cutting edge websites for phones, slates.  It was a well designed and thought out topic, and very inspirational from a designer viewpoint.  You can watch the video and also read more about high adoption of the Windows Phone 7 platform.

Creating Cutting Edge Website for Phone, Slate and Beyond from Ronald Widha on Vimeo.

A summary of the session “The process of creating a website now always start with a question on figuring out the devices you want to support for; PCs, mobile phones and/or slate devices. Each of these devices may have different screen sizes, capabilities etc. For simplicity, designer/developer often chooses to build dedicated websites for each one of the platform which often leads to maintenance nightmare.
This talk showed how to design and develop a dynamic website for the various platforms using Responsive Design techniques. We're starting up the process with WebMatrix and transitioning to Visual Studio 2010 as we progress. We touched on Html5, CSS3, Razor, Entity Framework 4 and C#.”

Please navigate to the full post including slides.

Download The Connection 2010 presentation I delivered as Part I, II, and III with embedded low stream video. Or you can download the entire file without video.

November 26, 2010. El Gouna. Egypt.  Over two hundred of the best minds in media, strategy, and design agencies from 11 countries descended upon southern Egypt for The Connection 2010 conference, sponsored by MSN Arabia & ConnectAds.  Notable presentations included Facebook’s Mark Cowan,  Head of Emerging Markets, who covered the advantages of using Facebook as a platform, as well as Adham El Gazzar, from ARPU+, who covered the future of mobility.

mobility

Adham cites amazing mobile web app growth. In 2009, 7 billion apps were downloaded. In 2012, this number is forecasted to jump to 50 billion.  Mobile apps are a hot growth sector and the market is hardly saturated. Everybody and their mother creates and consumes mobile apps and the major telcos are clambering over themselves to create a marketplace to cash in.  Who will rule this new market?

facebook

I spoke to Mark offline and told him of my first realization that Facebook could indeed be a platform. Several years ago, I had returned home a dinner out in Manhattan. My demo machine had been on all day and suddenly it started chiming with an instant message alert. This surprised me as I didn’t have any IM software on this machine. I realized that I had opened up a Facebook page hours ago, and because I “trusted” Facebook, I became visible as “online” to allow my friends to interact with me. 

The facts started piling up.  Facebook could do point of presence detection. Facebook had an SDK (Software development it). Facebook developers build applications upon Facebook. How different is this from an operating system? Could Facebook be the new Windows?  Without saying so, Mark explored this concept further by showcasing a variety of applications installed on Facebook.

social media

Ahmed Hussam, Social Media Consultant for OT Ventures delivered the tightest, crispest messaging around Social Media and Trends that I have seen at any conference. The iconography and images powerfully conveyed the importance of social media in marketing and advertising.  Ahmed masterfully wove in the storytelling with the stats. He spoke of the highlight successful Old Spice campaign, with 6 million views in day 1, and 20 million views by Day 3. The videos themselves are unremarkable; it is the banter between the fictional Old Spice character and the social networking followers that led to high traffic, with a 2700% increase in Old Spice followers, culminating in a high-buzz series of interactions between Alyssa Milano and the shirtless Old Spice man, where they exchanged photos over Twitter.

Click on the images to review the irrefutable facts of the importance of social media.

Creative Inspiration through Technology

I started the morning with the topic: Creative Inspiration through Technology. Clearly the time for creativity in this industry hasn’t been more pronounced.  Thanks to the good help of my dear friend Sean Seibel, Microsoft’s senor User Experience Evangelist in Manhattan, I presented 5 different inspiration technologies concepts where you can lead with a futuristic design.  

1. apps

Think of your online properties as web applications not web sites – Leverage IE9 Windows 7 features such as pinning and multi-touch to increase stickiness – the time the users spend on your property.  CNN and Facebook do this well, allowing users to pin commonly used  web activities  (think activities, not links) to their desktop. From there, Facebook is treated as an application with direct access to commonly used activities – such as News, Friends, Events. Take a look at the Beauty of the Web for case studies from actual customers. Also, check out the amazing demos of HTML5 and hardware acceleration on the IE9 test drive site. Seadragon’s Canvas Zoom demo caused much a stir with our design community.

2. touchless

I settled on the word touchless as a way to describe our Kinect technology.  The implications for eCommerce and retail are enormous.  As a female consumer, I had no interest in the Xbox, because the games were more focused on the shoot ‘em mentality. (See LEGO studies about male/female software preferences). The best way I can describe this potential is to show an excerpt from the video I ran today.  An empty handed girl stands up in her living room, looking at the TV where a live video of her friend is shown. Between the two stands a wardrobe of clothing.  With a few flicks of her wrist, the girl dons a dress, and tries in on “virtually” spinning and modeling.  Your own private dressing room without getting undressed!  And with your best friend’s colorful commentary.  Retailers are you watching this?

 

3. fansumer

This is not a new concept – the idea of combining the consumer with a fan.  Don’t just go to Facebook and Twitter. Bring social networking to you.  Every page of every desktop application and website that displays a brand or a product should have at the very least a Like button. Harness the power of your fans.

Ahmed Hussam, Social Media Consultant, echoed exactly this point . That every application page should have at least one social network connection.  As Mark Cowan points out, for Facebook Like buttons, it’s only two lines of code.  (For bloggers, it’s even easier, using Guy Burstein’s Live Writer Plug in that I had covered in an earlier article).

Interaction between you, the company and your fansumers increases your “earned marketing”. Earned marketing comes from word of mouth, not paid advertisement, or owned members of a loyalty program. One great example of the Nike Mosaic Project that I covered in an earlier post.

4. hubs

Hubs allow the user to group together related activities into a common area. We use this model with Windows Phone. The People hub pulls together your photos, Facebook updates, and contacts all into one hub, with many different views.  Why not? Photos, Facebook and Contacts are all people. Think of ways you can create your own Hubs.

5. unity

Lastly, I covered the importance of design unity between the physical and virtual worlds. You could use Microsoft Photosynth to have users from all over the world upload photos of your building or landmark , and map these to three dimensional rendering using these very same photos.   Microsoft Tag allows you to take a snapshot of an item through your mobile phone and immediately find out what your friends have to say about it. 

Together all these concepts enable the future to be here today.

Download The Connection 2010 presentation I delivered as Part I, II, and III with embedded low stream video. Or you can download the entire file without video.