話說網頁元素流行不斷替換，從很久以前流行立體樣式，後來又流行Mac樣式(玻璃樣式)，接著又流行XP樣式，現在Web 2.0已經流行好一段時間了，不曉得什麼時候要邁入下一個階段。

到目前為止這些樣式變來變去都是在相同的概念上打轉，在我看來這些樣式其實都是一樣的東西，只不過為了配合流行還是不免俗的冠上Web2.0這名詞，也因此以下只來談談繪製這樣的東西包含哪些概念、步驟、方法，而工具的部份就不談了因為雖然做起來很快，但描述起來卻又臭又長，有了概念後工具可以任意變換，甚至還可以自行改造成更獨特的。

先來看看完成後的樣子：

1. 繪製底部：

這其實是傳統的立體樣式，兩側及中間看起來像是突起狀

這樣的圖其實是由以下元件(部件、元素、零件)所組成

繪製出三個由大到小的圓形並使用兩種顏色填充線性漸層，方向如上圖所示，再把這三個圓由大到小重疊就可以得到想要的效果了。

2. 漸層色選色的概念：

繪製這樣的圖形必須先決定主色，以這個範例的漸層色為例主色為#C5D51A，再以主色為基準把主色的亮度(Brightness)調低就可以得到第二色#61680B，兩色之間亮度的差異會影響整體效果。

3. 繪製RSS標誌：

RSS的標誌如下圖所示

繪製這樣的標誌，最好的方式是以向量繪圖的方式繪出，一般來說建議以Illustrator、CorelDRAW這些向量繪圖軟體來繪製，這樣效率會比較好，如果最終成品要在Photoshop中，可以再用匯入的方式來達成。

在電腦繪圖中，繪製圖形有一個概念就是不要以一般的繪圖邏輯去畫，以這個標誌來說可以繪製出如下的圖形，再用向量繪圖的交集運算或減去運算的方式取得虛線所標示的區塊，也就是四分之一圓，最後再補個小圓就可以得到想要的圖形了。

將繪製好的RSS標誌放置到適當的位置，並填充如下所示漸層色，方向則如紅色箭頭所示，最後再加上個陰影就成型了。

3. 加上高光效果

用貝茲曲線從圓形中間拉出對分的波浪形曲線

將範圍拉超出圓形，最後形成一個封閉式路徑，此路徑與最內層圓形「相交」的區域就是所需的高光範圍

得到這個範圍後，填充白色到透明的線性漸層，並把圖層的透明度調到50% (依照情況而異，可自行決定)，這樣就完成了第一種樣式了。

第二種樣式，則是得到如下虛線表示的範圍

再以如下箭頭所表示的方向，填充由白到透明的線性漸層，再調整圖層的透明度就完成第二種樣式了

4. 懶人專用偷吃步

做好了Web2.0樣式的RSS圖示，如果需要多種顏色呢？

我很懶惰，這是我一直以來都不否認的事實，但是懶歸懶事情還是得做，那就只好找輕鬆的方法做。

方法其實很簡單，以Photshop來說，只需要將底部組成的三個元件合併成單一圖層，接著複製成好幾組，再打開「色相 / 飽和度 (Ctrl + U)」並把「上色」打勾，調整底部圖層的色相、飽和、亮度即可用最短的時間產生出多種顏色的圖示。

5. 相同概念再延伸

下面的圖基本上只是前面所提到的概念再加以變化而已，試著用理解的概念把下圖做出來會有更多收穫哦！