詳細(xì)解析網(wǎng)頁字體設(shè)計(jì)心得技巧

在來騰訊的一年里，接觸過許多項(xiàng)目里的字體設(shè)計(jì)，也因此在設(shè)計(jì)過程中形成了自己的一套字體設(shè)計(jì)方法。借此機(jī)會(huì)與大家分享設(shè)計(jì)心得，不足處歡迎頂帖回復(fù)。廢話少說，直奔主題。

如何實(shí)現(xiàn)字體變形

如何實(shí)現(xiàn)字體變形?我想是剛接觸字體設(shè)計(jì)的設(shè)計(jì)師們最關(guān)注的問題。在這里我只想分享一個(gè)觀點(diǎn)，每個(gè)人的創(chuàng)意和實(shí)現(xiàn)方式各有不同。我在這兒介紹的，是我自己在設(shè)計(jì)過程中總結(jié)的一套方法，供參考。

回到剛剛的問題，我用三個(gè)步驟來回答。

用什么方法實(shí)現(xiàn)

實(shí)現(xiàn)的過程是怎么樣

設(shè)計(jì)過程應(yīng)該規(guī)避什么

1) 在開始設(shè)計(jì)字體前

個(gè)人習(xí)慣是會(huì)在草稿紙上涂畫，把自己對(duì)字體的結(jié)構(gòu)和布局先快速地定型。從羅列出來的幾個(gè)方案里尋找較為合適的方案，然后拍照放在illustrator 里進(jìn)行最初的筆畫組織。illustrator是個(gè)效率很高的圖形繪制軟件，可以輕松地幫你完成各種圓角、對(duì)稱、傾斜、等距分布、交差減去等任務(wù)。還有一招是可以把字體輪廓化描邊，快速運(yùn)用基礎(chǔ)字體來變形。

2) 完成字體雛形后，可以分幾步來進(jìn)入細(xì)節(jié)的修飾。

這個(gè)時(shí)候可以參考下類似的優(yōu)秀字體的間架結(jié)構(gòu)，調(diào)節(jié)好每個(gè)字的筆劃分布和重心均衡。

在選定字體的風(fēng)格趨勢(shì)后，給字體做相應(yīng)的視覺梳理。例如字與字的間距，筆劃之間的間距、整體字形的傾斜角度、特殊地方做圓角處理等等。讓整個(gè)字體有一個(gè)貫穿始終的視覺規(guī)則在里頭。

例子1：豎筆畫的左端都做了圓角處理，那么后邊的e也在相同規(guī)則下，分別做了筆畫末端的圓角處理。

例子2：運(yùn)用illustrator里的智能輔助線，拉取垂直、水平和45°角的輔助線來對(duì)齊筆畫和調(diào)整間距。運(yùn)用圓形相交減去來實(shí)現(xiàn)筆劃轉(zhuǎn)角出的圓角處理。

用不同尺寸做對(duì)比，充分考慮字體在不同尺寸下的細(xì)節(jié)能否顯示到位。這一部分建議做3-5個(gè)實(shí)際應(yīng)用的尺寸做為參考。

將字體放到實(shí)際的應(yīng)用環(huán)境下，做細(xì)節(jié)和色彩搭配的調(diào)整。建議考慮頁面的風(fēng)格來決定質(zhì)感、色彩種類。必要時(shí)可做底色襯托。

3) 設(shè)計(jì)過程中應(yīng)該規(guī)避什么

盡可能地保證文字的可閱讀性。終歸是商業(yè)設(shè)計(jì)，要考慮到大部分人的文化背景、和圖形識(shí)別能力。

掌控字體的肩架結(jié)構(gòu)，避免大小不一、分布不均、筆劃不均等問題。例子中左下角的例子，雖然用星星的形狀去遷就“牌”和“在”，但卻反而讓字體在中心區(qū)域顯得過于密集而不透氣。再看右邊的例子，將星的形狀中空，并接連到“在”的橫劃，讓字體的筆劃更加緊湊透氣。

應(yīng)考慮到具體應(yīng)用環(huán)境和實(shí)際的使用尺寸。

下來介紹的是這一年里積累的字體設(shè)計(jì)作品。上面這張是2011年冬天里的ISUX主題拓展活動(dòng)的主題字設(shè)計(jì)。當(dāng)時(shí)對(duì)這8個(gè)字的口號(hào)感到一整頭皮發(fā)麻。因?yàn)樗驗(yàn)橹@過程是相當(dāng)復(fù)雜。后來在勾劃字體雛形時(shí)，不停地?cái)[布筆畫，發(fā)現(xiàn)把字體的間距拉近之后，更能體現(xiàn)融合的意義。于是就做筆劃的刪減和融合。適當(dāng)?shù)乩ㄅR近文字的筆畫，反倒讓字面看起來流動(dòng)了。過程中看到ISUX的“小菊花”logo，就在想能不能也把色彩也融合到里邊。試了幾稿后發(fā)現(xiàn)，復(fù)雜的字面里，可以把ISUX四個(gè)字母嵌入到里邊。于是最終稿就成了一堆筆劃里嵌了字母ISUX。

分享這個(gè)案例是想介紹一種很快捷有效的方法。在現(xiàn)有的字體上，結(jié)合主題元素進(jìn)行筆畫變形，在一定程度上也可以滿足設(shè)計(jì)需求，還能節(jié)省時(shí)間成本。

當(dāng)時(shí)是直接用的方正正黑粗體，因?yàn)楸酒诘幕顒?dòng)是華誼兄弟冠名的，即加入電影元素——膠片，把筆劃做貫穿變形，使得字面上有接連。其次是把華誼兄弟logo里的紅色應(yīng)用進(jìn)來，延續(xù)華誼的品牌色彩;最后是放到頁面中做光感處理，提升字體的視覺效果。

這一部分的字體設(shè)計(jì)是針對(duì)頻道內(nèi)的冠名logo設(shè)計(jì)的。統(tǒng)一應(yīng)用粗筆劃、傾斜等規(guī)則。鑒于字體形態(tài)的趣味性，加入了圖形元素來豐富字體本身。同時(shí)兼具不同尺寸下的顯示效果，做筆畫的刪減、和間距調(diào)整。

這一部分的設(shè)計(jì)是奧運(yùn)前的頻道欄目logo設(shè)計(jì)。為了讓最終設(shè)計(jì)稿具有運(yùn)動(dòng)特性，因此筆畫都用傾斜和簡(jiǎn)練的處理。另外是通過錯(cuò)開字的水平排版，然整個(gè)字面更加活潑。最后是借用黃色和藍(lán)色來凸顯年輕活力的感覺。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站欄目：詳細(xì)解析網(wǎng)頁字體設(shè)計(jì)心得技巧
URL鏈接：http://www.muchs.cn/news5/315855.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站建設(shè)、App開發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)