為 iOS App 畫面加上美美的 iPhone 外框 (frame) 和文字說明

彼得潘的 iOS App Neverland

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

4 min readFeb 19, 2017

許多 App Store 的 screenshot 都是結合 iPhone 外框圖片和文字說明，比方以下 FB Messenger 的例子:

加上外框其實很簡單，從 Xcode 9 開始，iPhone 模擬器就貼心地包含黑色外框。

只要將滑鼠游標移到模擬器上，按住 Shift + Command + 4 後，再按空白鍵，變成視窗截圖模式後，再按左鍵即可截取整個模擬器視窗。

如果想要更好，希望做出結合外框和文字說明的效果，則可照以下步驟製作 :

1 將 App 畫面截圖。

iOS App 畫面的螢幕截圖

從 iPhone 實機螢幕截圖

medium.com

2 製作類似上架 App 的專業外框和文字說明。

Screenshot creator for the Apple App and Google Play Store

We bring together everything that is required to design and generate screenshots for your iOS and Android apps in a…

appscreens.com

Create customized App Store screenshots

Pick one of predesigned screenshot templates, add your message, tweak the colors and get app screenshots of ALL…

www.davinciapps.com

Promotee on the Mac App Store

Read reviews, compare customer ratings, see screenshots, and learn more about Promotee. Download Promotee for Mac OS X…

itunes.apple.com

‎SceneShot

‎Create stunning renders with SceneShot! * Drag the device to any angle * Change the screen with your screenshots and…

apps.apple.com

MockUPhone

MockUPhone is a free tool that helps you wrap app screenshots in different mobile devices. Support iPhone mockup, iPad…

mockuphone.com

Magic Mockups * Free real-life mockup generator

Place your product screenshot in real-life environment

magicmockups.com

How to Make Great App Store Screenshots

What do apps like Cut the Rope 2, 7 Minute Workout Challenge, and Scribblenauts Remix all have in common? Click the…

www.raywenderlich.com