Get that contemporary “Geez, you make me look good!” feel to your digital photographs

It has always amazed me that, with a little Photoshop love, just about anyone can look great. Now, to be clear, am I not referring to air-brushing the heck out of your pictures; removing every blemish and wrinkle. What I am talking about is adding some adjustment layers to tweak the hue/saturation, brightness/contrast and curves a little.

My interest was peaked when friends showed me their engagement and wedding pictures. They (the friends) looked great, and they really aren’t that cool… or sexy, and yet the photographs made them look like a million bucks! Of course there is a lot to be said for composition and lighting, which I won’t get into here, but there was something else going on; some treatment that gave the photographs that “vintage” look. It’s what I would describe as a contemporary equivalent to sepia tinting. This little “how-to” is my quick and dirty way to achieve something like that. I should mention that I am using Photoshop CS3 so I am adding adjustment layers to the file, but you could just as easily get the same result with ‘adjustments’ from the ‘Image’ menu in earlier versions of Photoshop.

Five Simple Steps

1. Create ‘Soft Light’ duplicate layer of the original
2. Add ‘Curves’ adjustment layer
3. Add ‘Brightness/Contrast’ adjustment layer
4. Add ‘Hue/Saturation’ adjustment layer
5. Create flat color ‘Exclusion’ layer

The Original Image

Picture by Carsten Tolkmit

So here we have the original image, which I am using with permission from Carsten Tolkmit who is a fabulous photographer. If you have a moment, check out his work on either his Flickr Photostream or website.

Step One – Soft Light Layer

Duplicate layer, Soft Light blend and 15% Opacity

First up we make a copy of the original layer and set the blend to Soft Light. I have the layer opacity set to 15% here, but you might want to increase this depending on the image and your taste.

Step Two – Adjustment Layer: Curves

New Adjustment layer with RGB input/output curves tweaked

Next up we need an Adjustment Layer which we will use to modify the color. For this we add a Curves Adjustment Layer. This can be found at the bottom of the Layers palette or in the top menu under Layer > New Adjustment Layer > Curves… I won’t go into the exact input/output values for each channel; suffice it to say that the curves should resemble the image above. Trial and error is the key!

Step Three – Adjustment Layer: Brightness/Contrast

Brightness/Contrast Adjustment Layer added

Add a second Adjustment Layer, but this time select Brightness/Contrast… In the example above I have increased the brightness to 58 and the contrast to 28. Again, these numbers may vary depending on the characteristics of the photograph and your personal taste.

Step Four – Adjustment Layer: Hue/Saturation

Hue/Saturation Adjustment Layer added

The final Adjustment Layer that we need will allow us to decrease the overall intensity of the color of the image. Add a new Adjustment Layer and select Hue/Saturation… Here you see that I have dropped the saturation (-28) to give the image a “Faded” or “washed-out” feel to it.

Step Five – Flat Color ‘Exclusion’ Layer

Final Layer with blend mode set to Exclusion and 19% Opacity

The final step in the process is adding a flat color layer with a strong blue fill. You can experiment with the color for different effects, but for my example the color is R:0 G:0 B:102 (#000066). The opacity is set reasonably low, 19% in this case. Increasing the opacity value will give you the ‘yellowing’ effect of aged photographic paper.

The Result

The End Result

And here is the result. Changing up the values in the adjustment layers can give you a multitude of interesting results, and I encourage you to experiment. Anyway this should give you a good starting point.

A contribution to the world of visual effects with CSS3. It’s an iPhone type message bubble!

I’m not sure where you would use it, but its interesting to see what’s possible. It’s an adaptation of the shiny buttons by GirlieMac! and CSS3 border arrow trick. This works with -webkit and -moz browsers. This is how it looks:

The HTML

Here is the HTML that we will be styling. It is made-up of a main background to which we will add the rounded corners, border color and linear gradient and a glare that sits over-top of it. The arrow color and border are separate for reasons that will become clear later

The Background

1. Create the class chat-bubble. We are going start by adding some basic CSS for the margins, padding, font and such. Nothing too exciting here!
2. Now lets give it lick of the CSS3 brush with a linear gradient from top to bottom, and we are using the browser specific prefixes to achieve this (note the slight syntax differences between the Webkit and Moziller versions)
3. Finally lets add a border with a radius of 10px. Again we are using the browser specific prefixes, but we have also included the “Future-Proof” code AFTER the browser specific versions

Add the Glare

1. Create the class chat-bubble-glare. Set the basic attributes such as height, width, size etc.
2. Again we are going to set the border radius to 10px using the browser-specific prefixes and remembering to include the “Future Proof” line AFTER
3. Just as before we are using a background linear gradient, but this time we are using RGBa so we can add an alpha blend (the fourth value within the parenthesis)

The Speech Arrow

Is that what you would call it? I’m not sure, but I am referring to the little tick under the bubble that indicates the direction of the conversation. We now find out why we have the border and the color separate. We are going to use a transparent border trick, where three sides are without color, leaving the fourth as a triangle. Thus, in order to create the effect of a border (around our border!) we have to have a slightly larger triangle in the color of the bubble border, sitting underneath the triangle with the main color. Make sense? It will.

1. Create the class chat-bubble-arrow. This is going to be triangle that sits atop the border triangle. Set the north, east, and west borders to transparent
2. Set the south border to the RGB value of the end point of background gradient (since the gradient runs from top to bottom)
3. The height and width are set to zero, leaving only the border visible, which we have set to solid and 6px
4. Add values for the bottom and left offset. This is trial and error for what looks good, but I have used -1px/-3px respectively. This allows the arrow to appear outside the chat bubble
5. Finally we are going to rotate the arrow using the rotate attribute with the browser specific prefixes. Here I have set the rotation to 70deg. Again, I have included the transform attribute without the prefix AFTER the browser specific versions

Speech Arrow Border

Finally we have the border arrow, which is almost identical to the main color arrow except smaller and offset differently

1. Create the class chat-bubble-arrow-border This is going to be the triangle that creates a fake border. As above, we set the north, east, and west borders to transparent
2. Set the south border to the same RGB value as the border color of the chat-bubble class
3. Finally set the bottom and left values to -3px/-5px respectively. All other values are the same as the previous class