5 個圖片標註技巧，讓你的文章配圖更精美

01-27

在博客寫作過程中經常被問到文章中軟體截圖和圖示的問題，很多人關心使用了那些軟體，怎麼才能製作出類似效果的。要回答這個問題，需要一些對軟體工具的了解，還有可以參照的範例，最後就是在效果和效率之間做出的平衡。

對於設計師而言，用 Photoshop、Sketch 這樣的專業軟體，沒有什麼效果是做不出來的，但是在商務應用環境中，很多時候我們缺乏設計方面的專業知識，另外也只是希望能更快更好的完成文檔，所以既要簡單好用還要追求效率。

除了適當的圖片編輯工具以外，好的圖示還和基本構圖、主題表現這些要素密切相關，有點像我們拿手機拍照，拍的好看主要來自於人的判斷力而其次才是硬體配置上的物理條件。應用軟體截圖往往因為直接的目的性導致很多時候我們忽略了它也是圖片，同樣需要考慮構圖和主題的突出，如果只是簡單的放在那裡可能效果並不好。

圖示是由圖片和標註共同組成的，簡單的圖示只要做到清晰和明確就可以，主題就是你想展現的內容，稍微複雜一些的圖示需要一些布局和排版的知識，如果要達到更好的視覺效果，還要考慮圖片和標註的景深和層次、色彩的搭配、圖片的大小、內容的拼合等問題。

從簡單到複雜有時候是思考深度的問題，有時候是使用工具數量的問題，但是最重要的是認識的問題，只有你想讓它變的更好才能在琢磨中把看到的變成自己的。

軟體環境

在圖示創作的場景中主要用到的軟體有：Snagit（截圖）、OmniGraffle（標註）、Curio（組織）、Icons8（圖標元素），系統自帶的「預覽」、Keynote 在很多場景中使用起來也很方便，例如，在處理部分放大鏡效果時「預覽」自帶的工具就很方便，Keynote 用來組織多張圖片並進行簡單標註時也能發揮其作用。

選擇 Snagit 作為主要的截圖軟體，主要的原因有兩個，一個是 Snagit 自帶的標註圖示豐富，能在截圖後完成很多標註行為，像數字編號、箭頭、高亮等等；另一個原因是 Snagit 支持圖層模式的編輯，自有的存儲格式能完整的保留元素的圖層信息，如果不滿意導出的圖示的效果可以隨時回到軟體中編輯。

OmniGraffle 在繪圖上的強大就不用贅述了，對於圖示創作的需求而言，便捷的地方有幾點：支持圖片的直接拖拽、可以自由伸展的畫布、能僅導出選中對象為圖片、模具、線型豐富、有靈活的圖片蒙版等等。圖示的主體是圖片和標註，不過有時候還是會用到一些繪圖的元素需要在 OmniGraffle 中繪製。

Curio 在圖片標註和整理上有它獨到的地方，支持圖片的拖拽，自帶截圖、自由伸展的畫布，包含線條、箭頭、形狀等基本的繪圖工具，支持單頁的導出。與 OmniGraffle 相比雖然繪圖上沒有OmniGraffle 專業，但在組織內容和想法的整理上 Curio 更靈活。

標註的幾種類型

從範例中學習借鑒圖示標註是一個比較有效的方式，結合不同的場景和需求，這裡將標註分為五種基本模式來介紹：指向線條、編號、便簽、突出和放大、場景。

指向型線條

圖示標註中指向型線條的標註形式是使用最普遍的，通常使用帶端點的線條來連接說明點和注釋文字。

箭頭一般用在流程圖這種順序流的圖示中，說明性質的圖示指向選擇用圓點更合適。線型（直線、折線、曲線）的選擇上有具體對象點的一般選擇直線或曲線來連接，沒有具體指向點的選用折線（圖例2）。

OmniGraffle 中繪製連接線的優勢在於各種線型的線條會隨對象的移動自動延展，這一點上截圖軟體里是做不到的。OmniGraffle 中和線條繪製有關的幾個關鍵點有：線條的端點形狀（Object－Line）、對象的磁極點（Properties－Connections－Other objects）。

更適用指向性線條模式的圖示環境：

圖片本身比較小，需要說明的元素較多
注釋和內容的聯繫比較緊密，要兼顧就近參考
不想破環圖片本身的完整性

編號

軟體界面布局、網頁整體這種圖片本身比較大的圖示說明中，採用編號模式會更清晰合理。在說明點添加編號數字，在其他更「寬敞」的地方羅列說明文字。另外，編號模式還適用於包含步驟邏輯的圖示說明。

編號的方式在內容引用和補充說明時很方便，但是也容易形成說明點和內容的割裂，實際運用中更多採用的形式是編號＋簡短文字來標註，然後和文章的展開說明相組合。

Snagit 中提供了多種配色的編號圖標可以直接拖拽到截圖中，而且數字編號可以自動累加計數，這個小的特性在連續添加多個編號的標註中很方便。OmniGraffle 中要添加編號麻煩一點，需要繪製圓圈形狀（按住?鍵繪製正圓）然後雙擊添加數字文本。

更適用編號模式的圖示環境：

圖片本身較大，需要說明的元素較多
說明點之間存在先後順序關係
需要和展開的內容介紹形成對應關係
要說明的內容比較多，需要獨立展開

突出和放大

為了更清楚的說明圖示中的某個點通常採用的方式有兩種，突出顯示或者放大。

突出顯示適合於展現某個彈出菜單項、具體的設置窗口（圖例中的3、5、6），突出顯示的另一種表現手法就是圈選標註，例如圖例7中希望用戶的關注的某個點。細節和比較具體的點需要說明時採用放大鏡方式比較合適，通常的表現形式中既有基於圖片的局部放大，也可以不需要背景只放大的某個部分。

Snagit 中要表現放大效果只需要用圓圈套索選中後複製粘貼並調整粘貼圖片的大小即可，不過這種方式沒辦法設置放大部分的邊框和陰影，比較簡陋。「預覽」程序中有專門的放大效果設置，由工具欄選擇放大鏡，綠點調節放大倍率，藍點調節放大區域。

OmniGraffle 中設置放大效果最靈活，有更多可供調節的參數。具體步驟：首先繪製一個圓形，然後設置圓形的圖層疊加特性（Object－Fill－Multiply）為透明，選擇填充的效果（Object－Fill－Magnify）為放大，最後設置放大倍率即可。圓形形狀可以隨意的移動位置、設置外框線條的大小、顏色甚至陰影（Object－Shadow）。

便簽型

便簽塊形態的標註主要適用於說明文字較多，需要重點表達說明文字本身的情況。另外在比較大的截圖內部寫說明文字的時候也可以採用這種形式來區別說明文字和截圖上自帶的文字內容。

給說明設置和圖片本身差別比較明顯的顏色填充是便簽型標註的一個特點，便簽型的說明文本塊既可以通過連線指向到圖片中的說明點，也可以獨立的存在，例如軟體截圖中可以用便簽文本塊來註明截圖是偏好設置的界面還是某個菜單等等。

簡單的文本框形態的說明在Snagit、OmniGraffle 中操作都能方便，Curio 中甚至可以插入能摺疊的便簽型筆記文本（帶標題的文本塊）。

實物和場景型

圖示中使用實景、產品會獲得更生動的圖示效果，給單純的軟體截圖加上設備外殼也能獲得更好的場景感。

實物或場景的圖片素材，如圖例中的1、4一類的圖片需要藉助圖像編輯軟體（Pixelmator）來去除背景，最後保存成支持透明的 PNG 格式導入到 OmniGraffle 或者 Snagit 中進一步加工。

給軟體截圖添加設備外殼就要簡單的多，可以藉助專門的軟體或者網站來快速實現，例如 iPhone 里的軟體 Screenshot Maker Pro，Mac 環境下的收費軟體 Promotee，還有免費的基於 Web 頁面的加殼服務：iphone-screenshot、mockuphone.com，以及收費的 PlaceIt 網站，PlaceIt 的獨特之處在於並不僅限於把圖片放入設備中，它還提供了在不同的情景中展示設備的選擇，比如某個人的工作台或者一個拿著手機的手。

因為加殼後獲得的 PNG 圖片背景是透明的，所以藉助 Snagit、OmniGraffle 自己也可以拼合出一些更符合自己要求的場景圖示結果。例如下面的這張 Ulysses 和 Daedalus 同步的截圖，首先是在手機里截取的 Daedalus 軟體界面，然後傳到 Mac 上用 Promotee 導出成有 iPhone 6外殼的圖片，最後在 Snagit 中插入到另一張桌面軟體截圖中，調整了一下輸出的圖片高度，導出成最終的樣子。

想做一個精美的圖示？

在文檔和寫作的過程中，你也會經常用到圖示，最簡單的方式是放一張軟體的截圖，但是這種效果對於閱讀者的體驗有些糟糕——信息的呈現不夠直觀，無法獲取明晰的要點。

如果你想要為自己的文章或 PPT 配圖做一張精美、直觀的圖示，歡迎訂閱本文作者編寫的：《用 OmniGraffle 畫一個精美的圖示》。

本教程基於範例模式漸進展開的 OmniGraffle 系列教程，讓 OmniGraffle 成為你製作圖示和商務圖例的強大助力。臨摹復刻對於學習繪圖從來都是最有效的方式，?對繪圖軟體的熟練也是如此。很多軟體中的功能點也只有在不斷使?的過程中才會被挖掘出來。