前兩天收到壹個朋友的留言,問我下圖這種漸變色是如何制作的?
看來大家對於漸變色還是有很多不懂的地方,所以今天,我打算系統的說壹說PPT中的漸變色。
雖然在PPT中漸變的實現特別簡單,但是說句不好聽的,很多人做的漸變並不好看,甚至可以說巨醜。
在PPT中,要想設置漸變色,只需要打開設置形狀格式的屬性欄就可以,操作也很簡單,選中形狀,然後右鍵設置形狀格式,在右側可以看到設置形狀格式中的填充選項裏就有壹個漸變填充。
漸變色的設置主要通過三個變量的調整,分別是漸變類型,漸變方向還有漸變光圈。
漸變類型主要有四種,分別是線性漸變、射性漸變、矩形漸變、路徑漸變。
線性漸變:從起點到終點顏色從內到外進行圓形漸變。
射線漸變:從起點到終點顏色進行順序漸變,也就是壹條直線。
這是在PPT中使用較廣的兩種漸變類型,除此之外,還有矩形漸變和路徑漸變。
漸變方向和漸變角度其實是壹個意思,這個在操作上很簡單,直接調整角度的數值就可以了。
漸變光圈是漸變最重要的部分,它包含漸變的顏色、位置、透明度和亮度。我們可以在漸變光圈上增加和減少顏色的控點,以此來影響漸變的效果。
如果我們想要制作出高品質的漸變色,那麽在顏色的選擇上就要非常謹慎了,最好選取相近的顏色,或者同壹色系的顏色。
通過這種方法,我們調制出的配色給人的感覺就非常舒服,賞心悅目。
下面幾個案例,壹個是藍色單色系的漸變,壹個是紫色單色系的漸變,還有壹個是綠色和黃色的相近色漸變。
蒙版
我們都知道,就是半透明的色塊,那麽漸變蒙版就很好理解了,就是半透明的漸變色。
這種半透明的漸變色近兩年在
網頁設計
中非常火,妳經常可以看到。
我們可以看到,上面這個漸變蒙版總***有兩層,最小面是圖片,在上面的是壹個半透明的漸變色塊。
這是壹個藍色到紫色的相近色漸變,只是我們在漸變光圈下調整了顏色的透明度,這樣我們就可以若隱若現的看到背景的圖片。
當我們的圖片過亮或者圖片尺寸太小不能過鋪滿屏幕時,這個時候我們就可以利用漸變來處理圖片。
比如下面這個案例,我們看到圖片的亮度太高,而且尺寸與整個版面不符,如果直接輸入文字的話,圖片對於文字的幹擾很大。
這個時候,我們可以給圖片添加壹半透明漸變蒙版,其中光圈的左側壹端設置透明度為100%,右側壹端不設置透明度,然後我們在中間再加入壹個光圈,也不布置透明度。
通過設置之後,我們就可以得到下圖的效果了。
如果妳對色彩的感知度很低,不知道用什麽顏色好,這個時候就需要多看壹些好的配色方案。
關於漸變色的使用,我推薦兩個網站,壹個是WebGradients,壹個是uigradients。這兩個網站都收錄了非常多的漸變色案例,在妳沒有靈感的時候,可以去看看。
以上就是利兄最近研究的內容,希望妳喜歡。
BY利兄
(全文完)
怎樣調出好看的漸變色色彩在設計中是十分重要的,隨著設計技術的發展和演變,美麗的漸變色也愈來愈受大家喜愛。但是要迅速地配出滿意的漸變色需要不少時間,所以今天給大家分享壹些快速生成漸變色的網站,真的非常實用又方便~
ColorSpace
/
如果妳喜歡漸變風格的創作,那麽壹定要試試這個網站。妳只需要選擇壹個顏色,就可以快速生成20多種不同風格的配色方案。
比如選擇了如圖所示的RGB值,就會出現下面25種配色方案。
WebGradients
WebGradients有100多種線性漸變配色方案,網站任何部分的內容背景都可以使用這些配色方案。使用時,只需要輕松復制
色值
,而且每個漸變色方案都準備了
PNG格式
的圖片可供下載。
GRADIENTBUTTONS
這個網站裏面有很多種漸變色按鈕,鼠標移動的時候,可以查看懸停的動畫效果。還可以壹鍵復制css代碼,非常方便。
Uigradients
/
Uigradients收藏了將近上百種漸變配色方案,可以說是壹個以分享美麗漸變色彩為主的網站。它有幾百種漸變配色方案,可以根據自己的需求來選擇使用。
CoolHue2.0
Swatch是壹款免費的漸變配色插件和收集工具,可以下載使用。
Eggradients
/
可以叫它「美妝蛋」神器,因為它就是用雞蛋的形狀來展示各種漸變的,很有意思。目前該平臺有超過200種漸變方案,每壹種的色彩都很美麗,建議收藏。
Gradienta
/
它是壹個免費CSS漸變色背景生成工具,且漸變方案完全開源免費,可個人使用也可商用。
超過100多款精心制作的漸變色背景,並且都可作為CSS代碼、SVG和JPG圖像格式使用。
MeshGradient
MeshGradients提供了超過100套精美漸變色彩,有普通漸變,也有彩虹漸變。
每壹個右上
角都
有壹個下載按鈕,可以直接下載。格式也不同,包括AI、JPS、PNG等格式。
CoolBackground
/
它除了提供漸變色背景圖像外,也有多種帶紋理的背景圖像效果可用。比較適合正式商務風格、成熟風格。
Duotones
在這個網站裏面上傳圖片,可以生成雙色調效果。如果不喜歡當前效果,還可以調整
對比度
跟亮度。並且生成的圖片可以下載和復制色值。
以上是關於
漸變色網站的收集整理
希望對大家有所幫助
如何學習平面設計的色彩搭配？色彩是什麽?
色彩是通過眼、腦和我們的生活經驗所產生的壹種對光的視覺效應。
色彩是能引起我們***同的審美愉悅的、最為敏感的形式要素。
色彩是最有表現力的要素之壹,因為它的性質直接影響人們的感情。
分享壹個我最愛的app界面設計—無印良品,沒什麽別的原因,主要就是因為簡潔、明了。看多了五顏六色花花綠綠的APP,對這種最純粹的設計,真的太喜歡啦!
圖片來源:無印良品
首先它的首頁除了加粗黑色“公告”“新到商品”、正常黑色字體的產品名稱、藍色“查看全部”、標誌圖案的灰色以及下圖標的紅色,就沒有其他顏色。黑色、灰色、藍色都是給人壹種平靜、沈穩的感覺,而紅色是無印良品的主題色。
圖片來源:無印良品
商品詳情頁面,除了商品本身的顏色,另外更加突出的顏色就是主題紅色,醒目明了。
圖片來源:無印良品
結賬頁面除了應付金額以及“去付款”是主題紅色,其他延續的是之前的主頁、詳情頁顏色,整個風格都高度統壹。用戶看到這麽單壹的色彩會覺得乏味嗎?不會的!只會覺得和它本身的品牌風格“自然、簡潔、質樸”完美契合。
圖片來源:無印良品
再看看它的品牌logo,紅底白字,色彩鮮明,非常好記。很多時候妳會發現逛壹圈無印良品的店面,什麽也沒有記住,但是它的品牌logo卻牢牢印在腦海裏。(它的品牌可能是整個店面顏色最鮮艷的地方了)。這就是壹個品牌的高明之處—永遠在突出重點。
還有兩個APP也是大眾非常熟悉的,支付寶和網易雲。支付寶的主題色是藍色,藍色代表著安全穩定,這就是壹個理財資金類APP想要給用戶宣傳的理念。網易雲的主題色是紅色,紅色代表著熱情、活潑、給人勇氣的,不僅會大大增加用戶去點擊的頻率,而且妳是否會因為聽到壹首好聽的音樂而變得快樂起來?
所以UI設計師對品牌理念的理解程度,很能影響整個產品主基調色,這就需要設計師具備較高的色彩駕馭度。
在我看來沒有什麽特別好看的色彩搭配,因為在不同人的眼裏,喜好都是不壹樣的,“正所謂人與人的悲歡並不相通,而我只覺得他們吵鬧。”
所以掌握色彩的規範原則才是最重要,授人以魚不如授人以漁~
壹、色彩的規範原則
1、三色搭配原則
上面說到的MUJI的主頁圖,醒目的紅色只是作為了點綴色。
壹般飽和度高、顏色較深、大面積的、壹眼望過去的占據視覺中心的顏色為主色。
壹般同類色、鄰近色或者互補色、對比色來作為副色。
壹般根據頁面所呈現的顏色,來添加點綴色。但是點綴色壹定是要飽和度高的,這樣對整體頁面可以營造出獨特的風格,綻放不壹樣的光芒。
2、掌握顏色的性格
白色
白色象征純潔、神聖、善良、信任與開放,化繁為簡的主調色。
藍色
藍色是最不會引起反感的顏色。明亮的天空藍,象征希望、理想和獨立;暗沈的藍,意味著誠實、信賴和權威。正藍、寶藍在熱情中帶著堅定與智能。
紅色
紅色象征熱情、性感、權威和自信,是壹種能量充沛的色彩。但是也會給別人血腥、暴力的印象,容易造成心理壓力。
橙色
橙色給人親切、坦率、開朗和健康的感覺,有陽光壹般的熱情。
黃色
黃色是明度極高的顏色,能刺激大腦與焦慮有關的區域,具有警告的效果。艷黃色象征信心、聰明和希望;淡黃色顯得天真、浪漫和嬌嫩。
綠色
綠色給人無限的安全感受,象征自由和平、新鮮和舒適。黃綠色給人清新、有活力、快樂的感受;明度較低的草綠、墨綠和橄欖綠則給人沈穩、知性的印象。
黑色
象征權威、高雅、低調、執著、冷漠和防禦。
灰色
灰色象征誠懇、沈穩、和考究。
3、觀察自然
大自然永遠是世界上最優秀的色彩搭配師,當妳在為配色發愁的時候,不妨隨手哢壹張大自然,妳就會發現很多問題,大自然早就給了妳答案以及靈感。
壹定要明白“色彩並不能為妳的設計作品增添令人愉悅/舒適的質感——它的實際作用是強化了這種質感。”
二、色彩搭配網站
1、ColorHunt-配色:
設計、網頁配色工具網站。
2、uiGradients:
漸變色分享網站,裏面有很多美麗的方案選擇哦!
3、:
超快速配色方案生成器,創建完美的調色板或從數千種美麗的配色方案中汲取靈感。
4、MaterialUIColors:
幫助設計師們快速定位顏色組合。
5、flatuicolorpicker:
UI設計的最佳平面顏色。
三、色彩相關書籍
1、《配色設計原理》
《配色設計原理》,作者是日本奧博斯科編輯部,通過簡明易懂的作品,讓妳學習實用又系統的配色原則。將具體的設計案例進行修改前後對比,然後分析如何使用配色,讓作品更具有效果和表現力。
2、《配色事典》
日本色彩文化的先驅,配色參考書,平面設計師配色參考書,也可用於生活。
3、《設計師的色彩詞典》
《設計師的色彩詞典》提供了壹個深入的研究30種顏色的關鍵,藝術和圖形設計。這本書是根據光譜組織的,在按顏色劃分的區域中便於導航,它用圖表記錄每個顏色,顯示顏色範圍和調色板的變化。