彩色圓環試作


我在 QQ 優設 12 群掛著,有時候會看到他們 PO 一些問題求救,很有意思,會試著想要怎麼做得更漂亮,從中學到很多。這個圓環需要用到 AI 和 PS,看起來滿適合運用在技能值或數據視覺化。

Illustrator

1. 畫同心圓線段

使用放射網格工具畫出數條同心圓線段。

寬高數值要一樣才會是正圓形,尺寸隨便設、不滿意之後還可以放大縮小(向量嘛)。數量依需求而定。

2.增加錨點工具

在同心圓線段上增加錨點,之後把部份線段刪除才能保持圓的形狀。

選取不要的部份、直接用鍵盤 Delete 刪掉。

3.筆畫設定

筆畫寬度=這條線未來的粗細。端點設成圓的比較精緻漂亮。

4.外框筆畫

編輯 > 路徑 > 外框筆畫,把筆畫變成形狀。

(執行外框筆畫後的長相)

Photoshop

1. 向量

把剛剛畫好的圖全選,Ctrl+C、Ctrl+V 貼到 PS 裡,選形狀圖層。

2. 線段拆開

因為每一條線顏色都不一樣,所以要拆開。看是複製多個圖層一條條刪掉還是其他方式,總之要一條一層。

3.顏色設定

點選最外圍那個半圓,顏色設定為 H 200、S 80、B 80。略小一點的圓只調整 H (色相)的數值。這邊每個圓的 H 值都差 20,S (彩度)和 B (明度)可以保持不變。

4. 加上高光

(這高光技法非常重要,超實用,一定要學起來。)

5. 加上光影漸層

(漸層強度自己試。)

6.加上厚度

完成這步驟就畫好一條有厚度的線了。(這種加厚度的技法也超實用)

7. 一次完成所有線段

在畫好的這個圖層上點右鍵 > 複製圖層樣式,然後選中所有線段圖層 > 右鍵 > 貼上圖層樣式。厚度的顏色必需和線段本體顏色相近,剛才不是每個 H 值都差 20 嗎?打開每個線段圖層的陰影樣式調整 H 值,讓厚度的顏色和線段顏色接近。

8.圓環整體的打光

在群組上設定圖層樣式,就能確保每條線的光感相同。

9.加陰影

非常重要,真正讓線段有層次感、立體起來。

最後的完成品長這樣,應該要把線再加粗一點會更有型。只是傳達一種製圖方式,實作上不難。圖層樣式用熟了變化很多。尤其是高光和厚度的作法,扁平化設計必備!

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close