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

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

留言

  1. 內文提到FreshGenerator 不支援中文,那麼版頭標題『電腦玩物』四個字怎麼加上去的?
    是另外再用Photoshop加上去嗎?

    回覆刪除
  2. 請問一下異大
    我想要找一個可以剪輯影片的軟體
    可是我不是要那種把不要的段落剪掉的功能
    我是想要把有的影片,上下會有兩條黑黑的剪掉
    讓畫面變滿,不要有那兩條黑黑的
    請問異大有這種軟體嗎?
    因為我找不到所以只好來求救異大了~

    回覆刪除
  3. jd;
    因為Blogger標題原本就有支援可以輸入文字在你的底圖上方,
    我是用內建的方式作的。

    當然你也可以先做好特別效果的底圖再加字,這時候很多免費的圖片編輯軟體都可以做到喔^^(例如小畫家)

    樂樂:
    影片的上下兩條黑黑的部份好像不是能夠剪掉的,
    那是影片本身長寬比例輸出到螢幕後的問題,
    如果你改變比例讓上下黑邊不見,那你畫面的人物可能會變形喔

    如果要改變影片的比例,一些轉檔軟體可以做到,例如格式工廠:http://blog.soft.idv.tw/?p=324

    回覆刪除
  4. 有空也來作個推特與噗浪的按鈕好了!^^

    回覆刪除
  5. 還是要看情況啦
    因為有時候并不是影片本身的尺寸造成的
    而是有些影片本身就被加上那兩條黑黑的
    再加上影片的尺寸
    就會導致播放的時候
    影片變得非常小
    這種時候就必須處理一下了~

    回覆刪除
  6. 如果次這種情況我就不清楚有沒有這樣的剪輯軟體了^^

    回覆刪除
  7. 請問一下關於blogger的事

    我發現點了你的標籤後會列出所有文章外
    還可以按「較舊的文章」

    這是如何辦到的呢?
    因為我的blogger如果按標籤會跑出所有的,會跑很久

    回覆刪除
  8. 這應該是版型的功能

    我使用的預設版型一開始就是這樣設定

    回覆刪除
  9. 請問製作banner的話也可以用這個軟體嗎??它的長度沒辦法到980px這是比較可惜的地方,版主想請問如果想製作banner可以有什麼軟體參考??謝謝。

    回覆刪除
  10. 其實也可以用一般的繪圖軟體
    例如GIMP也滿不錯的

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

3000 多部古老童書繪本免費線上閱讀,橫跨三百年的童書收藏

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

自動化圖片去背教學!只需 Word 或 PowerPoint 搞定

掌中澳:免費手機版澳門觀光地圖指南,最輕便的旅遊電子書

立體摺紙地球儀 Mapscaping 免費12款地球摺紙模型下載列印

2萬多個兒童紙上習作免費下載列印,從著色、迷宮到摺紙練習

Glaze 簡報文章商用插畫免費圖庫,不過時原創插圖ICON下載

我的第一堂線上影音課程:Evernote 子彈筆記系統