【BrowserFrame】可幫圖片加上瀏覽器外框的線上合成工具!

Last Updated on 2021 年 12 月 3 日 by 小幫手

BrowserFrame tutorial 封面圖片

現在網路上有形形色色的線上工具,可以幫助我們處理很多事情,在圖片方面就有非常多的工具,如果手邊有一些電腦的螢幕截圖,那或許有些圖片可以替他們加上瀏覽器的外框,只要使用「BrowserFrame」這個線上軟體就可以辦到!

BrowserFrame 是什麼?

BrowserFrame 是一個線上的 Mockup 圖片合成工具,主要的功能是用來替圖片添加電腦的瀏覽器外框,並合成一個新的圖片出來,是一個很好用的網站工具,點擊下面的按鈕可立即前往 BrowserFrame。

接著會來到 BrowserFrame 的圖片合成頁面 (如下圖),其實也就這一個頁面而已,左邊是瀏覽器的選單跟設定,右邊則是預覽圖。

BrowserFrame 首頁


瀏覽器外框類型

BrowserFrame 提供的瀏覽器外框類型大多都是比較知名的,除了最上面的通用外框之外,其他還有提供 ChromeSafariFirefoxEdgeOpera 等瀏覽器外框,多數瀏覽器的顏色有 Light 跟 Dark 兩種可以選擇,而且也有分成 MacWindows 的系統,看自己想要用哪種類型的外框,點它就可以直接套用了。

BrowserFrame 提供的瀏覽器外框類型




瀏覽器外框設定

選好瀏覽器的款式之後,可以把左邊的選單繼續往下拉,它會有更進階的圖片設定。

PADDING (填充)

第一個「Padding (px)」是用來調整瀏覽器到圖片邊界之間的距離,數值越大的話,瀏覽器周邊的空白區域就會越大。

BrowserFrame 瀏覽器外框設定


BACKGROUND COLOR (背景顏色)

Background Color (HEX) 是用來調整圖片的背景顏色,如果沒有輸入的話,瀏覽器之外的空白區域在下載的時候就會是「透明背景」(除了陰影之外),這邊可以直接輸入「HEX 色碼」來調整成你想要的背景顏色

圖片背景顏色


SHADOW (陰影)

再來是陰影 (Shadow),它這邊有兩種跟陰影相關的圖片設定,Shadow Amount 可以調整陰影的多寡,而 Shadow color (HEX) 則可以調整陰影的顏色。

陰影顏色跟大小


SCREEN (螢幕)

Screen 相關的設定比較多,主要有這四個:

  1. Screen Color:可以調整瀏覽器內部的視窗顏色。
  2. Screen Width︰可以調整瀏覽器的寬度。
  3. Screen Height:可以調整瀏覽器的高度。
  4. Screen Scale:可以等比例放大瀏覽器裡面的圖片尺寸,外框不會受到這個數值的影響。
瀏覽器外框螢幕設定


PREVIEW SCALE (預覽圖大小)

最後這個 Preview Scale 則是用來調整圖片尺寸的比例,跟上一個 Screen Scale 不同的是,Preview Scale 是調整整個圖片的尺寸,所以連同瀏覽器的外框都會同時被放大,數值越大的話,下載的圖片尺寸也就越大。

圖片大小調整




如何上傳並合成圖片?

接著來說明一下上傳合成圖片的環節,BrowserFreame 合成圖片的方式非常簡單,在電腦上可以直接從資料夾拖曳圖片到瀏覽器那塊區域,BrowserFrame 就會自動將你的圖片加上瀏覽器外框,顯示在右邊的預覽圖中。

上傳並合成圖片


但需要注意的是圖片的 高度寬度 要設定好 (在左邊的 Screen 功能區設定),因為 BrowserFrame 沒有圖片裁切的功能,如果螢幕 (Screen) 的高度跟寬度沒有調整成適當比例的話,你上傳的圖片就可能會拉伸變形。

如果瀏覽器大小沒有調整好的話,合成的圖片會被拉伸變形

當圖片合成好了之後,可以點擊右下角的綠色下載按鈕,把這張合成好的圖片下載下來。如果想要繼續製作其他圖片,但又想繼續沿用這個圖片跟瀏覽器設定的話,點下載旁邊的叉叉按鈕 ,就可以刪掉瀏覽器裡面的圖片了。


結語

BrowserFrame 的操作介面非常簡單,稍微摸索一下就可以快速上手!有些圖片或是螢幕截圖如果覺得太單調的話,可以多多利用這個線上工具,替你的圖片添加瀏覽器外框。另外還有一個線上工具「Screely」,也是專門用來替圖片添加瀏覽器外框,詳細使用方法可以參考這篇文章:【Screely】快速替圖片/截圖加上瀏覽器外框的線上工具!


延伸閱讀


aifian APP推薦活動


最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話
歡迎使用下面分享按鈕分享


留言區