如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
我們常說:設計就是在向用戶傳遞信息,在設計的日常工作中,傳遞信息的方式大多都是圖文相結合的形式,而文字作為信息傳遞中最直觀的表現形式,對于整體而言是至關重要的一環。很多設計師一味強調追求圖具有吸引力,而忽略了文字的重要性,最終導致圖文無法結合、虎頭蛇尾。說到文案吸引力,最佳的表現位置就是標題字,所以本期就和大家一起分析、總結一些比較實用的標題文字的處理方式,提升對讀者的吸引力。在文字排版中,想要提升標題文字的吸引力,就要與其他非標題性文字形成視覺上的反差、對比,進而讓標題文字在整體排版中更加吸引用戶眼球。這里說的第一個比較實用的處理手法就是切割文字筆畫,即:以標題文字的筆畫為切入點,在不影響其辨識度的前提下,通過一些特殊的處理手法,提升視覺比重。
切割文字筆畫也可以理解為將文字的筆畫分離字體的本身,然后再以文字筆畫為切入點,進行處理,常用的筆畫處理方式:變色、模糊、刪除、陰影,下面我們逐一來看。
1. 分離筆畫 – 變色處理
顧名思義就是有意將分離的字體筆畫進行變色處理,提升標題文字本身字體上的變化強度,從而提升標題對于用戶的吸引力。舉例說明:
上圖中,這兩種標題形式在設計工作中都是可取的,只是對比而言,案例 1 給人的感覺更加平緩,屬于比較常見、中規中矩。而案例 2 則更加新穎,在視覺上變化更強烈(主要體現在文字筆畫與筆畫之間),更加吸引用戶眼球,也起到了提升作品設計感的作用。
2. 分離筆畫 – 模糊處理
同樣的理解方式,就是將分離的字體筆畫進行模糊化處理,目的是通過筆畫與筆畫之間的虛實對比,營造出視覺上的前后關系,從而提升標題文字在整體文案中的視覺注意力。
上圖案例中通過對比我們發現:案例 4 相較于案例 3 更吸引人,原因在于其筆畫之間的虛實結合使得字體本身就形成了一定的反差感,形式上的多變造就了文字更吸引人,同時如果感覺文字筆畫之間的變化強度不夠,可以結合變色+模糊的處理形式,比如:
這樣給人的感覺就更加強烈、也更誘人,但是這種筆畫之間的變化多了,也就意味著掌握的難度提升了,一定要避免過多的效果導致出現凌亂的現象。
3. 分離筆畫 – 陰影處理
可以理解為將文字筆畫分開來看,通過添加陰影的方式,營造視覺上筆畫的前后關系,從而增強其整體的視覺變化,舉例說明:
上圖中,案例 8 就是通過給文字筆畫添加陰影的形式,使得筆畫與筆畫之間在視覺上形成了很明顯的前后遮擋關系,將原本平面的文字變得更立體,也更易于吸引用戶眼球。這種處理手法在平時工作中也很實用,只需要理清楚筆畫的前后邏輯關系,通過畫筆涂抹的方式慢慢調整即可。
4. 分離筆畫 – 刪除處理
刪除筆畫的處理形式相對來說在工作中運用較少,因為一旦處理不恰當,很容易影響字體本身的辨識度,適得其反,舉例說明:
如上圖所示,刪除了一些筆畫,給用戶留下一些想象的空間,也是比較新穎的處理方式,比較適合一些平面海報標題的設計。
這種刪除字體筆畫的處理形式雖然很新穎,但是應用的局限性較大,屬于比較難把控的一種。
注意:將文字筆畫單獨拆分出來進行處理的手法,一定不要過于追求變化強烈,否則很容易導致標題文字非但沒有起到吸引用戶的作用,反而最基本的辨識度都會被破壞,一定要把握好度。
在日常工作中,通過給標題文字添加輔助元素,從而突出標題的處理手法是非常實用的,這里所說的輔助元素可以分為很多種,比如:圖形、肌理、光效等等,目的都是借助輔助元素與標題文字的相互結合,讓文案標題的視覺形象更鮮明、更吸引用戶。
添加圖形是屬于比較直觀且應用廣泛的一種處理方式,而這里的圖形一般情況下會和標題文字在屬性上有所反差,這樣有利于最終效果的呈現更加明顯,舉例說明:
如上圖所示,標題文字通過添加下劃線、邊框、形狀等等輔助圖形元素,較常規標題而言,其視覺變化更加強烈,整體豐富度提升了很多。但是這種輔助元素不能添加太多,否則很容易出現亂的現象,要讓這些添加的元素與標題形成相輔相成的關系。
上圖的設計案例,通過對比我們發現,右側案例視覺更豐富,且標題文字添加下劃線后,其在畫面整體的視覺形象更加鮮明、更吸引用戶眼球。
現實生活中一個物品如果置身于某一個環境內,它自身就會受到周圍環境的影響,而如果我們假定環境,將標題文字看做物品,那么我們就可以給予標題文字在環境中的光影,比如:投影、倒影、發光、環境色等等,這樣就間接地增強了標題文字的視覺變化,從而起到吸引用戶眼球的作用。
如上圖所示,把文字當做處于環境中的物體,通過投影、倒影、陰影的方式體現其環境,在視覺上有了更深的層次變化,也能起到強調、加深印象的作用。這種營造環境感的處理形式在平時工作中也很實用。
再說下發光的處理手法,這種形式大多用在暗色調的畫面中,將文字看做一個發光體,即受周圍環境的影響又影響著周圍環境,舉例說明:
上圖中雖然說左右兩種表現形式文字都比較清晰、明了,但是就視覺感受而言,右側將文字作為發光體與周圍環境相輔相成、融為一體的處理形式更容易吸引用戶眼球,而且更加新穎、有創意。這種表現形式在一些電商海報中也很常見,比如:
發光的效果給人的感受很舒服,打破了常規的單純平面編排文字的現象,將文字場景化,使其更誘人。
還有一些在平時工作比較實用的,只不過或多或少在之前文章中都有提過,這里以補充說明的形式展開。
1. 標題文字 – 關鍵詞變色
說到關鍵詞變色算是比較常用的一種,就是將原本標題文字中一些關鍵詞進行變色處理,目的是增加標題文字的視覺變化強度。
通過將案例中「免息」一詞變色處理,使得標題在視覺感受上更加明顯、有吸引力,而且給人的感覺也很舒服,這種處理手法是非常實用的,不妨多試試。
2. 標題文字 – 描邊
描邊文字在平時工作中用到的相對少一些,這種處理手法也間接地起到了打破常規的作用,當我們一直按照某一些常規形式工作時,偶爾做一些改變也許會得到意想不到的效果。
3. 標題文字 – 與主體遮擋
文字與主體營造遮擋關系也是在日常工作中很實用的一種,就是將主體與文字相互穿插排放,通過必要位置的陰影進行加深體現。雖然元素并不多,但是最終呈現的視覺效果卻很舒服、有吸引力。
這種主體與標題穿插表現的形式使得兩者更加整體,對于畫面而言,主體和標題都起到了很好的強調作用。
文章中提到了一些比較實用的提升標題文字吸引力的處理手法,但是需要注意不能過于追求效果而忽略了設計的本質,要根據需求選擇恰當的方式,不管何種形式,都要保證文字本身的識別性。文章中提到的并非全部,主要還是為大家提供一個可以參考的方向,要學會舉一反三、大膽嘗試。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
我們在日常工作中幾乎離不開扭曲和變形工具,它可以幫助一個設計師校正一個元素的透視關系,或者為設計好的標志貼效果圖。除了這些日常的應用以外,扭曲工具還有哪些有趣的應用場景呢?我們今天的內容就會幫你找到答案。
從宏觀的角度來講,這種扭曲的手法,它設計出的版面變化方式是非常多的,我們將比較熟悉的文字進行扭曲,是可以呈現出其它的表現形式的。
比如說,最左側這個海報,我們不光能看出來它的文字信息,還具有樓梯的印象;中間的這個海報,它把文字變換成了晾衣繩的感覺;我們再看最右側的這個海報,很明顯它就是一把扇子對吧。
這種表現形式它是比較抽象的,再加上它能夠變異成其它的形狀,所以,這種版面風格也會傳遞出一種趣味感。
我們在現實生活當中扭曲的圖像,它屬于一種光學的現象,比方說哈哈鏡,它就是利用了這個原理,表面凹凸不平的鏡面,反映出人像或者是物體的扭曲面貌,進而產生了幽默感。
生活當中的望遠鏡放大鏡顯微鏡,也都是利用了這種凹凸的透鏡原理來實現的。
我們人類還處于原始的時期,就已經開始運用繪畫來記錄身邊的事物,在經過不斷的發展,藝術家它們的繪畫技藝也變得越來越逼真,甚至達到了和照片難辨真假的程度。當寫實的風格幾乎走到的時候,藝術家為了尋找新的藝術發展方向,畫風就開始變得扭曲起來,變得抽象起來,從而產生了超現實的藝術流派。
我們將本來是圓形的西瓜和籃球限定在一個圓角矩形的這種做法,也是一種抽象的思維方式。
在這里我們為大家劃分了五種常用的表現技巧,這些都是我們日常工作當中經常用到的一個扭曲技巧,我們分別介紹給大家。首先第一個就是液化這個工具,液化這個濾鏡應該算是非專業人員都會知道的美顏功能,這個 ps 濾鏡被用在了各種美艷的 app 里,這種夸張的藝術創作在漫畫里面是經常出現的。
我們來通過網格感受一下液化命令到底是出現了哪些變化,液化的好處就是能夠根據實際情況手動調節畫面的扭曲幅度。它的自由度比較高,但是它的缺點也是自由度比較高,所以難度會比較大一些。
在設計的過程當中,也可以運用這個功能來刻畫主體,產生一種遮擋的效果。我們也可以通過扭曲讓文字的部分結構變得不容易認讀,這就能達到設置懸念的作用,我們也可以通過其它不同幅度的扭曲變形,達到自己想要的狀態。我們看上圖是日本TDC 的獲獎作品之一,作者是村上雅士,它運用的就是液化功能,將原本很平淡的版面,通過扭曲的變化,達到了吸引眼球的藝術效果。
這個是臺灣設計師聶永真,他為2017年金點概念設計獎制作的主視覺海報,這個海報它以不規則的曲線呈現,并且搭上充滿想象的文案,有耳目一新的形象。
下面我們來看一下球面化的工具,我們大家都知道,杯子中的水具有扭曲光線的作用,我們插到水里的這個筆它就會產生扭曲的現象,這個就是光的折射。我們在設計當中進行簡單的圖像合成時,也需要遵守這個物理定律。
我們這里通過網格來看一下這種形態的具體表現,顧名思義球面化的命令就是能夠將選區內的畫面進行球面的扭曲。它適合用在圖像合成或者是還原真實性的場景里面,我們通過調整不同的幅度,產生不同的魚眼效果。
除了基本的球面化扭曲,我們這個選擇里還提供了水平和垂直的變化,形成類似圓柱體的表面效果。我們在產品貼圖圖像和形象的領域是經常用到這個東西的,我們調整不同的扭曲幅度,能夠完美的讓圖像貼合到柱狀的弧形表面上。
這里給大家準備了一個案例,我們給它添加一個氣泡,然后再產生一些光影的效果,如果說我想讓這個畫面變得更真實一些,我們在設計的時候就要考慮到物理定律,這個時候就可以用球面化的命令。我們讓圓形下面的文字產生光線折射的感覺,調節選項中的滑塊,找到那個最接近真實的反射效果。
這個案例是我們研習設之前教程里提供的一個案例,我們看圖中這個玻璃球和文字的銜接部分,用的就是球面化的效果。我們只看右側這個對比圖,你可以明顯感覺出來,底部這個經過修改后的細節是更真實的,文字經過玻璃的反射,它一定會產生扭曲的視覺印象。
下一個給大家介紹一下極坐標,極坐標這個詞聽上去會比較陌生一些,但是你會非常熟悉,比如說這個啟動畫面,這個是PS cc版本的啟動插圖,它就是運用極坐標的命令實現的效果。除了能夠實現從內部向外旋轉的這個洞穴效果,還可以表現成類似于球體的效果。
我們繼續通過網格來看一下它的扭曲原理,這里給大家做了一個細節的變化,是為了方便大家觀察它的扭曲方向,我們給這個網格添加了顏色,頂部是藍色,底部是紅色,接下來我們為它執行極坐標的命令。
執行極坐標這個命令后可以很明顯地看出,原來底部的網格內容被扭曲到了圓形的外側,就是紅色部分,變成了這個球的外側,內部這個藍色,就是之前頂部的藍色部分。
它也提供了另一個額外的扭曲選項,扭曲后的效果就是這樣的,這個效果我們不常用。
我們選擇這張圖來作為演示,讓大家明白極坐標是什么原理,我們為它添加極坐標的效果,這個時候需要確定什么?就是圖像的朝向問題,因為這個直接決定了最終的扭曲效果。
頂部的區域會在圓的內部出現,底部的區域會在圓的外部,我們根據想要達到的最終效果,來判斷圖像的具體朝向。這里制作了兩種朝向的扭曲畫面,左邊的是地面在內部的球體效果,右邊是地面在外部類似于洞穴效果。
我們在扭曲命令之后,需要手動將畫面這個銜接部分處理掉。你可以用圖章工具處理掉,這個畫面就做完了。
再舉一個例子,這個畫面我要做的是人物在球體表面的效果,我們要考慮到方向,所以我們要將它旋轉180度,然后添加極坐標命令。
使用修補工具來完成這個銜接部分,這個畫面就完成了。
我們再來看下一個,下一個就是文字扭曲,也是我們這節課比較重要的一個內容。這個命令跟其它命令不同的地方就在于它不是在濾鏡菜單下面,它是在文字編輯欄的右側,在樣式選擇里,它提供了很多不同的扭曲方法。
這種方法相對于液化或者是自由變換更方便一些,因為它的這個可操控性很強,頂部提供了兩種扭曲方向,底部選擇則是調整扭曲的幅度。
這里我們簡單地制作了幾種文字樣式,就是這個命令,它會讓文字變得更接近圖形化。
下一個我們來給大家介紹一下置換的扭曲風格,它的扭曲原理就是將被置換的元素,再加上需要被扭曲的元素,它們二者相結合,從而達到被置換元素一樣的扭曲效果。這個話有點繞,我們通過下面的例子就明白什么是置換了。置換的幅度不同,扭曲的大小也會發生相應的變化。
比方說我們這里被置換的元素可以是任何圖像,煙霧、絲綢、水波紋、液態流體或者是火焰,它們都可以當成被置換的元素。
比如說這里我們想讓鴿子圖案和旗幟結合,這個時候就需要用到置換的扭曲命令。首先第一步要做到的就是確定好鴿子在旗幟里的比例大小,然后要調整透視和傾斜角度來適應旗幟的表面輪廓。
最后執行置換命令,讓鴿子的圖像加入旗幟的扭曲輪廓,這樣就形成了兩者的完美結合了。界面里水平與垂直的比例,都是可以用數值來調整的。
我們再看下一個,不光是圖形,文字也是一樣的,添加置換命令之后,文字就會置入到了這個場景里,它的原理和之前是一模一樣的。
我們再來看一下其它使用置換手法設計出來的版面,它們都是在表現原有信息的基礎之上,通過置換的扭曲為版面,加入了另一種形態。左側的飄動絲綢中間的樓梯和右側的這個有點類似于紙張扭曲的效果,這些都是用置換這個命令來表現出來的。
我們來看一下,同樣都是這個扭曲,用扭曲的這個思維,它設計出來的畫面應該是什么樣的。這個版面里文字信息使用的就是扭曲的變換形式,主體文字周圍圍繞著不規則的扭曲文字,增加主體形象的形式感。這種手法雖然會減弱文字的識別性,但換來的是視覺吸引力。如果想讓選擇的文字扭曲的話,這個文字最好是比較大的標題性文字。如果是小文字扭曲之后,它的識別性基本就沒有了。
我們再來看下一個版面,大家應該能看出來,它就是運用了我們前面講到的液化扭曲命令,思路就是重復的文字,它能起到強調作用。但有的時候你每一個細節都完全一樣,它就會有單調的感覺,我們通過液化工具在對角線上進行扭曲,這樣就會產生變化。
我們再來看下一個,這個效果是比較有趣的,它是用什么方式制作的?它是拍攝的。這個設計有的時候就像拍電影一樣,并不是所有場景都必須依賴電腦,有的時候實景拍攝也能夠帶來更好的真實感。
這個版面用的是置換手法,由于我們沒有辦法找到相同的幕布,這里我們找了一個類似的作為載體,我們在上方加入文字信息,然后用置換命令,這個就變成了跟海報類似的感覺了。
這個版面和上一個有一些類似,但是不同的是它沒有背景,它沒有載體。這是因為扭曲的材質背景直接鑲嵌在文字的輪廓里了。給大家舉一個例子,很簡單的思路,我們選擇一個具有扭曲表面的背景圖片,然后將文字放到這個圖片上方,應用置換命令,采用多重曝光的手法。我們將這個材質鑲嵌到文字里面就完成了,這樣就看不到材質了。
那么最后,給大家做一個案例演示,用到的就是扭曲的命令,這是一個活動展覽的項目,它的主題叫流動消融。
為了達到宣傳的目的,這里尋找一個能夠讓文案中的概念實體化的載體,就是標題,它的標題很直接了,那么提取主標題作為版面里的視覺元素,讓它變得很大,成為本案的主體。然后我們將文字稍微拉長一些,這個拉長是手動拉長的,所以它會出現橫粗豎細的現象,這個時候就需要修改了,調整筆畫的粗細統一,去掉一些不必要的細節,這樣這個主標題就刻畫完成了。
然后我們繪制版面的比例關系,這一步的目的就是確定主體在版面里的大小。然后主體的這四個字就放在畫面里的上部區域,底部的這個紅色區域,我們來安排其它的文字信息。
接下來把其余的文字信息編排到版面的下方,我們所有文字編排好以后,最后一步,為畫面添加一個水波紋的細節部分。
采用置換命令讓二者結合,然后把水波紋去掉,鑲嵌到文字里。
這個版面到這里就完成了,我們來看一下它實際的應用效果。
今天我們一起學習了扭曲技巧在版面里的應用,也知道了這類風格它的五種常用表現技巧,扭曲的這個版面不但可以和其它形狀結合,更能為版面帶來豐富的形式感,它是我們做主形象非常好用的一個手法。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前我們更新過如何做投影的文章:《投影一直做不好?看這篇文章就搞定!》,主要針對的是投影的原理進行講解,包括如何用圖層樣式去做投影,怎樣用工具繪制投影,這些都是我們了解投影的一個基礎。教程發布之后,很多同學留言,表示沒看夠,希望針對其他投影形式再進行更深入的講解,那這次我們就來滿足大家要求。其實投影的設計不難,只要符合畫面的光影邏輯,然后加上制作投影的方法,基本就能搞定很多基礎的投影形式,話不多說,我們開始今天的教程。其實投影在設計中的應用是非常廣泛的,比如這些海報,都運用了投影的形式。
在平面設計中,除了合成設計之外,我們在什么情況下會選擇用投影?
1. 增加識別性
比如,在顏色比較混亂的背景上添加文字,或者添加圖片,為了區分他們之間的主次關系,我們會添加一個投影。
2. 增加空間感和層次感
這兩個畫面,通過投影與主體的位置關系,產生較強的空間感和層次感。
3. 提升畫面格調
反應產品質感的投影形式,會提升畫面的格調,這類比較多的是化妝品與品。
4. 增加形式感
如果你的畫面缺少創意性,不妨試試這類投影形式,通常來說它們都是用投影作為畫面中的主體,以此來傳遞出很強的形式感與故事性。
5. UI設計
UI 設計中使用投影。
常規型投影包含了普通投影,弧形投影,接觸投影,彌散投影。
普通投影
普通投影就是我們最常見的一個投影形式,它可以用圖層樣式來設置,它的特點就是在圖像的四周都會有點陰影的感覺,讓畫面與背景形成前后景的關系,就像這里的案例。
弧形投影
弧形投影,它的投影是在物體的一側,像翹起的邊緣。
接觸投影
接觸投影,是物體立面與底面的關系,會有一種三維立體的感覺。
彌散投影
彌散投影,與普通投影的區別在于,它更有深度,也是現如今比較流行的投影形式。
長投影主要分兩種,一種是色塊投影,一種是在色塊的基礎上的漸變投影。
比較常用在圖標的設計,還有海報的設計。
倒影,這類型陰影應該是比較難處理的了,想必大家在做設計的時候,大多數情況會規避倒影這種形式,除非是拍好的照片自帶倒影,不然很少有同學愿意觸碰這塊。因為它比較考驗大家對圖形的認知能力,以及對透視基礎的掌握,之前我們有講過一篇關于素描知識的文章,在里面介紹過關于物體的基本結構,我們所看到的任何一個物體都有一個結構或者形狀,比如立方體、圓柱體、圓錐體、球體。任何一個物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當中,這些基本形狀同樣適用。
首先來看二維的倒影,二維的倒影比較簡單了,也都很好做,復制一個下來,加個蒙版做漸變處理就可以了。
三維物體,最基本的就是這幾個形狀,或者幾種形狀的組合,掌握幾種形狀的倒影,就能應付大部分倒影的形式。
立方體為基礎型的倒影。
圓柱體為基礎型。
圓錐體為基礎型。
球體為基礎型。
組合型。
懸空投影,這類投影給人很強的空間感,并且大多數情況,投影都會成為畫面中的主角。
分為三種類型,二維的懸空投影,2.5D 的懸空投影,三維懸空投影。
二維的懸空投影
先來看看二維懸空投影,是二維的平面懸空,添加一個彌散投影。
2.5D的懸空投影
2.5D 沒有消失點,但是會有立體感,在下方添加一個投影,就會有懸空的感覺。
三維懸空投影
三維懸空投影能有很多創意形式。
創意投影,它不會根據物體本身的形態去表現,而是根據文案和設計構思而產生的很有創意的投影形式,這個主要靠大家發散思維的聯想了。
最常見的就是電影海報中的投影表現。
一種情況是接近真實的投影,和實際照片是一樣的道理,一種情況是類似于創意投影,合成的投影算是這幾種投影當中最難的。
合成中的投影要自己創造一個光源,也就是想象出一個光源,根據光源關系,繪制出投影效果。
投影在這里都是很真實的表現。
合成也可以做創意投影,這三張公益海報的主角是動物的影子,但是形成影子的是前面的物體,這是很有創意的表現方式。
制作投影的方法比較多,比如說利用圖層樣式,用矢量圖形做投影,高斯模糊設置投影,手繪投影等,每一種方法都適用不同的投影類型,我們想更有效率的完成工作,就要對這些技法有個較深的了解。下面我就帶大家來了解下每種方法。
1. 圖層樣式
第一個,也是最簡單的,用 ps 當中的圖層樣式來做。
模式一般我們就選擇默認正片疊底,這是在正片疊底文章中講到過,后面的顏色,如果是主體與背景顏色差異比較大的時候,我們可以選擇環境色;如果差異不大,我們可以選擇主體的相近的顏色,很少有選擇純黑色的投影。
不透明度就是陰影的透明程度,也是很好理解。下面角度,是光線照射的方向。全局光,選擇之后,畫面中其他元素添加投影,就會默認為一個光源,這樣畫面中投影會更和諧。
距離,物體和投影之間的距離,數值越大越遠。擴展,就是陰影面積的大小。大小,就是陰影的虛化程度。
等高線,可能很多同學不太理解,其實很簡單的,我們來看下,縱向,越向上,越實,越向下越虛化。橫向,最右側是投影的中心位置,越向左,離中心越遠。根據畫面中的等高線,我們來分析下。
這樣就好理解了,我們看畫面中藍色圓點的位置,代表中心位置很實,黃色圓點的位置代表遠離中心的位置很虛化,最后就得出右側的投影。
那如果說,我想讓投影的周圍都變得很實,該怎么調整?
就是把虛的那個點向上調整,這樣,就代表外圍投影變得相對較實,我們會得到這樣一個投影。
如果我想,投影靠近外圍的位置,變得比較實,靠近中心的位置,變得比較虛,就可以這樣調整。
得到的投影是這樣的,我們看到中間白色的區域,就是虛化之后的效果,接近了透明。這個搞懂了,利用圖層樣式做投影也就基本沒什么問題了。
ps 還自帶了這么多等高線的樣式,大家可以去實驗一下。
那什么類型投影,比較適合用圖層樣式來做?
普通的投影和彌散投影。
畫面中人物的投影設置。
2. 矢量圖形做投影
畫一個矢量圖形,之后選擇實時形狀屬性,然后點擊蒙版,通過調整羽化值,來調整投影的虛化程度,用這個方法會比較直觀的觀察到,而且因為是矢量圖形,所以還很方便我們隨時調整它的形狀。
高斯模糊和矢量圖形做投影,所適用的投影類型是一樣的,同樣適用于普通投影,弧形投影,接觸投影,彌散投影。
還有懸空投影,它和矢量圖形投影的區別就是,矢量圖形更方便改顏色和形狀,還有虛化程度。
在主體下方加一個小面積的虛化陰影,就會有懸空的感覺。
3. 高斯模糊做投影
添加高斯模糊之前,一定要記得給圖層轉換為智能對象,因為高斯模糊對圖層是有不可逆的破壞性的,所以添加智能對象之后會很方便我們隨時去調整它的顏色和模糊程度,動感模糊同理。
高斯模糊做投影,適用的投影類型。
4. 手繪投影
最后一個,用鋼筆工具或者畫筆工具來繪制投影,這個是比較難的,在投影那篇文章中,我們已經講過在一個場景中,怎樣分析投影的位置,大小,形狀,方向,以及如何用鋼筆工具去繪制投影,這里我們就不再重復了,如果有不懂的同學,回看之前的文章《投影一直做不好?看這篇文章就搞定!》
那我們來看一下,手繪投影適合什么類型的設計。
第一種就是合成設計,這個要考慮光源的位置,投影的透視,投影的顏色等,一般會采用畫筆和鋼筆工具的結合。
創意的投影同樣適合,因為它和合成投影基本一樣,只不過不會根據對象的實際特征去繪制。
倒影適合用鋼筆工具和畫筆工具來制作,這里就涉及到了透視,我們能看到物體在基面上的倒影,實際上是物體在基面上的投影的倒立映像。
在平時的工作生活中,我們要學會觀察,比如積水的路面,反射建筑的倒影是什么樣子的,鏡子里的自己,或者可以多看看攝影照片,慢慢養成習慣,提高對倒影的敏感度。
做倒影最重要就是兩個字──拆分,我們給這個立方體做倒影,首先要思考的是,它的倒影是由哪幾個面產生的,找到物體與承影面接觸的線,然后把這兩個面提取出來,沿著這個線把所在的面拆分出來。
然后向下鏡像,根據實際情況再翻轉,要注意,倒影的透視和原本物體的透視要一致,也就是平行原本對象的邊線。
然后給倒影添加一個蒙版,做一個漸變,就可以了。
用剛才的方法給魔方做一個倒影
同樣把與底邊接觸的面裁剪出來,可以看到透視關系還是不一樣的,我們應該讓倒影的面和上面的魔方透視一致。
用調整大小里的斜切,調整倒影的透視。
添加蒙版,然后在與地面接觸的位置添加一個閉塞陰影就可以了。
再做一個復雜點的,給包做倒影。
同樣,找到底面接觸面,然后把相應的面裁切出來。這里注意的是,每個面要單獨拆分,這樣才方便為每個面設置倒影。
把所有拆分的面復制一個出來上下鏡像。
調整透視,就用調整大小工具,斜切,合并倒影的圖層。
用蒙版漸變,別忘了閉塞陰影。
倒影規律及特點:
好了,前面介紹了每一種投影形式,以及適合的場景。那接下來,我們來看看在同一光源的前提下,不同承影面,也就是投影在不同的材質上是如何表現的吧。
布面材質是軟性材質,在光源下會吸收光的反射,所以投影的邊緣會相對模糊,不會過于鋒利。
案例演示
我們來看下在布面材質上的投影的做法,首先在物品與布面底部繪制一個閉塞陰影:
然后新建圖層,根據光源繪制出陰影的長度與形狀:
給長投影做高斯模糊,然后用蒙版把邊緣處理得柔和一些:
統一光影,把產品修飾一下:
整體調整下色調,就可以了:
鏡面是光滑的,所以光照射之后,會形成和物體一樣的影像,也就是倒影。
設計之前,先參考下帶有鏡面倒影的照片。
案例演示
第一步,閉塞陰影:
第二步,拆分圖像,拿到下方,調整透視,這是之前我們講過步驟,這里就不重復了。
調整產品的光影與色調:
加點小裝飾,烘托氛圍:
最后是整體調整下色調和明暗:
水面和鏡面類似,但是水面會存在水波紋,所以在做投影時候要注意投影的形態要與水波紋一致。
參考一些帶有水面倒影的照片。
案例演示
依然先畫閉塞陰影:
繪制出整個投影形態:
高斯模糊處理,因為是水面,所以陰影和倒影要共存:
下面就是倒影了,方法步驟同樣。
那么問題來了,是怎么做到彎曲的效果的?其實就是用 PS 當中的置換來做,這是置換的參數與水面素材。
關于置換的教程我們也發布過,《平面高手課堂!如何用扭曲工具快速強化作品設計感?》
最后統一色調和光影就完成了。
地板有的會打一層蠟,這個時候,就會存在一些倒影,所以在這樣的地板上倒影和投影是并存的。
先看一下在不同地板上的投影樣貌。
案例演示
這個我們選擇大理石材質,首先閉塞陰影:
繪制投影的形態:
給投影高斯模糊,添加蒙版做漸變:
然后,按照光影和環境色,處理產品的明暗和色調:
5. 漸變色/純色
這也是我們設計中遇到比較多的情況,在純色或漸變色的背景中,為了讓畫面具有空間感,我們經常會給物體加投影,這個投影可以是常規投影,也可以是倒影。
案例演示
閉塞陰影:
根據光源繪制投影:
高斯模糊,然后添加蒙版做漸變:
修飾產品的色調和光影:
統一光影色調:
教程到這里就結束啦,估計有的同學會納悶,為什么我們沒有細講怎樣根據光源繪制投影?因為在之前投影文章中已經手把手給大家演示過了,沒看過的同學趕緊去補課,可閱讀《投影一直做不好?看這篇文章就搞定!》
總結下今天的內容,第一,投影在畫面中作用。第二,我們給投影形式做了分類,有常規型,長投影,倒影,懸空投影,合成投影。然后是制作投影的方法,著重介紹了倒影該怎樣做,最后是投影在不同材質上的表現。通過關于投影的這兩篇教程,相信大家已經能掌握一些原理和技巧了,其實最快速學習投影的方法,就是要學會觀察生活中的事物。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
抽象圖形拼接
坦白說,這些抽象的 LOGO 設計讓我立刻想起了JK·羅琳和她書中的魔法符號。如果這些Logo背后都有著獨特而富有力量的故事,那么它們確實可以很好地服務于品牌。這樣的了 LOGO 設計應當在筆觸上保持一致,并且充滿意義,我覺得如果能傳遞出這樣的信息,它就很優秀了。
利落清晰的筆觸,完美的角度和弧線,這樣精準的設計會給人帶來可靠的感知。當然,這些Logo 的應用場景同樣有著嚴格的環境要求,設計師幾乎沒有異想天開的余地。這些 Logo 看上去相當正式,有著明顯的高級感。
借助負空間來傳遞信息一直一種巧妙的 LOGO 設計技巧,它就像缺少關鍵證據的犯罪現場,墻上的洞,它并不是借助現有存在的因素來告訴你信息,而是通過一個「不在場的關鍵元素」,來傳遞重要信息。負空間就是這樣,它同樣也是一塊畫布,只不過給人的感覺是通過畫布的背面來呈現信息和故事。
負空間并不是為了隱藏信息而存在,就像聯邦快遞 (FedEx) Logo中隱藏的箭頭,或是 Toblerone 巧克力 Logo 中山腰上的熊。這些元素都不是為了隱藏信息,而是為了通過這種不完整來傳遞更多的信息。通過正空間來凸顯負空間就是關鍵的技巧,正如 Reinhard Ernst 博物館的 Logo 所示,中間開放的矩形區塊如同畫框,似乎可以代表博物館的任何一件藏品,這也是一種「less is more」的設計。
很多做 Logo 的設計師都曾經歷無法控制的時刻,發呆失神應該也經常會發生。如果你是在紙上畫草圖,筆尖無意識地滑動,或者墨水洇出,都會產生有趣的筆觸痕跡。我知道這不是電腦上繪圖的方式,但它確實幫助我描繪出這種視覺設計的特征。將筆尖繪制成一個完美的圓,而筆尖后則是留下托拽的痕跡,在筆痕結束的位置,自然留下的也是一個圓弧邊緣。
不管這些 Logo 的布局特征是怎樣的,它們都呈現了類似視覺特征。小圓點和托拽痕跡構成了它主要的「筆觸」,它們而生動地拼出字母,繪制出路徑,或者勾畫出有意義的符號。我想你已經捕捉到了它們的特征了——活力四射,生動新鮮的筆觸路徑。
在logo設計中廣泛使用漸變色,是整個行業在過去十年中經歷的最兩極分化的趨勢之一。仍有很多設計師抵觸過渡色,因為從LOGO設計的角度上來說,漸變色違背了很多規則,而這些規則是在數字時代之前就已經存在了。不過,LOGO 設計師們總能想出好辦法,比如間隔漸變式的設計。
將均勻漸進的色彩變化用連續的純色片段來替代,同樣呈現出色彩的變化和韻律感,但是消解了漸變色在 LOGO 展示過程中潛在各種問題。上面案例中,Qwant 的 logo 就是通過輪廓化的顏色分割來實現這一點,它真實地模擬了漸變的效果,所呈現出的效果比CPA Ireland 要好,CPA Ireland 則使用了的四等分幾何分割加上色階轉換??傮w上來說,間隔漸變的色彩使用技巧,很好地在當下的流行趨勢和 LOGO 設計訴求之間找到了平衡點,值得嘗試。
使用線條來勾勒和描摹事物,傳達信息,是一項古老而傳統的技藝。在時下的審美體系當中,使用輪廓線條來繪制 LOGO 似乎顯得太過于老派,不夠現代。不過技術總歸是服務于表達的,依然有設計師能夠充分的利用這一技術——加入透視,不再局限于二維,而是開始描繪三維的對象。
這一的設計看起來和如今的線性圖標的繪制方式在技法上保持了延續性,但是它在維度呈現上更加深入,更加具有表現力和形式感。通過富有規律性的利落的線條,設計師不用太多的線條就能勾勒出立體而抓人眼球的LOGO。這種設計要求設計具備更強大更精準的描摹能力。你可以延續這種思路到整個設計當中,這會使得整個品牌化設計思路更加開闊、有趣。
在 LOGO 設計當中,使用句點這樣的標點符號,通常都會借用它身處標點符號中的含義和功能。當我仔細琢磨這一趨勢時,發現這些類似句點的符號有時像句號,有時則偏向冒號,它們在LOGO中總帶著一些奇特的意味。如你所見,這些原點在更多的時候,它更接近于句號,充當收尾和封頂的終止符。
有的時候,它的裝飾性更強,以不同的形式漂浮在文本和符號周圍。如果你要深究這些 LOGO 設計本身的含義會發現,這個小圓點可能是字母 i 上的那個小圓點簡略之后的殘留痕跡。這個小圓點,在如今的很多 LOGO 中已經超出了裝飾性的范疇,基于不同的需求和設計出發點,它可能意味著時間,可能代表著字母,承載著特定的詞匯和含義,可能是感嘆號或者句號,表達情緒或者終止。設計師將內容抽象成幾何圖形,承載意義,提升了對話的智慧。
在傳遞放飛、飛翔、展望、自由、遠見、輕盈、速度等含義的時候,很多設計師都會借用翅膀的意象。這也是為什么越來越多的地方會看到被提煉和抽象出來的翅膀和羽毛的符號或者圖形,某種意義上,翅膀已經遠超出了它本身的意味。這些被設計得形制不一的翅膀類的圖形,有著冥想的前傾或者后掠的姿態,仿佛在對抗變幻莫測的大風,借助空氣動力學向上飛起。
很多翅膀元素形制類似于字母 U,只不過兩只翅膀在傾斜角度、弧度和長短上,進行了比較深入的調整。之后,再對 Logo 進行弧度和細節進行修飾,這樣就完成了。如同我們上面所在展示的幾個案例,設計師經過很快的迭代就可以完成這樣的設計。與此同時,在具體的設計過程中,設計師還會引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了雙翼的意象。蘋果有翅膀,烏龜也可以有翅膀。我們可以用翅膀填補空白。
門其實我們常常會引申出「打開新世界大門」的概念,它在實際設計中會帶有通道、時間、新世界,甚至一種全新心境和意境的概念。很多品牌 LOGO 都想借助這個意象來承載更高遠的含義,微軟就是一個典型。門和窗本身一直都是一組象征性極強的元素。門象征著通行的權利,解決方案的途徑,機會,甚至歡迎的含義,某種意義上它們和眼睛在含義和隱喻上是共通的。這也是很多設計師在設計 LOGO 的時候青睞這一意象的原因所在。
2019年的LOGO趨勢報告,是我們的第17份 LOGO趨勢報告。每年的趨勢報告都是從成千上萬的 Logo 中,尋找新趨勢和細微微妙的差別。我們承認,每一個設計案例都代表著來自世界各地的設計師們的思考和心血,我們對他們表示敬畏,并感謝他們不遺余力地幫助我們完成這份報告。感謝所有在過去、現在和未來幾年為潮流報告做出貢獻的設計師們。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在過去的一年里 LOGO 設計行業蓬勃地發展著。對我而言,查看各大設計機構的LOGO趨勢分析和報告,就像開禮物一樣,因為我知道等待我的是一段獨特體驗。這其中有平凡到令人失望的設計作品,也有令我歡欣甚至驚喜的好作品。而這便是LOGO設計行業仍然充滿活力的證據,是值得感激的恩賜。值得欣喜的是今年的設計作品依然體現著設計師的好奇心與勤勉,這激勵我們向著新高度進發。你會在今年的趨勢中看到往年主題的延續,但是融合和改變形成了跟為獨特的設計趨勢。設計師們開始采用非傳統的色彩和線條,賦予新的內涵。
Logo中的圖案通常以黑白配色呈現,營造一種復古感。設計師們以大量的網點元素作為構建差異的方式。粗礪的噪點、條紋以及網線銅版和木紋磚紋的調合,使logo呈現一種復古的視覺特征,這似乎與時下的高飽和漸變色彩的使用趨勢背道而馳。
現代流行文化不僅改變了我們看待符號的方式,也影響了視覺設計時的優先級。隨著紋理、圖案、排版、攝影和插畫元素在視覺品中的優先級發生變化,視覺元素愈發地被收到重視?,F代品牌很多時候會被視作為是被視覺美學所推動前進,因此也會要求 LOGO 具備更強的視覺吸引力。
陰陽相生。當一種新的風格、思路,新的濾鏡、插件和設計工具出現的時候,設計都會向著不同的方向演化。但是,每一個精心制作的LOGO,包括動態LOGO 你都很難把功勞歸結于某一個工具或者方法,它始終是多種方法、工具和流程共同作用的結果,很難把不同的因素徹底地區分開。嘗試新的事物從來都不是壞事,但是我仍然寄希望于獨特的技術和方法,希望在設計里留下自己的痕跡。
我需要再一次重申的是,潮流并非是趨勢所造就的。與時尚領域不同的是,設計趨勢不會隨著文化變遷而突然爆火,相反,它在設計維度上,一直是向著兩個方向延伸,觸摸過去也面向未來。更準確的來說,是我們一直從過去的天才構想中汲取經驗,同時還在不斷開辟走向未來的路。
毫無疑問,今年流行的主題中出現了很多時下流行的元素和主題,包括無人機、蘑菇、刺猬、鵜鶘、蛇、華夫餅、針、燈泡、三眼虎和蒸汽波。雖然這些流行元素只是暫時的,但許多作品仍然制作精美。盡管這種流行元素的風潮最終會落幕,我還是要向它們致敬。
我仍然要感謝 LogoLounge 社區的2萬多名來自世界各地的設計師,他們為這份報告提供了大量素材。在本報告發布時,我們的網站擁有超過30萬個的logo設計師,我們可以與會員一起繼續觀察他們的職業發展趨勢。能夠與他們并肩工作,支持我們熱愛的這項事業,是一種榮幸。
老實說,要求一個老練的LOGO 設計師在 LOGO 當中加入流行的陰影效果,這仿佛是對設計師靈活的創造力進行質疑。今年我們的團隊精心設計了一種新的方式來為他們的作品加入陰影——因為陰影效果本來就不止一種,而還需要兼顧到 LOGO 本身的可用性。我們避開短暫流行的漸變色,用一連串同心的點和線來呈現光影動態,以這種新的方式,比傳統陰影更具視覺張力,更重要的是,它可以更自然地輸出純矢量的單色 LOGO 。
在過去的幾年里,我們看到圓點和線混合在一起,展示了不同元素的融合。通常,這的設計方案會以同心圓為中心,其他元素彼此平行,但不會完全合并到一起。通過將這些元素彼此融合到一起,讓它們和主體元素融合、交匯,在負空間的幫助下,設計師以這種方式讓消費者在頭腦中自覺將圖像填充完整。比如咖啡杯中的幾個點,以及用點狀表示的兔子尾巴。
有人會因為盤子里的食物混在一起而崩潰,也有人對此毫不介意。所以,有的設計師將元素之間的各種元素之間的界限給先打破了,通過重疊來創造層次感,互相堆疊的元素會呈現出一種模糊的效果。而其中大多數 Logo 都呈現出了一種引人入勝的信息,巧妙地吸引了人們的關注。當然,也許大多數人會選擇創建一個對比明顯、信息清晰的LOGO。
這種堆疊式的LOGO設計,使用兩個圖層足矣,三個圖層也勉強可以駕馭,但四個圖層就太過了。如果背景無法辨認,發揮作用的就只有最頂層的視覺元素。上圖所示的這些logo融合了類似于徽章和插畫的排版,正如這些例子所示,這些源自復古的設計能夠煥發出全新的力量。
陰影作為logo設計中的一個元素,在很多方面都是至關重要的。我用了一個完整章節來討論陰影的重要性。陰影暗示著光的方向,更確切地說,它可以顯示維度和空間關系。一條垂直線和一條水平線,再加上一點陰影,就可以確定誰在平面上方了。畫一匹色調均勻的馬,那么馬的兩條后腿就應該處理得暗一點。
有時候,我們作為設計師會受限于自己的技法,這是很正常的。在這些標志當中,包含著一個非常微妙的小陰影,雖然在 Trustpilot star 這個案例中,看起來確實做了比較清晰的分離處理,但我仍然想知道,如果按比例縮小,這種對比是否足夠明顯發揮作用。我的建議是,如果需要效果,就要盡量使得效果可以明顯地呈現,而不是要佩戴老花鏡才能看得清楚。但是毋庸置疑,有很多設計師是經過審慎考慮之后,才選擇了這樣的方案。
熱情飽滿的新生代設計師正在重塑潮流。在數字時代之前,想要在插畫中加入條紋、圓點、中間色調、木紋或其他異國情調的半調效果,首先需要去當地的藝術用品商店逛逛。如今如果你想要實現半調效果,你只需花費很少的錢就可以將其應用到你的設計當中。復古風的設計書籍中充斥著各種各樣的標志,展示著一些非常漂亮的半調式的漸變效果,這會讓設計師們對這種相對古老卻陌生的技術感到好奇。
這一趨勢是非常典型的70年代復古,不僅在風格上,而且在色調上也有體現。這些帶來半調效果的斜條紋線所創造的效果接近于40%的黑色。這樣的 LOGO 設計能夠讓用戶一秒回到以往那個美好的時代,不那么機器制造的感覺。但是它仍然存在缺陷,就是當它縮小的時候,斜條紋會模糊,最終會呈現出一片灰色的效果。
在半調和高亮式的設計技法之間,波點元素還有一席之地。這些超大的圓點其實也算得上是半調的一種形態,它們實際上算是圖標中的一個組成元素,而不僅僅是背景。從這些LOGO的設計案例當中,我們可以看到,這些圓點近似于編織的籃子或桃子的紅暈,圖案并不僅僅是用來表達色調的,它還暗含光影和紋理。
使用更大膽圖案元素,已經是一個公認有效設計策略,打破緊張的平面色調和布局,并創造視覺吸引力,讓元素更醒目。作為一種從在漸變和失真之間尋求平衡感的設計,波點使得設計師可以以有限的顏色,簡單而有趣的矢量圓點來吸引消費者。
人們很容易認為,在吸引人們注意的領域里沒有什么新技巧。猿類拍打胸部,孔雀展開羽毛,人類則在社交媒體上發帖。還有一小部分身份設計師會選擇高亮效果來修飾他們的設計——至少這是今年最引人注目的趨勢之一。
我們通常認為黑白配色的 logo 是在添加高光之前展示給客戶的。當下流行的高亮色調有淡紫色,日光粉,和冰藍色。拋開所有的視覺趣味性不談,設計師們認識到,正是色彩的火花讓這些logo擺脫了潛在的平庸性。
過去兩年之間,設計主題已然延續到簡化設計,以及 Logo的純粹化。這種對前人作品結構的致敬,同樣體現著設計師的創造性,因為他們想出的解決方案是基于重新排列幾何元素而來的。每當你聽到有人表示相信一切都是以前做過的,只要提醒他們,作家和音樂家一直在重新排列了一些筆記或字母,而且新的音樂和書籍,比logo 要多的多,但是靈感之泉卻從未干涸。這大概也是以四分之一圓微代表的幾何元素,開始大規模地出現。
今年,四等分的圓圈元素——或者說扇形,隨處可見。大多數情況下,設計師會完全基于這個扇形來作為唯一的模塊,但偶爾也會讓它們與圓、半圓、正方形、三角形和其他幾何形狀混合在一起。即使在表達復雜的信息時,形式的純粹性可以恰當地與之進行平衡。如果logo看起來很冗雜,那么放入元素的數量應當有所限制。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
排版的難處在于,我們不是根據已經設計好的版面來填充內容(套模板),而是要根據具體的內容來布局版面。比如版面中的圖片有時候是一兩張,有時候是十張八張,由于構成元素的不同,導致采用同樣的構圖、版式、形式往往是行不通的,所以蔥爺今天的這篇文章就是要來分享,在不同情況下有哪些圖片排版技巧。1. 平鋪
即把圖片鋪滿整個版面,這種處理方式多用于封面設計。
或者在內頁中把某一半版平鋪一張大圖,另一半則排列文字或者小圖。
平鋪的圖片比較有張力,有視覺重心的圖片適合這么處理。下圖平鋪的效果就一般般。
還有一種情況是把圖片當做背景,也可以采用平鋪,如下圖:
2. 四周留白
即圖片要比版面小,并讓其四周都留出空白。這里也分兩種情況,一是圖片位于版面正中央,圖片周圍的留白是對稱的,這種效果類似于相框,常用于封面設計。
還有一種情況是圖片周圍的留白并不對稱,如下圖,留白較多的區域會用來排文字,常用于海報設計和畫冊內頁設計。
3. 一條邊出血
即把圖片的一條邊對齊邊界,這么處理有點沖破束縛的意思,可以增加圖片的想象力和版面的設計感。
4. 三條邊出血
這么做會把版面分成兩部分,一部分為色塊,一部分為圖片,在排版時我們還可以通過文字、色塊或顏色把這兩個部分聯系起來。
5. 拆分
即把一張圖片拆分成幾份,然后隔開一些排列,這么做比單獨放一張圖片會更有設計感和趣味性,風景類圖片適合這么處理。
6. 跨版
即在畫冊設計中,讓圖片同時占據兩個版面。當在一個跨版中只有一張圖片時,如果只把圖片排在某一半版中,那么另一半版就容易單調,所以在這種情況下通常會使用跨版,而且圖片放大后會更有張力,還能把左右兩個版面關聯起來。
在畫冊的設計中,有時候我們應該把一 P 當成一個版面,而有時候則需要把一個跨版當成一個版面,這取決于具體的內容以及排版形式,所以圖片的排版也要分成這兩種情況來考慮。
1. 統一大小對齊排版
在一些作品集或產品畫冊中常用到此排法,視覺流程簡單、清晰。
2. 統一大小錯位排版
比對齊排版更有動感,且由于圖片不多,所以也不會顯得混亂。
3. 一大一小排版
這種排版對比鮮明、更有張弛,可以在一個跨版中使用,也可以是在某一 P 中使用。
還可以把其中的一張圖片去底,這么組合起來更靈活,對比更強烈。
如果把整個跨版當成一個版面,那么可以把大的那張圖進行跨版,小的那張圖則不跨版。
或者把大圖鋪滿一個 P,而小的圖片和文字則排在另一個 P。
這兩種排法都很大氣且不失細膩。
有時候一個版面內的圖片會有很多,這種版面排起來會更有難度,常用的排版方式有以下 8 種。
1. 大小統一對齊排版
這種排法比較整潔,但缺少變化,適合用于目錄頁或者產品和人物介紹。
2. 大小不統一對齊排版
這種排法會比前一種更靈活一點。適合利用網格工具來輔助排版。
這種排版雖然沒有統一圖片的大小,但由于保持了嚴格的對齊關系,所以依然顯得很整潔。
3. 圖片與色塊組合排版
圖片與色塊組合在一起排版既不會像只有圖片那么單調,還可以利用色塊排文字。不過注意色塊的顏色不要太多,且顏色最好來自圖片。
4. 錯位排版
即把相連兩張圖片刻意錯開,或者把圖片與文字的位置互換,這么做可以有效打破圖片完全對齊的單調,且由于有一定的規律,所以也不會對視覺流程造成太大影響。
5. 把圖片拼成特定的形狀
這種排法適合圖片比較多的情況,這么做可以避免圖片太多而顯得混亂,而且因為拼成的形狀要與設計需求相關,所以會顯得更有創意。
6. 按照某一路徑排版
這種排法跟前一種一樣,適合數量較多的同類圖片使用,可以避免圖片排得太過分散,如果不統一圖片的大小和方向,效果會比較活潑但不規范,適用于照片墻和兒童畫冊的排版。
如果統一圖片的大小和方向,或者使它們呈漸變式的變化,這些圖片還可以形成一定的節奏感,不僅不會亂,還很美觀。
7. 一大多小排版
如果在版面中分開排列大小差不多的多張圖片,那么該版面就會缺乏重點且沒有張力,而如果把其中一張圖片放大,與其他圖片形成鮮明的大小對比,就可以有效解決這一問題。
8. 自由排版
即大小不需要統一、圖片與圖片之間也不一定要嚴格對齊,效果比較靈活,設計感較強,常用于雜志排版中。
這種排法有兩點需要注意,一是圖片不要排的太分散;二是最好要有大小對比。
去底圖也很適合這么做,當然,在排版的時候也要有大小的區分,同時要注意圖片與圖片、圖片與文字之間的輪廓要形成互補。
版面中的圖片數量有從一張到數十張不等,圖片的排版方式也非常多,所以我沒法一一列出,以上總結的 17 個技巧僅僅代表一些比較主流的方向,具體的變化還需要大家根據具體的內容和設計需求去做嘗試和突破,希望這篇文章能給你一點幫助。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
我們在設計中除了接觸到圖形,還需要了解文字的設計。特別的文字設計或者排版可以使整體的畫面效果更加有氛圍,甚至超過圖形表達的感受,更加直觀地表達出內容的主旨。文字的設計方式有很多種,例如通過字體變形,結構重組等方式來讓文字變得更加特別,但往往會讓我們耗費比較多的時間。
因此我一直在思考有沒有一些既簡單又的設計方式來提高文字的設計感。在瀏覽國外的一些設計網站的過程中,做了一下文字設計形式方面的收集,并整理出十種我認為具有代表性的文字設計形式。另外還參考這些設計方式,使用中文字體進行了一些嘗試。
拉伸的處理手法,讓文字更具有張力,整體氛圍更具標題感和圖形化,但依然保留著文字該有的識別度。常見于純文字排版的海報,既滿足閱讀需要,同時具有設計感。
拉伸與文字本身的字形、字體有著很大程度的關聯,并不是所有的文字都適合拉伸,例如下面的案例。
1. 不同字體對比
從方案嘗試中看出,左邊字體在進行拉伸之后,文字本身的結構會遭到破壞,而右邊的效果可以較為接受。因此在設計的過程中盡量選擇可適用于拉伸的字體,另外在拉伸的過程中需要對細節重新處理,使字體保留原有字體的細節美感。
2. 不同字形的對比
從下面案例中對比,O 在進行上下拉伸的時候效果比較好,而左右拉伸的時候會失去字體本身的美感,而 Y 在上下左右拉伸后整體視覺效果都相對平衡。
3. 細節處理對比
優化字體線條的細節可以使得整體文字更加規整、方正(右邊)。而未進行細節的設計則會顯得筆畫參差不齊(左邊)。
4. 傳統與現代對比
傳統的字體拉伸后(如下圖中間的字體),字體本身的韻味就失去了,因此不建議對一些較為傳統的字體進行拉伸設計。
5. 設計嘗試
中文字的筆畫比較多樣性,因此在細節的設計上比英文來得更加復雜,在處理「撇、捺、點、折、彎、勾」時需要保持原本的筆畫結構性。
6. 拓展案例
結合實際要表達的內容,使用拉伸的設計手法,例如結合物體,疊加顏色或者交錯拉伸等。
虛實結合即為線面/陰陽的設計手法,通過虛實的處理,可以突出一組或一段文字中的重點信息。在一些強調主次的設計中,可以嘗試這種方式來做區分,線面結合的處理手法讓原有都是面的字體多了一些透氣感和空間感。
虛實處理的方法需要考慮本身字體的粗細,過分纖細的字體效果可能并不明顯。
1. 嘗試對比
從對比中,發現粗體相比于細體來得更加直接更容易出效果,對比明確。
2. 中文字體的嘗試
從嘗試中來看,與上面中的結論較為一致,較細的字體使用虛實結合效果并不理想。對于書法體的應用,更多需要考慮字體的收邊效果是否工整,收邊過碎,會影響在描邊之后的細節美感。
3. 設計嘗試
通過遞增或者遞減的設計手法,讓原本簡單重復的文字元素,變得更加具有層次感和節奏感,讓文字的生命力變得更加豐富多樣。
在設計的過程中需要提前規范好各個字體之間的差異關系及變化的效果過程。按照一定的數值倍數差異比進行變化。
1. 不同方式的嘗試對比
在嘗試的時候發現,粗細變化的模式可能更多會依賴于字體本身的模式。
2. 中文字體的嘗試
中文在使用遞進漸變的方式中需要考慮整體文字的結構感和塊狀感,由于字形較為復雜,整體視覺效果會過于零碎。
與遞進漸變接近但卻又有差別的文字設計形式。擴展變化的文字具有張力的同時有一定的速度感和發射性,就像向四周展開的波紋效果,具有延續性。
按文字的行高或者字寬作為基礎值,按一定的比例,對文字進行破形切割處理,上下左右進行擴展發散。
1. 比例值示意效果
2. 中文字體的嘗試
外觀的完整度還算可以,但由于中文本身自有的特性(筆畫較為豐富多樣),因此在擴展層次的數量上需要進行一定的控制,不宜過多,以短語或標題使用較好,避免過于形式而導致文字識別性降低。
3. 設計嘗試
文字作為紋理出現在畫面中,區別于圖形化的紋理。既有圖形感,同時可以輔助傳達一定的信息和態度。
在字體的選擇上盡量適用字形較為簡潔的字體,避免影響前景內容的展示。設計上可以結合其他的設計形式,例如虛實結合/拉伸變形/擴展變化等方式,提升畫面的豐富程度。
1. 中文字體的嘗試
常規的中文字體,整體效果還算不錯。但結合中國書法字作為底紋,可以讓整體的設計更具有不同于英文的設計感,整體效果更具有力量感,因此建議在設計中文底紋的時候可以大膽嘗試中文書法字。
通過疊加的方式,讓原本簡單的文字和背景產生了融合。既提升了背景的層次感,又讓文字變得具有設計感。
粗細的字體會產生不一樣的視覺感受,較細的字體會產生若隱若現的視覺效果,文字的識別性會稍弱,較粗的字體識別度基本上沒有太大問題,因此在設計的過程中可以結合實際的情況選擇不同粗細的文字。
1. 粗細對比嘗試
穿透的文字設計,對于打造設計的大片感具有很突出的視覺效果。例如漫威的電影片頭設計。
2. 中文字體的嘗試
結合不同的語意使用不同的字體,再結合穿透的設計方式,使畫面具有中文的文藝感。
3. 拓展案例
結合實際的內容設計,穿透文字的玩法還可以拓展出更多不一樣的設計,例如下面這些例子。
扭動的設計,讓文字具有曲線的動態感,提升了文字的裝飾性。不同曲線的動態變化,賦予文字不同的律動感。變形的文字并未影響到文字該有的識別性和閱讀感,卻具有了設計感。
如下面的三個案例,曲率的差別,賦予文字不同的動態規則,有不同的視覺感知,有時柔美,有時卻具有速度感。因此在設計的時候,可根據具體的內容設計不同的扭動趨勢。
1. 中文字體的嘗試
對比可見較細的字體使用扭動的設計,效果并不理想。由于中文筆畫的差異點,經過扭動之后整體外形較為不規整,而粗體的效果則較為規整,動態曲線趨勢也較為明顯。
2. 設計嘗試
扭動+虛實+底紋的效果。
3. 拓展案例
更高級的設計手法是利用自然環境的介質結合文字,起到扭曲的視覺效果。
與擴展變化有異曲同工之妙,文字通過一定的角度和位移間隔,由二維向三維的視覺效果進行變化,讓文字更加多變化和有重量感、層次感。
立體層疊的設計對于字體本身具有一定的要求,較為纖細的字體出來的效果并不理想。
1. 不同的字體嘗試
從對比中看出,細體或較細的襯線字體,層疊后會出現銜接不上或視覺黑點的情況(如下面左圖和右圖)。因此設計時建議使用粗體,并且整體筆畫較為平均的字體(中間的圖)。
2. 中文字體的嘗試
雖然具有了層次感和空間感,但也會讓整體變得更加復雜,因此需要根據文字的多少情況進行使用。
3. 拓展案例
立體層疊還不止單向的設計,例如可以進行軌跡變化,向外擴展層疊,或是增加一些顏色漸變來豐富整體的設計。
文字通過錯位,疊加,顏色變化,透明度變化,切割等方式的設計之后,具有故障的視覺偏差感受。整體視覺感知類似雙重曝光的照片,文字具有豐富的層次感。
顏色疊加的效果,對于顏色的選擇極為重要,兩個顏色交錯之間的顏色可以為過渡色或者互補色。
細體的效果并不理想(如上圖左邊第一個),建議設計的過程中使用較粗的字體,另外在使用的過程中需要考慮文字的識別度(如右邊的效果),重疊之后文字的識別度或多或是會受到影響。
1. 中文字體的嘗試
由于中文字比英文復雜,因此使用中文字在設計的時候,可以尋找一些共筆的地方進行重疊(如下圖左邊的設計),利用字體筆畫粗細一致的情況下,進行了邊與邊的重疊。另外在設計的過程中建議加大字間距,這樣可以避免不同文字的重疊,產生過度復雜的效果,影響文字的識別性(如下圖最右邊的設計)。
2. 拓展案例
在簡單的疊色之外,結合不同質感和肌理,可以讓整個文字具有不一樣的視覺感受。
文字按照立方幾何結構進行排版,通過顏色差異,陰陽,線面等方式設計處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感,提升整體畫面的設計感。
1. 設計嘗試
使用空間錯位結合虛實的設計,讓簡單重復的文字變得具有空間感和立體感。
2. 拓展案例
除了常規的空間打造,甚至可以融入到場景中或者結合物體本身的設計。
以上設計風格,常常會在一些運動品牌的設計中看到。例如,Nike 的設計中應到的文字,也會結合這些方式,來豐富和提高整體的設計感。
火箭隊出場片頭的字體應用,線形字體疊加漸變的效果,具有層次感又有未來感。
阿迪達斯的廣告:
Converse 的廣告:
Under Armour 的廣告:
除了一些品牌的設計,音樂唱片的封面也有應用到這些類型的設計手法。
我們除了在一些常規的媒介上會看到相關的文字設計,在這兩年的耐克或阿迪達斯的鞋子設計中,也會加入文字元素的設計,甚至球員會直接在鞋子上寫上文字。
文字設計的拓展疊加
文字的設計已經成為一種新的設計趨勢,結合實際需要表達的想法,對于設計手法進行活學活用是做出好設計的關鍵。當然只有掌握了基礎手法才可能做到舉一反三的設計思考。在實際設計的過程中,我們往往不會是單獨使用某一種方式,而是對不同的設計手法進行重組再設計,或者使用 2~3 種方式疊加設計來打造整體的畫面效果。如下:
在這十種基礎的文字設計中,通過結合發散可以迸發出遠遠不止于十種的創意設計。本次收集總結除了自身學習提高之外,希望可以起到拋磚引玉的作用,激發設計師對于文字的設計思考。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
今天我們來講一講大家期待已久的配色方面的干貨。其實幾年以前我就寫過一篇關于配色的文章,早期的面粉估計還有印象,在那篇文章里我基本已經把設計師需要用的關于色彩構成的主要精華內容都匯總出來了(文末會附上文章鏈接的,別著急)。
但是因為不同設計行業的工作內容是有差別的,而且每個人的基礎和理解能力也不一樣,所以僅憑一篇文章是無法解決所有人的難題的,所以今天這篇文章算是關于那篇配色知識講解文章的補充篇。
不過在講解如何配色之前,我們還是先應該先記住一些關于色彩的理論知識,因為有了理論依據我們才能在做設計的時候有理有據,而不是胡亂配色和瞎試浪費時間。
所以這篇文章主要分為了以下幾個部分:
簡單點來說,色彩即顏色,顏色可以分成有彩色和無彩色兩大類,看有彩色主要看色相/純度/明度三個方面的屬性,無彩色也就是白色/黑色/各種深淺不同的灰色,也可以說無彩色是飽和度為零的色彩。
色相,即可以明確表示顏色色別的名稱,比如紅橙黃綠藍靛紫:
色彩有冷暖之分,我大致用溫度的概念標注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(當然,這里的溫度是我自己為了具體化冷暖的概念而標記的,主要是方便大家理解,所以不用去糾結這個數值準不準確哈哈,你明白他們代表很冷/很熱/一般冷/一般熱就好了!~)
明度,就是指色彩的明亮程度(通俗點講,在某種色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。
純度(飽和度),就是指色彩的純凈度,我以紅色舉例,如下圖所示:
如果大家想看更加詳細的關于色彩構成原理的解說,可以看這個系列:《優設獨家配色專題》
不管我們做什么方面的設計,設計練習也好,實際項目也好,在設計之前,我們最好是能先明確我們的設計目的是什么,然后確定一個主題,依據這個設計目的和主題,去構思創意,有了創意后再去去探討具體的落地執行,其中包含了字體(標題文案)的設計排版配色、畫面整體的構圖和配色、細節優化、氛圍渲染等等;
當然,這一次關于其他方面的內容我只會附帶著講一點,因為我們今天的主要內容是講配色。
以我最近做的一張照片海報設計為例:
下面是我前幾天用手機拍的一張照片,照片里的內容是我的手拿著一朵花。
1. 設計之前先確定主題
比如這一次我是確定了設計主題為:浪漫。
因為我看了下這張照片里面花是粉色的,我的手指甲油也是粉色系的,而我也是一個(年紀越大就越)喜歡粉色的女人~同時因為我喜歡嘗試各種不同的風格主題,浪漫這個主題我之前是沒有做過的,所以要不這一次就浪漫一回好咯。
那么說到浪漫,大家腦海里的第一反應會是什么呢?我不知道大家會想到什么,反正我會想到很多場景畫面,比如2002年的韓劇《冬季戀歌》里,男女主角在雪地里相擁的畫面,天上飄著雪花,同時背景音樂響起了《My memory》;
△ 《冬季戀歌》因為是2002年的韓劇,所以現在看海報是有點過時了,但劇是好劇的
再比如2017年的電影《愛樂之城》里,男女主角在繁星點點的絕妙夜空下翩翩起舞和擁吻的場景,同時背景音樂響起了《City Of Stars》;
△ 電影《愛樂之城》海報
再比如1995年上映的宮崎駿動漫《側耳傾聽》的結尾情節,時隔2個月才見面的男女主角一早就偷跑到一個可以俯瞰城市和日出的角落互相表白,微風輕拂著女主的短發,一棟棟高樓彌漫在朦朧的霧氣當中,日出的余輝映射在波瀾的水面,同時背景音樂響起了《Take Me Home, Country Roads》;
△ 宮崎駿動漫《側耳傾聽》劇照
等等等,還有很多浪漫有關的畫面我就不多說啦。
總之,浪漫是有很多種表現形式和配色的,但是有一點是有共通性的,那就是要想打造出浪漫的感覺,背景音樂、色彩搭配和氛圍渲染很重要。
比如除去聽覺上的背景音樂渲染氛圍以外,視覺上還有《冬季戀歌》里的白雪凱凱和雪花飄、《愛樂之城》的藍紫色夜空和繁星點點、《側耳傾聽》里的暖黃色日出和微風波瀾。
那么回到我自己拍的這張照片上面,這種大面積的灰白色背景只能讓人感覺很性冷淡,一點都不浪漫,所以這張照片我肯定是要摳圖才可以用的;從我自己的年齡、喜好、原照片內容限定等角度,可能走《愛樂之城》那種類型的浪漫色彩可能就更適合一點:用暗色調的紫色搭配我原本圖片就有的粉色系。
ok,分析到這里先打住,我們先不要繼續著急去細化到底該怎么去配色了這時候我們只需要有一個大概的色彩感覺就好了,因為配色之前,我們還有很重要的一步沒有做,那就是構圖。
2. 配色之前先構圖
很多人之所以總是說自己不會配色或不管怎么配色都感覺不對勁,其實是因為,搭配顏色這個動作不能為時太早了,你得先把你整個畫面的構圖和基本框架先敲定了再去考慮配色。
先構圖再配色,先構圖再配色,先構圖再配色,重要的事情說三遍!~
因為構圖相當于化妝的時候先打好底子,底子不打好,你再怎么化妝都是徒勞的。同理,如果你的構圖很亂或者基本型都沒出來,你就去考慮配色,很有可能就是你磨半天都設計不出一個滿意的結果,這就是很多人磨蹭半天,做出來的設計依舊不好看的很重要的一個原因。
因為你的設計步驟錯了。
比如我今天要拿這朵花做一幅海報,我先不考慮配色和氛圍渲染的事情,我就這樣光溜溜的排個版出來再說,這里的排版方式和字體選擇主要考慮樂個方面,一個是照片原本的條件限制,一個是圍繞著浪漫這個主題去做,最終排版如下圖所示:
一個淺色一個深色,大家可以對比看看效果。
這幅海報就這樣隨便看看其實也是可以看的,只是缺少細節和情感,也沒有特別的吸引力罷了,最重要的是不夠浪漫。
那么到這一步,我們就可以繼續細化配色方案,分配色彩比例,優化細節,增加最重要的一些氛圍渲染步驟了。
所以我繼續優化海報,最終得到了下面這幅海報:
這張海報的背景是我用ps自帶的筆刷刷出來的,順著一個方向刷出一種墜感,這就是起到一種氛圍渲染的作用。
然后,雖然粉色和紫色也算是同色系的顏色了,但是因為明亮的粉色與暗色調紫色在明度上有很大的落差,所以等他們組合在一起就會有一種碰撞的感覺,給人的視覺記憶力就會強一點,暗色也給人跟多神秘的感覺,讓人琢磨不透。
畢竟,讓人琢磨不透的人比一眼就能看穿的人給人更多聯想和猜測,有插曲有意外的浪漫愛情給人的印象才會比較深刻一點,對吧~
同時,為了方便大家理解,我又做了以下幾個版本,大家可以對比看看色彩的差異給人感覺上的變化。
比如,如果我改變畫面的明度,提高畫面的明度,如下圖所示:
這樣看,是不是畫面給人的感覺要少女很多?而且給人一種很溫柔的感覺,但是盯久了會覺得甜膩膩的。
如果前面第一版暗色調的是為20-40歲左右的女人而設計的浪漫,那么上面這一版則像是為20歲左右的小姑娘而設計的浪漫。
在這個基礎上,如果我既改變明度,也改變配色,給畫面加入非同色系的顏色,如下圖所示:
這樣看,其實感覺也很美對不對?美歸美,但是卻感覺比上面那一版還要膩,因為像是為兒童或小蘿莉小公主而設計的浪漫了,適用的心理年齡段更小了。
ok,我們接著往下看。
如果我將背景隨便換什么顏色,但是保持背景顏色是同色系不同明度的,畫面里有明也有暗,如下圖所示:
最后出來的感覺其實也是可以的,也很美,但就是少了一些抓眼球的感覺,覺得中規中矩的,沒什么特別之處,就好比那種平平淡淡的感情,缺少激情的感情。
但是這種同色系的做法,卻是平臺和品牌為了統一形象方便視覺規范化管理最喜歡使用的一種配色方式,對此,大家可以去留意一下天貓或京東的一些頻道頁面或者大型活動各個分會場的頁面配色。
ok,前面的配色技巧大家估計發現了,我要么是用同色系配色,要么是同色系改變明度和純度,要么是用不同色系不同純度但是保持明度一致,所以以這種方式去配色,無論你怎么配其實最后出來的感覺都是不會太差的,只是針對的受眾不同罷了,可以各取所需。
所以如果你不會配色的話,那么就在這些基本的框架規則里去變化就好了。這是非常保險的一種配色方法。
但是如果你不遵守這種規則,而是胡亂瞎配色,則很有可能會出現下面這種情況,要么是畫面顯得臟,要么是畫面顯得艷俗、花哨和亂,如下圖這些錯誤示范所示:
上面這幾幅圖雖然是一些錯誤的配色示范,但是很多對色彩不敏感的孩子可能也會覺得:「誒,其實也還行啊」,其實主要是因為有構圖的基礎在那里硬撐著,底子在那里,所以色彩即使配的不夠好糊弄一下也還行。
拿化妝舉個例子,為什么那些本身樣貌底子就好的人,即使亂穿衣或亂化妝你也覺得看起來還行,一旦她好好的打扮畫個妝,那簡直就是神仙顏值了,可底子不好的人呢?可能你就算再會穿衣打扮,你也只能變成看起來還行,到達不了神仙顏值的地步。
所以我再強調一遍,配色之前先構好圖,把底子打好,這很重要。
總結起來就是,做設計之前先確定主題,然后搭框架搞定排版樣式,接下來再考慮配色,再然后氛圍渲染,最后一步優化細節,over。
下面這些知識點都是我平時總結出來的一些配色小心得,是我屢試不爽的一些方法,分享給大家。
總結來說,我的配色技巧主要有以下幾種:聯想法、提取法、目的導向法則。
1. 聯想法
所謂聯想法就是,類似于頭腦風暴那樣,當拿到設計需求或確定設計主題后,我會提取一些關鍵詞,根據關鍵詞去聯想很多相關的可能,然后再去篩選一些結果為我所用。
比如下面這張照片,原本照片的顏色是很簡單單一的。
但因為我給他確定的主題是「野花的回憶」,所以我就會去聯想:「野花都是什么樣的顏色?」「回憶又是什么樣的色調比較合適?」,后來我就確定了野花主要以比較艷麗的色彩居多,比如玫紅色、亮黃色、白色等等,至于回憶嘛,可能就是有年代感了,所以大的基調是暗色調的。
于是下面這幅海報的色彩搭配就出來了。
其他用聯想法配色的還有很多,比如下面這一組。
原照片:
做成海報后:
不過這里需要說明的是,聯想法要求你會聯想,所以大家平時最好是多留意身邊的事物,多觀察大自然什么的,還有適當去了解一下色彩心理學,你會明白每一種色彩都是可以代表不同的感情和事物的。
通過長時間的鍛煉自己對于色彩的敏銳度,可以幫助你快速的配出自己想要的色彩。
2. 提取法
所謂提取法,就是當我們拿到某一個產品或模特需要圍繞著它們做設計,我們就可以直接從它們身上吸取顏色,作為主色或點綴色都可以,這樣搭配顏色的好處就是:省時省事不容易出錯,而且還有呼應主題和畫龍點睛的效果。
比如下面這張照片,原本照片的顏色就是綠色和淡粉紫色。
那我最后做出來的海報配色也是這些顏色咯,只是文字部分單獨用了白色而已。
哦對了,一般白色和黑色這兩種無彩色都是最適合用來作為標題或文字內容部分的顏色的,也是最不容易出錯的,同時聯想法和提取法其實是可以互相搭配使用的,不沖突。
但是,有時候我們如果希望畫面可以更活潑一點,一般做那種比較卡哇伊風向的設計,標題也會用彩色,而不是黑白無彩色,至于標題用什么彩色,也是可以用聯想法和提取法啦,如下圖所示:
3. 目的導向法則
前面的聯想法和提取法的配色方法是教大家如何選取顏色,但具體到哪里該用什么顏色,該用什么明度什么色相的顏色,則就取決于你的設計目的是什么了,所以我將它稱之為目的導向法則。
比如,之前我給大家提到過,有的設計是走藝術路線(以傳遞情緒為主,重在情緒上的表達),而不是常人理解的一般的商業設計路線(以傳遞信息為主,重在信息產傳達準確),前者適用于一切與藝術有關的設計或設計師個人的自由創作,后者適用于所有以賣貨為目的的商業活動設計。
這2種類型的設計目的是不一樣的,面向的受眾群體也不一樣,所以在色彩選擇上就會有差異。
舉個例子,當我們提到某某平臺又做活動了打折了,他還做了一個賣場促銷頁面,你去看看,絕對基本是以紅色、橙色等暖色系為主色,并且頁面氛圍做的非常熱鬧,就跟你去逛商場,映入眼簾的就是各種sale、大減價標牌,并且還有人拿著喇叭大喊:「進來看看進來瞧瞧啊!最后一天大減價買了不吃虧買了不上當啊!」的即視感。
并且,頁面里一些特別希望消費者能注意到的信息,它一定會突出處理,不僅字號要夠大,而且在色彩上也會突出。
拿我的書《這么設計能熱賣》作為產品圖做個示范,我做了一個促銷海報,如下圖所示:
但是,如果你去看一些比較性冷淡或大牌畫風的店鋪或官網看看,它完全就是一副我根本就不care你買不買的調調,倒不是因為他不想做生意,而是他的調性就那樣,比較自我或端著。
好比人家的定位就是孤傲的,或則是你高攀不起的大小姐和公子哥類的,買ta東西的人本來也就是這種類型的,或者希望別人覺得自己就是這種類型的,畢竟要彰顯自己的身價和品味,不能掉價撒。
所以,你看ta基本不會給你看大大的字號,也不會用一些很花里胡哨的顏色在標題上,而是以黑白灰這些無彩色居多,更不會特地用一些突出的顏色去醒目的區分一些字眼,總之頁面看起來不會有太濃的促銷氛圍
雖然我的書籍封面設計本身其實就不是性冷淡和大牌的風格,但我依舊做個示范給大家看看,如下圖所示:
而介于這之間的,也就是那些時尚類型的,或時尚里帶點促銷的,或放得下身段走點接地氣路線的牌子,則是會在保持好看時尚的基礎上,依舊會適當的用大點的字號或顯眼的顏色去突出一些重要的信息,但色彩不會用的太花哨,如下圖所示:
而像上面這種比大牌感親切一點又比大賣場時尚一點這種介于之間的情況則是絕大多數的,畢竟小眾的是少數,成為大牌是少數,雖然現在是大賣場但是不想走大牌路線路線的是少數,不想賺錢的商家也幾乎沒有,于是最終都淪為了不高不低的大多數。
總結來說,目的導向法則可以分為2種情況:
如果你想低調一點內斂一點,你在配色上就保守一點,盡量少一點顏色比如三種顏色以內,或者是用同色系或柔和點的顏色等。
就像一個性格很溫和或者很內向的人一樣,沒有攻擊性,安安靜靜的。
拿我之前做的一幅照片海報為例。
原先我是考慮讓這幅海報看起來有視覺沖擊力一點,但是我又不想畫面太過于張揚,畢竟我那天穿的衣身衣服色彩是比較柔和的橘粉色,所以我用了對比色而沒有用同色系,同時控制畫面里的顏色不超過3種,并且這幅海報里色彩之間的明度是差不多的,如下圖所示:
但如果我用同色系不同明度和純度來配色,出來的感覺就是下面這樣的,你會感覺畫面更淑女安靜一點,沒有什么攻擊性:
可是如果你想更加高調張揚一點,那么你在配色上就可以多用一些顏色,比如三種以上顏色,或則是用對比色或互補色而不是同色系配色,或則是純度高一點明度高一點的顏色,然后不同明度純度的顏色互相碰撞。
就像一個脾氣火爆性格張揚的人,他們不愿意淹沒在人群里,而是要做人群中最醒目的那一個。
我還是那上面那張海報改個顏色給大家看看,結果如下圖所示:
如果我想繼續突出大標題文案,那么我還可以將標題的無彩色白色換成亮黃色,畫面里的顏色更多了,沖擊更大了,甚至你會覺得有點花哨:
ok,上面這幾張圖,大家對比一下就會知道這其中的差異了。
所以記住啊,配色不是亂來的,它一定是有章可循的,也是要依據你的目的來配的。
當然,可能有人會說:「有時客戶給的主題實在是太晦澀難懂了,我實在是聯想不出來啊」,或者給到你的產品本身的配色就丑的不行了,如果你直接吸取顏色那做出來的設計肯定也是丑爆了,那么,這時候就要看你是不是有一顆靈活的腦袋能夠隨機應變咯!~
如果聯想不出來說明你百度總可以吧,然后自己要多看多積累你的腦袋里才有貨的。
如果原產品本身配色就丑那你就分析它丑在哪里加以改進不就行了嘛?比如它是因為純度太高了很艷俗,那么用低一些純度的同色系是不是就可以了?比如如果它是因為本身的色彩太多了很花哨,那么我們只選取一兩種顏色用用是不是就可以了?
再比如還有人說,給我的產品根本就沒有顏色,純白、純黑、純灰色,那我該怎么吸顏色?。?
天哪!~這種類型最好搞定了,因為無彩色就是萬能色,無彩色無論是搭配無彩色或者其他任意有彩色都可以的,這就又回到我前面提到的目的法則了,不懂的可以回頭再仔細看看~
平時也經常會有人問我到底該看什么書來提高配色能力,其實我想說只要你掌握了我前面提到的基本的色彩構成原理這些基礎知識,剩下的其實都不需要你繼續去看其他的色彩書籍了。
因為看其他書籍無非就是要擴充你的知識面罷了,它只是其中一種增加知識儲備的途徑而已,但現實是很多人寫的書一看就讓人犯困,而且晦澀難懂,你買了也是浪費錢,倒不如通過看設計網站、看時尚雜志、看電影、多觀察大自然等有意思的途徑去培養自己對于色彩的敏銳度,然后看看我的干貨文章勤加練習,多實踐多思考來的有用。
尤其是大自然的色彩,那真的是一個超級大的配色寶藏啊,你隨便看看那些花花草草、藍天白云、日出日落、海底和大地,哪個配色不是美的讓人驚嘆?就連那些惡心的毛毛蟲都有一身好看的不行的顏色。
我們做的很多設計,不管是什么行業的設計有關顏色的,電影也好,三維也好,平面的也好,其實基本都是來源于大自然的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
前天看完大陸畢業展海報合集,不少小伙伴大呼看得不夠過癮。為了滿足大家炙熱的求知欲與上進心,美丫姐又花足工夫找來了今年港澳臺、日本、歐美等地畢業展海報。依舊干貨十足,依舊吐槽猛烈,希望優秀如你,能夠看得開心。
首先我們來看看讓人印象最為深刻的優秀作品。
渴望自由的金魚
魚缸中的生活再怎么無憂無慮,也攔不住金魚一躍而出的渴望,就像噴薄欲出的創意,就像按捺不住跑出校園的畢業生。
架著一個歪斜的棚子,支撐著我們的二十二
猛然撞上了即將踏入社會的迷茫與不安,臺科大的莘莘學子鼓起勇氣,向老師詢問著最后一個問題「老師您看這展廳,供電是不是不太夠?」
伏流
有時候你以為自己發現了一股清泉,其實全是大佬手里玩剩下的,人外有人,天外有天。
喜歡做,肝愿受
其實大家剛畢業頭幾年也是這么想的,幾年之后肝還好,頭很冷。
后浪
長江后浪推前浪,后浪還有后后浪。大家都是被時代的洪流裹挾著前進,顯然這屆畢業生還沒畢業,已經被學弟學妹們震得神志不清了。
超人請回答
整個童年,大人都忙著策劃一個玩笑,讓孩子天真的相信世界上真的有超人,等到成年之后他們再哈哈大笑「哈哈哈她真的信有超人」,偶有不愿從童真中醒來的人繼續尋找,你們等著,遲早給你們找來真的超人。
青浪
用各式紋理堆疊表現出了「浪潮」的韻味,既能聯想到青出于藍勝于藍,又有長江后浪推前浪的語境,畫面動感,銳意十足,就是不知道早就畢業的學長們會怎么看。
那個967呢?
找了很久只找到「967=很想你」的說法,但想來不至于借畢業海報,發出「憑什么就我四年沒有戀愛」的吶喊,越不知道就讓人越想知道,竟有一絲等待戈多的意味。
非想非非想
到底是佛光普照大學畢業的學生,還沒出校門,就已經參透了甲方的真諦,非想,問他想要什么,說不出來;非非想,卻總能提出一大堆意見。
泛流意識
總說要把意識匯聚成一道洪流,變成一道鐵流,細想也沒什么不對,畢竟鋼鐵、石頭、血紅細胞里都含有鐵元素。
靈光乍現
靈光就像這一坨奇妙的東西,摸不著更說不清,出現的時候總讓人欣喜若狂,定睛一看,可真不是個東西。
層
明志科技大學旗下有兩大門派,一派工業設計,一個視覺傳達,兩大派的關系想必是劍拔弩張,一派冷靜沉穩,舍我其誰。
眼波
一派浮夸前衛,閃瞎人眼。
畫語者
老獵人除了酷愛炫耀獵物,更愛炫耀不離身的老獵槍,情人眼里出西施,用心愛的工具們鋪滿整張海報,還能有誰比他們更愛這個行業。
形象組無能
「海報做成這樣,都怪老師舉棋不定」,多少年后才突然醒悟,原來老師的猶豫不決,是為讓我享受最后一次任性的機會。
輪迴
「誰TM把燈打開了?」。不,是天又亮了。多少優秀的作品背后,都是無數個日日夜夜的輪回
今宵霓爛
在陳列室打碟,在畢業展上蹦迪,如果連想都不敢想,那你憑什么認為你能改變這世界?
其次是第二梯隊,雖然不算突出,但也算優秀作品。
淘色風波
齷齪的語意,來自成人齷齪的內心,讓家長面紅耳赤的「淘色風波」,不過只是畢業生們翹課逛展打游戲。
新一代設計展
廢掉的第一稿千萬別撕,不然最后出街時就是這個鬼樣子。
被……的那五年
科大的畢業展為什么延期了五年?估計是地圖畫得太爛,大家花了五年才找到舉辦的地址。
發聲關系
「喔」「啊」「曰」,奇了,大家都是紙打印出來的作品,憑什么就你們家海報有聲音?
生長輪
樹木的年輪記錄著時光,每當有大事發聲,從年輪中就能看出一二,你看今年新的圈圈它又白又圓。就像學生們畢業一樣,腳踏實地、悄無聲息。
升溫計畫
溫室效應?冰川融化?這些都遠遠不夠,沉默四年平淡如水,如果一生一次的畢業大展再不燥起來,那可就真的畢業了。
外出取材中
悶在家里一時爽,一直悶著一直爽?活像躺在盒子里的量產玩具,該出去走走,看下絢麗多彩的世界了。
三角關系
創意、媒介、受眾,所謂傳媒,正是一場相愛相殺的三角游戲。
零睡時間
你以為躺在床上就是不思進取?不,我是在夢里收集創意,一時的休憩,是為了更好的前進。
問HOW
寒窗十數載,大人都說不懂就問,步入社會才知道大家都只能強撐,明明面對奇葩需求,想要大聲反問一句「HOW?」看看癟掉的錢包,只能脫口而出,說一個「好」。
蹦起來
設計水平還沒那么高的時候,一定記得猥瑣發育不要太跳。不然,甲方連頭都給你錘爆。
最后是第三梯隊,先不論好壞,總之看得人迷惑得很。
復燃
想讓葬愛家族設計風潮死灰復燃,甚至風靡世界也不是問題,只需簡單一步,把地球表面刷成 QQ 空間那么黑。
扔出去的,頭也不回
扔出去的飛機稿就別再撿回來了,即使馬糞風干后看著像塊巧克力,但只要你一舔就會發現,呸,果然還是那堆馬糞。
是生活
懷疑是在暗示黃色比生活更吸引人,但手上又沒啥證據。
一體兩面
思維定勢是一件很可怕的事情,比如甲方經常讓把大象換個面,覺得不是正面就是反面,可換來換去還是不滿意,就沒想過,甲方要的是橫切面。
藝眼瞬間
好設計讓人瞠目結舌,覺得語言乏力,丑的設計也能讓人瞬間語塞,根本說不出丑在哪里。
DNA
看完臺灣大葉大學官網上的師生風采,就能明白這確實是一所連空氣都飄著直男審美的理工科大學。
也就不難理解為什么連設計系學生們的畢業海報都會有這么大一股子消毒水味。
記得呼吸
比起上一張工業設計系海報的冷靜,視覺傳達系海報走向了另一個極端,線條凌亂,張牙舞爪,若不用文字提醒「記得呼吸」,不少觀眾會因為過于震撼憋死在原地。
跨越
連著領導的修改意見以及刪除線,一齊打印出來的終級作品。
「香港的呢?」抱歉,一張都沒找到。
日本,設計強國近鄰日本。今年畢業展海報也是頗有看頭,他山之石可以攻玉。
1. 多摩美術大學
能順利畢業的,都是怪物。
2. 武蔵野美術大學
感受撲面而來的鄉土氣息。
3. 東京藝術大學
這就是設計師通宵后倒下的身影。
4. 東京造型大學
綜合各位老師意見之后的海報作品。
5. 東京五藝術大學聯合展
「我用圖畫工具都比你畫得好!」「好好好你行你來?!?
6. 倉敷藝術科學大學
「快從樓頂下來,這次真的不改了!」「你們簽字畫押」。
7. 京都精華大學
學習四年,設計使我面目扭曲。
8. 京都造型藝術大學
套用學長給的模板,但忘了改日期。
9. 金澤藝術工業大學
金澤大學深造多年,最拿手的就是往產品上噴金漆。
10. 岡山縣立大學
讓我看看,誰還沒交畢設作品。
11.日本桑澤設計研究所
我們的展區在山頂上,請大家參展時做好御寒準備。
12. 名古屋藝術大學
為了讓畫面更豐富,我放了 267 頂帳篷。
13. 奈良藝術短期大學
畢業考試第一題,畫出任課老師的臉。
14. 文化學院大學
反正到時候大家都是要哭的。
歐美地區畢業展海報內容更加現代,但因為文化差異較大,消化起來相對比較困難,這里就不一一吐槽了,大家自由學習。
1. 路易斯安納州藝術與設計學院
2. 倫敦都會大學
3. 美國Art Center
4. 英屬哥倫比亞大學
5. 美國馬里蘭藝術學院
6. 英國皇家藝術學院
想不到你這幫濃眉大眼的英國人,也玩「愛滴魔力轉圈圈」。
好了,以上就是今天的全部內容,誰要是還覺得不過癮,只能老老實實等明年新生畢業了。
總體說來,亞洲地區文化的多樣化性,還是完勝歐美,這點非常值得欣慰,但是回頭看看大陸畢業展海報,又千篇一律到讓人完全開心不起來。總之還是那句老話,革命尚未成功,同志,仍須努力啊。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn