64

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?

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Kieran
  • 5,906
  • 3
  • 24
  • 34
  • 3
    http://www.appdemostore.com/frameapp seems quite similar to the Android Device Art Generator. – mlc Dec 03 '12 at 19:09
  • 2
    http://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). – TPoschel May 22 '15 at 16:55
  • https://github.com/eflyjason/ScreenshotBuilder is a open source project to generate screenshot with frame :) – He Yifei 何一非 Dec 10 '16 at 12:35
  • Try https://previewed.app/ :) – GRS Mar 10 '20 at 00:35

4 Answers4

133

Launch the app in simulator. Then Press Cmd+Shift+4 followed by space 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 beze

Sam B
  • 27,273
  • 15
  • 84
  • 121
Sapan Diwakar
  • 10,480
  • 6
  • 33
  • 43
  • 1
    My problem with this is that the simulator frame does not look anything like a real device. – Kieran Nov 13 '12 at 11:15
  • 18
    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. – balazs630 Dec 18 '18 at 19:55
37

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

Marcelo
  • 1,471
  • 3
  • 19
  • 22
  • 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 :( – Kieran Nov 12 '12 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. – Marcelo Nov 12 '12 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. – Marcelo Nov 12 '12 at 13:42
  • Just did this using http://iphone-screenshot.com/ instead. PlaceIt offered only lowres images in their free version whereas this link gives decent resolution. – Tore Rudberg Feb 20 '15 at 13:04
2

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.

pkamb
  • 33,281
  • 23
  • 160
  • 191
Cameron Lowell Palmer
  • 21,528
  • 7
  • 125
  • 126
  • 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. – Kieran Nov 12 '12 at 12:14
  • 1
    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" https://developer.apple.com/appstore/resources/marketing/index.html – Marcelo Nov 12 '12 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. – Cameron Lowell Palmer Nov 12 '12 at 13:19
  • @Kieran you need Xcode running. Otherwise get the developer to do it for you. – Cameron Lowell Palmer Nov 12 '12 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 :) – Kieran Nov 12 '12 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. – Cameron Lowell Palmer Nov 12 '12 at 16:08
  • @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. – Marcelo Nov 21 '12 at 12:14
  • @Marcelo 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. – Cameron Lowell Palmer Nov 21 '12 at 13:02
  • @CameronLowellPalmer Still not true for the iPhone 5, since there's only the retina version. – Marcelo Nov 21 '12 at 13:05
  • 1
    @Marcelo 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. – Cameron Lowell Palmer Nov 21 '12 at 13:10
  • I understand nothing. The answer is useless or incomplete. What a hell a Grab you talking about? – Alexander Algashev Aug 15 '23 at 06:43
  • 1
    @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 https://discussions.apple.com/thread/250037676 Please be more careful with your phrasing, the one being put into a bad light is otherwise you. – Yunnosch Aug 15 '23 at 06:48
  • The answer is from 2012 - You could use Preview now. File -> Take Screenshot. There are a lot of solutions to this problem – Cameron Lowell Palmer Aug 17 '23 at 07:22
0

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 'file=@shot.png' "https://shot.withfra.me/new"

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

More info can be found here

Max Blank
  • 46
  • 2
  • 4