我介紹過不少實物模型(Mockup)工具,可以讓使用者上傳畫面,快速合成到相片中出現的裝置畫面,像是 iPhone、iPad 或是 MacBook,有些還帶有裝飾或景深,看起來非常專業!有時候如果需要展示網頁或應用程式,單獨放上擷圖好像又太單調,就可以選擇像是 Mockup Photos、MockDrop 或 Mockuper 等服務稍微處理一下,類似工具都不需要額外下載安裝軟體,只要選擇想使用的模型,把手邊相片上傳後就會整合。
截圖
MockDrop 免費 Mockups 產生器,在圖庫相片整合想呈現的畫面
上面這張相片頗具質感,電腦顯示的是免費資源網路社群首頁,其實不是由我拍攝,現今有非常多的線上工具可以做到所謂「模型」(Mockups)效果,簡單來說就是將你要呈現的畫面整合到圖庫相片特定裝置或範圍,營造出一種好像是自己拍攝的錯覺,對要展示畫面來說會有不錯的效果,例如 Mockup Photos 提供數千張高畫質素材,是我近期最常用的服務;Smartmockups 則是我較早會使用的模型工具,後來相片都必須付費才能使用。
Microsoft Edge 內建網頁擷取功能,快速截圖加入附註標示匯出 Jpeg
因為工作需要我每天都會用到螢幕擷取工具,以前多半是使用 TechSmith 的 Jing 做為首要選擇(後來已經以 TechSmith Screencast 替代),搭配上 Skitch 進行標註或是馬賽克處理,後來對 Mac 更熟悉就改用內建的擷取功能,內建的拍攝截圖工具可以變更預設檔案儲存格式、自動儲存路徑和快照檔名,搭配上 iCloud 或是其他同步工具就能在多台電腦間進行寫作。如果你平常比較沒有擷圖需求,但偶爾又需要保存網頁畫面的話,可以參考接下來要介紹的瀏覽器內建擷圖工具。
在 iPhone 和 iPad 使用 Safari 瀏覽器擷取完整網頁
Pikaso Extension 在 Twitter 推文加入擷圖轉為圖片按鈕
Device Shots 將圖片快速整合到手機、平板電腦或筆電顯示器螢幕
有時候我們會需要將應用程式或是網站畫面呈現在裝置上,例如在設計網站、介紹教學或展示產品會用到,不過要直接拍攝裝置其實並不容易,除非本身有不錯的攝影器材和光線,還得加上後製修圖的時間,其實只要使用 Mockups 工具就能輕鬆做到,我之前介紹過 Qurb、Mobile Mockup 和 MockUPhone 都能達到類似效果,像是將畫面整合到手機、平板電腦或是筆記型電腦,還能選擇不同的裝置外框、顏色或背景顏色等等,即使手邊沒有軟體也能輕鬆製作素材。
Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖
如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢?可能很多人會選擇打開網頁,將視窗調整到適當大小後擷圖即可,這個答案好像也沒有錯,只是相較於使用 Mockup 工具來說會更費時費力,其實只要透過像是 BrowserFrame 或 Mobile Mockup 就能在輸入網址後快速製作出模型圖,看起來會比自己擷取還要更有質感。如果是 Mockup Photos、Smartmockups 還能直接套用免費圖庫提供的高品質相片,免費資源網路社群有一部分的文章首圖都是以類似工具處理,看起來很自然而且能提昇質感。
Snippyly 擷取網頁畫面、編輯並產生可編輯分享鏈結(Chrome 擴充功能)
變更 Mac 內建拍攝截圖功能格式、儲存路徑和螢幕快照檔名
在免費資源網路社群寫文章已經是維持十多年的習慣,既然每篇文章都是文字搭配圖片的教學文,擷圖就是我每天都會用到的工具,較早以前我是使用 Jing(在 Windows 時代是使用 WinSnap),後來因為 Catalina 不再支援 32 位元應用程式,開發商就決定推出全新 TechSmith Screenshot 取代原有的 Jing,而付費的 Snagit 真的用不習慣,經過幾次試用後依然無法順利上手。
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。