這期分享的是線條風(fēng)格的設(shè)計

分享這種設(shè)計的原因

主要是因為線條風(fēng)格的設(shè)計有很多優(yōu)越的特點

比如 簡潔 直觀 針對性強(qiáng)

還有就是制作起來比較方便

制作時間短

在UI應(yīng)用圖標(biāo)方面比較常用

如果學(xué)會了制作方法

就不會再花費大量的時間去找圖標(biāo)了

自己分分鐘就可以設(shè)計出來了～

下面就講一個稍微復(fù)雜一些的線條場景

復(fù)雜一些的場景主要能鍛煉自己的造型能力

這要做圖標(biāo)的時候就會更形象好看了

好了，下面就開始今天的教程吧！以下是要制作的效果。

具體的制作步驟如下：

1、如何制作U型彎曲水岸

第一步

在AI里新建一個1670*1228px的畫布

并且新建一個畫布大小的矩形作為背景

填充顏色＃00284C

第二步

彎曲水岸主要是由外凸圓角矩形和內(nèi)凹圓角矩形組成

水岸主要分成四層

上下兩層的矩形高度一樣

中間兩層的矩形高度不同

第一層：使用矩形工具新建一個914*107px的矩形

并且把圓角調(diào)為最大

第二層：新建兩個高度分別為79px、102px的矩形

調(diào)整圓角后使用直接選擇工具選擇矩形左側(cè)的錨點

向右移動合適的距離

這樣就制作出內(nèi)凹的圓角矩形了

第三層：新建兩個高度分別為131px、106px的矩形

第四層：新建一個444＊40px的矩形

使用上面的方法制作出內(nèi)凹的圓角矩形

最后把這些圓角矩形拼合在一起

第三步

首先把中間空出來的地方用矩形蓋住

然后使用路徑查找器把所有形狀合并

再給新合并的形狀去除填充色添加3pt的描邊

使用剪刀工具：C斷開形狀最下面的線段

配合鋼筆工具：P延長下方的線

（鋼筆工具先點擊錨點再延長才是閉合的線哦！）

最后調(diào)整描邊的顏色＃51B6B7

并且調(diào)整描邊為圓頭端點

第四步

下面是制作彎曲水岸的內(nèi)側(cè)邊

內(nèi)側(cè)邊有兩個特點

一是各個位置距離外側(cè)邊的長度相等

二是不規(guī)則虛線

制作方法：

把上面的曲線描邊值調(diào)為26pt

然后選擇對象>擴(kuò)展

最后調(diào)整描邊值為3pt

并且使用剪刀工具：C斷開這個線段

這樣就制作出一條距離相同的線段了

然后是調(diào)整內(nèi)側(cè)邊的曲線屬性

虛線：66、間隙：8、虛線：55

2、如何繪制房屋

第一步

繪制房屋從地基開始

新建一個182*19px的矩形

放在彎曲水岸的上方中間位置

然后使用直線軌跡：

新建一條長183px，傾斜265度的斜線

在斜線上右擊選擇變換>對稱>復(fù)制

把兩條斜線作為屋子的墻壁

第二步

下面是繪制每層的樓板

這個比較簡單

使用直線工具： 在墻壁之間繪制直線

Ai會自動對齊到墻壁的路徑上面

每三條一組

最上面一層是兩條一組

它們之間的距離分別為：32px、69px、38px

第三步

這一步是繪制門、窗戶和屋頂

新建一個37*60px的矩形

然后復(fù)制一個縮放一下

把兩個矩形底對齊

并且調(diào)整圓角（cc版調(diào)整圓角很方便哦?。?/p>

放在一層樓板的中間位置

窗戶是由一個矩形：22*28px

和兩條直線組成

然后放在門兩側(cè)的中間位置

頂層的窗戶是一個矩形：15*25px

和一條直線

新建一條長109px，傾斜225度的斜線

使用制作墻壁的方法復(fù)制一條出來

放在最上方

這樣屋頂就制作出來了

第四步

下面是繪制左側(cè)的小房間

方法與大房的繪制方法基本相同

首先新建一個128*11px的地基

然后新建一條高50px的墻壁

窗戶的大小是15*20px

屋頂?shù)睦L制方法是

新建一個151*59px的矩形

右下角對齊到大屋的墻壁

使用自由變換工具：E使矩形變換為平行四邊形

然后使用剪刀工具：C切斷多余的部分

瓦片的制作是使用直線工具：

畫一條長46px，傾斜239度（角度要和屋頂平行）

然后復(fù)制出6條

使用對齊工具水平分布一下

再新建一條長200px，傾斜18度的斜線放在合適的位置

使用形狀生成器工具：Shift＋M 配合Alt鍵

減去多余的線條

這樣就制作出瓦片的效果了

3、如何繪制柵欄

第一步

新建一個133*16px的矩形

使用剪刀工具減去多余的部分

新建一個7*36px點矩形

在矩形的上邊中間使用鋼筆工具添加一個錨點

然后使用直接選擇工具：A

選中左右兩個角點向下拖動

這樣就制作出柵欄的木板了

4、如何制作風(fēng)車

第一步

風(fēng)車的制作首先做出旋轉(zhuǎn)軸心

軸心是由兩個直徑分別為18px、9px同心圓構(gòu)成

扇葉的制作也很簡單

制作出一個扇葉之后

把扇葉放在旋轉(zhuǎn)軸上

以旋轉(zhuǎn)軸的圓心為中心

先按快捷鍵：R

然后按住Alt＋鼠標(biāo)左鍵確定旋轉(zhuǎn)中心

旋轉(zhuǎn)90度點擊復(fù)制

然后按快捷鍵：Shift＋D

就可以得到其余的扇葉了

不過風(fēng)車的描邊顏色是＃EF5AA1

新建一個29*141px的矩形

然后使用直線工具繪制一條141px的豎線

6條29px的橫線

有兩條橫線對齊矩形的上下邊

是為了平均分布橫線

最后是扇葉的支撐軸

是一個6*10px點矩形

第二步

下面是制作風(fēng)車的旋轉(zhuǎn)軌跡

原位置復(fù)制一個旋轉(zhuǎn)軸里面的圓

放大到合適的位置使用剪刀工具剪出想要的效果就可以

這里講一個小技巧

就是制作圓點描邊的制作方法

就是把描邊的虛線值調(diào)為0就可以是圓點描邊了

最后把整個風(fēng)車旋轉(zhuǎn)45度

并且放到第三層樓板中間的位置就可以了

5、如何制作波浪線

第一步

波浪線的制作在Ai里有一個簡便的功能

就是效果>扭曲和變換 >波紋效果

首先使用直線工具新建一條393px的直線

然后選擇效果>扭曲和變換 >波紋效果

在彈出的窗口中設(shè)置

大?。?px

隆起數(shù)：13

點：平滑

剩余兩條波浪線通過復(fù)制和使用剪刀工具制作出來

第二步

做到這里相信大家已經(jīng)掌握了線性設(shè)計的要點了

主要使用的工具有矩形工具、直線工具、剪刀工具、圓

那么剩下一些配飾可以當(dāng)作練習(xí)

自己動手試一下

可以自由發(fā)揮你的想象哦～

6、如何制作動畫

動畫的制作這里使用的是AE

如果有對動畫感興趣的朋友

那就繼續(xù)往下看吧～

選擇如果是做網(wǎng)絡(luò)上面的設(shè)計

對動畫作品的需求還是很大的

一個好的動畫能夠很好的提高用戶體驗

增加產(chǎn)品的亮點和競爭力

好的動畫主要有兩個方面

一是還未做成動畫的時候，作品本身就是一個優(yōu)秀的設(shè)計

二是做動畫的過程中把握好各個動畫元素的配合

好了，不多說，看看如何把場景做成動畫吧！

第一步

制作這種元素較多的動畫

第一步就是把要做成動畫的元素分層命名（這個很重要哦?。?/p>

在Ai里有個很方便的分層功能

首先打開圖層面板

點擊右上角的按鈕選擇"釋放到圖層（順序）"

點擊之后選擇所有對象還是在一個大圖層里面

所以要把所有對象拖出這個大圖層

在圖層面板選擇所有圖層

使用鼠標(biāo)向上拖到最頂層就可以了

最后就是給所有圖層命名

命名之后選擇文件>存儲

第二步

打開AE選擇文件>導(dǎo)入>文件

在彈出的窗口選擇剛才存儲的Ai文件

這里我存儲的名字是"線性設(shè)計"

注意：導(dǎo)入為：合成-保持圖層大小

導(dǎo)入之后

在Ae的項目面板就會出現(xiàn)剛導(dǎo)入的文件

雙擊"線性設(shè)計"

在Ae下方就會出現(xiàn)各個圖層

第三步

在Ae中有"合成"這個概念

合成在Ae中有很重要的作用屬于最基礎(chǔ)的單位

合成中包含文件的一些基礎(chǔ)信息

比如：輸出影片格式、尺寸大小、幀速率

打開合成設(shè)置面板的快捷鍵：Ctrl（command）＋K

合成相當(dāng)于把圖層放進(jìn)一個有規(guī)則的文件夾里面

但是合成本身也可以作為圖層添加動畫效果

通常一個動畫是由多個合成組成的

這個概念在做動畫的時候就會很容易明白

俗話說實踐出真知嘛

在合成面板選擇所有圖層：Ctrl（command）＋A

在圖層上點擊鼠標(biāo)右鍵選擇"從矢量圖層創(chuàng)建形狀"

在沒有做這個步驟之前

所有圖層在Ae里屬于位圖，放大的話會模糊

做了這步后圖層在Ae中也是矢量圖層了

而且可以添加更多的動畫效果

第四步

這一步就是對每個圖層做動畫

在做動畫之前要說一下

為什么選擇這期設(shè)計做動畫？

主要是因為這期動畫會用到一個很好的功能

而且整個動畫只用了這一種功能

叫做"修剪路徑"

考慮到大家可能沒有接觸過Ae這款軟件

所以選擇這期制作動畫很方便、效果很好看的場景做教程

一方面可以讓大家初步了解一下Ae

另一方面就是可以讓大家在短時間內(nèi)使用Ae做一個好看的動畫

在做動畫的時候

首先要想好讓誰先出場

這里我選擇讓"彎曲水岸"先出場

那么先選擇"彎曲水岸"圖層

點擊"彎曲水岸"左邊的小三角按鈕

（Ae中這種小三角按鈕都是可以展開的）

打開動畫編輯欄

然后在動畫編輯欄右側(cè)有"添加"這兩個字

點擊"添加"右邊的小三角按鈕

選擇"修剪路徑"

最后點擊"彎曲水岸"左邊的第二個黑方格

作用是"單獨顯示"這一層

第五步

點擊"修剪路徑"左邊的小三角按鈕

打開修剪路徑的參數(shù)欄

把修剪路徑的"開始"數(shù)值調(diào)為100%

第六步

點擊"開始"左邊的碼表

作用是給當(dāng)前數(shù)值添加關(guān)鍵幀

點擊之后在碼表左側(cè)會出現(xiàn)三個小圖標(biāo)

這三個圖標(biāo)從左往右的功能分別是

轉(zhuǎn)到上一個關(guān)鍵幀（僅限于此屬性）； 在當(dāng)前時間添加或移除關(guān)鍵幀； 轉(zhuǎn)到下一個關(guān)鍵幀（僅限于此屬性）；

在"開始"的右側(cè)會出現(xiàn)一個菱形的點

這個就是關(guān)鍵幀

第七步

把"時間指針"移動到1s（s：秒）的位置

（如果看不到1s，可以按鍵盤＋鍵放大時間軸）

再把"開始"的參數(shù)調(diào)為0%

這時就會自動出現(xiàn)一個關(guān)鍵幀

現(xiàn)在"彎曲水岸"圖層上有兩個關(guān)鍵幀就代表

從0s到1s的這段時間"開始"的參數(shù)由100%變?yōu)?%

這個變化就會形成動畫

再把"時間指針"移動到0s

按空格鍵就會看到動畫效果

這樣"彎曲水岸"的動畫就制作完成了

剩下的圖層動畫制作方法相同

不同的地方就是各個圖層的出場時間或動畫持續(xù)時間不同

這個需要自己把握（最好圖層動畫出現(xiàn)的緊密一些）

捷徑

這里說一下一個簡單的方法制作其它圖層的動畫

（沒接觸過Ae的同學(xué)最好使用上面的方法，下面這個方法知道就好）

簡單方法：選擇制作好的兩個關(guān)鍵幀

（可以使用鼠標(biāo)左鍵框選，也可以用鼠標(biāo)左鍵＋Shift鍵點選）

然后復(fù)制關(guān)鍵幀：Ctrl（command）＋C

選擇其它圖層粘貼關(guān)鍵幀：Ctrl（command）＋V

（圖層也可以多選哦?。?/p>

這樣其它圖層就加上了修剪路徑關(guān)鍵幀了

在選擇圖層的情況下按：U鍵

可以查看選擇圖層的所有關(guān)鍵幀

最后通過鼠標(biāo)左右拖動圖層就能調(diào)整圖層動畫的出現(xiàn)時間了

第八步

這一步是制作動畫的最后一步了

導(dǎo)出文件

導(dǎo)出的時候需要注意的就是輸出格式和幀速率

這里選擇的是QuickTime的視頻格式.mov

可以導(dǎo)出你想要的格式，比如.mp4

選擇文件>導(dǎo)出>添加到渲染隊列

這是Ae的下方就會出現(xiàn)渲染隊列面板

點擊輸出模塊：無損

在彈出的窗口格式右邊

選擇QuickTime

然后點擊窗口下方"自動音頻輸出"字樣

選擇"關(guān)閉音頻輸出"

（因為文件中沒有添加音頻）

最后點擊確定，并在渲染隊列面板選擇"渲染"

等待渲染成功就OK了

（幾個小圖標(biāo)分享給大家）

教程結(jié)束，以上就是AI繪制稍微復(fù)雜一些的線條風(fēng)車場景過程，怎么樣，大家看完這篇教程是不是已經(jīng)學(xué)會了？希望這篇文章能對大家有所幫助！

最新評論