Take iOS Simulator screenshots including device frame?

M

4

80

I want to take screenshots of my iOS apps running from Xcode in the iPhone Simulator and iPad Simulator.

However, when I take screenshots, only the screen is captured. The device frame (which is shown on my desktop surrounding the iOS Simulator window) is not included in the screenshot.

How can I take screenshots of Xcode's iOS Simulator app and include the bounding hardware device frame?

Merc answered 12/11, 2012 at 11:59 Comment(4)

appdemostore.com/frameapp seems quite similar to the Android Device Art Generator. – Variscite 3/12, 2012 at 19:9

mockuphone.com will accept your simulator screenshots and wrap them with a frame. They have a variety of devices, colors, orientations (including 45 degree rotation). – Klinges 22/5, 2015 at 16:55

github.com/eflyjason/ScreenshotBuilder is a open source project to generate screenshot with frame :) – Schock 10/12, 2016 at 12:35

Try previewed.app :) – Genuine 10/3, 2020 at 0:35

T

39

On the AppStore Resource Center you can find Apple Product images that can be used to promote your app. There's also some guidelines on how to use the resources correctly.

UPDATE: Guidelines apart, a friend found a service today that does exactly what you want: PlaceIt

Tombouctou answered 12/11, 2012 at 12:30 Comment(4)

That's really useful, thank you. It's still not quite what I'm after in that ideally I do not want to have to open photoshop to do this. I'm just surprised that no one has setup a service like the Android device art generator. People provide PSD downloads of iPads, iPhones and GUI toolkits and stuff, but not this :( – Merc 12/11, 2012 at 12:36

It's not as easy, but if someone setup a service that doesn't follow Apple Marketing Guidelines it would be like "use at your own risk". Not sure about you but I prefer the extra work/risk free way. – Tombouctou 12/11, 2012 at 12:46

The only actual difference is a reflection applied over the screen (as an overlay to your screenshot). If Apple actually punish developers for not following these guidelines? I don't know, and I've seen a lot of advertising that don't follow all the rules. – Tombouctou 12/11, 2012 at 13:42

Just did this using iphone-screenshot.com instead. PlaceIt offered only lowres images in their free version whereas this link gives decent resolution. – Iluminadailwain 20/2, 2015 at 13:4

F

164

Launch the app in simulator. Then Press Cmd+Shift+5 and then click on the simulator to take the screenshot with the simulator frame.

If you hold the Option key while you shoot the image, it will save the screenshot without shadows around the bezel.

Frances answered 12/11, 2012 at 23:15 Comment(2)

My problem with this is that the simulator frame does not look anything like a real device. – Merc 13/11, 2012 at 11:15

After you press the space bar: if you hold the Option key while you shoot the image, it will save the screenshot without shadows around the bezel. – Kinch 18/12, 2018 at 19:55

T

39

On the AppStore Resource Center you can find Apple Product images that can be used to promote your app. There's also some guidelines on how to use the resources correctly.

UPDATE: Guidelines apart, a friend found a service today that does exactly what you want: PlaceIt

Tombouctou answered 12/11, 2012 at 12:30 Comment(4)

That's really useful, thank you. It's still not quite what I'm after in that ideally I do not want to have to open photoshop to do this. I'm just surprised that no one has setup a service like the Android device art generator. People provide PSD downloads of iPads, iPhones and GUI toolkits and stuff, but not this :( – Merc 12/11, 2012 at 12:36

It's not as easy, but if someone setup a service that doesn't follow Apple Marketing Guidelines it would be like "use at your own risk". Not sure about you but I prefer the extra work/risk free way. – Tombouctou 12/11, 2012 at 12:46

The only actual difference is a reflection applied over the screen (as an overlay to your screenshot). If Apple actually punish developers for not following these guidelines? I don't know, and I've seen a lot of advertising that don't follow all the rules. – Tombouctou 12/11, 2012 at 13:42

Just did this using iphone-screenshot.com instead. PlaceIt offered only lowres images in their free version whereas this link gives decent resolution. – Iluminadailwain 20/2, 2015 at 13:4

H

4

If you launch the iPhone Simulator in Xcode you can just capture that window on a Mac using the built-in application called Grab. Outputs to a number of your favorite graphics formats.

Hyacinth answered 12/11, 2012 at 12:7 Comment(13)

I hope it's as simple as that and I'm just missing a simulator option...but on my simulator using iOS 6 I just get a screen and the top bar with the time in it, not the iPhone wrapper with the home button and stuff. – Merc 12/11, 2012 at 12:14

You can do that, but it's against the Marketing License Agreement. "In your marketing materials, only use the Apple-provided badges and images in compliance with the Guidelines, misuse is a violation of the iOS App Store Marketing Artwork License Agreement" developer.apple.com/appstore/resources/marketing/index.html – Tombouctou 12/11, 2012 at 12:21

Excellent point. I just do the development, not the marketing. That said, I'm not sure that anyone could tell the difference in the bits of an exported, scaled PNG or that this is a real enforcement issue at Apple. The simulator and the provided PSD file look the same for a given device. So, in summary, non-issue. – Hyacinth 12/11, 2012 at 13:19

@Merc you need Xcode running. Otherwise get the developer to do it for you. – Hyacinth 12/11, 2012 at 13:29

Thanks Cameron, but I am a developer and use xcode, but what I'm looking for is a simpler way. I'm always looking for ways to streamline my workflow and a simple drag and drop of screenshots into a web app such as the Android one would make my life easier as I'm not a Photoshop fan :) – Merc 12/11, 2012 at 15:53

I'm not sure how anything could be less trouble than using the Simulator and Grab and then just scaling the resulting PNG. Google has to have that page because their simulator blows forcing you to use DDMS to get screen shots. – Hyacinth 12/11, 2012 at 16:8

@CameronLowellPalmer Apple removed the device frame on the simulator on the latest releases, so if you want to use the iPhone 5/iPad Mini (or anything running iOS 6+) as advertising you can't use the simulator anymore. – Tombouctou 21/11, 2012 at 12:14

@Tombouctou Only on retina simulations since it wouldn't fit on screen. If you switch to the classic-sized iPhone/iPad it works just fine in iOS 6. – Hyacinth 21/11, 2012 at 13:2

@CameronLowellPalmer Still not true for the iPhone 5, since there's only the retina version. – Tombouctou 21/11, 2012 at 13:5

@Tombouctou If your a referring to an identical to the physical phone frame. Then, yes, it only does that on iPhone 4. However, if you are talking about a universal iPhone/iPad look. Then, no, it is quite usable. But this post was about being lazy and avoiding Photoshop. So for someone that wants a good looking result without effort, it suffices. – Hyacinth 21/11, 2012 at 13:10

I understand nothing. The answer is useless or incomplete. What a hell a Grab you talking about? – Frulla 15/8, 2023 at 6:43

@AlexanderAlgashev What a juicy language you select to express your frustration at the fact that an 11 year old answer is not aware of changes. Did you use your favorite search engine on search terms like "Mac Grab"? I did and I got as second hit discussions.apple.com/thread/250037676 Please be more careful with your phrasing, the one being put into a bad light is otherwise you. – Williamswilliamsburg 15/8, 2023 at 6:48

The answer is from 2012 - You could use Preview now. File -> Take Screenshot. There are a lot of solutions to this problem – Hyacinth 17/8, 2023 at 7:22

P

1

There's no way to do this using Xcode, however you can just use this command to upload your screenshot to a third party (WithFrame) that adds the device frame.

xcrun simctl io booted screenshot shot.png && curl -F '[email protected]' "https://shot.withfra.me/new"

You can also specify frame's color by using ?color=red

More info can be found here

Postmaster answered 28/1, 2023 at 19:33 Comment(3)

That service doesn't seem to work that well at the moment. 413 Request Entity Too Large – Spector 23/5, 2023 at 19:9

@MikaelGrön the uploaded file has to be up to 5 MB. – Postmaster 24/5, 2023 at 20:26

My screenshot was 1.7 MB, and I got 413 Request Entity Too Large. – Wadding 16/2 at 14:54

Recommended topics

Hot tags