【Placeit】擁有超多種類的Mockups,實物模型的顏色也能改!

Last Updated on 2021 年 11 月 4 日 by 小幫手

Placeit mockup tutorial 封面圖片

當我們要製作圖片的時候,Mockup 網站也是可以使用的工具之一,利用這類型的網站可以合成許多「實物模型圖」或是「產品情境圖」,就算是設計新手或一般人,也都能製作出精美的圖片。

而這次要介紹的「Placeit」也具有這種合成的功能,它提供的 Mockup 種類相當多元,並非只侷限於電子產品,如果其他的 Mokcup 網站沒有你想要的模板的話,或許可以到 Placeit 這邊找找看!

Placeit 首頁及註冊

如果你還沒有用過或註冊過「Placeit」的話,可以先點擊下面的按鈕進入 Placeit 的首頁:

進入 Placeit 首頁之後,可以點擊首頁右上角的 Free Account 來打開它的註冊介面。

Placeit首頁


Placeit 的註冊流程很簡單,雖然沒有 Google 或 FB 等快速登入的方式,但這邊也只需要填入「電子信箱」跟「密碼」就可以註冊。

至於為什麼要註冊呢?是因為 Placeit 裡面雖然有免費的 Mockup 模板可以製作合成圖片,但想要下載就得註冊它們的帳號,所以這邊可以把帳號直接先註冊起來。

Placeit註冊




Placeit Mockups 預覽與篩選

前往 Placeit Mockup 頁面

Placeit 的帳號註冊完畢之後回到首頁,可以看到它上面有一排的選單,Placeit 本身是一個多功能的 DIY 設計軟體,所以會有其他的選項可以使用,但這邊因為要專精於 Mockup 的合成圖片製作,所以直接點擊它選單的 Mockups 就好。

( Mockups 選單下的「子選單」稍微看一下就好,裡面會有比較完整的功能跟分類)

點擊Placeit首頁左上角的Mockups選單



下面這張圖就是 Placeit 所有 Mockups 的展示區, 左邊是它的 Mockup 的「標籤篩選器」,右邊則是 Mockup 的「預覽圖」。

Placeit mockup頁面



切換暢銷/最新/免費模板

一開始可以先找免費的模板來試試看,在左邊篩選器的最上面有一個下拉選單可以切換,這邊的選項有:

  • Mixed (混合)
  • Best Selling (最暢銷)
  • Newest (最新)
  • Free (免費)

把這邊的選項改為 Free,就可以讓右邊優先顯示免費的Mockup,而它預覽圖的左上角會顯示 FREE 的字樣,表示這個模板是免費的。

點擊切換 最佳銷售/最新/免費模板


優先顯示免費模板



Placeit 的多功能 Mockup 篩選器

切換到免費 Mockup 優先顯示之後,你可以點擊左邊篩選器的「分類」或「標籤」來篩選出你想要的圖片模板,以下面這張圖來說,我點擊 Book 這個模板類型,它右邊就會自動篩選出跟書籍相關的 Mockups 預覽圖。

書籍的免費Mockups



Placeit 的篩選器除了 Mockups 的實物模型分類之外,還有其他類型的分類標籤,像是「Template Types」可以篩選 JPG、PNG 或 MP4 的範本格式;「Gender」可以篩選出圖片情境裡的人物類型;「Age」可以篩選出圖片情境裡的人物年齡層;甚至可以用「Ethnicity」的標籤來篩選圖片人物的種族,像是華人、印度人或是黑人,非常特別的篩選功能!

因此你可以使用這些分類或標籤,來更精準地找出你想要的圖片模板。

使用Placeit的標籤篩選器來篩選Mockups



各種不同的 Mockups

右邊的預覽圖,上面都會標示要放多大張的圖片,把滑鼠移過去可以先看看它 Mockup 合成的效果如何。

口罩Mockup
畫板mockup



除了以上的圖片模板之外,Placeit 提供的模板種類真的很多元,除了一般常見的衣服或是電子產品之外,這裡我也找了幾個比較特別的 Mockups 列在下面的圖片裡,像是展示牌、瑜珈、黑膠唱片、手環、泳衣等類型它這邊都有。

其他各式各樣的Mockups種類





Placeit Mockup 編輯器

打開 Placeit Mockup 編輯器

在 Placeit 的 Mockup 頁面中找到喜歡的圖片模板後,就可以點擊模板的「預覽圖」來打開 Placeit 的 Mockup 編輯器介面(如下圖)。如果有在使用其他圖片設計軟體的人,可能會覺得它的編輯器功能很少,但如果跟其它 Mockup 網站的功能相比的話,Placeit 的功能算是很豐富的了!

Placeit的Mockup圖片編輯器



插入你的圖片到模板中

由於我選的模板同時有手機 (iPhone) 跟書本 (Book) 兩個模型,所以在 Placeit 的編輯器中,可以看到左側會有兩個很顯眼的 藍色按鈕,而這兩個按鈕分別就是對應到圖裡面那兩個實物模型 (Mockup)。

Placeit 的 Mokcups 有很多都只有一個實物模型可以合成,但也有一些模板同時有超過三個以上的模型可以合成,不過這些 Mockups 在編輯器裡面是沒辦法被刪除或是移動的,因此選擇模板的時候要注意一下。

接著你可以點擊這些藍色按鈕來上傳你想要合成的圖片設計,或者是把圖片從電腦/裝置中拖曳到這些藍色按鈕上也行。

Insert image
從裝置中拖曳圖片到這個按鈕裡面


圖片裁剪

當你上傳圖片的時候,它會跳出一個裁剪圖片的視窗,淺色的部分就是會合成在實物模型外觀上的圖片設計,可以用滑鼠調整圖片的位置,或是利用下面的 控制滑塊 來調整圖片的大小,當圖片的「位置」跟「大小」都確認好了之後,就可以按下 Crop 來完成圖片裁剪。

裁剪圖片



完成基本的產品情境圖

當我把這兩個實物模型的圖片都上傳裁剪之後,一張基本的產品情境圖就算差不多了(如下圖),但其實還可以為這張圖添加或改變其他的設計元素,讓我們繼續往下看。

完成mockup合成圖



添加文字與標誌(Logo)

前面有提到 Placeit 的 Mockup 編輯器功能很多,就是因為它這邊除了可以合成圖片之外,還可以額外添加「文字」、「標誌 (Logo)」等設計元素,或是針對實物模型之外的部分進行修改。

以下面這張圖來說,我前面先完成了中間的實物模型合成工作,接著我可以點擊左邊的 TextLogo,來為這張圖片添加其他的文字跟標誌,標誌可以隨意移動或是裁切,而文字則可以改變顏色、大小跟字型,算是非常基本的圖片設計功能了。

插入文字跟標誌Logo



改變圖片背景或實物模型顏色

再來看看圖片編輯器右邊的功能區,它這邊有三種功能可以使用:

  1. Book Color
  2. Background
  3. Add Graphic

Placeit 的 Mockups 有些會具有顏色調整的功能,只要實物模型可以換色的話,右邊就會出現這個設定選項,像我所選的這個模板有兩個實物模型,而其中只有「Book」的模型顏色是可以調整的,另外一個「手機」則沒有辦法換色。每個模板狀況都不一定,有些看預覽圖可以事先知道,不然就是要點進來編輯器的介面看看能不能換色。

而「Background」可以改變模板的背景顏色,也可以選用它內建的背景圖片或是上傳自己的圖片,除此之外,圖片也可以藉由「Add Graphic」來插進這個圖片模板的任何位置,不過右側這邊的功能不一定每個模板都有,剛好我選的這個模板可以設定的功能比較多。

改變顏色、背景顏色或底部花紋




下載/儲存草稿/加入最愛/分享

編輯器的右上方有一排功能按鍵,除了左邊的復原/重作功能之外,其它的功能分別是:

  1. Free Download (免費下載):圖片設計完成之後,可以點這個按鈕先下載到 Placeit 的下載區裡面。
  2. Save Draft (儲存草稿):如果圖片還在設計當中,可以先儲存成草稿,避免因其它因素而前功盡棄。
  3. Favorite (加入最愛):如果覺得這個模板不錯用的話,可以點 Favorite 加入我的最愛,就不用在篩選器那邊慢慢找啦。
  4. Share (分享):圖片除了可以下載之外,也可以用這個分享的按鈕來取得這個設計的連結網址,輕鬆把設計分享給其他人。

點擊 Free Download



下載 Mockup 圖片

Placeit 的下載並不會直接下載到電腦或裝置上,而是放在它的下載區 (My Downloads) 裡面,因此下載流程可能會比較長一點。這邊圖片設計完之後,先點擊編輯器上面的 Free Download,此時會跳出下面這個下載畫面,然後繼續點擊它的 Free Download 按鈕。

點擊 Free Download



然後這張圖片或產品情境圖就會下載到 Placeit 的「My Downloads」裡面,最後點它的 Click here to download ↓ 就可以成功地把這張設計下載到自己的電腦或裝置上了!

點擊下載mockup圖片



產品情境圖成品

下面這張圖就是使用 Placeit 的 Mockup 製作出來的產品情境圖,我把這個模板的功能全都用上了,連字體也稍微調整過,整體看上去還算 OK,而且 Mockup 的合成效果也很不錯。

產品情境圖完成




Placeit 價格方案

如果覺得 Placeit 的功能不錯用,並且也常常需要使用這種 Mockup 工具來合成圖片的話,其實也可以考慮它的付費方案 Placeit Pricing。Placeit 的付費有分「單次購買」跟「訂閱」兩種類型:

單次付費方案

Placeit的單次付費方案,就是針對特定的模板進行單次購買,例如用 $7.95 的價格來買下這個 Mockup,不需要再付訂閱費用。不過單次購買的話,價格都會偏高。

Placeit單次購買Mockup


訂閱方案

「訂閱方案」相對於「單次購買」來說會划算一點,以 Mockup 的模板為例,訂閱方案能解鎖多達三萬多種的 Mockup 付費模板 (包括圖片跟影片),而且隨意使用,不用擔心篩選到的 Mockup 類型沒有免費可用的問題。而訂閱有「年付」「月付」的方案可以選擇:

  • 每月 USD $14.95 (約台幣 450/月)
  • 每年 USD $89.69 (約台幣 225/月)

Placeit訂閱方案 (Pricing)



結語

Placeit 收納的 Mockups 種類跟數量真的非常多,如果再加上付費版的話,一般應該很難用得完,但讓我驚豔的地方是它的實物模型 (Mockup) 的顏色可以更換!這讓圖片設計的自由度大大提升!而且還有不同的圖片設計功能,如果拿 Placeit 跟其它的 Mockup 網站相比,Placeit 的功能是相對豐富的。

另外,如果想看看還有哪些 Mockup 網站可以用的話,我也有寫一些相關的文章放在下面的「延伸閱讀」,可以參考看看。


延伸閱讀


aifian APP推薦活動


最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話

→ 歡迎 留言分享

→ 歡迎點下面這張圖來【贊助】支持我!讓我繼續為你創作更多內容!

贊助我一杯咖啡


留言區