我介紹過不少實物模型(Mockup)工具,可以讓使用者上傳畫面,快速合成到相片中出現的裝置畫面,像是 iPhone、iPad 或是 MacBook,有些還帶有裝飾或景深,看起來非常專業!有時候如果需要展示網頁或應用程式,單獨放上擷圖好像又太單調,就可以選擇像是 Mockup Photos、MockDrop 或 Mockuper 等服務稍微處理一下,類似工具都不需要額外下載安裝軟體,只要選擇想使用的模型,把手邊相片上傳後就會整合。
相片處理
MockDrop 免費 Mockups 產生器,在圖庫相片整合想呈現的畫面
上面這張相片頗具質感,電腦顯示的是免費資源網路社群首頁,其實不是由我拍攝,現今有非常多的線上工具可以做到所謂「模型」(Mockups)效果,簡單來說就是將你要呈現的畫面整合到圖庫相片特定裝置或範圍,營造出一種好像是自己拍攝的錯覺,對要展示畫面來說會有不錯的效果,例如 Mockup Photos 提供數千張高畫質素材,是我近期最常用的服務;Smartmockups 則是我較早會使用的模型工具,後來相片都必須付費才能使用。
AI Image Enhancer 自動相片修圖工具,強化色彩對比度消除噪點
Device Shots 將圖片快速整合到手機、平板電腦或筆電顯示器螢幕
有時候我們會需要將應用程式或是網站畫面呈現在裝置上,例如在設計網站、介紹教學或展示產品會用到,不過要直接拍攝裝置其實並不容易,除非本身有不錯的攝影器材和光線,還得加上後製修圖的時間,其實只要使用 Mockups 工具就能輕鬆做到,我之前介紹過 Qurb、Mobile Mockup 和 MockUPhone 都能達到類似效果,像是將畫面整合到手機、平板電腦或是筆記型電腦,還能選擇不同的裝置外框、顏色或背景顏色等等,即使手邊沒有軟體也能輕鬆製作素材。
Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖
如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢?可能很多人會選擇打開網頁,將視窗調整到適當大小後擷圖即可,這個答案好像也沒有錯,只是相較於使用 Mockup 工具來說會更費時費力,其實只要透過像是 BrowserFrame 或 Mobile Mockup 就能在輸入網址後快速製作出模型圖,看起來會比自己擷取還要更有質感。如果是 Mockup Photos、Smartmockups 還能直接套用免費圖庫提供的高品質相片,免費資源網路社群有一部分的文章首圖都是以類似工具處理,看起來很自然而且能提昇質感。
Optidash 以人工智慧最佳化圖片,壓縮降低圖片容量支援常見格式
Upscale by Sticker Mule 立即提高任何照片解析度,圖片放大兩倍不失真
Let’s Enhance 免費相片強化工具,放大不失真並改善模糊問題
如果手邊有些老照片是以前的手機或數位相機拍攝,現在看來可能會稍嫌模糊,相片尺寸也會相對較小,不得不說智慧型手機問世後拍照工具進步很多,不僅是畫素提高,也能透過處理器直接最佳化相片以獲得更好的拍攝效果。那麼對於尺寸較小、畫面模糊的相片有任何強化方式嗎?之前介紹過 AI Image Enlarger、Smart Upscaler 都能藉由機器學習技術來放大、增強圖片,ColouriseSG 還能為黑白老照片自動上色。
Mockup Photos 數千張高畫質素材圖庫,可自行上傳圖片或線上擷圖整合
上面這張圖看起來是不是很有質感呢?如果仔細看,會發現電腦螢幕出現的正是免費資源網路社群首頁,不過這可不是我自己擺設的佈景,而是運用合成方式將適當的畫面合成到圖庫素材,也被稱為「Mockups」,對於要展示一些畫面來說非常有用。若我在編寫文章時找不到適合的圖片,也會利用像是 Smartmockups 來產生更好看的擷圖畫面,你可能會發現有些圖片看起來相似度極高,別懷疑,你也可以自己動手做。
pingo 免費 Windows 圖片最佳化工具,支援 JPG、PNG 等格式無損壓縮
現今智慧型手機拍照都有相當高的畫質和解析度,通常是一張照片就好幾 MB,如果沒有預先縮小尺寸或是對相片進行壓縮處理,無論要使用於網頁或部落格、傳給朋友或是備份保存都會很耗費空間。若不知道該怎麼後製相片,最簡單的方法就是使用圖片壓縮工具,透過「無損壓縮」(Lossless)大幅減少容量大小,但在肉眼上幾乎看不出來差異,而且可以非常有感的大幅降低圖片大小,舉例來說我以前常使用的 TinyPNG、Pngyu 或 ImageOptim 都能讓圖片體積變小,卻不會使畫質遭受破壞。