Mockup網站【Artboard Studio】打造質感的產品情境圖

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

Artboard Studio 封面圖片

現在很多人製圖時都會使用所謂的 Mockup 網站,因為它省時又方便,可以製作各式各樣精美的「產品情境圖」,而這次要介紹的「Artboard Studio」比較不同,除了基本的 Mockup 功能之外,它內建的圖片編輯器是令人比較驚豔的地方!跟其他 Mockup 網站相比之下,有很明顯的差別。

為什麼要使用 Artboard Studio?

在開始之前,先了解一下 Artboard Studio 可以做什麼?它是一個專業的 Mockup 網站,主要提供各種產品的圖片 Mockup (模型) 服務,Mockup 類型比較常見的有手機、電腦、衣服、盒子….等等。

只要我們準備好我們自己的「設計作品」或「圖片素材」,就可以上傳到這些 Mockup 網站,快速地跟它的圖片 Mockup 合成,變成一張「合成圖」或「模擬圖」。

由於很多產品的 Mockup 都會有一個圖片背景或人物的存在,所以我們製作出來的圖片,會有各種不同的使用場景,這類型的圖片通常也被稱為 產品情境圖產品模擬圖

那為什麼要一定要使用 Mockup 網站?最主要就是可以「省時間」,製作出來的產品圖片也比較「專業」,畢竟現在大部分的人都挺忙的,有這麼專業又好用的製圖網站工具,就不需要再花時間去學複雜又專業的設計軟體了。


Artboard Studio 註冊

首先可以點擊下面的按鈕進入 Artboard Studio 的網站,這個網站雖然目前沒有中文版,不過別擔心,文章裡面會有一些基本的操作教學,讓你可以快速了解怎麼去使用它。

進入 Artboard Studio 的首頁之後,雖然它可以免費使用,但我們還是可以先註冊一個帳號,這樣可以使用的功能會比較完整。要註冊帳號的話,可以點擊首頁右上角的 Start Designing,進入註冊畫面。

Artboard Studio 首頁


Artboard Studio 的註冊方式很簡單,只要你有 FacebookGoogle 的帳號,都可以快速註冊,如果你要使用電子信箱註冊當然也是可以的。

Artboard Studio 註冊


快速註冊之後,Artboard Studio 可能會詢問你幾個簡單的問題,有點像是問卷調查那種,下面答案都有下拉式選單可以選,很快就可以填完了。填寫完之後,就點下面的 Submit and Continue

Artboard Studio 註冊問答



Artboard Studio 的範本與物件

註冊完 Artboard Studio 帳號之後,你可能會先進入它的應用程序 (app) 介面,但因為一開始都是一片空白,我建議先回到 Artboard Studio 的首頁來看看它有哪些內容。首先你可以打開首頁上面選單的 TemplatesItems,它裡面會有各種不同的產品範本跟 Mockup 分類。

查看 Artboard Studio 首頁的模板跟物件選單



Artboard Studio 範本

「Templates」裡面就是有各種圖片範本,它可能由同一種產品不同產品所組成的,除了背景圖片之外,很多都還會加上一些裝飾性的圖片,Artboard Studio 目前範本的類型主要有下面這幾個:

  • Print Templates
  • Design Templates
  • Apparel Templates
  • Outdoor Templates
  • Social Media Templates
  • Artwork Templates
  • Packaging Templates

這些範本基本上真的都很好看,看起來是有精心設計過,不過大多數都有用到付費版的元素,而且這邊看不出哪一個是付費版的範本,所以如果你只有免費版的話,這邊的範本當作設計參考就好。

Artboard Studio 的Mockup模板/範本總覽



Artboard Studio 物件

再來是 items 的部分它這邊的 Mockup 就比較單一了,也就是一個個的物件模型,有些是裝飾性的物件,有些是可以合成的圖片 Mockup,展示圖的右上角如果有一個綠點,就代表這個圖是「付費版」的。Artboard Studio 的 Mockup 物件種類其實滿多的,有下面這幾種:

  • iPhone Mockups
  • Mug Mockups
  • Paper Mockups
  • Envelope Mockups
  • Bag Mockups
  • Print Mockups
  • Sticker Mockups
  • T-Shirt Mockups
  • Packaging Mockups
  • Business Mockups
  • Branding Mockups
  • Menu Mockups
  • Card Mockups
  • Bottle Mockups
  • Apparel Mockups
  • Box Mockups
  • Postcard Mockups
  • Stationery Mockups
  • Greeting Card Mockups
  • Cosmetic Mockups
Artboard Studio 的Mockup物件總覽



從這個模板開始創作

點擊這些圖片物件可以看看它裡面的圖片或模板說明,想用這個物件開始創作的話,就點中間那個 Start With This Items 按鈕,進入 Artboard Studio 的圖片編輯器介面。

從某個物件Mockup開始



進入圖片編輯器介面

下面這張圖就是 Artboard Studio 的圖片編輯器操作介面,都是全英文操作的,上下左右都有不同的功能可以用,而你剛剛選擇的物件模板也會放在中間的主畫板裡面。(看不懂的話,可以用瀏覽器的翻譯工具翻譯)

Artboard Studio application





如何插入自己的設計與圖片?

Place Your Design

我們延續上面所選的那個圖片模板,由於它是 iPhone12 的 Mockup,所以你可以看到編輯器的右邊也會出現一個 iPhone 12 的選項,點擊它之後,下面會出現一個 Place your design 的選項,不過剛好這個 Mockup 是由不同的模板組成的,所以它還會有一個下拉選單可以打開。(大多數都沒有下拉選單)

它裡面會展示出各個模板的位置,點擊一個你想放的位置,它會打開另一個 Mockup 編輯器的介面,那是專門讓你放設計或圖片用的。

選擇一個Mockup,放進你的設計作品
Artboard Studio會開啟另一個新的設計模板分頁



Mockup 編輯器

進入 Artboard Studio 的 Mockup 編輯器之後,你要做的就是把你的圖片設計放進這個畫板當中。

把你的設計放進新分頁的畫板當中



查看合成效果

當你插入圖片之後,可以按上面的索引標籤,回到編輯器的主畫板當中,看看它合成的效果如何。

回到主畫板,查看模板放進設計照片的結果



調整 Mockup 圖片的大小跟位置

如果你對它展示的合成效果不太滿意的話,可以隨時回到它的 Mockup 編輯器來調整圖片的大小跟位置,以下面這張圖來說,點擊畫板中的圖片,可以利用它旁邊的邊框來快速調整或拉伸圖片大小,右邊也有物件設定可以調整這個物件的位置、大小、角度透明度

模板分頁裡的圖片可以隨時調整大小跟方向位置



完成所有 Mockup 工作

但剛好我選的這個模板是有很多 Mockup 可以用的,所以我繼續把其他的 Mockup 都插入圖片,來完成這個圖片設計。

把所有模板都放入照片



匯出圖片

當我們把圖片設計完成了之後,就可以點編輯器右下角的 Quick ExportExport your project,來選擇你要匯出的圖片格式。

它這邊有提供 PNGJPEG 兩種圖片格式的下載,照片尺寸也有「一倍」跟「兩倍」的選項可以選。

把成品匯出到你的裝置上




Artboard Studio 其他功能介紹

開啟一個新的空白專案

如果你想要從頭開始設計,你可以隨意點一個 Mockup 範本進去,把全部的設計元素都刪除掉;或者是在下圖這個畫面當中,點擊上面的 Add New Blank Project 來新增空白的專案。

開啟一個新的空白專案



工具欄 (功能選單)

打開新的空白設計之後,就跟前面一樣會來到 Artboard Studio 的圖片編輯器介面,在右邊的介面中,主要都是畫板、圖片或是 Mockup 的功能設定;而左邊則會有一排的工具欄可以打開它,最上面那個加號 是 Add items,可以找到各種物件的 Mockup 模板,雖然大多數都是「Pro 版」的,不過免費的其實也不錯用。

右邊可以進行畫板的設定,左邊可以打開工具列來使用Mockup或其他功能



插入設計元素或 Mockup

從裡面找出你想用的設計元素或 Mockup,用滑鼠就可以把它拖曳到主畫板當中。

把Mockup拖曳進去主畫板當中



各式各樣的 Mockups

可以看到 Artboard Studio 提供的物件元素跟 Mockups 很多樣,它在主畫板當中的位置跟大小隨時都可以調整,而這些物件之間的屬性跟層級都會顯示在編輯器的右側那邊。

以下面這張圖為例,第四個「Colored Pencil Cup」就是一般裝飾用的物件(圖片),所以它名稱旁邊只會有簡單的縮圖。

而上一層的「Spiral Notebook Mockup」則是可以再插入圖片的 Mockup 物件,由於它比下面的「Pencil Cup」還高,所以在主畫板當中它會擋住下層的物件,另外,這些具備 Mockup 功能的物件,旁邊的縮圖都會有一個藍色圖示框,可以雙擊打開他們的 Mockup 編輯器介面。

放滿各種Mockup的主畫板



我在畫板中插入的物件裡面,有一個物件 (衣服) 就跟前面一樣有下拉式的選單,打開下拉選單會有不同的 Mockup 位置可以讓你放圖。

有些Mockup會有比較多的細項可以放進你的設計



調整物件的上下層級

這些物件的上下層順序都是隨時可以做調整的,用滑鼠點擊拖曳,把它調整到你想要的位置即可。

可以拖曳這些Mockup的位置,來調整彼此之間的上下層關係



外部圖庫資源

如果你臨時想要找其他的圖片或照片元素,Artboard Studio 的圖片編輯器裡面其實有提供一些外部的圖片網站,像是 ShutterstockUnaplash,都是很熱門的圖片素材網站。

左邊的工具列可以使用Unsplash免費圖庫



完成專屬自己的產品情境圖

在經過一系列圖片 Mockup、物件裝飾跟背景圖片的操作之後,就可以製作出專屬於自己的產品情境圖了,圖片設計都完成了之後,一樣從編輯器的右下角點擊 Export 來匯出這張圖片就好。

最後設計出來的產品情境圖




Artboard Studio 付費方案

Artboard Studio 目前有分成「免費版」跟「付費版」兩種方案,而 Pro 版用月繳或年繳的方式都可以,它們的差別如下表:

FreePro
免費年繳:$8.28/月($99/年)
月繳:$15/月($180/年)
Free items onlyUnlock all items
Unlimited ProjectsUnlimited Projects
Personal LicenseCommercial License
Project Versions
Project Presentation
Branding Components
Custom Fonts
Shutterstock Library
Priority support
pricing

付費版可以解鎖 Artboard Studio 裡面的 Pro 版的 Mockup,不管是「範本」還是「物件」都很好用,讓你瞬間就能擁有更多的 Mockup 素材。但免費版跟付費版差在一個「個人」跟「商業」的 License 規定,這個部分可以查看它官方的詳細說明:https://artboard.studio/terms-and-agreement/licenses

Reference:



Artboard Studio 相關影片



結語

現在線上的 Mockup 網站工具真的非常多,但大多都是固定的範本,目前像 Artboard Studio 這樣可以自由排版的 Mockup 網站不太多,雖然是英文版的,不過操作介面上面都有圖示,其實很好辨認,如果真的英文不行的話,也可以利用瀏覽器的「翻譯工具」來將操作介面翻譯成中文。

雖然 Artboard Studio 可以自己設計合成產品情境圖,但其他 Mockup 網站的範本其實也不差,有興趣的話也可以前往其它的網站看看,像是 Smartmockups 就是很多人都有在用的 Mockup 工具,而 Canva 裡的照片功能也有整合 Smartmockups 一部份的模板,有興趣的話可以參考下面延伸閱讀裡的文章:




延伸閱讀


aifian APP推薦活動


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

→ 歡迎 留言分享

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

贊助我一杯咖啡


留言區