2024 年 3 月 7 日 更新
現在網路上有形形色色的線上工具，可以幫助我們處理很多事情，在圖片方面就有非常多的工具，如果手邊有一些電腦的螢幕截圖，那或許有些圖片可以替他們加上瀏覽器的外框，只要使用「BrowserFrame」這個線上軟體就可以辦到！
追蹤數位小幫手社群平台：Instagram、Twitter…等等。
BrowserFrame 是什麼？
BrowserFrame 是一個線上的 Mockup 圖片合成工具，主要的功能是用來替圖片添加電腦的瀏覽器外框，並合成一個新的圖片出來，是一個很好用的網站工具，點擊下面的按鈕可立即前往 BrowserFrame。
接著會來到 BrowserFrame 的圖片合成頁面 (如下圖)，其實也就這一個頁面而已，左邊是瀏覽器的選單跟設定，右邊則是預覽圖。
瀏覽器外框類型
BrowserFrame 提供的瀏覽器外框類型大多都是比較知名的，除了最上面的通用外框之外，其他還有提供 Chrome、Safari、Firefox、Edge、Opera 等瀏覽器外框，多數瀏覽器的顏色有 Light 跟 Dark 兩種可以選擇，而且也有分成 Mac 跟 Windows 的系統，看自己想要用哪種類型的外框，點它就可以直接套用了。
瀏覽器外框設定
選好瀏覽器的款式之後，可以把左邊的選單繼續往下拉，它會有更進階的圖片設定。
PADDING (填充)
第一個「Padding (px)」是用來調整瀏覽器到圖片邊界之間的距離，數值越大的話，瀏覽器周邊的空白區域就會越大。
BACKGROUND COLOR (背景顏色)
Background Color (HEX) 是用來調整圖片的背景顏色，如果沒有輸入的話，瀏覽器之外的空白區域在下載的時候就會是「透明背景」(除了陰影之外)，這邊可以直接輸入「HEX 色碼」來調整成你想要的背景顏色
SHADOW (陰影)
再來是陰影 (Shadow)，它這邊有兩種跟陰影相關的圖片設定，Shadow Amount 可以調整陰影的多寡，而 Shadow color (HEX) 則可以調整陰影的顏色。
SCREEN (螢幕)
Screen 相關的設定比較多，主要有這四個：
- Screen Color：可以調整瀏覽器內部的視窗顏色。
- Screen Width︰可以調整瀏覽器的寬度。
- Screen Height：可以調整瀏覽器的高度。
- Screen Scale：可以等比例放大瀏覽器裡面的圖片尺寸，外框不會受到這個數值的影響。
PREVIEW SCALE (預覽圖大小)
最後這個 Preview Scale 則是用來調整圖片尺寸的比例，跟上一個 Screen Scale 不同的是，Preview Scale 是調整整個圖片的尺寸，所以連同瀏覽器的外框都會同時被放大，數值越大的話，下載的圖片尺寸也就越大。
如何上傳並合成圖片？
接著來說明一下上傳合成圖片的環節，BrowserFreame 合成圖片的方式非常簡單，在電腦上可以直接從資料夾拖曳圖片到瀏覽器那塊區域，BrowserFrame 就會自動將你的圖片加上瀏覽器外框，顯示在右邊的預覽圖中。
但需要注意的是圖片的 高度 跟 寬度 要設定好 (在左邊的 Screen 功能區設定)，因為 BrowserFrame 沒有圖片裁切的功能，如果螢幕 (Screen) 的高度跟寬度沒有調整成適當比例的話，你上傳的圖片就可能會拉伸變形。
當圖片合成好了之後，可以點擊右下角的綠色下載按鈕，把這張合成好的圖片下載下來。如果想要繼續製作其他圖片，但又想繼續沿用這個圖片跟瀏覽器設定的話，點下載旁邊的叉叉按鈕 ✖，就可以刪掉瀏覽器裡面的圖片了。
結語
BrowserFrame 的操作介面非常簡單，稍微摸索一下就可以快速上手！有些圖片或是螢幕截圖如果覺得太單調的話，可以多多利用這個線上工具，替你的圖片添加瀏覽器外框。另外還有一個線上工具「Screely」，也是專門用來替圖片添加瀏覽器外框，詳細使用方法可以參考這篇文章：【Screely】快速替圖片/截圖加上瀏覽器外框的線上工具！
延伸閱讀
- 12 款 Mockup 網站工具介紹，直接在線上合成圖片！
- 【Cleanup.pictures】線上圖片物件消除工具，超猛又免費的去除效果！
- 【Placeit】擁有超多種類的Mockups，實物模型的顏色也能改！
- 【Pixeltrue】提供的 Mockup 產生器，可下載高質量去背版圖片！
- 【Smartmockups】合成專屬的情境圖！讓你的圖片更專業！
原網站｜數位小幫手digitalyoming.com( 未經許可，禁止轉載 )
原網址｜https://digitalyoming.com/browserframe-tutorial/