【網站】特效背景圖網站合集!


【網站】特效背景圖網站合集!




Lowpoly風格背景

https://trianglify.io/

【網站】特效背景圖網站合集!

Lowpoly風格背景。通過色塊的扭曲度和色彩,來構成立體效果。


ps:low poly又稱低多邊形風格。實際是把多色元素,用三角形分割,每個小三角形的顏色,取自原多色元素的相應位置。


色塊傾斜度和色塊大小都可以自己調整。網站有提供配色,當然點擊“習慣”的控件大家就可以自己調整想要的顏色了。


Lowpoly風格背景

http://matthew.wagerfield.com/flat-surface-shader/

【網站】特效背景圖網站合集!

與上一個網站相同,Lowpoly風格背景。


不過上一個是扁平的,而這一個是三維立體的感覺。


右上角控件的功能寫的很清楚,大家就自行調整試試。


迷幻波浪

https://codepen.io/Yakudoo/full/rJjOJx/

【網站】特效背景圖網站合集!

該網站取名為迷幻波浪,但是我更願意叫它一個等高線漸變。


speed調整速度波浪運動的速度。

hue數值越大與最初顏色的反差就越大

hue variation數值越大顏色種類越多

density調整密度,密度越大,波浪越多,間距越密

displacement移位,數值越大波浪越大,數值為零時為直線


剪紙風格背景

https://pissang.github.io/papercut-box-art/

【網站】特效背景圖網站合集!

剪紙風格背景,這個最應該改名叫等高線風格背景。


中文網站,控件一目瞭然就不解釋了。


值得誇的是每個圖層都可以單獨再調整,這就非常舒服了。


光線繪畫

http://weavesilk.com/

【網站】特效背景圖網站合集!

該網站可自行繪製光線背景圖。利用對稱原理,鼠標隨便繪製都能得到意想不到的結果。

【網站】特效背景圖網站合集!

控制面板有調色、顏色混合和中心選擇的功能。


最大的一個缺點是控制面板的“解開”功能,也就是撤銷,只能撤銷一次,所以大家一定要想好了再下手。


放射粒子

https://wangyasai.github.io/Stars-Emmision/

【網站】特效背景圖網站合集!

科技風的發射粒子背景。右上角可以調整粒子的參數。


兩個顏色就不說了,range是調整兩種顏色融合的範圍,調整後可以得到雙色漸變或單色漸變效果。

speed調整粒子發散的速度。

counts調整粒子的數量

size調整粒子光束的大小

direction調整粒子散射的方向

save截圖保存


【網站】特效背景圖網站合集!

這裡就放了一小段GIF,放太久會頭暈。


雙色調

https://duotone.shapefactory.co/

【網站】特效背景圖網站合集!

一個雙色融合網站(我亂叫的)。網站提供兩種顏色選擇,幫你更好的將顏色融進圖片中。比起自己加蒙版或直接更改圖片顏色,這個要更加自然和多變。


值得一提的是,這個網站裡藏著一個母網站。

點擊右上角淡灰色英文by ShapeFactory,就可以進入母網站。


https://shapefactory.co/


【網站】特效背景圖網站合集!

ShapeFactory(整形廠)一共有四個子網站,Logo(商標)、Pigment(顏料)、Gradient(梯度)、Duotone(雙色調)。


Logo(商標)


【網站】特效背景圖網站合集!

可以自制logo,輸入字標(只限英文),可以選擇不同風格的徽標,最後產生一個獨一無二的logo。不過需要購買,一套40美元。


Pigment(顏料)


【網站】特效背景圖網站合集!

主題調色板。網站可以生成一種主題色的同一色系的四種顏色,解決配色難題。


Gradient(梯度)


【網站】特效背景圖網站合集!


漸變色塊。網站提供多種漸變色,雙色,三色,四色應有盡有,可自行調整漸變角度,也可以自選主題漸變色。


多種場景背景發生器1

http://yiwenl.github.io/Sketches/

【網站】特效背景圖網站合集!

該網站一共只有60張圖,但不同的是,它的一圖可以多用。


【網站】特效背景圖網站合集!


所有的圖片可以自行調整角度,大小。部分圖片還可以拆解粒子,調整粒子的方向。


圖片都有一種空間粒子感,或者一種破敗藝術感,可發揮性很大。


多種場景背景發生器

https://demo.marpi.pl

【網站】特效背景圖網站合集!

和上個網站一樣,是個場景背景發生器。但是這個網站的圖片要更加詭異奇怪。


有一些奇怪的沙漠海洋生物不太適合作為圖片背景,互動演示欄的圖片更加適合。


【網站】特效背景圖網站合集!


這些圖片都有點低多邊形的感覺,但又是以立體三維的視覺效果呈現的,風格不一。


特效球發生器

http://alteredqualia.com/xg/examples/nebula_artefact.html

【網站】特效背景圖網站合集!

特效球?液體球?太空球?怎麼叫它我也不知道,總之是個球。


鼠標在球體上移動時有一種液體解算的感覺,一個球一個顏色,大家就根據自己的需求選擇背景吧。


當鼠標在空白區域大面積的左右上下移動時,球體也會隨之放大縮小,左右上下移動,做一個GIF的動圖可以達到很好的效果。


EMSX控制器

https://www.airtightinteractive.com/demos/js/emsx/

【網站】特效背景圖網站合集!


EMSX控制器。網站有一個控溫器,控溫器中間有一個度數,我猜測是電腦某一個控件的溫度,但這些都不重要,我們只需要一張有數字的圖就行。


鼠標按住隨便滑動可調整控溫器的角度。

鼠標滾筒可以調整數值。數據期限是00°~359°。

右上角的控件是來調整大小或光線的,大家可以自己試試。


只需截圖,做一點小小的處理一張突出數字又不單調的圖片就產生了。


特效圖片處理站

https://photomosh.com


【網站】特效背景圖網站合集!

特效圖片處理站(我起的)。網站提供了27種特效控件,我做的一張只用了五六個左右的控件處理。


【網站】特效背景圖網站合集!

原圖


【網站】特效背景圖網站合集!

處理後

這裡能做的遠不止抖音風格的圖片。網站類似一個可以套用模板的ps,隨便點點就是一張新圖。


網站提供JPG、GIF、WEBM三種格式的保存形式。


光束背景網站

https://codepen.io/tsuhre/pen/BYbjyg

【網站】特效背景圖網站合集!

光束背景網站。由代碼控制,光束自帶科技感。


就是編碼框有點擋背景,不過不妨事,圖片保存很方便。


會敲代碼的可以自己改改圖。


粒子背景圖

https://codepen.io/VincentGarreau/pen/pnlso

【網站】特效背景圖網站合集!

粒子背景圖。和上一個網站屬於同一科。


遇上這樣的背景作圖再廢的手都醜不到哪裡去吧,科技感滿滿的。


但是如果你看不懂代碼就只能止步一張圖了。






分享到:


相關文章: