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

[mattw75650446]

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?

[c.pfaffenbichler]

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? 

[mattw75650446]

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]

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

[mattw75650446]

So when i did this before I had all the separate screenshots in a row (10) and then i had each screenshot saved (by deleting all the other layers so there was only 1 and then saving it. To PSD (for editing) and PNG (for submission to app stores)

[c.pfaffenbichler]

---

@mattw75650446 wrote:

So when i did this before I had all the separate screenshots in a row (10) and then i had each screenshot saved (by deleting all the other layers so there was only 1 and then saving it. To PSD (for editing) and PNG (for submission to app stores)

---

So this was a manual affair and not a one-step-export of the 10 pngs? 

[PECourtejoie]

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

[mattw75650446]

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

[PECourtejoie]

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.