Stroke style effect / 路徑動態風格

Stroke-effect-gif

分享Shape Layer 應用技巧的教學又來喽!
大家應該還記得Shape Layer中經常使用的Trim Path(剪裁路徑)屬性。其實經營作品並非一定要應用上許多技巧,如果能在一個技巧上反覆運用並經營出細節,相信也能製作出看似複雜卻有特色的好作品。一起來看看!


操作步驟

1、建立專案與 Composition

就請大家自行建立新的專案與 Composition 設定:HD 720 / 20~30秒皆可。

2、繪製線條形狀

使用「Pen Tool」工具繪製出自己想要的形狀,如 眼睛:會新增一層Shape Layer。請注意者個範例上只使用Stroke(寬度請自行決定即可),不加入Fill。

Stroke effect 01

3、使用Trim Path製作動態

3.1
在步驟2中的Shape Layer中加入(Add):Trim Paths 屬性。

Stroke effect 02

3.2
任意設定 Trim Paths 屬性中的:Start 與 End 數值。
並在 Offset 屬性中加入關鍵影格:頭、尾各一個關鍵影格的變化即可。

Stroke effect 03

Stroke effect 04

4、在相同的路徑動態上加入虛線

4.1
複製步驟 3.2已經設定好動態的 Shape Layer 圖層。

Stroke effect 05
4.2
先改變在Trim Paths 屬性中的 Start 與 End 的數值。
4.3
再到 Dashes 中按住「+」加號兩次:再自行調整參數到自己喜歡的虛線樣子。
Stroke effect 06

Stroke effect 07

5、加入反方向的路徑動態

5.1
先複製步驟3.2 已經設定好動態的 Shape Layer 圖層。

Stroke effect 08
5.2
使用「Pen Tool」工具調整形狀:比原來的形狀再大一些。

Stroke effect 09

5.3
在 Offset 屬性改變關鍵影格的數值與正、負數:產生反方向的路徑動態。

Stroke effect 10

Stroke effect 11

5.4
也可重覆應用步驟4.3 的技巧產生虛線動態。

6、製作眼球形狀曲線

6.1
可直接使用「橢圓形工具」按 Shift 鍵:產生一個正圓形路徑。

Stroke effect 12

6.2
重複步驟3 的方法加入路徑動態。

Stroke effect 13

Stroke effect 14

6.3
連續複製兩次步驟6.2 設定好的Shape Layer圖層,再進行形狀的:大小、路徑動態方向的調整即可。

Stroke effect 15

Stroke effect 16

Stroke effect 17

Stroke effect 18

Stroke effect 19

Stroke effect 20

7、製作瞳孔虛線曲線

瞳孔虛線請重複步驟6:產生形狀有交錯、動態方向相反的設定即可。

Stroke effect 21

Stroke effect 22

8、產生瞳孔同心圓的放射狀線條

8.1
使用「Pen Tool」工具按Shift 鍵:在眼球與瞳孔之間,繪製一條垂直的直線。並將此線段的「軸心」設定在眼球的中心處。

Stroke effect 23

8.2
在此Shape Layer 圖層中加入(Add):Repeater 屬性。

Stroke effect 24
8.3
設定 Repeater 屬性的各項參數,參考如下:
Copies:數量10~12。
Position:一定要設定為0,才會有同心圓的效果!
Rotation:關係到線條分佈的間距,建議直接在屬性上打:360/ Copies的數值。

Stroke effect 25


8.4 設定旋轉動態。
直接在此圖層的五大屬性之一Rotation:自行加入頭、尾各一個關鍵影格的變化即可。

Stroke effect 26

8.5
可以再複製一層步驟8.4 設定完成的圖層,並改變原有垂直直線的長度與Rotation的旋轉角度即可。

Stroke effect 27

Stroke effect 28

9、增加眼睛光面

複製一層眼球曲線圖層
Stroke effect 29









增加 Stroke寬度、位置等,各項調整的相關參數如下:
Stroke /
Color:顏色請自行調整。
Opacity:降低不透明度到可看到下方放射狀線條即可。
Dashes /
到Dashes中按住「+」加號兩次:再自行調整參數到自己感覺適合的間距即可。
Scale:調整整體大小到適當的位置即可。

Stroke effect 30

Stroke effect 31



留言

對內容有任何問題與討論,歡迎留言給我們^^

Archive

聯絡表單

傳送