PS I Love You: Ombre Effects

(mouseover to see non-ombre :: photo of Eléonore Bridge used with permission.)

The great thing about doctor appointments is that you get to catch up on your magazine reading. Fortunately, my doctor has a lot of great fashion mags, and as I was flipping through the August 2011 issue of InStyle magazine, this photo of an ANTM contestant caught my eye. But, what really stuck with me (enough to actually take a photo of the magazine spread while no one was looking), was the title text, which was styled with a linear gradient, A.K.A. ombre. Anyway, Decor8 made note of this trend last week and she’s right — ombre is all the rage. I’ve seen ombre used in many places like Lula, Modcloth, and Moorea Seal’s blog, just to name a few.

Tutorial

In this tutorial, I’m going to show you how you can use the gradient tool in Photoshop to achieve similar effects — I’m going to show you how to add an ombre effect to your photos. This effect would look really cute on a blog banner, something like this.

Special Thanks

I’ll be working with a beautiful black and white photo of Eléonore Bridge descending a staircase. Thank you, Eléonore! ♥

1. Open your photo in Adobe Photoshop.
2. Add a Gradient layer style.
3. After you select Gradient, the Gradient Fill dialogue box will open.

1. Click on the gradient bar (circled in red above).
2. After you click on the “gradient bar”, the Gradient Editor will open. Note where the color and transparency controls are located. Each color control is paired with a transparency control.

1. Click on one of the color controls. In step 3, I clicked on the color control highlighted in green (above).
2. Clicking on one of these controls will make the Color Stops option visible. Click on the field labeled Color and choose any color. My color choice: #f63b5a (hot pink-y).

1. The opacity controls are located right above the color controls. Note that each color control is paired with a transparency control.
2. Notice in the image above that the left color control is set to 100% — that means color #f63b5a is opaque at that extreme end.

In Step 5, I changed the opacity to 45% — observe the changes from Step 4.

After you choose your color and transparency settings for all your color stops, set the angle for your gradient. It’s set to 90° by default. I went ahead and changed it to 55.49° to match the angle of the staircase.

Optional Step 7: You can also experiment with the blending modes to achieve various effects. Blending mode for Eléonore’s photo: Multiply.

(mouseover to see non-ombre :: photo of Eléonore Bridge used with permission.)

This text is another example of the ombre (gradient) effect. As you can see, I added multiple color stops. To add more colors to your gradient, open the gradient editor and simply click between the existing stops and repeat the steps above. To achieve the exact effect you see in this example (with a photo beneath the text), you will need to use clipping masks, which I show how to create in this tutorial.