Creating Product Mockups - Separating Elements

creating-product-mock-ups-separating-photos

One benefit of taking photographs of several items at the same time is lighting. Especially if you are using natural light. The colors and shadows will be the same, and you can edit them all at once. There are lights you can buy to keep your lighting consistent, though I do not currently use them.

If you take photos of all your props together, then you may want to separate them later. Most of the time you will not want the same items in every photo mockup, especially if you are creating mockups for different themes and products.

I photograph my own mockups because it is fun, and I can make my product images have something specific in them that goes well with my products. Plus, I can use them with pre-purchased mockups, too.

We learned how to create a mockup in the last post of this series. Now I will show you how to separate an object from the background, how to organize a mockup document for items photographed, and how to create drop shadows for each item.

Step 1: Create Your Master Mockup Photoshop File

Before you create your file, you should know how you plan to use your mockup items. If you want to use them only for web use, you could make your files smaller. But, if you want to use them for print, or larger images, you will need larger files.

My product images for Creative Market are 1160 wide by varying heights (usually around 2500 to 3000 pixels). I do not want to reduce the resolution of my images, so my file I am going to keep at 300 dpi even though I use my images for the web.

My master mockup file will be created as 9000 pixels by 5000 pixels and 300 dpi. This will give me room to add more items into the one file, but also keep everything large enough to move into my product image template that I use for my shops. 

I recommend photographing and adding items into your Master Mockup file that are in the same theme; this way it will stay nice and organized when you are looking for it later. You could name the file Beach and Kids or whatever goes with what you photographed.

Your file size may be different based on how you intend to use the mockup images.
 

Step 2: Isolate Your Object Using Paths

I will be working with this photograph, isolating the the dish and the hair bow props since we already did the Tank Top shirt in the previous post. But, these steps are the same ones I did to separate the Tank Top shirt (free download of the mockup is in that post).

Props I will be isolating and separating from the white background.

Props I will be isolating and separating from the white background.

Using the Pen Tool (and the same steps used in the last post), I am going to select the object, adjusting the anchor points to go right along the edge of the dish. 

separating-mockup-prop-elements

Once I have the path lined up, I will define the path ( this step is also shown in my last post).

product-mockups-separating-elements-define-path

I will do the same thing for the hair bow and any other props I want to add to my master mockup document.
 

Step 3: Move Objects Into Master Mockup File & Create Drop Shadows

Now that I have my dish path defined, I can select it to move it into the Master Mockup File I created.

To select the path from the Paths Panel, I am holding down the Ctrl Key (or Command Key for Mac), and then Select the Path Thumbnail. You will now have a marching selection.

selecting-the-object-path

There are many ways to move selections into a new document. You can copy and paste while your path is selected using Ctrl + C (or Command + C), and then Ctrl + V (or Command + V) in your Master Mockup File.

Or, you can simply Drag the selection to the new document while the path is selected by using the Move Tool.
 

Moving selection to new document by dragging to the tab, and then releasing it inside the new document.

Moving selection to new document by dragging to the tab, and then releasing it inside the new document.

This is the bowl and hair bow added to my Master Mockup File without any shadows.

Props placed in mockup file without any shadow effects.

Props placed in mockup file without any shadow effects.

Step 4: Apply Drop Shadows

With the objects now in the Master Mockup File, we can add some drop shadows to make them look more realistic.

Using my original photograph for reference, I am going to add a drop shadow to the bowl using Layer Styles. You can get to the Layer Styles by double clicking on the Layer, or by going to Layer > Layer Styles > Drop Shadow
 

Applying drop shadow to bowl on white background. Your settings would be different on a darker background.

Applying drop shadow to bowl on white background. Your settings would be different on a darker background.

Your settings will be different based on your photography, the background color of your document, and how you want your shadows to look.

I used #857676 for the color of the shadow, set my opacity to 31 percent, moved the angle to mimic the direction of light coming from the left, and used a large distance and size setting. Play around with the drop shadow settings until it looks the way you want. Then Select Ok.

Note: These are the settings I used for a white background. If you are creating your drop shadows for a wood texture background or other background color, you will want to adjust them.
 

Combining Your Mockup Elements

Now that all the items I want to use have been added to my Master Mockup File, I can use them in product images.
 

Drop shadows are adjusted darker here for the darker background color.

Drop shadows are adjusted darker here for the darker background color.

Some examples below with different backgrounds, lighting, and adjusted shadows for each.

White background example

White background example

Mockup scene with lighting effects and a colored background

Mockup scene with lighting effects and a colored background

Mockup scene with wood background, other pattern, bow color adjusted, and other props

Mockup scene with wood background, other pattern, bow color adjusted, and other props

You can have so much fun creating mockups with things you photograph, or from ready made mockup creators.

If you want to find some great mockup creators to supplement your photography, here are a few I have personally used, purchased, and love. The links below are affiliate links to the product mockups I have used and recommend.

I do get a small commission for purchases made through links in this post, which helps me maintain this blog and do more tutorials.
Kitchen Ready Mockup Creator by Mockup Cloud and the Cosmetics Mockup Creator by Mockup Cloud

Mockup Cloud's mockup creators are very high quality and I love using them in my product images. 

What items do you want to use in your mockups? What products are you promoting with product mockups?