2024 年 3 月 7 日 更新
Mockup 製作的線上工具真的很多，有些網站功能性很多，有的網站則提供相當簡便的圖片製作設定，而這邊要介紹的「App Store Screenshot」可以算是功能與模板都比較簡便的 Mockup 製作工具，特色是能快速製作出大量相似的 Mockup 圖片。
追蹤數位小幫手社群平台：Instagram、Twitter…等等。
App Store Screenshot
App Store Screenshot 是一款能合成 Mockup 圖片的線上軟體，它提供簡單易懂的圖片編輯器，讓我們可以快速調整圖片排版或編輯內容，雖然它的 Mockup (實物模型) 不是最新款、數量也不多，但它主要特色是可以輕鬆製作出大量相同系列的圖片，不用花太多心思在圖片設計的排版上。
App Store Screenshot 功能介紹
首先來介紹 App Store Screenshot 的圖片編輯器功能，它的功能幾乎都是在頁面的上面操作，主要分為四大功能：Background、Device、Font 跟 Layout。
Background 背景顏色
首先是背景 (Background) 的部分，這邊可以設定圖片的背景顏色，先決定要使用單色 (Solid) 還是漸層色 (Gradient)，然後在下面的預設顏色的選項裡決定背景顏色。選項的最左邊提供一個自訂顏色的功能 (Custom)，可以用它來輸入自己想要的顏色代碼，可以使用的色碼有 RGB、HEX 跟 HSL 這三種。
Device 裝置選擇
Device 可以切換圖片中的 Mockup 款式，它提供的 Mockup 有 iPhone、iPad 跟 Android 的幾款模型，也可以設定成無外框的純螢幕截圖 (Screenshot)。所有的 Mockup 都是在圖片中央的位置，如果要調整大小或移動它的話，就要使用 Layout 的功能。
Font 字體設定
Font 則是用來調整圖片裡面的文字框設定，可以放大縮小，也可以切換文字的字體跟顏色。如果移動文字框的位置的話，同樣也是要到 Layout 進行調整。
Layout 元素的位置大小調整
最後一個 Layout 則是用來進行圖片的排版，它上面會有預設的幾個排版選項，而畫面左邊會多出 3 個控制滑塊，分別能控制：
- 文字框位置
- Mockup 裝置位置
- Mockup 裝置大小
如何合成並下載 Mockup 圖片
插入圖片
App Store Screenshot 要合成 Mockup 非常簡單，可以點擊 Mockup 的 空白區域，它會開啟電腦資料夾讓你上傳圖檔，或是直接從資料夾拖曳到 Mockup 的空白區域也是可以的。
它的 Mockup 都有固定的螢幕尺寸 (會標示在 Mockup 上面)，如果你的圖片跟它的螢幕尺寸不符合的話，它會調整原圖的尺寸比例，來貼合它的 Mockup 螢幕，沒辦法在這邊裁切你的圖片。
圖片製作好了之後，可以點擊右上角的 PREVIEW 按鈕進行預覽。
下載圖片
如果還有地方想要修改的話，點左上角的 BACK TO EDITING 可以回到圖片編輯器畫面。
如果要下載圖片的話，就點右上角的 DOWNLOAD 按鈕。
解壓縮檔案
最後你會先拿到一個「壓縮檔案」，把它解壓縮之後就可以拿到剛剛製作好的圖片了。
結語
App Store Sceenshot 是一款很簡便的 Mockup 線上製作工具，除了螢幕截圖跟文字內容不同之外，所有其他的圖片設定都會套用在每一張圖片上，看上去會更整潔一些。
但這樣還是有些不方便的地方，就是它圖片元素的位置都是在中間區域，只能上下移動，不能旋轉或是左右移動，而且 Mockup 沒有圖片裁切的功能，圖片尺寸只要不合就會被拉伸變形。
如果要製作 Mockup 圖片的話，也有其他很多好用的網站，模板跟 Mockup 的數量也比較豐富，像是 Mockup Photos、Smartmockups 就有非常豐富的素材可以用，而 Artboard Studio 或 Placeit 則有圖片編輯器可以使用，詳細內容可以參考下面的文章。
延伸閱讀
- 12 款 Mockup 網站工具介紹，直接在線上合成圖片！
- 【Placeit】擁有超多種類的 Mockups，實物模型的顏色也能改！
- 【Smartmockups】合成專屬的情境圖！讓你的圖片更專業！
- 【Mockup Photos】製作高質量的產品情境圖！種類多又可以免費下載~
原網站｜數位小幫手digitalyoming.com( 未經許可，禁止轉載 )
原網址｜https://digitalyoming.com/app-store-screenshot-generator/