How to make realistic styled product images in Photoshop
Product photography is something I have personally struggled with as a business owner. I know amazing product pictures can make or break your sales, but product photography is something I do not like to do because it frustrates me. Even though I have watched numerous tutorials on photography, I have not been able to master this skillset. There is so much to think about when styling product photos; lighting, background, props, shutter speed, and the list goes on. Photography is an art. Whether it is capturing the story of your family, or styling a new product release, it takes amazing talent to capture perfect images. A talent I have acquiesced to not mastering. This is why I hire amazing photographers when I can afford to do so.
As a design studio, I am always creating new illustrations and I cannot always have a photographer take pictures of new work. It would definitely break the bank if I did! So, in order to share new products with potential customers, I have learned some tricks to styling my images to look as close to real as possible without photographing everything each time. In this tutorial, I am going to show you how to create realistic styled product images in Photoshop using digital designs and styled background images.
UTILIZE STYLED PHOTOGRAPHY BACKGROUND IMAGES
You may want to style your own photography backgrounds to reflect the individual aesthetic of your brand, or purchase styled stock photography images from accomplished photographers on Etsy or Creative Market. Below is a styled background used for many of my product images that I styled and took myself (one of the few that came out great). The colors of the flowers, style of leaves, and background color were carefully selected to compliment my branding.
Before purchasing styled stock photography background images, or photography props to style your own, it is important to take into account your branding. This way, all image styles are the same and maintain brand consistency across your site and social media platforms. There are some great tips in this article from Elle & Co. on maintaining a cohesive brand.
Now that we have covered branding, I am going to show you how to take a beautifully styled background image and layer your graphics on top of it in Photoshop, and make it look like your graphics were really part of the picture.
BRING YOUR DIGITAL DESIGNS INTO PHOTOSHOP
For the purpose and ease of this tutorial, you should use a light color background image. The color where you will be placing your designs should be slightly off-white or gray, like a photograph of a white desk. I am using a light gray background, but this would work on off-white too. A dark background, like dark brown wood, is much harder to work with starting off.
Open your styled stock photography background image in Photoshop, keeping the size of the image large enough so you can use your layout in the future for a small printed catalog without having to redo all your mockups. The dimensions of my image I am using is 1877px wide by 1408px high and 120dpi. This is a large enough size for me to use when creating little printed catalogs in the future. But, if you are planning super large prints, you should plan to redo them for that particular purpose because your file sizes are going to be huge and will take up large amounts of storage space on your computer.
Now rename your file to mockup _(yourdesignname) _(producttype) _(imagenumber) and then save it to a Mockup File on your computer as a PSD file so you can always edit it later.
In this tutorial my file name is mockup_amberbranches_invite_img2, since this will be the image number 2 in my product listing on my Etsy store.
Place Your Design into the Mockup
Now I am going to bring in the digital images of our wedding invitation from Illustrator into the file opened in Photoshop.
I am going to File > Place
Selecting my design, and placing it into my document.
Double Clicking in the box to complete this step.
Scale the Design Proportionally to Other Objects
Now, scale the image to the size you want it to be in your layout. Be sure to make it realistic in proportion to other objects in your mock-up. Since I have the envelope and liner in my mock-up, I am going to scale my design as though it would fit within the dimensions of the envelope.
Go to Edit > Transform > Scale and holding down the Shift Key to constrain proportions.
Double click in the box to apply changes.
CREATE YOUR LAYER STYLES
This is where we make the digital image look more like it was part of the original background image. Notice that your digital image is very bright white in comparison to the background, and there is no shadow to the invitation. This makes it stand out and gives an unnatural look to the design on the background.
To access the Layer Styles Panel,
Double Click on the open area of the Layer you want to edit.
Create the Drop Shadow
Now in the Layer Styles Panel, we are going to create a Drop Shadow to the wedding invitation layer to give it a more natural look. Paper items would not normally cast a large shadow like the branches and flowers in this image. So we need to make our Drop Shadow small for it to look realistic.
I am using full black for this effect since I have a gray background, but you can use a gray or even another hue from your background image to soften the shadow. The background image I am working with has most of the light coming from the right, so a stronger drop shadow color will work nicely.
The Drop Shadow settings here are:
Color: Full Black (Hex code #000000) Opacity: 20% Angle: 0 (Be sure to deselect the Use Global Light Checkbox) Distance: 8 px Spread: 8% Size: 15 px
Create the Color Overlay
Now, still in the Layer Style panel,
Select the Color Overlay option Checkbox and use these settings:
Blend mode: Normal Opacity: 3%
Then Select the color box to the right of Blend Mode, it should bring up this box shown below.
Type in the Hex Code #9b9b9b
then click OK.
Now Click OK in the Layer Styles panel to apply your Layer Style Effects to the Layer.
It should have the same effects applied as shown in this image.
Next, Place the matching wedding invitation pieces into the document like response cards, or large enclosure cards, just like we did in the first step of this tutorial. If you are using Photoshop CC and have your designs stored in Libraries, you can bring them in that way too.
In this image you can really see the difference the Layer Styles make by looking at the wedding invitation compared to the enclosure cards.
Now we want to add the same Layer Styles to the new response card and accommodations card shown in this image.
Do this by Right Clicking on the Invitation Layer and selecting Copy Layer Style.
Next, Select the Layer you want to apply the style to (here I am applying it to my Response Card).
Then Right Click that Layer and Select Paste Layer Style.
Repeat this for all the wedding invitation designs you want to apply these effects. This will apply the same settings used in the invitation to all the other designs in your document.
Here is my finished image with all Layer Effects applied to each invitation piece.
One way to give a more realistic look to your images is by adding a real image of an object, like the coral response envelope used in this image. To add more details, I added a mock-up of the A7 outer envelope with matching liner to create a layered look to this photo, and to show the matching envelope liners option. The A7 envelope can be used for many other product mock-ups.
Get the mockup shown in this tutorial as well as the Illustrator A7 envelope.
HOW TO USE the A7 ENVELOPE LINER MOCK-UP
To make it easier for you to create your own stationery mock-ups, the A7 Envelope liner Photoshop file is available to you for download above. Also included in the zip file is an Illustrator version of the envelope, and a medium resolution copy of the background image. You can change the background image by placing your own background into the mock-up.
CREATING YOUR MOCK-UP
Open the Photoshop A7 envelope mock-up file. It will look like this when you open it.
Next, Select the Envelope and Liner group to open the layers of the envelope mock-up, as shown below.
Select the Envelope Liner layer.
Now, take your envelope liner pattern design file you want to use in the mock-up, and
File > Place,
or Copy and Paste it with Ctrl + V, ( or Command + V for Mac).
Your liner pattern should be under the Envelope Front Layer after placing it into the document. You may need to scale it to show the pattern the way you want, but you can scale your pattern with Transform > Scale to size it to fit over the Envelope Liner Layer, while holding down the Shift key to constrain proportions when scaling.
Move your liner pattern above the Envelope Liner Layer, so that it is completely covering the liner.
It should look like the image shown here.
Select the Envelope Liner layer. Then, go to
Select > Load selection.
You will have some little marching ants showing your selection of the liner. With the selection still selected, in the Layers Panel, Select your Pattern Layer (which should be directly above the envelope liner layer).
We are going to Add a Layer Mask to your Pattern Layer.
Do this by clicking the Add Layer Mask button at the bottom of your Layers Panel.
This will hide areas of the pattern you do not want to see, and only leave the shape of the Envelope Liner.
Your mock-up should look like this, with the Layer Mask applied to your Pattern Layer. Your A7 Envelope Mock-Up is ready to go. You can move it around the document by clicking on the Envelope and Liner group to move and place around the document.
The Adobe Illustrator vector file of the envelope mock-up does not include drop shadowing applied to it, but the Photoshop template does have the effects applied. You will have to apply effects yourself if you want to use the Illustrator vector file in a mock-up, so you can create your own layer styles. I have included a PDF instruction document with the download that has all the Layer Style settings for each layer of the envelope mock-up for easy reference. Enjoy!
Did you like this tutorial? Please comment below! Also, if you know of other designers who would like this tutorial and mock-up files, please share this post with them!
Note: This is an older post on creating simple mockups. I have a new tutorial blog series on creating Product Mockups. Read those posts below.