2009年6月11日星期四

電腦玩物

電腦玩物
Add to Google


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

Posted: 11 Jun 2009 04:41 AM PDT


fresh-03

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

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

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

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

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

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

fresh-04

 

FreshGenerator圖標製作流程詳解:

1.

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

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

fresh-01

 

2.

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

fresh-05


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

fresh-06

 

4.

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

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

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

fresh-07

 

5.

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

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

fresh-08

 

7.

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

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

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

fresh-09

 

8.

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

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

fresh-10

 

9.

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

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

fresh-11

 

10.

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

fresh-12

 

11.

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

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

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

fresh-13

 

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('&#40;') .concat(encodeURIComponent(document.title)) .concat('&#41;')));"><img src="圖標檔案的連結網址"/></a>

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

fresh-03

没有评论:

发表评论