Participating Frequently

Question

How do I create a multiple screenshots template for mobile app stores?

Forum|Forum|3 years ago
January 25, 2023
2 replies
1712 views

I did this a few years ago by downloading a PSD template that had a mockup for iPhone app store screenshots for a published app. What was great was that you could move the layer of the iPhone between two of the artboards and it would display across both of them even though there were clear gaps between the artboards in Photoshop.

Unfortunately, I had a hard drive corrupt that contained those files and I've looked around and see that most designers charge a fee to download these templates so I'm wondering how I can create this myself.

Here's an example of what I'm looking to do: https://dribbble.com/shots/14589814-App-Store-Screenshots

Surely it cannot be difficult to create all the artboards like this where I'm able to have one layer displayed across multiple artboards?

How can I set up and create this template for my app project where i can have vector layers displayed across multiple screenshots?

Actions and scripting

This topic has been closed for replies.

PECourtejoie

Community Expert

Hello, I think that those are not artboards, but sort of clipping masks, or some kind of Layer mask that hides the content, in order to show on two "containers"

See this video on the topic: https://www.youtube.com/watch?v=tsykw4V2HeA

M

mattw75650446Author

Participating Frequently

Great thanks I will take a look at this video and report back to see if that shows me how to do this 🙂

PECourtejoie

Community Expert

Basically, you create a dozen shapes on a layer, (create a rectangle path, click and drag on the widget for rounded corners.

Switch to the moVe tool, then alt-drag to create copies. Select all layers, then CTRL+E to merge them.)

Then put all the content in layers that are clipped on top of the shapes.

(ALT+click between the layer with shapes, and the content layers. ALT+click between the other layers on top, to add them in the clipping mask)

Once you move an item "between" two shapes, it does not show where there is no shape.

You can also add layer styles, and color the background.

c.pfaffenbichler

Community Expert

Artboards are kind-of top-level Groups, so one Layer cannot practically be in both Artboards.

But two instances of one Smart Object could be in the two Artboards.

And if they are linked moving the one would also move the other … BUT moving one completely outside its Artboard causes it to jump.

Are you sure the template used Artboards and not just some set-up with Layer Masks or overlays?

M

mattw75650446Author

Participating Frequently

Thanks for your reply, no I'm not sure I was just guessing it was an artboard but it could be some other technique.

I think in the layers box there was each of the screenshot windows and they were all lined up with a gap between them horizontally and then how it worked is if you dragged a vector layer from one to the other it would display one half in one of the screenshot windows and the other half in the one you are moving from, just like in the example I provided above.

Do you know the best way to achieve this?

c.pfaffenbichler

Community Expert

What do you need to create ultimately – one jpg/png/… for each Artboard or one images containing them all?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded