There are many laptop, tablets and mobile devices available in this world. Taking a mockup image within iPhone, iPad and Mac are attractive ways to showcase your pictures. Especially this will be eye catching for personal photos and website themes. Creating a mobile mockup is an easy task when you have image processing tools like Snagit or Photoshop. But these are premium tools and need dedicated installation on your PC or Mac. What about creating mockups online? That is also for free!!! Here are 5 free mockup generator tools to create device mockups based on URL or image.
There are purposes for for using mockup tools:
- Many mockup tools offer viewing a webpage in multiple devices at the same time. This can be very useful for testing responsiveness of the webpage to make sure all elements are working properly on all devices.
- You can download the mockup image and use for your design purposes.
- Finally, you can use these tools for fun and sharing purposes. For example, you can take your own picture inside an iPhone frame and post on your Facebook profile.
1. Magic Mockup
This is our favorite tool to generate the mockup on predefined templates.
Go to magic mockup site and choose the template from the filter. There are sufficient templates available for iPhone, iPad, Mac, Laptop and Other categories. You can either upload an image or provide URL to capture your mockup on the given template. The uploaded image or the screenshot of the given URL will be automatically fitted on the devices on the template. Simply switch the templates to see which one you like. It is also possible to upload different images for different devices on single template.
Click on the download button and select the size of the image to generate the mockup. The mockups can be downloaded for free but consider donating to the author if you are going to use for commercial purposes.
2. Mockup Phone
Mockupphone.com allows you to generate mobile mockups. First choose the device and upload your image to generate the mockup. You can download the mockup for free by right clicking and saving to local drive. Or subscribe to their newsletter and download the image.
3. Am I Responsive
This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
4. Multi Device Website Mockup Generator
This mockup generator is similar to the previous one with options to choose background color and devices. Only Apple devices like iMac, MacBook, iPad and iPhone are offered for mockup and you can enable or disable individual devices.
Again you should have a proper screen grabber tool to take the screenshot from the browser. Both Am I Responsive and Multi Device Mockup Generator tools are meant for testing the responsiveness of your site online on different devices. Both tools do not offer download button and you can scroll the webpage on individual devices lively on the screen.
Mockuper is another free tool allows you to convert your existing photos to mockups based on the predefined templates. There are 150+ templates available with different image sizes. You can choose the template and upload the image to see the live preview.
When you like the mockup, simply click on the download button, choose the size and save the mockup image to your local drive.
What about Placeit.net? They have the best mockups!
Magic Mockup rocks. There are quite a few really good mockup generators now though. I recently found “BrowserFrame” which is great if you want to generate mockups in a browser instead of a laptop or phone etc.. Ive used some of the paid versions for my own websites and to be honest, the majority of free ones do exactly the same job
Great list, thanks ive bookmarked it for future use.