漸變色Logo的9大技巧,從入門到放棄。
作者:147小編 更新時間:2024-11-04 點擊數:
本期我們來講講騷氣設計師們最愛的五彩斑斕的黑,錯了,五彩斑斕的漸變色標志。時代發展跟技術上的創新,還有受眾審美訴求的影響,對色彩的認知也在不斷刷新,使得標志的應用得到極致發展。品牌力求打造獨一無二的標志,顏色則是用一個少一個,促使漸變色彩備受青睞,獨特的個性情感賦予了標志感性的思維。
漸變色在“字母logo技巧全攻略”中有提到過,漸變色相對而言更側重于表現完整度,熟練軟件中的技法問題即可打造出完整度較高的漸變色標志。按照技法的差異,貼心的從入門到放棄歸類出9大技巧,每種方法有一定的差異化,也具備一定的相通與關聯性。我們以案例加實操詳細分析。
漸變色標志9大技巧:① 簡單漸變② 描邊漸變③ 立體漸變④ 疊加漸變⑤ 混合漸變⑥ 漸隱漸變⑦ 幾何漸變⑧ 任意漸變⑨ 漸變組合技上才藝之前我們先來簡單了解一下做漸變色標志在Adobe Illustrator中需要用到的功能,甲方爸爸不愿加錢情況下可用AI。工具欄自帶漸變工具有三種基礎類型的漸變,來看下官方釋義:線性漸變:利用此漸變類型可使顏色從一點到另一點進行直線形混合。徑向漸變:利用此漸變類型可使顏色從一點到另一點進行環形混合。任意形狀漸變:利用此漸變類型可在某個形狀內使色標形成逐漸過渡的混合,可以是有序混合,也可以是隨意混合,以便混合看起來很平滑、自然。ps:而線性漸變以及徑向漸變分別能在線跟面中應用會起到意想不到的效果。
為了實現更多騷操作,另外還需要請出“混合工具”跟“網格工具”兩位臭弟弟,同樣的,在工具欄便能找到。簡單了解后我們進入正題。
混合工具▲
網格工具▲
采用漸變效果的色彩配置使標志打破了平面化的單一、呆板、使標志的視覺效果更加豐富有趣。當造型趨向簡單,色彩就有較大的發揮空間,通過基礎的線性漸變及徑向漸變,在平鋪色彩上增加變化,使不同色相、飽和度、明度平滑過渡,即可豐富細節,進行個性的塑造,但務必注意顏色的數量不宜過多,以免落于俗套。
實操案例1簡單漸變,顧名思義,操作難度那是有手就能學廢,使用AI中的漸變工具,直接拉取一條漸變。你可以通過漸變面板中的圓形小滑塊去添加或調整自己想要漸變的顏色。第一種方式就是線性漸變,說人話就是按照一條直線的方向來分布顏色。這一步并沒有什么難度,所以就不再做過多的步驟截圖。
當然,你也可以選擇徑向漸變,到底選擇哪一種漸變方式要按需而定。選中之后咱們可以通過漸變控制桿最外側的方形黑色塊調節漸變的半徑大小,內側的圓形色塊可以較為自由的調整內部顏色的展示位置。如圖所示。
導出的GIF漸變效果稍微有點劣質,反正大家看得懂這個意思就好 ▲
基于上一技法,在描邊上的效果將有不一樣的視覺感受,線構成的空間感,色彩跟隨路徑過渡,更具引導性。如陌陌標志,從深色到淺色的過度,代表溫度與生命力,同時也寓意著人與人通過陌陌的連接從陌生走向熟悉的過程。需要注意的是折角部分容易出現過渡不均勻,注意色標位置的分布。
實操案例2這里我做了一個回字形的小圖形,便于讓大家直觀的了解到描邊漸變的幾種形式,一般情況大家用的基本都是第一種“在描邊中應用漸變”的形式,仔細看第二種,它的優勢就是會產生疊壓關系,使圖形更具有空間感,那么第三種在logo中的實際應用會更少一些,可以發現,它經常出現在創意海報中。這里需要注意的是,“沿描邊應用漸變”的線條疊壓順序取決于你先勾勒的線條是哪一塊。
跨描邊應用漸變可以玩的點是你可以改變他的漸變方向,通過調整顏色布點的位置來實現出不同的視覺效果,以及增加顏色以產生更多的玩法。下面用最簡單的黑白漸變列舉了一些例子,大家可以進行上色,會具有更豐富的畫面效果。
這里我們再實操一個較為常用的“沿描邊應用漸變”通過上面的分析案例可以看出基本都是一筆成型,因為受到此種方式的局限,斷開后對產生不流暢的效果,那咱們可以做到舉一反三,把兩條線疊加在一起,也可以產生不同的效果。
漸變色再有大特征便是使標志立體化,更具穩重與質感。這里介紹兩種最簡單的手法,一是通過簡單切割,使圖形分出亮面與暗面,分別進行簡單漸變表達出明暗關系,兩面只要錯位填充,即可形成立體效果。另外一種便是通過劃分層級關系,將認定為底部的對象上刻畫出陰影層即可。
實操案例3下面讓我們通過LOGO之神-胡曉波的案例來進行演示,不要問我為什么不自己做,問就是胡曉波NB!
好,那第一步自然是搭建畫面,在前期畫草圖的過程中就需要考慮到,哪些位置可以做立體漸變,避免后期制作時出現漸變位置過于尷尬的情況。
在用鋼筆工具把需要做立體漸變的位置勾勒好之后,用形狀生成工具把這三個部分生成為獨立的圖形。
最后只需要按照咱們前面講到的簡單漸變的方式就可以實現出來,需要注意的是在每一塊圖形交接的位置,顏色需一深一淺,才可以形成立體效果。大家可以仔細觀察下面左圖三個漸變色塊交界處的顏色,顏色的明度對比越強,立體效果越強。
第二種相對來說會更簡單一些,只需要在勾勒出LOGO的剪影之后找到合適的位置,然后我們修改底色同色系較深的顏色,即可形成在底部的視覺關系,一般來說這種位置多為轉角處,會較為和諧的產生陰影關系。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
疊加漸變,在漸變色已有透亮的色彩感受中繼續深化,將標志基礎元素進行疊加排列,從而產生重合部分。刻畫方式有三種,一是通過路徑查找器選出交集部分重新著色;二是在基礎元素上色后透明度添加疊加模式即可,三是將頂層元素制作透明蒙版,使其透出底色。
實操案例4LOGO的部分我們不再贅述,往期教程中有大量的方式方法,直接來看一下此類漸變的實現方法,這里我們再次拿到了波哥的LOGO作為演示案例,不為別的,只因為老板做的logo大氣,好用,大就是好!以后希望老板能在眾多員工之中,多看我一眼。知道我日日夜夜的思念著波哥的...大?
好了,回歸正題,這里同樣需要把圖形用形狀生成器給拆分開來,便于我們后期調整。
此類方式的關鍵點在于重疊部分的顏色要盡量的符合常理也就是說兩個顏色疊加在一起的時候,通常顏色會深一些,與ps中的正片疊底的道理相似。
單色疊加可以大致分為三種:①.你可以使用一深一淺兩個單色疊加后產生一個中間色;②.兩個單色疊加后產生第三種純度和明度相近的顏色;③.兩個顏色疊加后產生的第三種顏色是補色。(如下圖) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
顧名思義,運用混合工具將每兩個不同大小、不同顏色的對象進行一個顏色平滑或指定數量的過渡。而不會出現描邊漸變折角過渡生硬且不能形成塊面感或大小變化的弊端。從而實現更飽滿與層次感、空間感的視覺效果。
實操案例5利用AI中混合工具產生的漸變并不單一,如果你想玩,可以有很多種效果出現,通過改變色塊的顏色、數量、大小、位置,每一種屬性的變化,都會對最終的畫面效果產生較大的影響。雙擊混合工具,會出現調整窗口,常用的選項是通過指定的步數來調整顏色過渡的感覺。
下面的幾種展示僅作為拋磚引玉。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
在前面幾種技法基礎上,將漸變色漸變到白色或背景色,整體氣質將更具迷幻或速度感,如果是通過透明度來實現,將更透氣而且富有活力。
如小米MIUI系統新一代圖標,3個模塊使用不同漸變色進行填充,加上輕微漸隱效果,整體輕盈通透,與高占比例的年輕活躍用戶青春、時尚性格吻合。
實操案例6這里由于我們的底色選擇白色,畢竟我還是個純潔無瑕,年少懵懂的孩子,不懂花花世界的紅燈酒綠,(突然為自己會這么多成語而感到驕傲是怎么回事呢...)所以我們漸隱的顏色就需要從一個顏色到白色的過渡,那么我們可以不停的調整方向,找到一個讓自己舒適且又不那么累的角度
也可以調整漸隱顏色的面積大小,不過我還是喜歡長一點,貫穿始終的那種感jio。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
如果感覺單純的漸隱還不夠好玩,那你可以結合前面講到的立體漸變去做更豐富的畫面,具體的咱們后面會講到。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
幾何漸變,與其他色彩平滑過渡的漸變色不一樣的,通過多個塊面填充鄰近色模擬出漸變色的節奏感,如同馬賽克效果,簡約標志類似于Low Poly(低多邊形)風格。當將塊面增加到一定程度以及組合出具象形態,Low Poly風將更加強烈,硬朗、純粹且干凈利落。
再如Office系列標志亦是異曲同工。圖標通過色彩區分各應用,營造個性化效果,采用大膽、淡雅、友好的色調向office辦公軟件的演進歷程致敬。
實操案例7通過上面的參考圖我們肯可以看到,通過大量的色塊拼接可以讓一個圖形產生立體感或是有節奏的明暗變化,那所以此類漸變的關鍵點就在于色彩的選擇以及搭配。第一種方式,可以選擇同色系,但不同明度、純度的顏色,需要注意的是在勾勒好圖形的輪廓后需要考慮到圖形內部的亮暗位置的區分,以便于后面填色。
第二種就是采用多色拼接,那么顏色拼接的技巧大致可以分為兩種,一種是遵循色環的順序,但并不是說一定要按照色環的順序去排列,可以適當跳躍一個顏色;另一種則是采用對比色,以此來產生極強的視覺效果。下面的實操案例選擇的就是同色系的色塊拼接的方式,可以看到不管是多色還是單色拼接,前期都是你要把圖形足夠的幾何化,且分割好色塊,后期都可以進行調整
這里我選擇了單色的紫色以及第二種紫紅色到淡淡的橘黃的過渡,畢竟哪個男人不愛騷紫呢。這里大家可以看一下下面兩個色環,顏色的分布位置,以及最終效果。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
通過任意形狀漸變或網格工具,打造出平滑、自然的漸變效果,具有層次豐富,貼近自然的特性,隨著Apple、Instagram等品牌在自己的宣傳使用這種效果,在App圖標中尤其影視娛樂、攝像美拍等領域撅起一股風潮。
實操案例8對,你沒看錯,還是那個男人的LOGO...我太愛了,無法自拔。
在logo中,幾乎很少使用到網格工具,一般來說任意形狀漸變已經足夠滿足絕大多數的效果。所以我們下面的案例來使用任意形狀漸變來進行演示。此類漸變看似復雜,實則并不難,有了前面漸變的基礎后,做這種漸變只需要把控好色彩的搭配、通過顏色錨點的分布位置來把控各個顏色占比的大小,就不會出現太大的問題。
第二種方式也是比較好玩的,它在點與點之間會形成一條曲線,你可以讓多個點之間的聯系產生不同的節奏,同樣也需要注意顏色不能過多,避免太過花哨,無法把控。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
熟練前面的技巧之后,當覺得初級表現滿足不了當前情況,可以考慮做加法,所有的技巧都是可以疊加組合使用。通過分割更多層次、進行多次疊加、或刻畫豐富的高光及陰影能使標志更立體,更精致,滿足特定需求的品牌。類似字母R將雞的負形與漸變手法結合,通過層次刻畫細節;將蜂鳥翅膀進行漸隱,體現拍打翅膀的節奏等,表現度和創意度都得到了極大的提升。
實操案例9最后一種方式其實就是把前面的一些技法做了加法,通常來講,常用的就是立體+疊色,漸隱+立體+簡單漸變等等,就不再一一贅述,大家可以自行嘗試一下,像我旁邊的同事,每天沉迷漸變無法自拔。像極了情竇初開,懵懵懂懂的小少男。好了,大家可以分析一下,下面的兩個LOGO形用了哪幾種方式。
好了,這期就到這里了,不多說了,我去洗澡了,讓我們下期再漸漸漸漸漸漸
漸變色在“字母logo技巧全攻略”中有提到過,漸變色相對而言更側重于表現完整度,熟練軟件中的技法問題即可打造出完整度較高的漸變色標志。按照技法的差異,貼心的從入門到放棄歸類出9大技巧,每種方法有一定的差異化,也具備一定的相通與關聯性。我們以案例加實操詳細分析。
漸變色標志9大技巧:① 簡單漸變② 描邊漸變③ 立體漸變④ 疊加漸變⑤ 混合漸變⑥ 漸隱漸變⑦ 幾何漸變⑧ 任意漸變⑨ 漸變組合技上才藝之前我們先來簡單了解一下做漸變色標志在Adobe Illustrator中需要用到的功能,甲方爸爸不愿加錢情況下可用AI。工具欄自帶漸變工具有三種基礎類型的漸變,來看下官方釋義:線性漸變:利用此漸變類型可使顏色從一點到另一點進行直線形混合。徑向漸變:利用此漸變類型可使顏色從一點到另一點進行環形混合。任意形狀漸變:利用此漸變類型可在某個形狀內使色標形成逐漸過渡的混合,可以是有序混合,也可以是隨意混合,以便混合看起來很平滑、自然。ps:而線性漸變以及徑向漸變分別能在線跟面中應用會起到意想不到的效果。
為了實現更多騷操作,另外還需要請出“混合工具”跟“網格工具”兩位臭弟弟,同樣的,在工具欄便能找到。簡單了解后我們進入正題。
混合工具▲
網格工具▲
采用漸變效果的色彩配置使標志打破了平面化的單一、呆板、使標志的視覺效果更加豐富有趣。當造型趨向簡單,色彩就有較大的發揮空間,通過基礎的線性漸變及徑向漸變,在平鋪色彩上增加變化,使不同色相、飽和度、明度平滑過渡,即可豐富細節,進行個性的塑造,但務必注意顏色的數量不宜過多,以免落于俗套。
實操案例1簡單漸變,顧名思義,操作難度那是有手就能學廢,使用AI中的漸變工具,直接拉取一條漸變。你可以通過漸變面板中的圓形小滑塊去添加或調整自己想要漸變的顏色。第一種方式就是線性漸變,說人話就是按照一條直線的方向來分布顏色。這一步并沒有什么難度,所以就不再做過多的步驟截圖。
當然,你也可以選擇徑向漸變,到底選擇哪一種漸變方式要按需而定。選中之后咱們可以通過漸變控制桿最外側的方形黑色塊調節漸變的半徑大小,內側的圓形色塊可以較為自由的調整內部顏色的展示位置。如圖所示。
導出的GIF漸變效果稍微有點劣質,反正大家看得懂這個意思就好 ▲
基于上一技法,在描邊上的效果將有不一樣的視覺感受,線構成的空間感,色彩跟隨路徑過渡,更具引導性。如陌陌標志,從深色到淺色的過度,代表溫度與生命力,同時也寓意著人與人通過陌陌的連接從陌生走向熟悉的過程。需要注意的是折角部分容易出現過渡不均勻,注意色標位置的分布。
實操案例2這里我做了一個回字形的小圖形,便于讓大家直觀的了解到描邊漸變的幾種形式,一般情況大家用的基本都是第一種“在描邊中應用漸變”的形式,仔細看第二種,它的優勢就是會產生疊壓關系,使圖形更具有空間感,那么第三種在logo中的實際應用會更少一些,可以發現,它經常出現在創意海報中。這里需要注意的是,“沿描邊應用漸變”的線條疊壓順序取決于你先勾勒的線條是哪一塊。
跨描邊應用漸變可以玩的點是你可以改變他的漸變方向,通過調整顏色布點的位置來實現出不同的視覺效果,以及增加顏色以產生更多的玩法。下面用最簡單的黑白漸變列舉了一些例子,大家可以進行上色,會具有更豐富的畫面效果。
這里我們再實操一個較為常用的“沿描邊應用漸變”通過上面的分析案例可以看出基本都是一筆成型,因為受到此種方式的局限,斷開后對產生不流暢的效果,那咱們可以做到舉一反三,把兩條線疊加在一起,也可以產生不同的效果。
漸變色再有大特征便是使標志立體化,更具穩重與質感。這里介紹兩種最簡單的手法,一是通過簡單切割,使圖形分出亮面與暗面,分別進行簡單漸變表達出明暗關系,兩面只要錯位填充,即可形成立體效果。另外一種便是通過劃分層級關系,將認定為底部的對象上刻畫出陰影層即可。
實操案例3下面讓我們通過LOGO之神-胡曉波的案例來進行演示,不要問我為什么不自己做,問就是胡曉波NB!
好,那第一步自然是搭建畫面,在前期畫草圖的過程中就需要考慮到,哪些位置可以做立體漸變,避免后期制作時出現漸變位置過于尷尬的情況。
在用鋼筆工具把需要做立體漸變的位置勾勒好之后,用形狀生成工具把這三個部分生成為獨立的圖形。
最后只需要按照咱們前面講到的簡單漸變的方式就可以實現出來,需要注意的是在每一塊圖形交接的位置,顏色需一深一淺,才可以形成立體效果。大家可以仔細觀察下面左圖三個漸變色塊交界處的顏色,顏色的明度對比越強,立體效果越強。-------------------------
往期精華文章導讀:
千盼萬盼,終于教光影效果了!
這些作品有意思!
人民日報+百事可樂=?
-END-
越努力,越幸運。
這里是龐門正道。
版權聲明:本篇文章由朝夕友人官網小編編輯,僅限于學習交流,非商業用途,版權歸原作者所有,若有來源標注錯誤或侵權,請在后臺留言聯系小編,將及時更正、刪除。
上一篇:“南寧老友粉”標識(Logo)征集活動啟動民國惡婆婆:與兒媳一道產子,卻讓兒媳來喂奶,孫子只能米湯維生 下一篇:了解這5種標識設計手法,你的LOGO設計還會難嗎?
返回上一層



