Try editor now

How to add your own awesome item to your mockup

Adding custom items to mockupeditor.com used to be a thing reserved only for our team to do. Well, for me actually, because the rest of the team is too busy writing epic code all the time. Leaving me to do all the updates. But I'm not complaining, since this is one of the things I love to do.

06 February 2017 by Tobias

After chatting with a lot of our great users (you know who you are), we came to the conclusion that this feature shouldn't be for us only. We have so many creative and talented members of MockupEditor now, that it's time for us to release this feature to you too.

Okay, enough with the yada yada. Let me get straight to the point.

This is how you get started

This feature is for you, if you want to shoot photos of your own items, and then include them in the editor. It might be to spice up your scene, to add your own Etsy product, or maybe you have a great image of an item from another mockup psd file, that you want to use. Bottom line is: Now you can add an image, and use it as an item in the editor.

Preview of scene

Noticed the hand? That huge hand is not among our regular items. “But Tobias, then how did it get there?” - It's funny you should ask, let me explain how.

1. First step is to have an actual image of your item. Download 5 free highres item-images here.

Image of item

Note that all other items in MockupEditor has a shadow on the right side. Try to aim for that too.

It is crucially important that your item is cut out before you add it to the editor. If you are not sure how to do this, then check out Chris Spooners excellent guide on this topic here.

2. You can either just drag your image into the editor, or open the “accessories” category in the bottom, and click on the “Upload Image” icon.

Drag item into editor

Note: The Item Editor will only appear if your image has transparent pixels in it.

This will open the new ItemEditor and allow you to scale your item to the size you want to use it in. Have you noticed those pink lines too? They define where the surface starts and ends.

Place the top-line where your item’s surface gets in contact with the ground. Then place the bottom line where the surface contact ends (closest to the camera if it was in 3D).

 

ItemEditor

The reason why these lines are important, is because they tell the editor in which order it should show your item.

3. Then hit the “Create now” button to add your awesome new item to the editor - and if you need to change the size of your item, then you can always double-click on it to open the editor again.

 

Saving item

Note: Be sure you use an highres image if you plan on downloading your scene in highres later on.

And that's it! Crazy easy, right?

I am super excited about this new feature, as I hope it will enable you to get a much more deep and personalized look out of your mockups now.

Tobias Waaentz

Art Director on mockupeditor.com

Comments

Write new comment