製作說明文件和教學時,請用相同方式擷取每個畫面,為操作編號,並以相同寬度匯出每張圖片。在 OpenScreenShot 中,在匯出對話框的縮放比例下設定精確的像素寬度,為每個操作加上步驟編號徽章,並用「Spotlight(聚光)」引導讀者看正確的控制項。Docs/{title} 這類檔名範本會把每張圖片存到「下載」內的資料夾。
逐步製作教學截圖
- 文章中的每次擷取都把瀏覽器視窗設為相同大小。每次都使用相同的主題和縮放等級。
- 擷取畫面。右鍵選單中的選取區域或擷取元素能讓圖片只包含該步驟相關的介面部分。
- 在編輯器中,依讀者使用的順序,在每個控制項上加上步驟編號(
S)。 - 畫面上有很多其他內容時,在重要區域上加上 Spotlight(聚光)(
O)。 - 用模糊(
B)和實色填色蓋住範例客戶資料、真實電子郵件地址和 API 金鑰。 - 視需要開啟頂欄中的 Beautify(美化),加上邊距、圓角和陰影。
- 點儲存圖片。在匯出對話框中選擇 PNG,在縮放比例下輸入你的頁面寬度,確認檔名,再點匯出。
讓每張圖片保持相同尺寸
同一篇文章中的截圖每一步都換尺寸,讀者會注意到。在縮放比例下選擇 25、50、100 或 200 %,或輸入精確的像素寬度。固定寬度能讓文章中的每張圖片都符合你文件網站的內容欄寬。
在匯出對話框中開啟記住這些設定,即可把格式和品質保留為新的預設值。寬度不在這些預設值中,所以每次匯出都要重新輸入。超過 Chrome 畫布上限的寬度會被拒絕,所以擴充功能絕不會寫出空檔案。
PNG 是無損格式,所以介面文字保持清晰。只有在你的文件平台限制檔案大小時,才使用 JPEG 或 WebP。
讓步驟編號保持順序
步驟編號徽章會自動遞增:第一次點選放上 1,下一次放上 2。刪除一個徽章時,其餘徽章會重新編號,所以你可以移除一個步驟,而不必修改後面的每個編號。讓圖片中的編號與文章中的編號清單一致。
用按鍵 1–8 選擇八色調色盤中的顏色。編輯器會跨工作階段記住你的顏色、線條寬度和字型大小,所以同一篇文章的截圖能保持相同風格。
突顯與加外框
「Spotlight(聚光)」會讓一個或多個區域保持明亮,其餘部分變暗。鏤空區域可以是矩形、圓角矩形或橢圓。對於很長的設定頁面,「Cut(剪除)」工具(X)會移除讀者不需要的水平帶狀區域,套用前會即時預覽。
「Beautify(美化)」面板在說明文件中稱為美化,會在截圖周圍加上邊距、圓角半徑、陰影和背景。外框會包含在每次匯出和剪貼簿中。選定一種風格,並用在文件中的每張圖片上。
為圖片命名並歸檔
從彈出式視窗或工具列圖示的右鍵選單開啟設定,再編輯檔名範本。點一個代號即可插入 {date}、{time}、{title}、{domain}、{w} 或 {h},並查看即時預覽。
加上 / 即可存到「下載」內的資料夾。例如,Docs/{title} 會把每張圖片存到 Docs 資料夾,並以網頁標題命名。{title} 代號會替換檔名無法容納的字元,所以網頁標題中的 / 不會建立另一個資料夾。匯出對話框會在儲存前顯示檔名,你也可以在那裡編輯。
限制
產品變更後,介面截圖就會過時。請把網頁標題或網址保留在檔名中,方便你找出並替換舊圖片。瀏覽器截圖只顯示網頁內容;它不包含網址列或瀏覽器工具列。
匯出參考和設定參考列出所有選項。要為貼文準備圖片,請參閱在社群媒體上分享截圖。