我在 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.加陰影

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

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