Qurb 線上 Mockup 產生器,擷圖套用 iPhone、MacBook 外框更有質感

最後更新於 2020 年 07 月 07 日

擷取網頁或應用程式畫面並不困難,除了使用內建的螢幕擷取工具,也有很多擷圖軟體可以選擇,像是 WinSnapFastStone Capture 或是 Mac 上的 TechSmith Screenshot 等等軟體,當然擷圖軟體可以提供更多更細部的功能和選項,但內建就好在速度快與操作方便性了吧!後來使用 Mac 內建的擷取工具習慣後我就捨棄其他第三方應用程式,除非需要用到劃線、標記或處理特定部分才會使用 Skitch(馬賽克的話則是使用 Redacted)。

說了那麼多,我只是想在文章一開始告訴大家要製作好看的畫面擷圖並不困難,但可能需要一點技巧搭配正確的工具,本文要介紹的「Qurb」是能讓擷取畫面變得更有質感的 Mockup 產生器,簡單來說,Qurb 可以讓你為畫面加入智慧型手機、平板電腦或 MacBook 外框,看起來就跟真的在這些裝置上呈現樣貌,最後儲存為 .png 具有透明背景的圖片格式。

Qurb 介面簡單,支援一些常見的裝置類型,像是 iPhone X/XS/Max、Galaxy Note 8、iPhone 8、iPhone 8 Plus、iPhone 5s、iPhone 5c、iPad Mini 和 MacBook Pro,有些裝置可以調整不同的顏色,選擇後將螢幕擷圖上傳就能立即預覽效果。

Qurb
https://qurb.rishimohan.me/

使用教學

STEP 1

開啟 Qurb 網站後從「Select Device」選擇要套用的裝置類型,有常見的 iPhone、Galaxy Note、iPad Mini 和 MacBook Pro,不是非常新的裝置,但細節部分都做得相當好。

STEP 2

有些裝置選擇後會出現切換顏色的選項,例如 iPhone 8 Plus 就有太空灰、銀色和金色三種選項,iPhone 5c 則有各種繽紛配色。

STEP 3

點選「Add Screenshot」選擇要加入裝置螢幕的畫面,就會看到出現在 Qurb 網站上。

如果要加入 MacBook Pro 可能需要更大一點的尺寸,且圖片必須是橫式才行,如果要有好的效果,建議要盡可能擷取到最適合的圖片大小,看起來就會非常有質感。

STEP 4

最後點選「Save mockup」按鈕就能將看到的圖片下載為 .png 格式,下面兩張圖就是我利用這個服務線上製作的 Mockup 圖片。

值得一試的三個理由:

  1. 將擷圖或應用程式畫面放入 iPhone、Galaxy 手機模型中
  2. 支援各種 iPhone 型號,亦可調整不同的外觀顏色
  3. 加入圖片後線上即時預覽,將圖片下載為 PNG 格式

 

相關的文章

Mockup Photos 數千張高畫質素材圖庫,可自行上傳圖片或線上擷圖整合

上面這張圖看起來是不是很有質感呢?如果仔細看,會發現電腦螢幕出現的正是免費資源網路社群首頁,不過這可不是我自己擺設的佈景,而是運用合成方式將適當的畫面合成到圖庫素材,也被稱為「Mockups」,對於要展示一些畫面來說非常有用。若我在編寫文章時找不到適合的圖片,也會利用像是 Smartmockups 來產生更好看的擷圖畫面,你可能會發現有些圖片看起來相似度極高,別懷疑,你也可以自己動手做。

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(Responsive Web Design,簡稱 RWD)技術來調整版型,那麼要怎麼知道一個網站有沒有支援 RWD 呢?最簡單的方法就是拖曳調整視窗大小,看看網頁是不是在寬度較窄時仍可正常顯示,例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型,但每個裝置大小都有差異,若沒辦法同時擁有這麼多裝置進行測試,其實透過一些電腦上的工具也能達到相同效果。

線上購買蘋果 Mac、iPhone 加購 AppleCare+ 延長保固教學

如果有買 Apple 產品一定知道這些硬體產品都附有一年的保固時間,加上 90 天免額外付費技術支援服務,也就是說這一年內若產品發生非人為故障或損壞,都可以使用保固送修而不需要額外付費。對大多數電子產品來說也是如此。只是大家都曉得一個莫非定律,那就是通常不買保固或產品一過保就很容易壞掉,因此才有「AppleCare」可用於延長蘋果產品的保固時間。

回應