Sketch 使用操作系統(tǒng)原生的字體渲染,因此文本看起來都會很棒。使用原生字體渲染的好處就是當你進行網(wǎng)頁設(shè)計時,你可以肯定作品中的文本都是精準的。Sketch 同時支持文本樣式,所以你可以讓多個文本圖層使用共同的字體,大小,和字間距等等。
你可以從工具欄中選擇文本工具。當光標變成文本光標時,在畫布中任一點單擊以添加文本圖層。你會看見新的文本圖層已被選定,直接開始打字吧。
你也可以單擊并拖動鼠標以創(chuàng)造一個固定尺寸的文本框,當文本內(nèi)容大于文本框時,會自動向下擴展文本框長度。而普通的不固定尺寸的文本框則會向后擴展寬度以適應文本內(nèi)容。
如果你直接拖拽文本框,文字本身的大小并不會相應改變,但是你可以拉動文本框底部的縮放手柄來一起控制文本框和文字的大小。
http://wiki.jikexueyuan.com/project/sketch-3/images/bottom-resize.jpg" alt="" />
當你選中了一段文本,你會發(fā)現(xiàn)檢查器隨之變成了編輯文本所需要的屬性。
在基本的圖層屬性下面是共享文本式樣的區(qū)域。
接著是選擇字體和字號的地方,同時你可以展開 T 按鈕,來選擇一些文字裝飾,比如下劃線。再下面則可以選擇字間距,行間距和段落間距。
http://wiki.jikexueyuan.com/project/sketch-3/images/text-options.jpg" alt="" />
編輯文本時,你可以通過 T 按鈕和字號中間的顏色按鈕為文本設(shè)置單獨的顏色。你也可以為文本設(shè)置一個通用的填充式樣,比如漸變,但是任何填充都將針對整個文本圖層,這將覆蓋剛才那個顏色按鈕的設(shè)置。
值得注意的是,為了在文本上渲染漸變效果,我們得將文本轉(zhuǎn)化為矢量圖形,并失去文本的子像素抗鋸齒效果。
文本框的寬度屬性(在對齊功能的下面)可以被設(shè)置為自動或者固定。自動大小文本框意味著它會自動擴展以容納你輸入的一切文本。固定大小文本框則會在你輸入更多內(nèi)容時保持現(xiàn)有寬度不變,而增加文本框的長度。
http://wiki.jikexueyuan.com/project/sketch-3/images/flexible-width.jpg" alt="" />
Sketch 使用操作系統(tǒng)原生的字體渲染,因此文本看起來都會很棒。使用原生字體渲染的好處就是當你進行網(wǎng)頁設(shè)計時,你可以肯定作品中的文本都是精準的。
Mac OS 系統(tǒng)使用了一種叫子像素抗鋸齒效果 (subpixel-antialiasing)的技術(shù)來提升文本渲染效果,Sketch 里也是采用的這一種。但有時會出現(xiàn)一些問題警告,我們從一些底層技術(shù)來慢慢解釋。
一個電腦的顯示器是由網(wǎng)格狀的像素組成的。文字渲染遇到的問題是普通的屏幕里并沒有足夠多的像素來精確的展現(xiàn)文字的曲線。這就需要用到子像素抗鋸齒技術(shù)了,它會將那些被文字曲線遮住一部分的像素稍稍變亮一些,并且在視覺上產(chǎn)生更平滑的效果。
這就是為什么當你在像素模式中把文本放很大觀察時,你會看見文字旁邊有一些藍色和棕色的小色塊,但是在正常大小時,這些文字效果又沒有任何問題。Windows 用戶對這種子像素抗鋸齒技術(shù)不太習慣,他們總是將 Mac 的文字渲染形容成 “很胖”。
http://wiki.jikexueyuan.com/project/sketch-3/images/subpixel-aa.jpg" alt="" />
順利實現(xiàn)子像素抗鋸齒效果,文本必需出現(xiàn)在一個不透明的(有色的)背景上,因為系統(tǒng)需要知道最終的顏色對比結(jié)果是什么樣的。這一點與圖層混合模式是相沖突的。
要實現(xiàn)圖層混合模式,Sketch 需要在一個透明背景上渲染所有的圖層,這樣這些圖層才能像你所期望的那樣混合在一起,最終結(jié)果再渲染回 Sketch 的白色畫布上。
這就會帶給我們一個問題,如果沒有一個不透明背景我們就不能渲染抗鋸齒的文字,但是有了不透明的背景我們又不能渲染圖層的混合模式了。這就意味著,一旦你的畫布中出現(xiàn)了一個有混合模式的圖層,Sketch 就不得不運用透明背景的算法,而無法給文字實現(xiàn)子像素抗鋸齒效果了。
你可以嘗試對比一下,將一段文本放在不透明背景上(比如填充顏色或者填充了圖片的圖形)來看看效果。
http://wiki.jikexueyuan.com/project/sketch-3/images/no-subpixel-aa.jpg" alt="" />
另一個關(guān)于子像素抗鋸齒效果的問題出現(xiàn)在導出上。在畫布上,Sketch 可以順利的渲染有色背景上的文本。但當你將文本導出為 PNG 文件,并保持背景透明,你便會發(fā)現(xiàn)文本變得不太一樣——因為背景是透明的,我們無法在透明背景下渲染子像素抗鋸齒效果。
和之前說的混合模式一樣,你也可以嘗試對比一下,將一段文本放在不透明背景上(比如填充顏色或者填充了圖片的圖形)來看看效果。
蘋果最初發(fā)布 iPhone 時,他們決定不用子像素抗鋸齒技術(shù)來渲染手機上的文字,原因是顯示器上的像素都是由紅綠藍的光形成的,而 iPhone 是可以橫屏豎屏切換的,也就是說這些本來垂直排列的紅綠藍像素會突然水平排列,這樣一來,整個子像素抗鋸齒技術(shù)就崩潰了。蘋果可以保持豎屏時候的文字渲染,放棄掉橫屏的情況,但他們理智的決定保持豎屏與橫屏的體驗一致。
所以每當你在為 iPhone 或者 iPad 設(shè)計交互頁面,你都需要記住這一點:在畫布上,Sketch 會幫你對文字進行子像素抗鋸齒渲染,但在移動設(shè)備上,文字并不會被這樣處理。你需要告訴 Sketch 無需進行子像素抗鋸齒渲染,通過 Sketch > Preferences > General, 取消選擇 subpixel-antialiasing。
你會經(jīng)常想將多個文本設(shè)置為同一式樣,共享式樣能實現(xiàn)這一點,他們會將你分散在不同圖層中的文本都保持同步。
值得注意的是,文本式樣只能在一個文件中共享,一個文件中的不同頁面不同畫板都能夠使用。
想要創(chuàng)建新的文本式樣,你需要先選中一個文本框,然后進入 圖層 > 創(chuàng)建共享式樣 (Layer > create Shared Style),你會發(fā)現(xiàn)檢查器立即顯示出了當前圖層的文本式樣,你也可以在這里給式樣重命名。
如果文本屬性發(fā)生任何改變,都會自動與其他使用同一式樣的文本保持同步。
http://wiki.jikexueyuan.com/project/sketch-3/images/new-style.jpg" alt="" />
你可以和往常一樣添加第二個文本圖層,然后在檢查器中給這個文本使用之前創(chuàng)建好的式樣。另一個直接添加特定式樣文本圖層的方法是,進入 添加 > 式樣文本 (Insert > Styled Text),然后選擇你想要的式樣,接下來的步驟和添加正常的文本圖層則是一樣的了。
注意:在Sketch 2 中我們就已經(jīng)有了文本共享式樣的功能,在Sketch 3中又進一步升級了。最大的變化就是,現(xiàn)在漸變填充,陰影和內(nèi)陰影都能包含在文本式樣當中了。
http://wiki.jikexueyuan.com/project/sketch-3/images/insert-style.jpg" alt="" />
Sketch 支持文本渲染路徑,比如右邊這樣:
http://wiki.jikexueyuan.com/project/sketch-3/images/text-on-path2.jpg" alt="" />
我們只需要兩個東西來實現(xiàn)這個效果:一個矢量圖形和一個文本圖層。當你進入頂端的 編輯菜單 > 文本路徑 (Edit > Text on Path),Sketch會幫你把文本圖層貼合的放在它下一層的矢量圖形上面。值得注意的是,兩者的順序必須是矢量圖形在文本圖層的下面,才能得到這樣的效果。
放置文本圖層時你只需將文本橫向拖至矢量圖形,這點很難用文字表述,但你可以在創(chuàng)作中非常直觀的看到他們?nèi)绾螌崿F(xiàn)。
文本也都可以被轉(zhuǎn)換成矢量圖形,你可以執(zhí)行 文本 > 將文本轉(zhuǎn)換為輪廓 (Type > Covert Text to Outlines) 的命令來實現(xiàn)。這會將文本中的每個字母都變成圖形,你可以向編輯任何其他圖形一樣單獨編輯每一個路徑和錨點。
警告
但是,請額外留心這個操作。不要將很長一段文字都轉(zhuǎn)化為矢量圖形,這回大大減緩文件的運行速度。
將一小段文字轉(zhuǎn)化為大量包含布爾運算的子路徑是非常非常消耗系統(tǒng)內(nèi)存的,如果你不得不轉(zhuǎn)換一段文字,那么你可以先將一段文字盡可能分成多個短文本,然后再一個個的轉(zhuǎn)化為矢量。
不過既然你現(xiàn)在可以直接在文本上運用漸變等效果,大多數(shù)時候你都不會需要將文本轉(zhuǎn)化為輪廓。