在博客寫作過程中經(jīng)常被問到文章中軟件截圖和圖示的問題,很多人關(guān)心使用了那些軟件,怎么才能制作出類似效果的。要回答這個(gè)問題,需要一些對(duì)軟件工具的了解,還有可以參照的范例,最后就是在效果和效率之間做出的平衡。
對(duì)于設(shè)計(jì)師而言,用 Photoshop、Sketch 這樣的專業(yè)軟件,沒有什么效果是做不出來的,但是在商務(wù)應(yīng)用環(huán)境中,很多時(shí)候我們?nèi)狈υO(shè)計(jì)方面的專業(yè)知識(shí),另外也只是希望能更快更好的完成文檔,所以既要簡單好用還要追求效率。
除了適當(dāng)?shù)膱D片編輯工具以外,好的圖示還和基本構(gòu)圖、主題表現(xiàn)這些要素密切相關(guān),有點(diǎn)像我們拿手機(jī)拍照,拍的好看主要來自于人的判斷力而其次才是硬件配置上的物理?xiàng)l件。應(yīng)用軟件截圖往往因?yàn)橹苯拥哪康男詫?dǎo)致很多時(shí)候我們忽略了它也是圖片,同樣需要考慮構(gòu)圖和主題的突出,如果只是簡單的放在那里可能效果并不好。
圖示是由圖片和標(biāo)注共同組成的,簡單的圖示只要做到清晰和明確就可以,主題就是你想展現(xiàn)的內(nèi)容,稍微復(fù)雜一些的圖示需要一些布局和排版的知識(shí),如果要達(dá)到更好的視覺效果,還要考慮圖片和標(biāo)注的景深和層次、色彩的搭配、圖片的大小、內(nèi)容的拼合等問題。
從簡單到復(fù)雜有時(shí)候是思考深度的問題,有時(shí)候是使用工具數(shù)量的問題,但是最重要的是認(rèn)識(shí)的問題,只有你想讓它變的更好才能在琢磨中把看到的變成自己的。
軟件環(huán)境
在圖示創(chuàng)作的場景中主要用到的軟件有:Snagit(截圖)、OmniGraffle(標(biāo)注)、Curio(組織)、Icons8(圖標(biāo)元素),系統(tǒng)自帶的「預(yù)覽」、Keynote 在很多場景中使用起來也很方便,例如,在處理部分放大鏡效果時(shí)「預(yù)覽」自帶的工具就很方便,Keynote 用來組織多張圖片并進(jìn)行簡單標(biāo)注時(shí)也能發(fā)揮其作用。
選擇 Snagit 作為主要的截圖軟件,主要的原因有兩個(gè),一個(gè)是 Snagit 自帶的標(biāo)注圖示豐富,能在截圖后完成很多標(biāo)注行為,像數(shù)字編號(hào)、箭頭、高亮等等;另一個(gè)原因是 Snagit 支持圖層模式的編輯,自有的存儲(chǔ)格式能完整的保留元素的圖層信息,如果不滿意導(dǎo)出的圖示的效果可以隨時(shí)回到軟件中編輯。
OmniGraffle 在繪圖上的強(qiáng)大就不用贅述了,對(duì)于圖示創(chuàng)作的需求而言,便捷的地方有幾點(diǎn):支持圖片的直接拖拽、可以自由伸展的畫布、能僅導(dǎo)出選中對(duì)象為圖片、模具、線型豐富、有靈活的圖片蒙版等等。圖示的主體是圖片和標(biāo)注,不過有時(shí)候還是會(huì)用到一些繪圖的元素需要在 OmniGraffle 中繪制。
Curio 在圖片標(biāo)注和整理上有它獨(dú)到的地方,支持圖片的拖拽,自帶截圖、自由伸展的畫布,包含線條、箭頭、形狀等基本的繪圖工具,支持單頁的導(dǎo)出。與 OmniGraffle 相比雖然繪圖上沒有OmniGraffle 專業(yè),但在組織內(nèi)容和想法的整理上 Curio 更靈活。
標(biāo)注的幾種類型
從范例中學(xué)習(xí)借鑒圖示標(biāo)注是一個(gè)比較有效的方式,結(jié)合不同的場景和需求,這里將標(biāo)注分為五種基本模式來介紹:指向線條、編號(hào)、便簽、突出和放大、場景。
指向型線條
圖示標(biāo)注中指向型線條的標(biāo)注形式是使用最普遍的,通常使用帶端點(diǎn)的線條來連接說明點(diǎn)和注釋文字。
箭頭一般用在流程圖這種順序流的圖示中,說明性質(zhì)的圖示指向選擇用圓點(diǎn)更合適。線型(直線、折線、曲線)的選擇上有具體對(duì)象點(diǎn)的一般選擇直線或曲線來連接,沒有具體指向點(diǎn)的選用折線(圖例2)。
OmniGraffle 中繪制連接線的優(yōu)勢(shì)在于各種線型的線條會(huì)隨對(duì)象的移動(dòng)自動(dòng)延展,這一點(diǎn)上截圖軟件里是做不到的。OmniGraffle 中和線條繪制有關(guān)的幾個(gè)關(guān)鍵點(diǎn)有:線條的端點(diǎn)形狀(Object-Line)、對(duì)象的磁極點(diǎn)(Properties-Connections-Other objects)。
更適用指向性線條模式的圖示環(huán)境:
圖片本身比較小,需要說明的元素較多
注釋和內(nèi)容的聯(lián)系比較緊密,要兼顧就近參考
不想破環(huán)圖片本身的完整性
編號(hào)
軟件界面布局、網(wǎng)頁整體這種圖片本身比較大的圖示說明中,采用編號(hào)模式會(huì)更清晰合理。在說明點(diǎn)添加編號(hào)數(shù)字,在其他更「寬敞」的地方羅列說明文字。另外,編號(hào)模式還適用于包含步驟邏輯的圖示說明。
編號(hào)的方式在內(nèi)容引用和補(bǔ)充說明時(shí)很方便,但是也容易形成說明點(diǎn)和內(nèi)容的割裂,實(shí)際運(yùn)用中更多采用的形式是編號(hào)+簡短文字來標(biāo)注,然后和文章的展開說明相組合。
Snagit 中提供了多種配色的編號(hào)圖標(biāo)可以直接拖拽到截圖中,而且數(shù)字編號(hào)可以自動(dòng)累加計(jì)數(shù),這個(gè)小的特性在連續(xù)添加多個(gè)編號(hào)的標(biāo)注中很方便。OmniGraffle 中要添加編號(hào)麻煩一點(diǎn),需要繪制圓圈形狀(按住?鍵繪制正圓)然后雙擊添加數(shù)字文本。
更適用編號(hào)模式的圖示環(huán)境:
圖片本身較大,需要說明的元素較多
說明點(diǎn)之間存在先后順序關(guān)系
需要和展開的內(nèi)容介紹形成對(duì)應(yīng)關(guān)系
要說明的內(nèi)容比較多,需要獨(dú)立展開
突出和放大
為了更清楚的說明圖示中的某個(gè)點(diǎn)通常采用的方式有兩種,突出顯示或者放大。
突出顯示適合于展現(xiàn)某個(gè)彈出菜單項(xiàng)、具體的設(shè)置窗口(圖例中的3、5、6),突出顯示的另一種表現(xiàn)手法就是圈選標(biāo)注,例如圖例7中希望用戶的關(guān)注的某個(gè)點(diǎn)。細(xì)節(jié)和比較具體的點(diǎn)需要說明時(shí)采用放大鏡方式比較合適,通常的表現(xiàn)形式中既有基于圖片的局部放大,也可以不需要背景只放大的某個(gè)部分。
Snagit 中要表現(xiàn)放大效果只需要用圓圈套索選中后復(fù)制粘貼并調(diào)整粘貼圖片的大小即可,不過這種方式?jīng)]辦法設(shè)置放大部分的邊框和陰影,比較簡陋?!割A(yù)覽」程序中有專門的放大效果設(shè)置,由工具欄選擇放大鏡,綠點(diǎn)調(diào)節(jié)放大倍率,藍(lán)點(diǎn)調(diào)節(jié)放大區(qū)域。
OmniGraffle 中設(shè)置放大效果最靈活,有更多可供調(diào)節(jié)的參數(shù)。具體步驟:首先繪制一個(gè)圓形,然后設(shè)置圓形的圖層疊加特性(Object-Fill-Multiply)為透明,選擇填充的效果(Object-Fill-Magnify)為放大,最后設(shè)置放大倍率即可。圓形形狀可以隨意的移動(dòng)位置、設(shè)置外框線條的大小、顏色甚至陰影(Object-Shadow)。
便簽型
便簽塊形態(tài)的標(biāo)注主要適用于說明文字較多,需要重點(diǎn)表達(dá)說明文字本身的情況。另外在比較大的截圖內(nèi)部寫說明文字的時(shí)候也可以采用這種形式來區(qū)別說明文字和截圖上自帶的文字內(nèi)容。
給說明設(shè)置和圖片本身差別比較明顯的顏色填充是便簽型標(biāo)注的一個(gè)特點(diǎn),便簽型的說明文本塊既可以通過連線指向到圖片中的說明點(diǎn),也可以獨(dú)立的存在,例如軟件截圖中可以用便簽文本塊來注明截圖是偏好設(shè)置的界面還是某個(gè)菜單等等。
簡單的文本框形態(tài)的說明在Snagit、OmniGraffle 中操作都能方便,Curio 中甚至可以插入能折疊的便簽型筆記文本(帶標(biāo)題的文本塊)。
實(shí)物和場景型
圖示中使用實(shí)景、產(chǎn)品會(huì)獲得更生動(dòng)的圖示效果,給單純的軟件截圖加上設(shè)備外殼也能獲得更好的場景感。
實(shí)物或場景的圖片素材,如圖例中的1、4一類的圖片需要借助圖像編輯軟件(Pixelmator)來去除背景,最后保存成支持透明的 PNG 格式導(dǎo)入到 OmniGraffle 或者 Snagit 中進(jìn)一步加工。
給軟件截圖添加設(shè)備外殼就要簡單的多,可以借助專門的軟件或者網(wǎng)站來快速實(shí)現(xiàn),例如 iPhone 里的軟件 Screenshot Maker Pro,Mac 環(huán)境下的收費(fèi)軟件 Promotee,還有免費(fèi)的基于 Web 頁面的加殼服務(wù):iphone-screenshot、mockuphone.com,以及收費(fèi)的 PlaceIt 網(wǎng)站,PlaceIt 的獨(dú)特之處在于并不僅限于把圖片放入設(shè)備中,它還提供了在不同的情景中展示設(shè)備的選擇,比如某個(gè)人的工作臺(tái)或者一個(gè)拿著手機(jī)的手。
因?yàn)榧託ず螳@得的 PNG 圖片背景是透明的,所以借助 Snagit、OmniGraffle 自己也可以拼合出一些更符合自己要求的場景圖示結(jié)果。例如下面的這張 Ulysses 和 Daedalus 同步的截圖,首先是在手機(jī)里截取的 Daedalus 軟件界面,然后傳到 Mac 上用 Promotee 導(dǎo)出成有 iPhone 6外殼的圖片,最后在 Snagit 中插入到另一張桌面軟件截圖中,調(diào)整了一下輸出的圖片高度,導(dǎo)出成最終的樣子。
掃一掃關(guān)注微信公眾號(hào)
掃一掃訪問手機(jī)站
掃一掃打開小程序