Zi 字媒體

教學主題: 4種背景設計技巧讓你的設計脫穎而出 大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學 今天的這個教學主題是: 4種背景設計技巧讓你的設計脫穎而出 這教學的重點為這幾點 [ 設計,脫穎而出,技巧,背景,效果,特效,粒子,可以,這個,鼠 ] 希望你可以從這幾點中領悟到修圖的精華 本文重點 在很長一段時間裡面，網頁中的背景圖片元素，一直都生活在CSS、JS甚至視頻的陰影當中，它的“參與感”並不強烈。不過隨着審美和用戶需求的逐步變化，背景圖片在網頁裝飾上，開始發揮着越來越重要的作用。 在很長一段時間裡面，網頁中的背景圖片元素，一直都生活在CSS、JS甚至視頻的陰影當中，它的“參與感”並不強烈。不過隨着審美和用戶需求的逐步變化，背景圖片在網頁裝飾上，開始發揮着越來越重要的作用。 當然，從總體上來看，變化並不明顯，但是在絕大多數的情況下，背景圖片開始作為主要的視覺驅動力而存在。 傳統意義上的背景主要是使用圖片，近幾年開始流行視頻背景了。而這些主要還是集中在網站的頁頭、Banner等位置，大多用來歡迎用戶，推薦內容。許多網站都採取了相似的策略，讓用戶有所期待。 隨着動效的流行，現在越來越多的設計師開始試圖將CSS3、HTML5和JS等技術融入到背景設計中來，尋求全新的解決方案。事實上，現在已經有四種不同類型的動態背景設計方案，它們風格都非常符合時下流行的趨勢，且都具備不俗的發展潛力，今天我們聊聊這四種風格前衛大氣的背景設計。 粒子動效 粒子動效是目前最流行的選擇之一，很大程度上是因為這種方案對於目前的網站和瀏覽器而言，負載並不大，並且足夠優雅。它可以很好地同純色背景、插畫、矢量素材甚至照片結合起來使用。 除此之外，顆粒的動效變化也有很多變化。可以是在整個頁面中隨機散布移動的點，也可以模仿雨滴和流星的運動軌跡，還能參考星座、星空和宇宙中行星的運動來設計。粒子動效還能和鼠標運動以及觸發事件結合起來：可以讓粒子避開光標，也能讓粒子圍繞這光標運動，甚至讓運動軌跡緊跟光標運動，等等。 Huub 這個網站就是一個典型的案例，不同的點構成群組，點和點之間有細線連接，在黑色的背景上移動着形成自轉的效果。當鼠標移動到附近的時候，光標所在處會形成新的點，與最近的光點連接。 小貼士：如果你想實現類似 Huub 這樣的動態背景效果，不妨看看 Dominic Kolbe 所創建的名為Mouse Parallax Demo 的項目，它能給你帶來近似的效果。如果你立刻馬上想要一個高度可用的粒子特效背景的話，那麼你應該看看 Vincent Garreau 所創建的 Particles.js 這個JS庫。 波紋顆粒特效 在前面的案例中，粒子特效能夠通過HTML5和CSS3以及JS代碼來實現，而波紋粒子特效這個效果則是藉由Three.js 來實現的。它讓粒子構成平滑的波紋，然後上下波動產生呼吸的畫布一樣的效果。你還可以藉助鼠標光標讓它向著不同的方向旋轉，你可以探索各種不同的玩法。 StuurMen 這個網站就藉助波紋粒子特效來製作歡迎頁面。它看起來精緻而極簡，內容以一種毫無侵略性的方式進入用戶的視野，而波動粒子特效則讓整個項目的氛圍顯得平滑而穩定。 小貼士：你可以在這裡看到ThreeJS的原始腳本，Deathfang 成功地改寫了這個腳本，並且將它製作成一個名為 three.js canvas – particles – waves 的demo。 鼠標懸停視差效果 視差特效也一直是熱門的設計趨勢。在深色背景上，搭配粒子特效的視差特效幾乎能夠立馬創造出3D的視覺效果。視差特效偉大的地方在於，你無需特別精準地選取特定的圖片，就能營造出良好的視差效果。 當你需要讓你的標題、LOGO和場景擁有真實的質感的時候，一個視差特效能夠快速的給你以提升。當然，視差特效同樣適用於各種抽象的動畫。當觸發鼠標懸停事件的時候，對應元素會增加一個維度，用就可以移動鼠標與之進行互動。 Alexandre Rochet 的個人作品頁就將視差效果玩的出神入化。視差特效讓頁面中的元素顯得非常的醒目。 小貼士：用來生成視差特效的代碼庫和代碼片段有很多，最受歡迎的應該是Matthew Wagerfield 所創造的一款插件，名為 Parallax.js 。如果你在實際運用中更注重排版，那麼不妨試試 Frontnerd，它的特色在於生成鼠標可控的3D視差效果。 WebGL Experiments WebGL Experiments 包含一系列給進階的開發者和經驗豐富的客戶所準備的特性，能夠切實地節省開發預算。這些特性能夠為你帶來輝煌、誇張甚至詭異的效果，不過你不要忘記，WebGL Experiments 帶來的強大效果是有代價的：它極其消耗資源，而且還需要你考慮瀏覽器兼容性的問題。 Solarin 這個網站就是藉助 WebGL Experiment 製造的3D效果以及各種尖端的功能和特性，其中透光的3D球體視覺效果相當的贊，還能隨着鼠標移動而滾動，讓人難以忘懷。 小貼士：雖然模仿MediaMonks的天才設計過於複雜，但是你總能在網絡上找到各種項目和插件，幫你完善設計。你可以試試這個 WebGL API，以及這個來自 Yoichi Kobayashi 的名為“The Wriggle Sphere”的項目。 結語 遠離平庸，就意味着你要花費更長的時間來構思、探索和實現，無論是採用哪種方式來實現特定的效果，實現了就是收穫，讓你的網站擁有一個全新的起點。 看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢? 希望我們所介紹的 4種背景設計技巧讓你的設計脫穎而出 這教學會喜歡 文章標題: 骨子愛創意- 4種背景設計技巧讓你的設計脫穎而出–轉載請註明來源處 本教學分類為平面理論教程中的 設計教程相關教學 文章相關關鍵字為: 設計,脫穎而出,技巧,背景,效果,特效,粒子,可以,這個,鼠 本文永久連結 :4種背景設計技巧讓你的設計脫穎而出 本文轉載自 :VIA