Importing Mockups in ScreenshotX (Patreon)

Video Tutorial

Video: https://www.youtube.com/watch?v=AKH1BDBUELk

ScreenshotX will allow you to import mockups directly to it. I will setup a website to have some templates you can download directly. You can import most Hishoot template as well.

Importing Mockups

https://junesiphone.com/screenshotapp/iPXTest.zip

Visit the link above in safari and download this zip, it will download to the files.app.

Open the files.app and unzip this file. You will see 2 files an image and a .cfg.

Open screenshotX tap the options button in the top left. Choose import mockup.

This will open the files app, choose the image, then press the options again, choose import mockup and import the .cfg. You must import both before it will show.

That's it, you've imported your first mockup. It is now available under the Imported section. 

Note: When you apply a screenshot, it does not show a preview, when you press save it will generate the image.

Note2: When using a Hishoot template, you must rename the mockup and .cfg file. These two need to be the same name.

Importing a Hishoot template

https://twitter.com/TeboulDavid1/status/1323222145384722437?s=20 

https://drive.google.com/file/d/15KyAOZnz5GGIyVosbjJjCZyNJ6nj-6Z1/view 

Here is the link to the creator and download to a Hishoot template.

Download the iPhone12ProMax.apk, rename it to iPhone12ProMax.zip and unzip it. Look in iPhone12ProMax > assets and you will find template.cfg. Keep this file. Go to iPhone12ProMax > res > drawable you will find glare.png Keep this file.

You now have both files to import to ScreenshotX but you need to rename them. 

The template.cfg and glare.png need to have the same name. Example rename to iP12Max.png and iP12Max.cfg now you can import them to ScreenshotX.

ScreenshotX imports from the Files app so you must get these files in the Files app. You can do this by airdrop, downloading from Safari, or transferring from mac or pc. 

Note: When downloading .apk from Safari, the Files app will not be able to change the extension to .zip you must use an external app like iZip to do this converting.

Making your own template

If you want to make your own template this is how you do it.

There is two requirements. 

• 1: An image with the screen cut out preferably with a background
• 2: A config file stating various information.

The image is the mockup, this shows a phone and in the phone screen a selection is cut out where the screenshot will go. When a mockup is generated the screenshot goes under the mockup.

The config file is a text file and must be named with the extension .cfg. This is commonly found in Hishoot templates for android.

Here is an example .cfg file from the template I made above.
{
"name":"iPXTest",
"author":"JunesiPhone",
"left_top_x":629.5,
"left_top_y":147,
"right_top_x":1370.5,
"right_top_y":147,
"left_bottom_x":629.5,
"left_bottom_y":1852.2,
"right_bottom_x":1370.5,
"right_bottom_y":1853.9,
"corner_radius":50,
"template_width":2000,
"template_height":2000
}

This is the minimum needed to get screenshotX to generate the full mockup. How you get this information is up to you, but I suggest using your graphic program. 

Example: I use Affinity Designer and when making a mockup I take the pen tool and draw out (in 4 points) where the screenshot is going to go. Then I can use the node tool to get the location of each of those points. 4 points top left, top right, bottom left, and bottom right. This is where you get the left_top_x, left_top_y and so on.

The corner_radius will round the corners, but if you use a solid background you don't need it. 

template_width and template_height are very important as all calculations are based off that, so make sure this matches your mockup image dimensions.

The author will be shown when saving the mockup.

That's it for now. If you have questions or issues please let me know.