FreshGenerator 免費按鈕圖標產生器，設計調製 Web2.0 風格網頁元素
今天要介紹的是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圖標製作流程詳解：
1.
首先進入「FreshGenerator」，你可以看到網頁中間有一個目前製作中的圖標即時預覽。下方則是你的各種操作功能項目。透過這個簡單的介面平台，你可以不需要安裝Photoshop、不需要懂得複雜的繪圖功能，只要東拉拉西調調，很快的按鈕、圖標、網頁元素就會產生！
操作很簡單，隨便玩玩弄弄後，會出現一個〔Update〕按鈕，每次修改後點一下這個按鈕就可以即時看到效果囉！
2.
接著我們來看看FreshGenerator有哪些好用的功能，首先在〔Box〕分頁的最左方，你可以透過「Width」調整元件寬度、「Height」調整元件高度。至於你如何量出網頁上需要的寬高呢？我都是利用Picpick內建的浮動小尺規來量，非常好用喔！
3.
接著我們看到〔Box〕分頁的中間欄，關於設定顏色的部份，你只要在色碼的欄位區域點擊滑鼠左鍵，就會彈出顏色選擇視窗，直接選擇你需要的顏色即可。
4.
你在這邊會看到怎麼有四個「Color」的顏色欄位？這是讓你製作漸層效果的，如果漸層搭配的好，還可以製作出水晶感或金屬感喔！
你可以在這裡設定單色、雙色、三色或四色按鈕，漸層的次序依據顏色區塊的次序。每個顏色項目下方的拉桿是讓你調整顏色區塊所佔的比例。而最下方「Horizontal（水平）」和「Vertical（垂直）」則是選擇顏色漸層的方向。
調配顏色是個很有趣的實驗，請實際試做看看各種搭配，你一定能因此發現很多好玩的效果。
5.
同樣在〔Box〕分頁的最右方欄位，這邊的「Padding size」、「Padding color」讓你設計中央區塊與框線的間隔的大小和填充顏色。
「Shadow size」、「Shadow color」讓你設計陰影的大小與顏色。
7.
在操作平台切換到〔Corners〕分頁，在這個分頁中提供讓你設計按鈕圓角的功能。
你可以在「Round corners」用勾選的方式決定哪幾個角要用圓角，如果是全部都用圓角就有平滑按鈕的效果，如果只有上方或下方用圓角就會長得像標籤分頁，如果只有一個角是圓角就會有折角效果，可以依你的需求來設計。
「Corner width」、「Corner height」讓你設計圓角的寬度、高度，其實就是圓角的轉折幅度大小。
8.
切換到〔Border〕分頁可以設計圖標的邊框。「Border size」可以調整邊框的粗細，右方的四個顏色項目可以調整邊框的顏色或漸層效果。
比較特別的是這邊有一個「Border alpha」，我不知道專業美工設計者是如何稱呼這個功能的，總之調整這個項目的拉桿，在0的話就是你選定的顏色，往右拉會出現一些不同的變色效果，可以玩玩看。
9.
最後切換到〔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>
接著把程式碼貼入你部落格中想出現的版面位置即可。詳細情形還是請參考重灌狂人的文章喔！
.png)
內文提到FreshGenerator 不支援中文，那麼版頭標題『電腦玩物』四個字怎麼加上去的?
回覆刪除是另外再用Photoshop加上去嗎?
請問一下異大
回覆刪除我想要找一個可以剪輯影片的軟體
可是我不是要那種把不要的段落剪掉的功能
我是想要把有的影片，上下會有兩條黑黑的剪掉
讓畫面變滿，不要有那兩條黑黑的
請問異大有這種軟體嗎？
因為我找不到所以只好來求救異大了～
jd；
回覆刪除因為Blogger標題原本就有支援可以輸入文字在你的底圖上方，
我是用內建的方式作的。
當然你也可以先做好特別效果的底圖再加字，這時候很多免費的圖片編輯軟體都可以做到喔^^（例如小畫家）
樂樂：
影片的上下兩條黑黑的部份好像不是能夠剪掉的，
那是影片本身長寬比例輸出到螢幕後的問題，
如果你改變比例讓上下黑邊不見，那你畫面的人物可能會變形喔
如果要改變影片的比例，一些轉檔軟體可以做到，例如格式工廠：http://blog.soft.idv.tw/?p=324
有空也來作個推特與噗浪的按鈕好了！^^
回覆刪除還是要看情況啦
回覆刪除因為有時候并不是影片本身的尺寸造成的
而是有些影片本身就被加上那兩條黑黑的
再加上影片的尺寸
就會導致播放的時候
影片變得非常小
這種時候就必須處理一下了～
如果次這種情況我就不清楚有沒有這樣的剪輯軟體了^^
回覆刪除請問一下關於blogger的事
回覆刪除我發現點了你的標籤後會列出所有文章外
還可以按「較舊的文章」
這是如何辦到的呢？
因為我的blogger如果按標籤會跑出所有的，會跑很久
這應該是版型的功能
回覆刪除我使用的預設版型一開始就是這樣設定
請問製作banner的話也可以用這個軟體嗎??它的長度沒辦法到980px這是比較可惜的地方，版主想請問如果想製作banner可以有什麼軟體參考??謝謝。
回覆刪除其實也可以用一般的繪圖軟體
回覆刪除例如GIMP也滿不錯的