文、G小編

網頁該呈現什麼樣的風格?可別小看網頁背景的設計,背景就像綠葉一樣,能襯出紅花的美,有時候越素雅簡單的背景,更能突顯主視覺或主商品的重要性,回顧一下2017年的網頁設計趨勢裡提到,漸層背景成為潮流,已有不少企業也跟上潮流,炫麗的漸層配色,如果搭配的巧,就像幸福的極光般,增添不少美感,例如:

截圖自Stripe官網

 

截圖自Asana官網

 

InstagramLOGO改為較亮眼的漸層色 / 截圖自Instagram fb首頁

 

截圖自EVERNOTE官網

 

以下就來介紹4個打造炫麗的漸層背景神器,讓你在網頁設計的時候,也能輕鬆追求潮流又不奇怪。

 

1. WebGradients  網址點我 

網站內提供了180款線性的漸層色,只要按下Copy CSS,一鍵就可以輕鬆套用網頁背景,非常方便,網站同時也提供色碼資與PNG檔案下載。

 

只要在你喜歡的顏色,按一下左鍵,就可以預覽所選擇的背景感覺。

 

如果你想要得到這些漸層顏色的SKETCHPSD檔案,可以點擊網頁右上方的下載按鈕,可以自由輸入價格,如果喜歡,也不要吝嗇給予贊助喔!

 

2. Unique gradient generator  網址點我

一進網站,所看到的背景就是預覽的結果,透過右上方的設定條件產生出許多不同的漸層背景。

 

利用xY去調出自己喜歡的顏色,Sample area則是範圍大小,也可以利用Randomize隨機產生背景。

 

另外,介紹一下下方的選單,透過Browse image可以上傳你的照片,而網站所選取的是照片裡的色系,並非是照片本身。

 

它會自動截取照片裡的某一塊顏色,如果你不喜歡,可以去調整XY的位置,就會有不一樣的色塊出現了。

 

選擇Select source image也是同樣的道理,裡有提供預設的照片,一樣是挑照片裡的色系,再去調整XY的位置,也可以利用鍵盤的方向鍵來移動位置。

 

選好背景色後,按下Generate CSS就可以複製CSS語法,使用在你的網頁裡囉!網站也有提供社群按鈕的分享,喜歡的朋友,也不要吝嗇和你的朋友分享。

 

3. Ultimate CSS Gradient Generator  網址點我

網站內有提供約137種預設的漸層樣式,網站雖然看似有點陽春,但其實有很多功能喔!

 

小編偷吃步,先從預設裡挑一款,再來逐步調整是最快的方式,可以透過hue/saturationreverse變更顏色,就可以在右上方的Preview看到色彩的變化了。

 

它的介面和Photoshop很像,非常親民,如果你想新增一個一個中間色,只要點一下,就會出現了。

 

網站提供了5種漸層的呈現方式可以變更,如果調整完成,也可以把這組顏色儲存起來,另外,網站也有提供CSS語法可以直接複製使用。

 

網站還提供import cssimport image的方法。

 

照片匯入一樣是抓取照片的色系,另外要特別注意圖檔的大小,如果過大會發生錯誤。

 

4. CSS Gradient Background Maker  網址點我

網站的使用方式也蠻簡單的,也是比較陽春的網站。

 

網站提供LinearCircularElliptical三種漸層模式,而每一種模式又有不同的顯示方式可以選擇,就能變化出很多種可能。只要選擇開始和結束的顏色,中間變化的顏色電腦會幫你算出來。

 

當然你也可以按下Add Stop選擇加入幾個顏色,在Offest欄位可以改變數值,去調整漸層顏色的位置,就可以調出不一樣的漸層,最後,也提供了CSS語法方便使用於網站上。

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享:全方位養成  設計、行銷、企劃一次學會

聯成電腦資訊分享:2017年網頁趨勢

聯成電腦菜鳥救星:9個免費工具,讓你成為配色達人(下)

聯成電腦菜鳥救星:Photoshop網格效果應用

聯成電腦資訊分享:畫Wireframe有障礙嗎?千萬別錯過MockFlow!(下)

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()