電腦玩物

FreshGenerator 免費按鈕圖標產生器，設計調製 Web2.0 風格網頁元素

Posted: 11 Jun 2009 04:41 AM PDT

今天要介紹的是FreshGenerator，一個線上免費製作網頁元素底圖的網站，功能豐富但操作簡單，在設計上充滿變化性，你不需使用也不需懂Photoshop，利用FreshGenerator就能玩出很多網頁元素變化，你可以參考看看官方的示範頁面。不過今天在開始正文前，先來聊聊別的。

前幾天看到重灌狂人發表了一篇：「如何在網站放twitter、Plurk噗浪「推文按鈕」？」我在「你可以不用 Twitter ，但不可不知如何挖掘 Twitter」這篇文章裡有討論過微網誌做為一種新媒體形式，在搜尋資料和傳播資料上都成為現在網路上不可忽視的力量；更確切的說，在電腦玩物這兩個月的統計數據裡，Plurk、Twitter連過來的讀者數日漸上升，其中Plurk帶來的流量甚至已經超過funP。當然這中間有很多其它因素影響，例如我自己比較常在Plurk活動，而少在funP活動，不過也可以看出微網誌確實已經有具體的影響力。

所以我要推薦部落格站長都應該在自己的網站裝上「Twitter」、「Plurk」推文按鈕，相關教學請看重灌狂人的文章即可。目前電腦玩物的版面上方，也已經加入了推薦文章到Twitter、Plurk兩個微網誌的快捷按鈕。

FreshGenerator（按鈕、圖標、網頁元件產生器）：http://www.freshgenerator.com/
上傳圖片網站，SkyDrive：http://skydrive.live.com
在網站放Twitter、Plurk推文按鈕語法：http://briian.com/?p=6313

前面講了老半天，不過這篇文章卻不是要教大家Twitter、Plurk推文按鈕的語法，而是在你張貼推文按鈕之前，總需要製作一個比較美觀的「推文按鈕圖片」吧！於是我們轉入今天要介紹的線上免費製作按鈕、Web 2.0風格元件的網站：FreshGenerator。

在「FreshGenerator」中你不需要註冊登入，來到網站後直接可以開始製作圖片的流程。雖然沒有提供你已經製作好的預設按鈕、元件圖片，不過透過簡單的拉桿來調整顏色、大小、框線、文字等細節，你仍然可以快速製作出各種五花八門的網頁元素。

例如電腦玩物現在網頁標題襯底的白色立體元素，就是FreshGenerator製作的，像是按鈕、欄位框架底圖、各種Banner，或者立體感、漸層特效、水晶感等各種風格元素，都可以利用FreshGenerator做做看喔！

FreshGenerator圖標製作流程詳解：

首先進入「FreshGenerator」，你可以看到網頁中間有一個目前製作中的圖標即時預覽。下方則是你的各種操作功能項目。透過這個簡單的介面平台，你可以不需要安裝Photoshop、不需要懂得複雜的繪圖功能，只要東拉拉西調調，很快的按鈕、圖標、網頁元素就會產生！

操作很簡單，隨便玩玩弄弄後，會出現一個〔Update〕按鈕，每次修改後點一下這個按鈕就可以即時看到效果囉！

接著我們來看看FreshGenerator有哪些好用的功能，首先在〔Box〕分頁的最左方，你可以透過「Width」調整元件寬度、「Height」調整元件高度。至於你如何量出網頁上需要的寬高呢？我都是利用Picpick內建的浮動小尺規來量，非常好用喔！

3.
接著我們看到〔Box〕分頁的中間欄，關於設定顏色的部份，你只要在色碼的欄位區域點擊滑鼠左鍵，就會彈出顏色選擇視窗，直接選擇你需要的顏色即可。

你在這邊會看到怎麼有四個「Color」的顏色欄位？這是讓你製作漸層效果的，如果漸層搭配的好，還可以製作出水晶感或金屬感喔！

你可以在這裡設定單色、雙色、三色或四色按鈕，漸層的次序依據顏色區塊的次序。每個顏色項目下方的拉桿是讓你調整顏色區塊所佔的比例。而最下方「Horizontal（水平）」和「Vertical（垂直）」則是選擇顏色漸層的方向。

調配顏色是個很有趣的實驗，請實際試做看看各種搭配，你一定能因此發現很多好玩的效果。

同樣在〔Box〕分頁的最右方欄位，這邊的「Padding size」、「Padding color」讓你設計中央區塊與框線的間隔的大小和填充顏色。

「Shadow size」、「Shadow color」讓你設計陰影的大小與顏色。

在操作平台切換到〔Corners〕分頁，在這個分頁中提供讓你設計按鈕圓角的功能。

你可以在「Round corners」用勾選的方式決定哪幾個角要用圓角，如果是全部都用圓角就有平滑按鈕的效果，如果只有上方或下方用圓角就會長得像標籤分頁，如果只有一個角是圓角就會有折角效果，可以依你的需求來設計。

「Corner width」、「Corner height」讓你設計圓角的寬度、高度，其實就是圓角的轉折幅度大小。

切換到〔Border〕分頁可以設計圖標的邊框。「Border size」可以調整邊框的粗細，右方的四個顏色項目可以調整邊框的顏色或漸層效果。

比較特別的是這邊有一個「Border alpha」，我不知道專業美工設計者是如何稱呼這個功能的，總之調整這個項目的拉桿，在0的話就是你選定的顏色，往右拉會出現一些不同的變色效果，可以玩玩看。

最後切換到〔Text〕，這邊是讓你輸入圖標內的文字，當然也可以留白不要輸入，這樣就可以製作像目前電腦玩物標題底圖那樣的元件。

這邊的文字欄只支援輸入英文，你可以調整字體大小、選擇字型、切換顏色。

10.

接著全部設計完成後，你可以直接在最終效果的預覽圖上點擊滑鼠右鍵，選擇【圖片另存新檔】，把該圖下載回你的硬碟就大功告成囉！

11.

你可以把製作好的按鈕、圖標或各種網頁元素放進你的部落格中，就看你怎麼設計。

接著我來簡單介紹一下我自己這次利用FreshGenerator製作Twitter、Plurk按鈕的張貼過程。

首先製作好的圖檔，我是上傳到支援外連的「SkyDrive」，這個微軟的網路硬碟滿好用的，你只要有MSN帳號就可以登入，然後把圖片上傳後就可以獲得該圖的連結網址。

12.

接著利用前面提到重灌狂人文章裡的Twitter、Plurk程式碼，在其中插入自己圖檔的連結，就可以在部落格張貼按鈕囉！

重灌狂人提供的Twitter推文程式碼，我們只要在紅色部分加入前面製作的圖標檔案連結即可。

<a href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));"><img src="圖標檔案的連結網址"/></a>

重灌狂人提供的Plurk推文程式碼，我們只要在紅色部分加入前面製作的圖標檔案連結即可。

<a href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));"><img src="圖標檔案的連結網址"/></a>

接著把程式碼貼入你部落格中想出現的版面位置即可。詳細情形還是請參考重灌狂人的文章喔！