【App Store Screenshot】輕鬆製作一系列的 Mockup 圖片!

2022 年 9 月 30 日 更新

App Store Screenshot generator 封面圖片

Mockup 製作的線上工具真的很多,有些網站功能性很多,有的網站則提供相當簡便的圖片製作設定,而這邊要介紹的「App Store Screenshot」可以算是功能與模板都比較簡便的 Mockup 製作工具,特色是能快速製作出大量相似的 Mockup 圖片。

App Store Screenshot

App Store Screenshot 是一款能合成 Mockup 圖片的線上軟體,它提供簡單易懂的圖片編輯器,讓我們可以快速調整圖片排版或編輯內容,雖然它的 Mockup (實物模型) 不是最新款、數量也不多,但它主要特色是可以輕鬆製作出大量相同系列的圖片,不用花太多心思在圖片設計的排版上。


App Store Screenshot generator 首頁


App Store Screenshot 功能介紹

首先來介紹 App Store Screenshot 的圖片編輯器功能,它的功能幾乎都是在頁面的上面操作,主要分為四大功能:Background、Device、FontLayout

Background 背景顏色

首先是背景 (Background) 的部分,這邊可以設定圖片的背景顏色,先決定要使用單色 (Solid) 還是漸層色 (Gradient),然後在下面的預設顏色的選項裡決定背景顏色。選項的最左邊提供一個自訂顏色的功能 (Custom),可以用它來輸入自己想要的顏色代碼,可以使用的色碼有 RGB、HEX 跟 HSL 這三種。

App Store Screenshot generator 背景顏色


Device 裝置選擇

Device 可以切換圖片中的 Mockup 款式,它提供的 Mockup 有 iPhone、iPad 跟 Android 的幾款模型,也可以設定成無外框的純螢幕截圖 (Screenshot)。所有的 Mockup 都是在圖片中央的位置,如果要調整大小或移動它的話,就要使用 Layout 的功能。

App Store Screenshot generator 裝置選擇


Font 字體設定

Font 則是用來調整圖片裡面的文字框設定,可以放大縮小,也可以切換文字的字體跟顏色。如果移動文字框的位置的話,同樣也是要到 Layout 進行調整。

App Store Screenshot generator 字體設定


Layout 元素的位置大小調整

最後一個 Layout 則是用來進行圖片的排版,它上面會有預設的幾個排版選項,而畫面左邊會多出 3 個控制滑塊,分別能控制:

  • 文字框位置
  • Mockup 裝置位置
  • Mockup 裝置大小

App Store Screenshot generator 調整元素位置大小



如何合成並下載 Mockup 圖片

插入圖片

App Store Screenshot 要合成 Mockup 非常簡單,可以點擊 Mockup 的 空白區域,它會開啟電腦資料夾讓你上傳圖檔,或是直接從資料夾拖曳到 Mockup 的空白區域也是可以的。

它的 Mockup 都有固定的螢幕尺寸 (會標示在 Mockup 上面),如果你的圖片跟它的螢幕尺寸不符合的話,它會調整原圖的尺寸比例,來貼合它的 Mockup 螢幕,沒辦法在這邊裁切你的圖片。

圖片製作好了之後,可以點擊右上角的 PREVIEW 按鈕進行預覽。

合成 Mockup 圖片


下載圖片

如果還有地方想要修改的話,點左上角的 BACK TO EDITING 可以回到圖片編輯器畫面。

如果要下載圖片的話,就點右上角的 DOWNLOAD 按鈕。

預覽圖片


解壓縮檔案

最後你會先拿到一個「壓縮檔案」,把它解壓縮之後就可以拿到剛剛製作好的圖片了。

下載並解壓縮檔案



結語

App Store Sceenshot 真的是一款很簡便的 Mockup 線上製作工具,除了螢幕截圖跟文字內容不同之外,所有其他的圖片設定都會套用在每一張圖片上,看上去會更整潔一些。

但這樣還是有些不方便的地方,就是它圖片元素的位置都是在中間區域,只能上下移動,不能旋轉或是左右移動,而且 Mockup 沒有圖片裁切的功能,圖片尺寸只要不合就會被拉伸變形。

如果要製作 Mockup 圖片的話,也有其他很多好用的網站,模板跟 Mockup 的數量也比較豐富,像是 Mockup PhotosSmartmockups 就有非常豐富的素材可以用,而 Artboard StudioPlaceit 則有圖片編輯器可以使用,詳細內容可以參考下面的文章


延伸閱讀

利益揭露:網站內部分可見的連結/代碼有參與聯盟計劃,如果您透過這些連結/代碼購買商品或註冊會員的話,並不會有任何損失或額外費用的產生,還可能獲得些許優惠,而我僅會獲得一小部分的佣金,能幫助我持續營運這個網站,並且更有動力進行創作。

Binance 幣安推薦碼 VU3NZ3AJ
喜歡這篇文章嗎?分享給你的朋友吧