5 個(gè)圖片標注技巧，讓你的文章配圖更精美

在博客寫(xiě)作過(guò)程中經(jīng)常被問(wèn)到文章中軟件截圖和圖示的問(wèn)題，很多人關(guān)心使用了那些軟件，怎么才能制作出類(lèi)似效果的。要回答這個(gè)問(wèn)題，需要一些對軟件工具的了解，還有可以參照的范例，后就是在效果和效率之間做出的平衡。

　　對于設計師而言，用 Photoshop、Sketch 這樣的專(zhuān)業(yè)軟件，沒(méi)有什么效果是做不出來(lái)的，但是在商務(wù)應用環(huán)境中，很多時(shí)候我們缺乏設計方面的專(zhuān)業(yè)知識，另外也只是希望能更快更好的完成文檔，所以既要簡(jiǎn)單好用還要追求效率。

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

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

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

　　軟件環(huán)境

　　在圖示創(chuàng )作的場(chǎng)景中主要用到的軟件有：Snagit(截圖)、OmniGraffle(標注)、Curio(組織)、Icons8(圖標元素)，系統自帶的「預覽」、Keynote 在很多場(chǎng)景中使用起來(lái)也很方便，例如，在處理部分放大鏡效果時(shí)「預覽」自帶的工具就很方便，Keynote 用來(lái)組織多張圖片并進(jìn)行簡(jiǎn)單標注時(shí)也能發(fā)揮其作用。

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

　　OmniGraffle 在繪圖上的強大就不用贅述了，對于圖示創(chuàng )作的需求而言，便捷的地方有幾點(diǎn)：支持圖片的直接拖拽、可以自由伸展的畫(huà)布、能僅導出選中對象為圖片、模具、線(xiàn)型豐富、有靈活的圖片蒙版等等。圖示的主體是圖片和標注，不過(guò)有時(shí)候還是會(huì )用到一些繪圖的元素需要在 OmniGraffle 中繪制。

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

　　標注的幾種類(lèi)型

　　從范例中學(xué)習借鑒圖示標注是一個(gè)比較有效的方式，結合不同的場(chǎng)景和需求，這里將標注分為五種基本模式來(lái)介紹：指向線(xiàn)條、編號、便簽、突出和放大、場(chǎng)景。

　　指向型線(xiàn)條

　　圖示標注中指向型線(xiàn)條的標注形式是使用普遍的，通常使用帶端點(diǎn)的線(xiàn)條來(lái)連接說(shuō)明點(diǎn)和注釋文字。

　　箭頭一般用在流程圖這種順序流的圖示中，說(shuō)明性質(zhì)的圖示指向選擇用圓點(diǎn)更合適。線(xiàn)型(直線(xiàn)、折線(xiàn)、曲線(xiàn))的選擇上有具體對象點(diǎn)的一般選擇直線(xiàn)或曲線(xiàn)來(lái)連接，沒(méi)有具體指向點(diǎn)的選用折線(xiàn)(圖例2)。

　　OmniGraffle 中繪制連接線(xiàn)的優(yōu)勢在于各種線(xiàn)型的線(xiàn)條會(huì )隨對象的移動(dòng)自動(dòng)延展，這一點(diǎn)上截圖軟件里是做不到的。OmniGraffle 中和線(xiàn)條繪制有關(guān)的幾個(gè)關(guān)鍵點(diǎn)有：線(xiàn)條的端點(diǎn)形狀(Object-Line)、對象的磁極點(diǎn)(Properties-Connections-Other objects)。

　　更適用指向性線(xiàn)條模式的圖示環(huán)境：

　　圖片本身比較小，需要說(shuō)明的元素較多

　　注釋和內容的聯(lián)系比較緊密，要兼顧就近參考

　　不想破環(huán)圖片本身的完整性

　　編號

　　軟件界面布局、網(wǎng)頁(yè)整體這種圖片本身比較大的圖示說(shuō)明中，采用編號模式會(huì )更清晰合理。在說(shuō)明點(diǎn)添加編號數字，在其他更「寬敞」的地方羅列說(shuō)明文字。另外，編號模式還適用于包含步驟邏輯的圖示說(shuō)明。

　　編號的方式在內容引用和補充說(shuō)明時(shí)很方便，但是也容易形成說(shuō)明點(diǎn)和內容的割裂，實(shí)際運用中更多采用的形式是編號+簡(jiǎn)短文字來(lái)標注，然后和文章的展開(kāi)說(shuō)明相組合。

　　Snagit 中提供了多種配色的編號圖標可以直接拖拽到截圖中，而且數字編號可以自動(dòng)累加計數，這個(gè)小的特性在連續添加多個(gè)編號的標注中很方便。OmniGraffle 中要添加編號麻煩一點(diǎn)，需要繪制圓圈形狀(按住?鍵繪制正圓)然后雙擊添加數字文本。

　　更適用編號模式的圖示環(huán)境：

　　圖片本身較大，需要說(shuō)明的元素較多

　　說(shuō)明點(diǎn)之間存在先后順序關(guān)系

　　需要和展開(kāi)的內容介紹形成對應關(guān)系

　　要說(shuō)明的內容比較多，需要獨立展開(kāi)

　　突出和放大

　　為了更清楚的說(shuō)明圖示中的某個(gè)點(diǎn)通常采用的方式有兩種，突出顯示或者放大。

　　突出顯示適合于展現某個(gè)彈出菜單項、具體的設置窗口(圖例中的3、5、6)，突出顯示的另一種表現手法就是圈選標注，例如圖例7中希望用戶(hù)的關(guān)注的某個(gè)點(diǎn)。細節和比較具體的點(diǎn)需要說(shuō)明時(shí)采用放大鏡方式比較合適，通常的表現形式中既有基于圖片的局部放大，也可以不需要背景只放大的某個(gè)部分。

　　Snagit 中要表現放大效果只需要用圓圈套索選中后復制粘貼并調整粘貼圖片的大小即可，不過(guò)這種方式?jīng)]辦法設置放大部分的邊框和陰影，比較簡(jiǎn)陋?！割A覽」程序中有專(zhuān)門(mén)的放大效果設置，由工具欄選擇放大鏡，綠點(diǎn)調節放大倍率，藍點(diǎn)調節放大區域。

　　OmniGraffle 中設置放大效果靈活，有更多可供調節的參數。具體步驟：首先繪制一個(gè)圓形，然后設置圓形的圖層疊加特性(Object-Fill-Multiply)為透明，選擇填充的效果(Object-Fill-Magnify)為放大，后設置放大倍率即可。圓形形狀可以隨意的移動(dòng)位置、設置外框線(xiàn)條的大小、顏色甚至陰影(Object-Shadow)。

　　便簽型

　　便簽塊形態(tài)的標注主要適用于說(shuō)明文字較多，需要重點(diǎn)表達說(shuō)明文字本身的情況。另外在比較大的截圖內部寫(xiě)說(shuō)明文字的時(shí)候也可以采用這種形式來(lái)區別說(shuō)明文字和截圖上自帶的文字內容。

　　給說(shuō)明設置和圖片本身差別比較明顯的顏色填充是便簽型標注的一個(gè)特點(diǎn)，便簽型的說(shuō)明文本塊既可以通過(guò)連線(xiàn)指向到圖片中的說(shuō)明點(diǎn)，也可以獨立的存在，例如軟件截圖中可以用便簽文本塊來(lái)注明截圖是偏好設置的界面還是某個(gè)菜單等等。

　　簡(jiǎn)單的文本框形態(tài)的說(shuō)明在Snagit、OmniGraffle 中操作都能方便，Curio 中甚至可以插入能折疊的便簽型筆記文本(帶標題的文本塊)。

　　實(shí)物和場(chǎng)景型

　　圖示中使用實(shí)景、產(chǎn)品會(huì )獲得更生動(dòng)的圖示效果，給單純的軟件截圖加上設備外殼也能獲得更好的場(chǎng)景感。

　　實(shí)物或場(chǎng)景的圖片素材，如圖例中的1、4一類(lèi)的圖片需要借助圖像編輯軟件(Pixelmator)來(lái)去除背景，后保存成支持透明的 PNG 格式導入到 OmniGraffle 或者 Snagit 中進(jìn)一步加工。

　　給軟件截圖添加設備外殼就要簡(jiǎn)單的多，可以借助專(zhuān)門(mén)的軟件或者網(wǎng)站來(lái)快速實(shí)現，例如 iPhone 里的軟件 Screenshot Maker Pro，Mac 環(huán)境下的收費軟件 Promotee，還有免費的基于 Web 頁(yè)面的加殼服務(wù)：iphone-screenshot、mockuphone.com，以及收費的 PlaceIt 網(wǎng)站，PlaceIt 的獨特之處在于并不僅限于把圖片放入設備中，它還提供了在不同的情景中展示設備的選擇，比如某個(gè)人的工作臺或者一個(gè)拿著(zhù)手機的手。

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