粗礦的電商標題字體設計教程

Sponsor

作者：李買，劉兵克，李雪萍

電商類標題設計，對于電商設計師來說，是必不可少的環節，如果直接使用字庫字體，可能存在版權風險，而免費的字庫又會顯得普通和雷同、缺乏獨特性，因為出現頻率高，所以在視覺上也會讓人感覺乏味。

所以，想要讓字體更具獨特性，就需要自己動手設計每一個字體和每一個筆畫，這樣，你的平面作品才能有更好的設計感，更高的回頭率。

我們都知道，不同的字形風格會傳遞不一樣的感覺，在設計字體之前，需要去分析行業或產品的特點，或根據整體頁面的調性來確定字體風格，比如：母嬰、兒童類產品，一般適合活潑、可愛風格；家電數碼、運動類，比較適合動感、粗獷風格；女性用品，往往比較適合纖細、柔美、典雅的風格……

這一期，我們先分享粗獷類風格的字體，當然，這一類風格也會有不同的設計感和形式感，接下來，我們分享四個字體案例。

這是智能家電類的活動標題，標題中的“智造家”，傳達出一種科技、智能的感覺，所以，在設計時，我們要著重體現這一點，比如把筆畫設計的硬朗凌厲一些。

字體風格確定之后，現在就可以搭建基礎框架了，用“黑體”作為墊底，去搭建基礎框架。在搭建的過程中，統一將帶弧度的斜線筆畫設計成“豎斜線”，這樣的設計改變，可以讓字體更酷、更硬朗。

“家”字的斜筆因為角度的原因，用橫斜線會更耐看一些，”狂”的反犬旁也是一樣的道理。

紅色標注部分，空間是比較大的，我們要進行優化調整，盡量縮小紅色區域。

調整后，字體會更加飽滿、豐盈，下圖，是前后對比效果。

在保證識別度的前提下，對筆畫進行刪減或者連筆，可以在一定程度上增加字體的設計感，如下圖；

“造”字，嘗試把“口”上面的橫筆刪減，可以緩解“造”字空間上的擁擠，也可以增強其設計感。

我們來看一下簡化后的效果，科技感已經得到了體現，但是還不夠，需要繼續深化。

打破常規結構，在字和字之間建立平行關系，增加其整體感和空間感。

細心的小伙伴會發現，斜線是這整組字里的家族特征，所以，可以繼續增加斜筆，繼續加強和突出這一特征，從而使其更有整體感。

我們來看一下調整后的效果。

規范細節，統一傾斜角度。

最初沒有計劃做連筆，但是既然做到了這一步，就嘗試了一番，效果還是可以的。

最后，整體做傾斜，增加整組字的動感和活力，再搭配一句文案，這樣，這組標題字的設計就完成了。

最后，我們看一下應用效果。

這是電子產品類的活動標題，我們繼續選擇粗獷風格，這例方案，我們嘗試把筆畫做的更粗，把分量做的更足！

設計之前，我們可以先手寫一組草稿，因為很多的斷筆和連筆都是根據我們的手寫習慣來的，當然，寫出來的斷筆連筆，我們不一定要全部采用，要根據實際情況去做取舍。

在預設好的方格里，寫第二遍，這一步，要參考第一步手寫的斷筆和連筆，只是需要寫的更規范一些，如下圖；

第二遍，手寫的特點是偏扁平的，“春”字和“換”字，斜筆的角度過大，我們選擇斷開的處理方式。

參考手寫好的結構，用矩形去搭建框架，這個時候，會發現“春”字的橫筆過多，而橫線筆畫本身也較粗，所以很難放得下。

這里，可以把橫筆調細，調細后會發現，“春”字與其它字對比起來缺少了些份量感。這個時候，可以嘗試用左邊的斜筆和下面的“日”做連筆斷筆設計，這樣，會釋放一些空間出來，就可以讓橫筆再粗點，同時，設計感也提升了一些。后面，可以把這樣的斷連方式，應用到其它字里。

上面搭建框架時，“日”字和其它字一樣，是頂著格子做的，會發現“日”字在視覺上比其它字大一些。如果我們把字體結構分為方形、三角形，菱形三種幾何形態，雖然他們三者一樣都是完全頂格，但視覺上卻存在著大小差異，因為正方形是完全把方格鋪滿了，所以顯得比其他圖形大很多，所以，為了保持視覺上的統一，我們就需要針對不同的字形結構，做出相應的筆畫調整。

“換”字，提手旁的右側位置，凸出來的筆畫很短小，會顯得瑣碎，可以嘗試做減法，而“換”字右邊的斷連，和“春”字的斷連是一樣的思路。

再整體觀察，我們發現，“新”字的重心偏低，右邊的斷筆可參考前面的設計方法，“機”字的木字旁，橫筆也偏低，也要適當調整。

在這里，我們刻意讓幾個字之間的某些筆畫完全水平，這樣會很有秩序感，視覺上會更順暢。

那么問題來了，什么情況下可以對齊，什么情況不能對齊呢？我們可以參考字庫字結構，如下圖AB，筆畫高度較為接近，可以選擇筆畫對齊；如下圖C，兩橫線筆畫的高度差別很大，我們就不能硬生生的讓兩者對齊，這樣肯定不舒服。

接下來，就需要豐富細節的變化，讓字體更有記憶點。

1.給橫筆起筆的位置，統一添加尖角。

2.統一給筆畫轉折的位置添加倒角，倒角的大小需要適度。

3.統一給豎筆和斜筆的左上角添加尖角，尖角大小也要適度。

5個字一行，整體比較冗長，效果比較平淡，在這里，我們將其分為兩行，并做傾斜處理。

最后一步非常關鍵，下圖中標紅的筆畫，是適合做夸張處理的，這樣可以讓字體更具張力，更加吸睛。

最后，加上合適的文案，搭配一款適合春天的綠色，就完成了。

當然，我們也要看一下應用效果。

運動類的活動標題，用前面的字形方法，也是沒問題的，但這次，我們換更新的方法，嘗試帶有速度感、力量感的手寫風格！

我們先用畫筆工具寫出基本框架，這和我們平常手寫還是有區別的，在寫的過程中，需要注意以下幾點。

1.所有橫筆的筆畫統一向右上角傾斜，這樣更能體現出字體的速度感。

2.字體的大小排版需要有一定的節奏感，筆畫少可小一點，筆畫多，則可大一點。

3.字和字之間，筆畫可以有一些穿插，整體會更有節奏感。

設定基礎筆畫形態，可以根據我們平時的手寫習慣做一些筆畫粗細變化。

根據設定好的筆畫形態把字體完整的搭建出來，這一步，需要注意筆畫空間關系，整體布白要均衡。

進一步觀察，發現筆畫稍顯單薄，缺少力度，我們對字體里的部分筆畫進行加粗。

統一筆畫的傾斜角度，會更整齊耐看，不會顯得那么亂。

最后搭配文案，添加配色，搞定！

再看一下應用效果。

618節日活動標題，這次，我們根據“門”的概念，嘗試做出對稱的感覺，這一例字體，我們選擇高挑的風格。

用一款拉高后的黑體，作為字體結構的參考，用矩形工具搭建出基礎框架，字體筆畫之間，可找一些對齊關系。

“紅”字的結構相對另外兩個字，是比較復雜的，絞絲旁的變形，對整體影響非常大。對比以下三種變形，發現第三種整體感更強，也更能體現出對稱感。

在兩邊的橫筆位置，各加一個裝飾角，這樣可以使其更有記憶點，同時也可以體現“門”的概念，當然，整體也是完全對稱的。

再豐富一下細節的變化，給“開”和“紅”字，各增加一個斷筆處理,并加入小文案，做居中處理。

為了更能體現“開門紅”的感覺，我們嘗試將字體，由平面轉為有一定縱深感的表現形式。

選中字體，使用軟件中的“自由變換”工具，將字體的上端往里收縮。

最后完成效果，添加相應的色彩搭配。

來看一下應用效果。

最后，我們將四個案例，用常規黑體和我們設計之后的字體做對比，這樣的感受會更明顯，經過全新設計后的字體，無論在創意上還是形式上，都會更加獨特，都能為整體頁面增色不少！

設計前

▼

設計后

▼

設計前

▼

設計后

▼

設計前

▼

設計后

▼

設計前

▼

設計后

▼

所以，電商標題字體，要盡量嘗試自己去設計，當你完成之后，會很有成就感，你設計的頁面或banner，也一定可以變得更漂亮，更有設計感！

做出一手好字，也是為自己加分賦能！

好了，今天的教程就到這里，感謝大家閱讀。

本篇教程作者：李買，劉兵克，李雪萍
來源 |站酷 liubingke.zcool.com.cn

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。