This is a tutorial on how to create a cute little photo vignette in 6 circles– perfect for use in a blog, mood board, or any other digital files you can think of.
What this tutorial requires is some sort of Photoshop or Photoshop Elements software, though it can probably be done similarly with a lot of other photo-editing software. Here, I’m using Photoshop CS5.
First, create a new document:
The Design Confidential’s main content section is about 598 px wide. It varies, depending on your platform
So I created a 600 x 600 px document, for web, at 72 ppi.
Set up some guides: If you have 6 photos, you’ll need 6 boxes. For the 600 x 600 px document, I put a grid at 200 px, 400 px, and horizontally at 300 px
Then I placed all of my images. I used File>Place, and rasterized [Layer>Rasterize or Right-click>Rasterize] them all, each on their own layer. I named them 1-6 so I wouldn’t get lost. I trimmed each photo so they weren’t overlapping by selecting the overlapping bits and deleting them from each photo’s layer.
See what’s going on below? Sacre Coeur, Photo 5, is overlapping that Eiffel Tower at night picture (Photo 6). So I selected the overlapp-y part, made sure I was on Photo 5’s layer, and then deleted that part of the image.
I created a new layer, then I drew circles, one in each section of my grid. You can just place the “Circle Mask Template” .psd file at the end of this tutorial, or if you’re feeling fancy, create your own shapes. Draw stars, ovals, rounded rectangles, whatever
This is where the magic happens. I move the Circle Mask Template layer to the bottom. Then, I select each of the photo layers (Shift+click on the layers). Then, I right-click on the layers, and a menu pops up. Scroll down to “Create Clipping Mask” and click.
You can also point your cursor at the lines BETWEEN the layers, and opt.+click. This will give you a little overlapping circle icon. That will create a clipping mask as well.
ET VOILA! You’ll see in your Layers panel that each photo has a tiny L-arrow next to it, indicating that it’s part of the clipping mask.
Save that bad boy as a .jpg for Web and Devices [File> Save for Web and Devices], and you are set to publish to your site.
Click here for the full PSD file with photo layers
Click here for the Circle Mask Template file (.psd)
Disclaimer: I’m a self-taught Photoshop gal, and there may be other ways to do this that I just don’t know. Also, this might be very different in other Photoshop versions. But the basics will remain the same.
All of the images in this tutorial (including the photos from Paris) are property of Melissa Fasolino, Zucchini & Co.
If you enjoyed this post PLEASE PIN IT! Definitely comment below, Share it or Like it, and subscribe to my feed to stay up to date!
You can now also:Â Follow my blog with blog lovin!
I would love for you to check out my other site:Â Handmade-Holiday! For all of your DIY Holiday Decor, Gifts, Parties, and More!
