Want to make a mood board?
Fair warning – once you make a mood board, they’re addicting.
Making them, looking at them, planning them. They’re inspiring and beautiful at the same time, and we’re drawn to them. As evidenced by Pinterest, which is basically one big, never-ending mood board.
Mood boards draw an audience. Plus, they’re just fun.
I made a drag-and-drop template so you can make a mood board in Photoshop – and it’s free!
Why would you want to make a mood board?
SOO many reasons…
- Make a style guide to keep you on brand in your business or blog
- Make a gift guide collage
- Turn your goals into a vision board that will inspire you every day
- Set the tone for your next decorating project
- Show a client how you’ll turn their ideas into a fabulous finished product
- Design a collage of your favorite things: Christmas, spring, mountains, puppies…
- Gather photos of your recent family vacation
We’re going to use a really cool, really EASY tool in Photoshop called clipping masks.
Why Photoshop?
Because it has really cool, really easy tools like clipping masks. Seriously – it’s quick to learn (with tutorials like this one), and you can get a 30-day trial for free (and it’s as low as $10 a month after that).
Plus, I have a free template for you. Watch the video, follow along, and you’ll be whipping out mood boards in no time.
Ready? Let’s make a mood board:
Download the template, and open it up in Photoshop.
You’ll need some photos to put in your mood board, so make a file on your computer and gather about 7-15 photos. You want a few to play with, even if you don’t end up using all of them. If you want some photos to practice with, try these free stock photo resources.
Here’s my finished mood board:
Watch the video below and make a mood board for yourself!
OK, let’s review
When you first open the template, you’ll see a set of instructions, and some numbers to help you identify each shape in the mood board grid. You can show or hide these layers at any time be clicking the “eye” icon next to the layer in the layers panel. Remember to hide these before you save your mood board for the web!
Before you start, go ahead and save the file under a new name. That way, you can keep the original to come back to later.
1. Insert your first picture
Click on the shape you want to fill.
Drag and drop an image from your folder into Photoshop.
Click images to enlarge:
2. Clip the picture to the shape
Right-click the photo in the layers panel and choose “Create Clipping Mask”.
Boom! Your photo will take the shape of the shape underneath it! You can still move and resize the photo to your liking.
PRO TIP – If you’re using Photoshop 2018 or earlier, hold the shift key to resize photos. That will keep you from squishing the photo! (In Photoshop 2019, you no longer have to hold shift)
Click images to enlarge:
3. Repeat
Keep dragging photos in and applying clipping masks until you’ve filled the shapes you want to fill.
Tips on using photos
- If you decide you want to change a photo from one shape to another after you’ve created a clipping mask, no problem! In the layers panel, just drag the photo so it’s on top of the new shape. You’ll automatically break the clipping mask when you move the photo, which is what you want. Just right-click and create a new clipping mask, and you’re good to go!
- If you have a narrow shape that’s hard to fill, choose a photo with a lot of texture. Like a cobblestone street, a roof, wood, etc.
4. Make a color swatch
A mood board is a great place to display a color scheme that will go with your design inspiration. You can do that easily in Photoshop! Each shape in these templates can be turned into a color swatch.
Here’s how:
Double-click the shape in the layers panel (make sure you click on the layer icon, not the layer name). The color-picker menu will come up
You have 3 ways to choose a color:
- Choose a color from the color picker
- Choose a color from the swatches panel
- (My favorite): Move your mouse over your mood board. See how it changes to an eyedropper? Click anywhere and it will pick up that color. Don’t like the color you picked up? Just click again in another place.
Once you’re satisfied with the color of your color swatch, click OK in the Color Picker.
Click images to enlarge:
5. Save your mood board for the web
To save your mood board for the web, go to File > Export > Export as… (If you’re using Photoshop CS6, choose File > Export > Save for web).
To upload your mood board to social media, choose PNG as the file type. If you’re putting your mood board on your blog, choose JPG and lower the quality just a bit to reduce the file size.
See Step #5 in this post – HOW TO MAKE BLOG POST GRAPHICS – for more tips on saving graphics to upload to your blog.
Have you downloaded your free template yet? Grab a copy here:
Hey, guess what?
Now you know what a clipping mask is, how to handle layers in Photoshop, and how to save an image for the web! Look at you go.
Go forth and mood board.
I absolutely want to see your finished designs! #imaginedesignrepeat – It makes my heart happy. 🙂
