網頁設計中的彩色濾鏡效果

2021-01-11 人人都是產品經理

在當今這個充斥著先進的特效和精妙風格的世界中,誰曾料到,像純色和漸變這樣簡單的手法,竟能夠催化出創造力,並極大提升網站的美學水準?現代網頁設計師們,證明了優雅的插畫、精緻的圖形和壯麗的照片,都能在彩色濾鏡效果下很自然地得到強調。氣氛煥然一新,網站開始變得光彩奪目。的確,它有助於解決某些問題。

首先,彩色濾鏡能給網站耳目一新的外觀,卻不會增加負擔 。其次,它通過搭配傳遞各種情緒的色彩,很好地豐富了設計。第三,作為一層低透明度的遮罩,它不會掩蓋主背景的魅力,對於想要輕微淡化輪播圖或視頻區域,卻仍希望其吸引力不減的人 ,這點尤其有用。最後,它為前面的內容提供了堅實的基礎,兼顧了可讀性。

參考:最佳實踐:一流的品牌與推廣網站

這種方案能非常協調地與各種元素協作:提供強烈反差的白色、極受歡迎的扁平風格元素,還有為項目增添精緻微妙感的輪廓式圖形。

這裡有些傑出的網頁設計,示範了如何正確地運用這項技巧。

Zimya

著陸頁帶有一層美妙的半透明漸變,立刻喚起積極溫暖的感覺。從紫紅色到橙黃色,遮罩層華麗的顏色令人著迷。

Red Collar

平滑的半透明漸變極大地豐富了背景圖——這家機構的視覺象徵。它增添了幾分獨特,不僅與整個場景形成互補,也形成了熱情洋溢的氛圍。

Ingram Cole and Land

這個網站基於一些非常棒的賞心悅目的效果,這不僅指它的動畫,還有成功貫穿整個網站設計的照片處理手法。從紫色到粉色,溫暖而微妙的漸變,使歡迎頁面看起來相當美妙奢華。

Adopt Wales

設計師在視頻背景上覆蓋了一層迷人的粉色漸變,營造了親切友好的氛圍。顏色與透明度的選擇很好地突出了上面的元素。

Snippet App

對於更喜歡創造冷靜與便捷的整體感觀的人而言,藍與白的結合是非常有用的。設計師實際上用了三種色調,不過這兩者佔據主要地位。

Joyce Van Herck

Joyce Van Herck是名高端藝術家,她的在線作品集網站嵌入了優美的幾何圖形。甜美的半透明漸變使斜線擁有活力,加強了這種愉悅的氛圍。

Electric Mainline

和前面提到的Snippet App很像,設計師運用了藍白混合。不論如何,低透明度的遮罩層,使用戶欣賞其背後那張扮演主角的背景圖。

Solid Giant

使用粉色是為了解決幾個問題。首先,它能有效地突出標語、logo、導航和微妙的白色幽靈按鈕;其次,它建立了一種輕鬆的氛圍;最後,它體現了品牌特徵。

Invelab

同樣,設計師試圖在背景與前景之間營造完美的對比,同時也將注意力引向工作室的圖片。明亮的紫色有效地與白色形成互補。

M2B

歡快的半透明漸變強化了網站的視覺表現。正由於採用了這種方式,全新的色彩使得背後的圖片陡然增色。而白色被用作一種補充色,使內容看起來醒目。

Lovedays

設計師在歡迎頁面上運用了扁平風格 。極簡設計只包含了幾個輪廓式元素、簡潔的字體、樸素的按鈕,還有城市背景圖。後者與半透明的藍色相配合,增加了可讀性。

Numero Neuf

首頁的特色是大量基於圖片的導航,每一項都覆蓋了一層黑色半透明濾鏡。這種方式很常用:如果你想為文字營造完美的對比,並淡化菜單項,很自然就應該將注意力引向某個選中的項。

Evoluzione Telematica

綠色使人聯想到正能量,此處就是這麼用的。明亮的色調與白色共同建立了一種積極的形象。

The Place

這位設計師借極簡主義的方式重現了優雅。所選的顏色反映了網站的個性,統一了視頻樣式。

Obbaki Foundation

顏色可以提升感觀的協調程度。它豐富了網站的主題,同時輕而易舉加入了一些戲劇性效果,對整體氛圍有一定貢獻。

Studio Up

這個機構通過迷人的效果展現了一個視覺差滾動的介紹頁面,向普通用戶證明了他們熟稔網頁流行趨勢。每一頁都有其獨特的顏色,覆蓋在動態的背景上,用以突顯其內容。

Hype Agency

設計師在焦點區域揮灑了一整片的橙色,為網站營造了恰當的積極的氛圍。另一種顏色則是白色,非常明亮並融入其中。

Louis Currie

Louis Currie不滿足於單一顏色;他用了一整套不同的蠟筆色調交替展示。這個網站絕對能體現他敏銳的色彩感與協調感。

Grey Group

華麗的青綠色覆蓋了首頁,像一層沒有重量的輕紗,強化了這個網站井然有序的外觀。輪廓式圖形和幽靈按鈕很好地突出並積極配合主色調。

Papertelevision

薄薄一層明亮多彩的顏色賞心悅目,伴隨著每個主要部分。首頁的深紫色幾乎不容易注意到,但它仍然能使頁面活潑有趣。

結論

彩色濾鏡——這種從前在平面設計中的基本技巧,在網頁設計中重獲新生。雖然色彩輕微地稀釋了設計,它也帶來了一絲精緻和特別的魅力,同時兼具功能性。

原文連結;

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產品經理專欄作家,UI/UX設計師,關注網際網路,關注科技。現居杭州,與小夥伴們正在創業途中。或許不是一名優秀的設計師,至少是個快樂的設計師。

轉載請保留上述作者信息並附帶本文連結

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}

相關焦點

  • 網頁設計中Meta標籤詳解
    META的強大功效,一個好的META標籤設計可以大大提高你的個人網站被搜索到的可能性,有興趣嗎,誰我來重新認識一下META標籤吧!3、Expires (期限) 說明:指定網頁在緩存中的過期時間,一旦網頁過期,必須到伺服器上重新調閱。
  • 網頁布局設計與色彩搭配
    網頁是網站構成的基本元素,精彩的網頁離不開網頁設計。在網頁設計的眾多環節中,頁面布局和色彩搭配是重要的環節之一。 1. 網頁的布局類型。 在網上瀏覽能看到許多精美的主頁和布局。
  • PS濾鏡教程-教你製作出漂亮旋轉彩色繽紛的星空光環
    今天講的是彩色光環的製作方法以及加星星,星空光環需要用多種濾鏡做出初步的黑白光環,截取想要的部分;然後添加細節,再整體上色即可,星星也要用濾鏡來完成。毫米變焦」,把光暈儘可能移到畫布中間; 三、執行「濾鏡>濾鏡庫>藝術效果>塑料包裝」
  • Web設計教程:網頁設計中的對比原則
    網頁設計是由很多個不同的元素構成的, 而這些元素的重要性都不同, 並且有些元素還需要尤為的突出.有些元素彼此之間存在著聯繫,而另外的元素之間則 一點關聯性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關係.這就該用到對比原則了.
  • iPad網頁設計類應用軟體推薦
    本文是來自mobiweb20.com的一篇文章,介紹了20個iPad網頁設計類的應用程式,尤其適合於使用iPad進行UI設計的程式設計師。sketchBook ProSketchBook Pro 提供強大的鋼筆、濾鏡、蒙版等繪圖功能,讓你可以在iPad上繪出強大華麗的作品。
  • insgream網頁app下載
    insgream網頁app下載軟體介紹:Instagram 是一種捕捉和分享世界精彩瞬間的簡單方式。只需關注,即可借他人之眼來捕捉全球的精彩瞬間,順便從中發現趣味。展示自己的魅力和創意,讓眾多小夥伴參與互動評論,共享歡樂。
  • 網頁設計中各度量單位的比較
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁設計中各度量單位的比較
  • 在網頁設計中,圖片常用的五點技巧
    圖片在網頁中所扮演的角色越來越重要。作為最常見也是最早使用的網頁多媒體,圖片對於網頁設計師而言至關重要。如何用好圖片已經成為了一項成熟、完善而又講究的技巧,而在高清屏幕無處不在的今天,稍有瑕疵的圖片都在高密度的像素下無所遁形,而不合理的圖片設計也不會逃過訪客的雙眼。
  • 體驗「異界」風光 麥莎IR760紅外濾鏡評測
    ,只是鏡片是全黑的  而630nm、680nm、720nm這些低波長的紅外濾鏡可以允許一小部份可見光進入,與紅外光混合成像,因此可以拍攝有趣的彩色半紅外照片。850nm、950nm的紅外攝影濾鏡拍攝的則是純粹的紅外照片,適合後期轉換為黑白效果。今天我們的這塊麥莎紅外濾鏡是760nm的,原則上說它正好能完全阻隔可見光,而只讓紅外光通過。  ·紅外濾鏡使用效果展示  在使用紅外濾鏡之前,我們要做一些準備工作。
  • 網頁設計中如何配色?感受不一樣的視覺盛宴
    網頁視覺體驗主要是由形式(或叫布局)、色彩、圖片和文字信息組成,共中色彩主要指的就是色彩的搭配和運用。頁面設計需要考慮和搭配的是頁的顏色而不是同片的顏色,所以我們可以將整個頁面當做一個畫布,然後對需要的部分進行色彩填充,使其看起來即實用又美觀。
  • 網頁設計布局包括哪些類型?
    建站離不開網頁設計,而網頁布局則是重中之重,其實布局可以說是一個網站的基礎,網頁設計布局是為了吸引用戶和提高網站的用戶體驗。在進行網頁設計布局時網頁內容是需要進行有機整合和分布的,以此來達到某種視覺效果。而設計網頁的目的不同,就有不同的網頁布局,那麼網頁設計布局都包括哪些類型呢?
  • 攝影常用的幾款濾鏡,用對了效果驚人
    喜歡手機攝影的朋友都知道,在有時候的拍攝中我們會為了達到某些特殊的效果使用一些濾鏡,而手機中的濾鏡也十分便捷易用,只要動動手指就可以實現不同濾鏡效果的切換。與手機的濾鏡系統靠軟體算法不同的是,單反的濾鏡系統是靠物理濾鏡,它安裝在鏡頭前面,並且濾鏡的效果也與手機濾鏡的效果大不相同。本文給大家介紹攝影中幾款常用的濾光鏡,用對後拍攝的照片效果驚人。
  • 濾鏡到底有什麼用處
    在本文開始介紹之前,我們首先要聲明,這裡所說的濾鏡,是應用在鏡頭前面的那種,並不是很多卡片相機和單電相機中設計的效果濾鏡,這些效果濾鏡只是增加拍攝時的樂趣性,因此沒有什麼實際的討論意義。那麼我們說的濾鏡是什麼,其實就是能夠擰在鏡頭前面的一個圓片,比較官方的叫法為安裝在相機鏡頭前用於過濾自然光的附加鏡頭。
  • 紅外濾鏡能拍攝什麼效果
    紅外在某些情況下能夠透視,很多人會以為只要相機鏡頭上添上一片紅外濾鏡,就可以實現透視的拍攝了。事實上,並非如此。我們常見的UV鏡是過濾掉紫外線,而紅外濾鏡正好是相反的,它是只保留紅外部分。所以說如果想要拍攝透視,加上一片紅外濾鏡其實是不夠的,因為大部分物品如果隔著東西,都無法通過紅外透視,只有非常少數的材質才能夠透視。紅外濾鏡事實上只是安裝紅外濾鏡並不能直接拍攝紅外照片,還需要將感光元件(CMOS/CCD)前面的紅外截止濾鏡去掉才可以拍攝。如果說想要用相機來拍照,還需要自己動手改裝自己的相機,而在拆卸的過程中極容易讓相機損壞,所以我們不建議大家這麼做。
  • 體驗「異界」風光 麥莎IR760紅外濾鏡評測_MASSA 77mm 超薄紅外鏡...
    紅外濾鏡在外觀上和普通濾鏡一樣,只是鏡片是全黑的  而630nm、680nm、720nm這些低波長的紅外濾鏡可以允許一小部份可見光進入,與紅外光混合成像,因此可以拍攝有趣的彩色半紅外照片。850nm、950nm的紅外攝影濾鏡拍攝的則是純粹的紅外照片,適合後期轉換為黑白效果。今天我們的這塊麥莎紅外濾鏡是760nm的,原則上說它正好能完全阻隔可見光,而只讓紅外光通過。  ·紅外濾鏡使用效果展示  在使用紅外濾鏡之前,我們要做一些準備工作。
  • 濾鏡是雞肋還是神器?一篇文章告訴大家濾鏡到底有什麼用
    如果你使用中灰漸變濾鏡的話,那麼拍起來就很簡單了。其實在膠片時代就已經開始使用濾鏡了,只是隨著數位相機和後期技術的不斷發展;濾鏡已經不在是必需品了,因為通過數位相機的參數設置和後期軟體調整就能實現濾鏡的效果。但是,數位相機和後期軟體能做到,並不代表著濾鏡就沒用了。比如:你拍攝長曝光題材的照片時(絲綢般質感的流水和瀑布),用ND濾鏡和沒用ND濾鏡區別是很大的。
  • 網頁設計的黃金比例
    ,雖然現在很多人傾向使用Grid css框架(如960,blueprint),但有時也需要設計一些獨特的布局本文我們要探討如何將黃金分割理論運用到網頁設計中,大部分涉及到的技術也同樣適用於其他的設計或藝術類工作,當然主要還是針對於網站設計布局。
  • 認識濾鏡:什麼是中密度灰鏡?與減光鏡有什麼區別?它有什麼效果
    但你若是一名風光攝影師,背包裡有GND濾鏡,就能用它來平衡反差。本文就一起來了解GND濾鏡的作用與使用技巧。GND濾鏡GND濾鏡又叫中灰漸變鏡、漸變中灰密度鏡、一般稱為漸變減光鏡,叫法比較多,但根據英文名稱來看,正確的叫法是中密度灰鏡。
  • PS教程:Photoshop製作3D彩色粒子立體字
    圖044、對文字副本執行:濾鏡 >紋理> 彩色玻璃,參數及效果如下圖。圖1310、再執行:濾鏡 >紋理 >彩色玻璃,參數設置如下圖。圖2013、對小點圖層執行:濾鏡 >紋理 >彩色玻璃,如下圖。
  • 圖片美景利用Photoshop 濾鏡扭曲極坐標製作球形圖片效果
    我們製作和設計圖片的時候,需要各種各樣的效果。下面就和大家分享一個製作效果,圖片美景利用Photoshop製作球形圖片效果的辦法。歡迎大家跟著我做,學習這個效果製作。(5)點擊濾鏡——扭曲——極坐標。工具/材料:電腦、Adobe Photoshop CS6、素材圖片一張。