Making a vignette

Creating a Photo Vignette:


What's a Vignette?
A Vignette (vin-yet) is a Photograph that is faded off at the edges. Whether you want to print out your family photos with a special border or create images for your web site that stand out (like my Vette), making vignette is quick and easy. Here's how:

Make A Selection
Memories... like the corner of Mr. Photoshop's mind... Digitally altered memories, in this case. I remember so well the day my stock photography wife posed with my stock photography offspring. How can I make this image a little more maudlin?
First, if your image is the Background Layer, make a copy of it. (Drag the layer down to the little dog-eared paper icon on the bottom of the Layer's Palette.) Then fill your Background Layer with white.
Next, I used the Elliptical Marquee tool to draw a selection around the portion of my photo that I want showing after I vignette it.
Finally, I clicked the Add a Mask icon found on the bottom of my Layer's Palette

Having Added A Mask...
There's my Layers Palette complete with the Mask attached to my image layer. The mask is a Black & White, or Grayscale representation of a selection. Linked, as it is now, to an image layer it uses the color White to represent areas that should be visible; and Black to represent sections that should be hidden.

The result: The pixels of the image that were outside my oval marquee are rendered invisible, as if they were deleted (they weren't), and the white background is allowed to show through.

Okay, so far, so good. But why we really care about masks is that they are editable with any of the paint tools... or Filters. To edit the mask click on its icon in the palette. When it's active you'll see a small border around the icon (as in my image.)

Blur That Mask
Let's start with a simple one that never fails to please. It creates a feathered effect on the edge of your selection- a true vignette. Choose Filter: Blur: Gaussian Blur...


and move the Radius: slider until you have the effect you desire (even though we are editing the Layer Mask, your image window will still display your photo and you'll see the edges blur as you move the slider.) It's that simple.



Filters , Anyone?
You can use any filter to affect your mask. Experiment to find ones that will create a cool effect. Here we have a delightful family photo of a child enjoying his first birthday. Who wouldn't want to preserve this memory? (I've followed the steps above to create an oval vignette.) But this time let's try another filter. Filter: Brush Strokes: Sprayed Strokes... gives us this dialog:

I adjusted the sliders controlling the Stroke Length and Stroke Radius until I had the effect you see at left; then clicked OK. Now I've got a much more distinctive vignette.


There's really a ton of filters to try out. It's worth spending some time experimenting. Here I made another variation of the last image using the Filter: Distort: Glass...


Who Are These Guys?
Don't forget you can turn ANY selection into a Layer Mask as I did above. If you've got 6.0, you can use the Vector Shape Tools. Here I started out demonstrating that using the Rounded Rectangle , and applying a blur. It looked nice, but I couldn't help applying another filter and distorting the hell out of it. This one's called Wave...

What if you want to uses this effect on images for your web pages? First make your vignette. Then, unless your page background is white, you'll need to hide the background layer (click on the eyeball icon) so you see the gray and white checkerboard that represents transparency.
Then choose File: Save For Web... then choose GIF for your Optimized File Format. Make sure the Transparency box is checked and choose the smallest number of Colors possible (make sure your image still looks good.)
GIF is the only possible choice is you have a tiling image for your HTML background but may result in a larger file size than you'd like. So if you simply have a color for your page background, and you know what it will be, a more desirable format may be JPEG.
When you're preparing your vignette, fill your background layer with your web color instead of white.
Then when choosing File: Save For Web... pick JPEG for the File Format. I did this with the image at left. It gives the illusion of transparency, but will probably be a much smaller file size (meaning faster viewing for your site visitors.)

Any Selections Work
For this one I had a selection of a woman's profile that I drew and painted using a Quick Mask. I pasted it in the file of the woman and child, scaled and cropped, then loaded the profile's selection and turned it into a mask on the mother's layer.

That's it! Any selections will work.
In this image I expanded a selection of my Corvette and applied the Zig-Zag filter.

Now you know most of the secrets. Go forth and make some interesting vignettes for your images!

If you have any questions or comments regarding this tutorial please post it in this thread
Print Article

Login / Register
... Or Register

From The Forums...
TP dead
well that answers that lol...
free amazing brushes packs
thank you for the free brushes...
Help me on how to do this..
can you help me on how to do this?, can you give m...
if you need flash tips using camera try reading t...
I'm Kim, how's it going?...
... Go to Forum

Tutorial Image

Make your selections by using the color range command.
Tutorial covering the color range command...

Tutorial Image

The magic wand tool. A great way to make your selections...
Making your selections easily with the magic wand...

Web Media Network Limited. All rights reserved. No part of this website may be reproduced without written permission. Photoshop is a registered trademark of Adobe Inc.. is not associated in any way with Adobe, nor is an offical Photoshop website.