2024 年 3 月 7 日 更新
網路上製作圖片的工具有很多，有的可以設計繪圖，有的則可以合成圖片，而這裡要介紹的「Screely」也是製作圖片的線上工具之一，它的主要功能就是幫我們的圖片添加「瀏覽器的視窗外框」，並且可以設定背景顏色或者陰影效果，完全免費使用！
追蹤數位小幫手社群平台：Instagram、Twitter…等等。
Screely 是什麼
「Screely」是一個線上圖片製作工具，可以輕鬆地將圖片或是螢幕截圖轉變成一個「Browser Mockup」，也就是把圖片合成到瀏覽器的 Mockup 裡面。換句話說，它能為你的圖片添加一個「瀏覽器外框」。
其實網路上也有 Screely 這樣類似的工具，例如 BrowserFrame 就是其中一個例子，但每個網站工具都有它的特色，而 Screely 比較特別的是它可以自動根據圖片的尺寸調整瀏覽器外框大小，而且它還有提供瀏覽器的「外掛程式」，可以替目前的網頁快速輕鬆地合成圖片。
接下來可以點擊上面的按鈕前往 Screely 首頁，這邊基本上就是介紹這個網站是做什麼的，它有哪些特色，想要上傳合成圖片的話，直接點擊頁面中間的 Browse files 按鈕即可。(它下面有說明它們不會把圖片上傳或保存在他們的伺服器裡面，因此可以比較放心地去使用)
Screely 圖片編輯器-基本功能
我上傳了一張圖片之後，就會進入 Screely 圖片編輯器的基本功能設定頁面，它這邊的功能劃分相當簡潔，左邊是圖片預覽區，右邊則是圖片的基本設定介面。
Window 視窗設定
首先是 Window 視窗的設定，Screely 所提供的是 Mac 版的瀏覽器外框，這邊可以調整瀏覽器外框的樣式，主要分為兩種：
- Window Type：可以設定無外框、簡易版外框和瀏覽器外框。
- Window Style：主要是調整瀏覽器左上方那三個點點的樣式。
陰影與深色模式
視窗的設定除了上面那兩個之外，在 Window 設定區的右上角還有兩個稍微比較不起眼的設定，它們分別是：
- Shadow：可以開啟瀏覽器旁邊的陰影效果。
- Dark mode：可以切換為瀏覽器的深色模式。
Background 背景設定
再來是圖片的背景部分 (Background)，你可以利用它的「顏色選擇器」來調整這張圖片的背景顏色，可以使用「RGB 色碼」或「HEX 色碼」來調整，如果你想要透明背景的話，也可以在顏色選擇器裡面設定這個功能。
Padding 填充設定
還有一個功能是「Padding」，可以調整瀏覽器之外的圖片空間大小，分為垂直 (Vertical) 跟水平 (Horizontal) 兩種方向，它們下面都有一個控制滑塊可以輕鬆調整，而這些調整會影響到這張圖片最後的尺寸大小。
前面提到的視窗陰影設定 (Shadow) 跟 Padding 的空間大小有關，如果 Padding 太少的話，陰影效果就不會那麼好，甚至是沒有 (Padding=0 時)。
Screely 圖片編輯器-進階功能
Screely 除了以上的圖片基本設定之外，它還有比較進階的圖片編輯功能，只要把滑鼠移動到左邊預覽圖那邊，圖片下方會浮現「編輯」和「刪除」的選項，點擊 編輯 的圖示按鈕，就可以打開 Screely 的圖片編輯功能。
裁切、翻轉或旋轉圖片
接下來會來到下圖這個畫面，這邊功能還滿多的，最上面有功能選單可以切換，而圖片的上下方可能都會有一些功能可以調整。首先是「Crop」的功能區，這邊可以讓你自由調整圖片的尺寸比例 (等比調整)，也可以透過上面的功能選項來翻轉或旋轉圖片。
繪製功能
第二個「Markup」功能區，則可以在這張圖片裡面添加各種簡單的方形、圓形或箭頭，也可以輸入文字或者是自由繪圖 (Draw)，下面還能調整繪製的顏色或者是樣式 (Style)，相當方便！
重新調整圖片尺寸比例
第三個「Resize」功能區則可以調整這張圖片的尺寸大小 (瀏覽器視窗裡的範圍)，如果上面的鎖頭有鎖住的話，它就會根據你輸入的數字自動等比例調整大小。
添加其他圖示
最後一個「Stickers」則提供一些簡單的圖示，讓我們可以插入圖片當中。
下載圖片
以上的圖片設定都調整好了之後，就可以點擊編輯器右下角的 Download 來下載這張圖片，即可拿到一張 PNG 格式的圖片檔案，圖片尺寸會因你上傳的圖片跟編輯器的設定而有所不同。下圖就是我從 Screely 下載下來的圖片。
Screely 外掛程式
前面有提到 Screely 有提供外掛程式可以用，你可以前往 Chrome 或 Edge 瀏覽器去擴充 Screely 的外掛。
當你擴充好 Screely 的外掛之後，瀏覽器的右上角會多出一個 Screely 的快捷按鈕。
之後如果想要把螢幕截圖合成 Screely 的 Mockup 圖片的話，不需要使用其他的螢幕截圖工具或快捷鍵，你直接點擊瀏覽器右上角的 Screely 的快捷圖示按鈕，它就會把當下的視窗畫面截圖起來，接著會打開 Screely 的圖片編輯器，自動合成剛剛擷取下來的視窗截圖，並且會沿用你前一次的基本圖片設定。
結語
Screely 我覺得是相當不錯用的圖片製作線上工具，它不僅有 Mockup 的圖片合成功能，也有外掛程式可以用，雖然瀏覽器種類選擇性不多，不過也無傷大雅，有基本的圖片設定功能就好。
延伸閱讀
- 12 款 Mockup 網站工具介紹，直接在線上合成圖片！
- 【BrowserFrame】可幫圖片加上瀏覽器外框的線上合成工具！
- 【MockUPhone】裝置類型的 Mockups 線上合成工具～
- 【Placeit】擁有超多種類的Mockups，實物模型的顏色也能改！
- 【Smartmockups】合成專屬的情境圖！讓你的圖片更專業！
原網站｜數位小幫手digitalyoming.com( 未經許可，禁止轉載 )
原網址｜https://digitalyoming.com/screely-tutorial/