兩個線上「載入中圖示(loading icon)」產生器 – Loader Generator、Ajaxload

在所謂的「Web 2.0」時代開始之後,我們可以看到很多網站使用了 Ajax 技術實現網站與瀏覽器之間的非同步資料交換。Ajax?形相上地說就是,當使用者向網站請求某段訊息時(如:點按某個連結、某個按鈕或是送出一個表單資料),瀏覽器並不會重新載入整個網頁,而只是重新載入包含更新訊息的那個區塊而已。也因為這樣,所以大部份的 Ajax 網頁會使用一種動畫小圖示,讓網站使用者知道網頁的某個區塊正在更新,而這種小圖示一般都稱為「Loading Icon」或是「Loader Icon」。

Loader Generator 是一個「載入中圖示」產生器,進入網頁之後就可以看到有許多小圖示。點選其中一個圖示後會顯示一個可以讓我們設定圖示和背景顏色的框框,設定好顏色後按下【Generate】便會產生新的小圖示,最後再點按【Download】下載做好的圖示。

LoaderGenerator.01

LoaderGenerator.02

Ajaxload 同樣也是一個 Loading Icon 產生器,在「Indicator type」下拉選單選擇一個載入中小圖示的樣式,然後分別在「Background color」以及「Foreground color」設定圖示和背景色,若要透明化背景的話則勾選【Transparent background】,按下【Generate it!】後會在下面顯示預覽圖,如果滿意的話再按下【Download it!】來下載做好的圖示。

Ajaxload

製作炫麗的背景圖片不求人 – Repper

在製作網頁的時候,如果不想讓背景太過單調的話,會選擇一些背景圖片來搭配。不過,背景素材除了在網路上找現成的,或是從無到有自己畫之外,還有什麼辦法可以做出來?

背景素材不只在網頁設計時才用得到,像簡報、繪圖、平面設計、或是現在很多網站都允許會員上傳個性化圖像,都可以將背景圖片應用在這些地方。

Repper 是一個既有趣又實用的線上「圖案」、 「圖樣」、「重覆背景」產生器,它會先擷取圖片中某個固定的範圍,再將該範圍的圖案水平、垂直地複製開來,如此就會變成一個炫目的背景。Repper 網站本身已經提供一些圖片讓我們產生圖樣,不過我們可以自己上傳要製作圖樣(pattern)的圖片(image),這樣就能做出一個獨一無二的背景圖了。

進入 Repper 的圖案產生器之後,它會隨機給我們一張圖片。仔細觀察一下,圖片中有一個半透明的四方形小框框,被它框住的範圍就是產生圖案的基底。我們可以用滑鼠或是鍵盤上面的方向鍵來移動這個小框框,讓它擷取不同位置的圖案。

如果要改變小框框的大小,只須點它一下,然後再拖曳小框框邊緣的某一個節點就可以了。網頁的右上角,如下圖所示,有四個工具圖示:

  • pattern type:這邊有兩種類型的圖案產生規則,選擇其中一個類型,下面馬上就會顯示該類型的效果。
  • random image:它會從網站的圖片庫隨機提供一個圖片素材給我們。
  • upload image:我們可以從電腦上傳一張圖片,然後用它來產生圖案。
  • save pattern:圖案產生出來之後,就能按下【save pattern】,網站會給我們一個網址,或是讓我們將圖案下載到電腦保存。

Repper

以下幾張圖案是從 Windows 7 的標準桌面產生出來的,看起來還蠻漂亮的:

Pattern.01

Pattern.02

Pattern.03

Pattern.04

Pattern.05

除了可以產生出炫麗的背景圖之外,如果運用得當的話,當然也可以做出很噁心的背景圖,就像下面這張(取自 Repper):

Pattern.06

3 個「圖示(icon)搜尋器」讓你輕鬆找到合用的圖示

自從作業系統進入了「圖形化使用者介面」的時代以後,使用者就不必再記一堆乏味難懂的指令,而是使用滑鼠,在程式介面上點一點、按一按就可以讓電腦聽令於我們,執行我們希望它做的事。

在圖形化的系統裡,圖示一直扮演著很重要的角色,因為它能讓使用者在看見圖示的同時就能產生「按下這東西,電腦就會做什麼事」的聯想。以早期的 Windows 作業系統為例,當進入桌面的時候我們可就以看到代表各個功能的圖示:像是「我的電腦」、「我的文件夾」、「網路芳鄰」和「資源回收筒」等等…。想像一下,如果桌面只有一堆「純文字」的捷徑,那麼操作電腦的效率是不是就會下降許多?

其實不只在作業系統裡找得到圖示的應用,網頁、應用程式,甚至是報告、文件都可以運用圖示讓來讓操作介面變得更直覺與更人性化,文件、報告內容也會增色不少。當然,前提是使用得當的話。

今天要來介紹三個我個人覺得值得推薦以及收藏的「圖示收尋引擊」。

第一個是「Icon Finder」,這是幾天前,在噗浪上看到許多轉噗介紹而認識的。圖示搜尋器的使用方法跟一般搜尋器沒兩樣,輸入要找的圖示關鍵字(只限於英文)之後,網站就會列出符合該關鍵字的圖示。Icon Finder 有一個特別的「圖示大小」過濾功能,利用位於搜尋結果上面的「拉 bar」,我們可以指定只顯示特定大小的圖示。

IconFinder

SearchIcons.01

接下來這兩個搜尋器是我在轉噗介紹 Icon Finder 的時候,引出一位朋友補充推薦而認識的。

IconLet

SearchIcons.02

IconLook

SearchIcons.03

免費下載高品質的向量圖 – Free Vector Download

FreeVectorDownload

Free Vector Download 是一個提供高品質向量圖檔的下載網站。大部份的檔案格式是 .AI (Adobe Illustrator),另外有一部份是 .PSD (Adobe Photoshop)、.CDR (Corel Draw) 或是 .EPS (Encapsulated PostScriptd)。

一進入網站的首頁就可以很清楚地看見最新發佈的向量圖,你也可以依照「Most Downloads (最多人下載)」以及「Most Popular (最熱門)」的排列順序瀏覽網站裡的向量圖。在網頁右邊的側欄裡則有向量圖的分類,可以依照需求尋找圖檔。

根據站長的說明,目前網站擁有 200 套以上的向量圖。每一套向量圖都可以免費地使用於個人或是商業用途。

不管是尋找靈感、自我學習;或是工作、學業上的需要,相信都可以在 Free Vector Download 找到合適且具有設計感的向量圖檔。

網址:http://www.freevectordownload.com/index.html