Magicfont 以漸層色彩或圖片填充文字並快速產生圖片的線上免費工具

Magicfont 以漸層色彩或圖片填充文字並快速產生圖片的線上免費工具

使用 Magicfont,用戶可以輕鬆的為文字加入漸層色彩效果,讓文字變得更具吸引力,而系統也提供多種漸層模板讓用戶可以自行選擇套用,不僅可以使用模板,快速的讓文字顏色從一種色彩過渡到另一種的漸層色彩外,Magicfont 還可以以圖片填充文字,讓文字展現不同的創意與視覺效果,Magicfont的漸層工具簡單易用,即使是初學者也能輕鬆上手。

Adobe Color 色輪配色、擷取圖片內主題色彩的免費線上工具

Adobe Color 色輪配色、擷取圖片內主題色彩的免費線上工具

Adobe Color 是由 Adobe 所開發,主要用來協助設計師進行配色及探索的一個線上免費工具,主要區份「創建」、「探索」及「趨勢」三大部分,在「創建」的部分其提供的主要功能有色輪配色、從圖片擷取主題色及漸層色,還有個就是色盲衝突顏色檢測,而「探索」則是提供使用者可輸入關鍵字搜尋相關圖片的用色,另外「趨勢」則是提供從 Behance 和 Adobe Stock 的創意社群中,探索不同行業目前的色彩趨勢,該服務是免費的,即便是沒有 Adobe 帳戶都是可以使用的,而有 Adobe 帳戶則可以結合 Adobe 產品 ( Photoshop、Illustrator、Fresco 等等) 中,透過 Adobe「顏色主題」面板或 CC Libraries 使用所儲存的顏色主題。

Blend-CSS 漸層色彩 CSS 語法產生器

Blend-CSS 漸層色彩 CSS 語法產生器

網頁有需要使用色彩漸層來布置時,有些人會使用圖片來避開因不同瀏覽器對 CSS 支援各有不同的問題,但也有網站採主要瀏覽器才支援的 CSS 語法來支應,Blend-CSS 是一個可以線上產生漸層色彩的 CSS 語法產生器,操作方法非常直覺,透過設計好的左、右可選不同色彩的介面,直接就可混合成漸層色彩,且可直接預覽,滿意後,就可複製其產出的 CSS 語法,放到網頁要應用的地方,相當方便。

ColorBug 螢幕取色工具,可產生漸層色 CSS 樣式表(免安裝)

ColorBug 螢幕取色工具,可產生漸層色 CSS 樣式表(免安裝)

美工的配色,佔有成品成功的關鍵要素,想要取得好的配色效果,除了經驗外,若能透過工具來協助,取色就更加輕鬆簡單,ColorBug 是一套螢幕的取色碼的免費應用工具,透過拖曳相機圖示,可取到螢幕任何位置的顏色,支援 HEX、RGB 及 Delphi、C++、Visual StudioIDE 等程式的色碼表,除此之外,ColorBug 還有項很特別的功能,就是能製作所選顏色的漸層色,並為該漸層色產生 CSS 樣式表,方便你應用到網頁中。

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

在網頁想要呈現顏色漸層的效果,為了避免各大瀏覽器版本所支援的 CSS 的問題,通常會使用圖片來解決,若是要使用 CSS 樣式表來呈現,則可以試試這個由微軟做的漸層色 CSS 代碼產生器,支援從各角度的漸層,適用 Firefox、IE、Chrome(10,11+)、Safari、Opera 等主流瀏覽器,簡單好用。

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

以往在網頁想要利用漸層的色彩來美化時,若要使用 CSS 需要考慮地的因素很多,各家瀏覽器所支援的語法也不盡相同,需要不斷的微調,最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及,想要使用漸層色彩,越見方便,CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器,只要選好顏色,便能產生不同漸層方向,且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

Color gradient generator 漸層色彩 CSS 語法產生器

Color gradient generator 漸層色彩 CSS 語法產生器

漸層色彩在視覺上可以產生層次感,這對常看單一顏色的人來說,會更加有吸引力,以往要做出漸層色,設計師都會傾向於使用圖片,原因在於各家瀏覽器對 CSS 所支援的程度不相同,造成觀感不佳的問題,而如今瀏覽器對 CSS 3 基本上都支援的情況下,要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整,完成後,就可產生 CSS 語法。

Gradient Actualizer 色彩漸層圖片產生器

Gradient Actualizer 色彩漸層圖片產生器

雖說現在用 CSS 語法就在網頁上產生漸層效果,不需要用到圖片,但同一種語法各家瀏覽器不見得都能通用就是個麻煩,且如果是做文宣品或非在網頁上顯示的色彩漸層,大概也只能用圖片來實現。Gradient Actualizer 是一套免安裝的漸層色彩圖片產生器,只要設定好三種顏色,就能自動幫由上到下、由左至右、垂直向兩側與水平往上下的色彩漸層圖片,可以旋轉,可以自訂圖片大小,簡單且好用。

Just Color Picker 精準的顏色選擇器(免安裝 繁體中文版)

Just Color Picker 精準的顏色選擇器(免安裝 繁體中文版)

不論是平面設計或是網頁美工,常有配色、抓取顏色及獲取顏色代碼的需要,而這個需求可以透過軟體工具來協助,除了先前所介紹 ColorPic 一套簡單好用的顏色選擇器! 或是網頁上的 0to255 線上簡單好用的顏色選擇及配色 都可以應用。Just Color Picker 是一套精準的顏色選擇器不需安裝即可直接執行,只要在電腦螢幕上任何一個位置,看到喜歡的顏色,滑鼠移到其上方,Just Color Picker 就會放大該目標且顯示出目標的顏色代碼,例如有些漸層色的圖片,放大後,可精準地取出顏色碼且可以使用 HTML、RGB、HEX、HSB/HSV 及 HSL 的顏色格式來標示出顏色代碼。

MESH·Y 線上漸層圖片產生器

MESH·Y 線上漸層圖片產生器

文宣、網頁設計如果要使用漸層色圖片,可以使用圖片編輯軟體自己繪製,如果覺得麻煩,也可以來使用 MESH·Y 這個線上免費服務,該服務提供四種色彩的混合漸層,除了有模板的提供外,使用者也可以根據自己需求更改顏色,重新隨機混合,而產生的漸層圖片,可以下載成 PNG 圖片格式,另外也可以由使用者自訂圖片尺寸,免去後續還要裁切或重新調整,一次到定位。

NOISE & GRADIENT 漸層圖片產生器

NOISE & GRADIENT 漸層圖片產生器

漸層色的運用,能讓用戶感覺到色彩的層次感,在網頁中要使用漸層色彩可以使用圖片,亦可以利用 CSS 語法來完成,但如果是用於文書、簡報、文宣美工等產品,則必免不了要使用圖片。NOISE & GRADIENT 是個線上漸層圖片產生器,透過網頁上的介面,使用者可以自行選擇漸層要搭配的顏色(最多 6種),而使用空白鍵可隨機產生漸變色彩的各種組合,另外,還可以加入將色彩顆粒化的 CHAOS、GRAIN 兩項因子,完成後,可以免費下載 1000×1000px 的圖片。

Supershots 線上幫圖片加入漸層背景和陰影效果

Supershots 線上幫圖片加入漸層背景和陰影效果

圖片的呈現方式可以有千變萬化,透過後製的加工我們可以製作成輪播影片、添加文字說明、加入濾鏡或是合成...等效果,而 Supershots 這個網站所提供的服務屬於圖片合成,其由使用者自行上傳圖片後,可以加入一個帶有陰影的漸層色背景,讓圖片看起來更立體化,更為美觀,該服務不須註冊帳號且完成後的圖片亦不會有該網站的浮水印,相當方便。