All the Mediamodifier online mockups are based on Photoshop PSD files, which are automatically converted into web compatible MMD format. For this process to work smoothly, it’s necessary to know some of the limitations and organize your PSD file layout.
This way you can easily make online versions of your own Photoshop mockups – edit and save them easily online or use through our most advanced mockup API.
Before You Begin:
Before starting to edit your PSD mockup, please consider your file size and resolution… and also make backups!
The online version of the mockups is meant to be fast.
So it’s better to continue using the PSD version if you need 5000px resolution.
Although Mediamodifier can handle large file sizes too, it’s better to stay lean and fast.
If you wish to create an online version of your mockups, we recommend staying around 2000px size. The smaller your PSD resolution is, the faster your mockup will load online (this is most important if you’re going to use your own mockup through the API).
and resizing your to-be online mockup PSD file later may end up causing issues, so it’s better to start creating your mockup in the right size from the beginning.
So let’s get started…
Layer Types and Names
Creating mockups requires specific layer names for each layer type. This way our PSD file analyzer will understand all the layers and what they are for (A big “Thank You” Adobe for making the parsing of PSD files so difficult 😊)
For example a t-shirt mockup would look like this:
or a candy bar mockup like this:
mm_img:NAME – placeholder layer name e.g. mm_img:iPhone Screen. This layer is a smart object layer.
mm_msk:NAME – mask layer for placeholder (each mask layer must have a unique name) e.g. mm_msk:screen mask or mm_msk:mask1 mm_msk:mask2 etc. Important: the placeholder layer and mask layer cannot also share the same name. For example mm_img:Book and mm_msk:Book are the same names. Consider making each unique e.g. mm_img:Book and mm_msk:Book_mask
mm_clr:NAME – name for any layer which the color can be changed e.g. mm_clr:Background Color.
mm_wrp:NAME – regular image placeholder for layers using warp effect.
mm_text:Name – basic text is supported (not yet in mockup API) with the fonts: Roboto, Slato, Labo, Concert One, Lora, Yantramanav, Raleway, Dancing Script, Shadows Into Light. View example of a mockup with text.
All other layers which cannot be customized, can have regular and meaningful short names e.g. Flower, Wood Background, Shadow.
NB: No smart objects (other than placeholders) – Please make sure only the placeholder layers are smart objects, and all other layers are rasterized.
Inside the smart object placeholder layer, there cannot be anything else, expect the example placeholder image (no smart objects, a single rasterized layer).
There can also be (yet):
No locked layers.
No Smart filters or layer styles (these will be ignored)… be creative and check our library of mockups for how to make templates without these features 🙂
Duplicate One Smart Object into Many Locations
When you duplicate a smart object in photoshop, and make many copies of it, they all get updated when you replace the content in one copy. However this is not the case with Mediamodifier.
In cases where you need to add one image to many placeholders, the smart object must have the exact same name.
For Example if in the above mockup, you would like to upload 1 image, and have it duplicated to all iPhone screens at once, then name all the placeholder layers to mm_img:screen. (Example here)
However if you wish to upload a different image to each screen, then all placeholder layer names must be unique: mm_img:screen 1, mm_img:screen 2, mm_img:screen 3 etc (Example here)
NB: if the placeholders have the same name, but different sizes (e.g. square and rectangle) then the same image will be placed into the placeholders with the stretch to fit method.
Basic Blend modes are supported (add, multiply,screen,overlay) when uploading your mockups and using them through Mediamodifier website online.
NB: Blend modes are not yet supported in the mockup API. For an in-depth tutorial about getting colors to work without using blend modes, we suggest to read the following blog article: How to Make a (Mediamodifier Compatible) Mockup in Photoshop
Using Warp & Distort:
Warp and Distort are supported, however these effects cannot be used simultaneously.
Distort – this can be used to move the 4 corners of the smart object into place. You can freely move and resize the layer too.
Warp – using warp requires the warped smart object to have the name mm_wrp:name
Warped layers can only use the Default Photoshop warp:
The layer also cannot be distorted, scaled or rotated, after or before it is warped (because reading warp info from a PSD file is pretty complicated ). This means it is necessary to move your to-be warped smart object layer into roughly the correct position it will be placed, then make sure it is scaled 100%, rasterized, then converted to smart object and then finally processed with the warp tool. (the layer can be moved after that, but not rotated)
Our PSD analyzer also reads layer opacity, so this can be set to 0-100%
Using Clipping Masks
It’s allowed to use clipping masks (use the layer below as mask) but not layer masks (used on same layer).
Tip: You can also assigns many layers to one mask.
Please note: Photoshop & Mediamodifier handle masks differently… a white layer used as clipping mask is all white and visible in Photoshop, even if the masked layer does not cover the entire mask, however Mediamodifier considers clipping masks as invisible layers.
Masks: the mask should always be 1-2 pixels smaller (or the placeholder bigger) than the placeholder layer itself. This is because Photoshop and Mediamodifier web editor might still show the white mask behind the placeholder on the edges. Think about it the same way as print designs have a small safe bleed area.
Optimize File Size:
File size – pixels outside the visible canvas. Please make sure the “Delete Cropped Pixels” is ticked to crop off any content that is not visible. This way the PSD file will be smaller.
In general there are quite a few limitations to making your regular PSD mockups compatible with Mediamodifier, however the results are worth it! After successful upload your PSD file will be turned into an online mockup, which makes it super easy and fast to customize and download, with no access to Photoshop required.
Simply drag and drop your image to the placeholder online and save copies of your edited mockups on Mediamodifier.
Tip: You can also use the existing 4000 mockups on Mediamodifier through the API, but create custom versions of the templates.
This tutorial is constantly updated with new info (thank you for submitting any feedback, we encourage you do it!)
- Marketing Tips How to Sell Digital Downloads on Etsy – The Ultimate Guide
- Marketing Tips Introducing The Guest Post Guidelines For Mediamodifier Blog
- Mockups & Templates 10 New Logo Templates You Can Use For Your Print Company
- Design Tips The Best 7 Colors to Use for Your Social Media Posts in 2023
- Marketing Tips 4 Useful Tactics That Will Boost Your Website’s Conversion Rates
- Tutorials How to Request a Custom Mediamodifier Mockup
- Marketing Tips The BEST Marketing Calendar 2023 + 12 FREE Post Templates
- Marketing Tips The Complete Guide To Image Licenses In Marketing
- Mockups & Templates 10 Awesome Christmas Mockup Templates For Last Minute Marketing
- Marketing Tips Video Ads 101: Do They Work, and How To Use Them?
- Mockups & Templates 16 Corporate Stationery Mockup Templates For Beautiful Previews
- Blog 5 of the Best Design and Mockups Affiliate Programs Compared
- Mockups & Templates 10 TV Mockup Templates For Quick Marketing Images
- Mockups & Templates Free Neon Backgrounds with Instant Download
- Mockups & Templates Must Try: 9 Volatile and Practical Collage Mockup Templates
- Marketing Tips What Is an Employer Branding Specialist, and Do You Need One?
- Design Tips Turn Boring Photos into Artwork with PNG Shadows (50 Free Overlays)
- Mockups & Templates 16 Incredibly Useful Print Mockup Templates For POD Businesses
- Design Tips 40 Free Organic SVG Backgrounds From Mediamodifier
- Blog Affiliate Marketing Trends to Keep an Eye on in 2023 | Affiliate Marketing 101
- Mockups & Templates The 9 Best 3D Browser Mockups for Previewing Your Website
- Mockups & Templates 10 Clothing Mockups With Models You Should Use For Your Online Business
- Mockups & Templates What Does Mockup Mean? – A Beginner’s Guide to Mockups
- Tutorials Mockup API – The Complete Guide
- Blog TikTok & The Music Industry: The Impact of Viral Content
- Blog 3 Tips to Improve the Quality of a Mockup
- Mockups & Templates 15 Greeting Card Mockups With Flowers
- Mockups & Templates 10 Most Popular Website Screen Browser Mockup Templates
- Marketing Tips 4 Failproof Ways To Make Money on TikTok
- Mockups & Templates 11 Beautiful Poster Mockups To Preview Your Designs and Artwork
- Blog Best Types of Affiliate Marketing Content | Affiliate Marketing 101
- Mockups & Templates 11 Business Card Mockups For Quick Professional Previews
- Design Tips Can AI Generate a Product Mockup? We Tested All the Tools to Find Out!
- Mockups & Templates Free Podium Backgrounds for a Stunning Product Showcase
- Blog Logo Design 101: 5 Reasons You Need a New One and How to Nail It
- Mockups & Templates iPhone 14 Mockup Templates With Colorful Backgrounds
- News New Feature: Edit Brightness/Contrast of a Mockup Layer
- Mockups & Templates 6 Loungewear Mockup Templates to Showcase Your Apparel Designs
- Tutorials How to Change the Instagram Story Default Background
- Mockups & Templates 21 Logo Mockup Templates Available in the Mediamodifier Generator
- Mockups & Templates 14 Professional Samsung Galaxy Fold Mockup Templates
- Design Tips How to Add Animated GIF to an Image
- Mockups & Templates 33 Beautiful Blanket Mockup Templates to Use Right Now
- Marketing Tips How to Present a Logo to a Client – 5 Useful Tips
- Blog Tips to Achieve Affiliate Marketing Success | Affiliate Marketing 101
- Mockups & Templates 5 Quiz Templates for Instagram Stories to Boost Your Engagement Fast
- Tutorials How to Use the Mediamodifier Mockup Generator for Free
- News Now Is The Best Time to Invest in Mediamodifier
- Blog How to Get Started with Affiliate Marketing | Affiliate Marketing 101
- News 6 Instagram Updates You Need to Know About – July 2022
- Blog What is Affiliate Marketing | Affiliate Marketing 101
- Mockups & Templates 5 FREE Social Media Templates to Celebrate Pride Month
- Marketing Tips The Marketing Budgets of Big Companies
- Tutorials How to Add a Screenshot to a Computer Screen Stock Photo
- Marketing Tips The Secret to Promoting Your Product with Models
- Design Tips How to Create an Infographic Online With Mediamodifier
- News You Can Now Download SVG Vector Illustration Sets From Mediamodifier
- NFT NFTs: The Good, the Bad, and the Ugly
- Blog 8 Tools to Help You Become More Organized, From a Very Unorganized Person
- Design Tips Need Some Font Inspiration? Try These 5 Fonts Available on Mediamodifier
- Marketing Tips 6 Websites That Will Make It Easier to Stay on Track When Working From Home
- Marketing Tips Make Your Work Easier With These 10 Productivity Tools
- Mockups & Templates How and Why to Use Client Testimonials + 5 Free Templates
- Tutorials How to Make an Online Invoice With Mediamodifier
- Marketing Tips Case Study: This User Creates Etsy Listings In Seconds With Mediamodifier
- Marketing Tips The Best POD Tools for a Successful Print-On-Demand Business
- Marketing Tips Case Study: Etsy Star Seller Increased Their Production Speed by 90% With Our Tool
- Design Tips Improve Design Skills With These 6 Projects
- NFT A Look Into the Future of NFT: What Will the Space Look Like in 10 Years?
- Mockups & Templates 10 Easter Instagram Post Templates That You Can Publish in Seconds
- News Spring Sale: Mediamodifier PRO Annual Plan Now 50% Off!
- Marketing Tips Use These Social Media Job Post Templates to Attract the Best Talent
- Marketing Tips 6 TED Talks That All Marketing Students Should Watch
- Marketing Tips 4 Elon Musk Marketing Tips You Could Apply Today
- Marketing Tips April Fools’ Day Marketing Ideas: 4 Brilliant Ideas for 2022
- Design Tips The Ultimate Design Cheat Sheet for Students
- News New Feature: Mediamodifier Team Accounts Plan
- Mockups & Templates How to Design a LinkedIn Banner for Your Profile
- Blog Introducing the New Mediamodifier Website
- Marketing Tips 5 Ways Mockups Are The Eco-Friendly Marketing Tools of the Future
- News New Feature: SVG Illustrations Inside the Mediamodifier Design Editor
- Marketing Tips 6 Tips to Get More Clients for Your Small Business
- Marketing Tips 5 of the Best Marketing TikTok Pages to Follow for Inspiration and Advice
- Mockups & Templates How to Preview Social Media Posts Without Publishing Them
- Marketing Tips 6 Tips for Taking Better Product Photos
- Design Tips 5 Celebrities You Didn’t Know Used to Be Designers
- Post Ideas 10 Post Ideas for Social Media in March 2022
- Design Tips 8 Design Tips for Making a Good Concept Even Better
- Marketing Tips 5 Common Misconceptions About Social Media Managers
- Marketing Tips Improve Your Content With These 6 Tools For Small Businesses
- Mockups & Templates How to Preview Product Packaging Online (Mockup Tool Tutorial)
- Design Tips 5 Principles of Psychology You Can Use to Improve A Design
- Marketing Tips 3 Smart Valentine’s Day Marketing Ideas To Promote Your Business
- News Why You Should Use This WordPress PoD Plugin for Your Store
- Mockups & Templates 20 Valentine’s Day Card Templates (That You Can Use Right Now)
- NFT 3 Reasons to Use an NFT Maker
- Marketing Tips Print on Demand: 6 Easy Steps to Start a Profitable Side Business
- Post Ideas 10 Post Ideas for Social Media in February 2022
- News This New Feature Makes It Even Easier To Use Our Mockup Editor
- Marketing Tips 5 Smart Ways to Spend Your Marketing Budget
- Marketing Tips Starting a Small Business? 5 Things You’re Forgetting to Do
- NFT How to Use the Mediamodifier NFT Maker
- Mockups & Templates Boost Your Engagement: 9 Instagram Story Ideas
- Design Tips The Best 5 Colors to Use for Your Social Media in 2022
- Marketing Tips Ultimate Social Media Size Guide [Updated July 2022]
- Showroom iPhone Mockup Held in a Hand in Open Area
- Showroom iPhone 14 with AirPods Hovering around Photoshop PSD Mockup
- Showroom iPhone 14 Pro PSD Mockup with Simple Background
- Showroom iPhone 14 App Screen Mockup with a Wall Background
- Showroom Photoshop Mockup of iPhone 14 Pro with Floating Airpods
- Showroom Mockup of a Square Wood Frame on Wall with Shadows
- Showroom TV Mounted on Wall Photoshop PSD Mockup