【Screely】快速替圖片/截圖加上瀏覽器外框的線上工具!

2022 年 7 月 1 日 更新

Screely tutorial 封面圖片

網路上製作圖片的工具有很多,有的可以設計繪圖,有的則可以合成圖片,而這裡要介紹的「Screely」也是製作圖片的線上工具之一,它的主要功能就是幫我們的圖片添加「瀏覽器的視窗外框」,並且可以設定背景顏色或者陰影效果,完全免費使用!

Screely 是什麼

「Screely」是一個線上圖片製作工具,可以輕鬆地將圖片或是螢幕截圖轉變成一個「Browser Mockup」,也就是把圖片合成到瀏覽器的 Mockup 裡面。換句話說,它能為你的圖片添加一個「瀏覽器外框」

其實網路上也有 Screely 這樣類似的工具,例如 BrowserFrame 就是其中一個例子,但每個網站工具都有它的特色,而 Screely 比較特別的是它可以自動根據圖片的尺寸調整瀏覽器外框大小,而且它還有提供瀏覽器的「外掛程式」,可以替目前的網頁快速輕鬆地合成圖片。

接下來可以點擊上面的按鈕前往 Screely 首頁,這邊基本上就是介紹這個網站是做什麼的,它有哪些特色,想要上傳合成圖片的話,直接點擊頁面中間的 Browse files 按鈕即可。(它下面有說明它們不會把圖片上傳或保存在他們的伺服器裡面,因此可以比較放心地去使用)

Screely 首頁




Screely 圖片編輯器-基本功能

我上傳了一張圖片之後,就會進入 Screely 圖片編輯器的基本功能設定頁面,它這邊的功能劃分相當簡潔,左邊是圖片預覽區,右邊則是圖片的基本設定介面。

Screely 圖片編輯器


Window 視窗設定

首先是 Window 視窗的設定,Screely 所提供的是 Mac 版的瀏覽器外框,這邊可以調整瀏覽器外框的樣式,主要分為兩種:

  • Window Type:可以設定無外框、簡易版外框和瀏覽器外框。
  • Window Style:主要是調整瀏覽器左上方那三個點點的樣式。

Screely 圖片編輯器-window


陰影與深色模式

視窗的設定除了上面那兩個之外,在 Window 設定區的右上角還有兩個稍微比較不起眼的設定,它們分別是:

  • Shadow:可以開啟瀏覽器旁邊的陰影效果。
  • Dark mode:可以切換為瀏覽器的深色模式。
Screely 圖片編輯器-陰影和深色外框


Background 背景設定

再來是圖片的背景部分 (Background),你可以利用它的「顏色選擇器」來調整這張圖片的背景顏色,可以使用「RGB 色碼」或「HEX 色碼」來調整,如果你想要透明背景的話,也可以在顏色選擇器裡面設定這個功能。

Screely 圖片編輯器-圖片背景顏色


Padding 填充設定

還有一個功能是「Padding」,可以調整瀏覽器之外的圖片空間大小,分為垂直 (Vertical) 跟水平 (Horizontal) 兩種方向,它們下面都有一個控制滑塊可以輕鬆調整,而這些調整會影響到這張圖片最後的尺寸大小。

前面提到的視窗陰影設定 (Shadow) 跟 Padding 的空間大小有關,如果 Padding 太少的話,陰影效果就不會那麼好,甚至是沒有 (Padding=0 時)。

Screely 圖片編輯器-圖片填充區域大小




Screely 圖片編輯器-進階功能

Screely 除了以上的圖片基本設定之外,它還有比較進階的圖片編輯功能,只要把滑鼠移動到左邊預覽圖那邊,圖片下方會浮現「編輯」和「刪除」的選項,點擊 編輯 的圖示按鈕,就可以打開 Screely 的圖片編輯功能。

編輯圖片


裁切、翻轉或旋轉圖片

接下來會來到下圖這個畫面,這邊功能還滿多的,最上面有功能選單可以切換,而圖片的上下方可能都會有一些功能可以調整。首先是「Crop」的功能區,這邊可以讓你自由調整圖片的尺寸比例 (等比調整),也可以透過上面的功能選項來翻轉或旋轉圖片。

裁切圖片


繪製功能

第二個「Markup」功能區,則可以在這張圖片裡面添加各種簡單的方形、圓形或箭頭,也可以輸入文字或者是自由繪圖 (Draw),下面還能調整繪製的顏色或者是樣式 (Style),相當方便!

Markup


重新調整圖片尺寸比例

第三個「Resize」功能區則可以調整這張圖片的尺寸大小 (瀏覽器視窗裡的範圍),如果上面的鎖頭有鎖住的話,它就會根據你輸入的數字自動等比例調整大小。

Resize


添加其他圖示

最後一個「Stickers」則提供一些簡單的圖示,讓我們可以插入圖片當中。

Stickers



下載圖片

以上的圖片設定都調整好了之後,就可以點擊編輯器右下角的 Download 來下載這張圖片,即可拿到一張 PNG 格式的圖片檔案,圖片尺寸會因你上傳的圖片跟編輯器的設定而有所不同。下圖就是我從 Screely 下載下來的圖片。

Screely下載的圖片




Screely 外掛程式

前面有提到 Screely 有提供外掛程式可以用,你可以前往 Chrome 或 Edge 瀏覽器去擴充 Screely 的外掛。

Screely 提供的瀏覽器外掛程式


當你擴充好 Screely 的外掛之後,瀏覽器的右上角會多出一個 Screely 的快捷按鈕。

Chrome 瀏覽器擴充 Screely 外掛


之後如果想要把螢幕截圖合成 Screely 的 Mockup 圖片的話,不需要使用其他的螢幕截圖工具或快捷鍵,你直接點擊瀏覽器右上角的 Screely 的快捷圖示按鈕,它就會把當下的視窗畫面截圖起來,接著會打開 Screely 的圖片編輯器,自動合成剛剛擷取下來的視窗截圖,並且會沿用你前一次的基本圖片設定。

自動將目前的網頁截圖合成為 Mockup 圖片



結語

Screely 我覺得是相當不錯用的圖片製作線上工具,它不僅有 Mockup 的圖片合成功能,也有外掛程式可以用,雖然瀏覽器種類選擇性不多,不過也無傷大雅,有基本的圖片設定功能就好。


延伸閱讀


Binance 幣安推薦碼 VU3NZ3AJ

如果你喜歡這篇文章的話
歡迎用下面的按鈕分享出去!

▼ 點此分享 ▼