Mockup Your Simulator Screenshots
Embedding your screen shot in device mockups
At some point as a Software Developer, you will need to mockup your screenshots for presentation or inclusion in marketing materials. I recently had to mockup my Flutter app for my client’s yearly magazine and used a free tool on the web called MockUPhone.
Here is partial magazine cover that will be out soon with my flutter app info at the bottom. This ios device picture was created with MockUPhone.
MockUPhone has several categories of devices to use for framing your screenshots and designs: IOS, Android, Windows Phone, Laptop & Desktop and TV’s. They also are amicable to requesting other devices to grow the catalog.
It’s very easy to do. My example will be on a Mac, but this can be done on Linux and Windows using simulators and folders.
- Run your app in the simulator and take the screen shots. In the IOS simulator for example, go up to the menu option of ‘File’ which the simulator is the active app and chose ‘New Screen Shot’. They save to your Desktop in this case.
2. Create a new Folder on your Desktop and drag all your screen shots into it.
