教學圖片底部要加說明,先把游標位置、按鈕名稱與錯誤訊息列為不可遮擋區,再把文字縮成讀者不用看上下文也能懂的一句話。圖片加文字工具能把這句話放在原尺寸圖片的下方中央並另存 PNG,但它不會替你判斷哪裡是操作重點。
先決定這張圖只要回答哪一個問題
一張教學圖最好只承擔一個動作,說明文字也只補上「做什麼」或「看到什麼結果」。如果同一句同時交代前提、三個步驟與例外,字會變長,讀者反而找不到畫面裡真正要按的位置。
例如要說明軟體匯出檔案,截圖裡的「匯出」按鈕在右下角,旁邊還有檔案格式選單。底部若寫「請選擇 PNG 後按右下角匯出並確認下載資料夾中的尺寸」,不但太長,還很可能蓋住按鈕。可改成「選 PNG,再按右下角的匯出」,把下載後的檢查留到下一張圖或正文。
動手前先問三件事:讀者要找的控制項是哪一個、錯誤時要看到哪段訊息、這句話拿離文章後是否仍看得懂。答案不清楚時,先重裁畫面或拆成兩張圖,不要靠更長的文字補救。
保留原圖,再替底部文字留出安全區
先複製一份來源圖片並用清楚的檔名標記用途,原始截圖保持不動。這樣裁切、縮放或改字色不合適時,仍能回到完整畫面,而不必從已壓縮或已加字的 PNG 反覆加工。
安全區不是固定的「下面 20%」。工作列、確認按鈕、頁碼、狀態列與字幕常常就在底部;先在實際分享大小查看,再決定能否直接加字。若底部已塞滿資訊,可用圖片裁切工具移除無關的瀏覽器邊框或空白,但不能把必要的操作結果裁掉。
需要改成指定寬度時,先在工作副本完成縮放,再加上說明。文字是在目前像素尺寸上繪製;先加字後大幅縮小,細線與中文字可能一起變糊。使用圖片縮放工具時要保留長寬比例,下載後仍要重開確認,不能只看網頁內的預覽。
用圖片加文字工具放上一句短說明
圖片加文字工具適合已經整理好的單張圖片:選擇圖片、輸入一行說明、挑選文字顏色,再下載新的 PNG。元件以瀏覽器畫布處理圖片,沒有覆蓋原檔的步驟,輸出檔名固定為 add-text-to-image.png。
目前文字位置固定在下方中央,字型與粗細也由工具決定;可調的是文字內容與顏色。工具沒有任意拖曳、文字框、換行、底色區塊或自動避開按鈕的功能。黑色描邊能增加部分背景上的對比,但不代表任何照片都會清楚。
先用最短的可辨識句子試做。例如「按右下角的匯出」比「在完成所有設定之後請點選畫面右下角的匯出按鈕」更容易放下。背景很亮與很暗的區域同時出現時,不要只改字色碰碰運氣;應回頭裁出較單純的安全區,或改用能手動配置文字框的編輯軟體。
下載後用讀者真正會看到的尺寸驗收
驗收要看下載檔,不是只看編輯畫面。從下載資料夾重新開啟 PNG,先確認尺寸與構圖,再縮到通訊軟體、知識庫或簡報中預計顯示的寬度,檢查每個字是否完整。
可依序核對:
- 說明沒有蓋住游標、按鈕、欄位名稱、錯誤碼或頁面狀態。
- 文字沒有超出左右邊界;工具不會自動換行,長句可能在畫布外被截掉。
- 縮小後仍能分辨中文字與標點,黑色描邊沒有和深色介面混成一片。
- 圖片中的步驟與文字使用同一個介面版本、語言和按鈕名稱。
- 原始截圖仍獨立保存,加字版檔名能看出用途與版本。
若圖片要貼進文件,先插入一張測試圖並輸出一次最終格式。簡報匯出、聊天平台重新壓縮或文件欄寬都可能讓原本清楚的字變小;這些後續處理不在工具控制範圍內。
把固定位置視為限制,不要假裝它是完整編輯器
這個工具適合快速加上一句底部說明,不適合製作多步驟標註、箭頭、編號氣泡、長字幕或可回頭編輯的設計稿。它只下載一張新的 PNG,不會保留文字圖層,也不能重新打開後修改原來那一層文字。
圖片內若有帳號、通知、路徑或客戶資料,加一句教學文字不會把那些內容隱藏。加字不是遮蔽,也不是權限控制;送出前仍要逐角落檢查可見資訊。需要多人維護的教學,另存一份包含原始截圖、文案與版本說明的工作資料,比只留下成品 PNG 更容易更新。
常見問題
文字可以拖到左上角或按鈕旁邊嗎?
不行。目前文字固定在圖片下方中央,沒有拖曳或座標設定。若底部正好是操作重點,應先調整截圖構圖,或改用支援文字框與箭頭的圖片編輯器。
一段很長的說明會自動換行嗎?
不會。畫布會繪製單行文字,超出寬度的部分可能被截掉。先刪去不影響動作的字,仍放不下時就把說明移回文章正文。
工具會修改我上傳的原始圖片嗎?
不會。它在瀏覽器中產生另一份 PNG 供下載,沒有覆蓋來源檔的操作。仍建議先建立工作副本,避免後續整理檔案時混淆原圖與加字版。
為什麼預覽清楚,貼到聊天軟體後卻看不清楚?
聊天平台可能縮小或重新壓縮圖片。請用實際傳送後的顯示尺寸再看一次;若文字太小,縮短句子、重裁畫面或改成在正文說明,不要只反覆銳化成品。
加上說明文字就能遮住畫面中的個資嗎?
不能。文字只是疊在固定位置,並不會辨識或遮蔽其他區域。分享前要另外檢查姓名、Email、通知、網址參數與檔案路徑,必要時使用專門的遮蔽流程。