零基礎掃盲,正片疊底的應用方法

2021-03-02 設計圈

首先了解一下什麼是圖層混合模式?就是相鄰兩個或多個圖層之間的融合關係,這裡下層是基色,上層是混合色,我們看到混合之後的效果稱為結果色,當只有一個圖層時,就不會形成混合的效果,所以起碼要有兩個圖層才能實現圖層的混合模式。

PS中共有27個圖層模式,自動分了6組,之所以這樣分組是因為每一組都會產生相似的效果,第一組正常模式,需要降低圖層的不透明度才能產生效果。第二組加深模式,讓圖像變暗,使用時白色將被較暗的顏色替代 ,是比較常用的模式。第三組減淡模式,讓圖像變亮,圖像中的黑色被較亮的顏色替代,也屬於常用的模式。第四組,對比模式,增強圖像的對比度,也是常用的模式組。第五組,色異模式,通過圖層之間的比較而形成的一種反差的效果,不常用的模式。第六組顏色模式,依據色彩中三個屬性(色相、飽和度、明度)對圖像進行混合。今天,我們主要就是介紹加深模式中的正片疊底。

先來了解一下正片疊底的原理。一個房間放置一臺投影儀,打開之後會有一束光投到牆面上,當我們在前面放置一個透明的紅色塑料板,投到牆面上的顏色就會變成紅色。換成綠色的,牆面的投影就變成綠色。換成藍色,投影變成藍色的了,正片疊底就是把顏色印上去,所以正片疊底的得到的顏色都比較暗。

基色與混合色,以正片疊底的模式混合,得到的結果色是比較暗的顏色。

當基色為黑色,混合色為白色時,以正片疊底的模式,得到的結果色也一定是黑色。

基色依然是黑色,混合色為彩色時,正片疊底的模式得到的結果色同樣是黑色。

也就是任何顏色的圖像與黑色,以正片疊底模式混合時,都會被黑色吃掉。

基色和混合色互換個位置,以正片疊底的模式混合時,得到的結果色是黑色。

同樣基色是白色,混合色為彩色時,正片疊底的模式得到的就是彩色。

也就是使用正片疊底模式的時候,圖像中的白色會被任何顏色所替代。

簡單的舉兩個例子,在這張圖片上,疊加一個黑白漸變的圖層,模式是正片疊底。可以看到紅色框內的圖像被黑色和灰色覆蓋變暗了,下面部分因為是白色,所以圖像沒有發生變化。

這張圖的上方疊加一個彩色圖層,模式是正片疊底,黑色的背景沒有產生任何變化,上方彩色被底層黑色的背景吃掉了。

這是一張白底的圖片,下方是米黃色的背景,正片疊底模式,圖像和背景就很自然的融合了,然後加入文字與網頁組件,這個簡單的設計就完成了。針對於這樣白底的圖片,用正片疊底的模式就免去了摳圖的繁瑣。這也是大家比較熟知的方法。

這是女鞋的產品圖,我們把它放置在一個漸變色的背景上,模式改為正片疊底,添加網格,按照網格添加主題文字,與網頁組件,這裡因為產品圖與背景漸變的色調差異不大,所以可以選擇用正片疊底,這樣也不會影響產品的色彩。

我們再看把它放置在一個黑色背景上,模式同樣是正片疊底,再加入其它文字信息,產品雖然不明顯了,但是主題反而突出了,畫面同樣很酷。

當你想表現產品的時候,可以選擇用淺色的背景,這樣既不會影響產品的顏色又會突出產品的特性。

當你想突出活動主題時,可以試試深色的畫面,這個時候產品雖然變為了背景,但是也不影響品牌氣質的傳遞。

正片疊底還能給圖像著色,這裡著色的圖像最好是單色的,或者處理成單色的再著色,這樣得到的圖像顏色比較純粹,方便後期的設計。

拿這張圖片來說,本身它就是單色的,所以我們不需要處理它,唯一不足的就是清晰度不夠,針對這樣的圖片,著色處理可以很好的規避它的缺點。

這張圖片傳遞給我們性感、神秘、迷離的氣質,所以我選擇了玫紅色作為著色。實際工作中,要根據自己的項目調性和畫面氣質去選擇著色。

添加文字信息,這裡我加了一個三角形,是因為整個畫面是比較規矩,方方正正的感覺,加一個不規則圖形來打破這種呆板,讓畫面更有變化性 。

給圖像著色還能怎麼用呢?當畫面中出現了一系列不同的圖片時,我們可以通過著相同的顏色來統一他們的視覺。當然我也可以通過著不同的顏色來區分他們的關係。

這裡有一系列的人物圖像,我想設計一個表現四種人格的電影海報。

首先把圖片放到畫面中,這個圖片組在畫面中的比例是黃金比1:1.618

接下來給圖片著色。因為要表現四種不同的人格,所以這裡用不同的顏色,模式都是正片疊底。

這個版面是比較規矩的,並且根據畫面氣質,我們可以選擇手寫字體,來增加畫面的變化性與戲劇性。

添加其他文字信息,為了讓下半部分與上面顏色有個呼應,在主題」FOUR「的文字上做一個漸變的處理,顏色就選擇圖片中的四種顏色。這個設計就完成了。

正片疊底還能做出色塊疊加的效果,這也是可以增加畫面形式感的一個手段。這裡我列舉一些比較常用的色彩搭配,可以給大家作為一個參考。

顏色的疊加可以作為字疊字的填色,這組文字的模式是整片疊底,左邊青色在下層,玫紅在上層,識別性很好。右邊我們把顏色調換,可以發現識別性就差了很多。

再來看一組,左邊是紅色在下層,藍色在上層,識別性很好,右邊反過來,識別性差很多。 

再來看一組,左邊是綠色在下層,藍色在上層,識別性很好,調換一下看右邊,識別性差很多。

所以大家有沒有發現這個規律,當我們做字疊字的時候,下層顏色的明度低於上層,或者通俗的講,下層顏色在視覺上比上層顏色暗的時候,使用正片疊底的模式,通常會影響文字的識別性。所以字疊字的時候,儘量選擇明度高的顏色放在下層。

這是一個耳機的文案,我們用它來做一個字疊字的案例。

一般在做字疊字的時候,可以放大文案當中的關鍵字作為底層文字,比如說數字、折扣、價錢等等 。這裡我選擇89元作為最大的文字,放到底層。

其他文字都在它上方,設置為正片疊底的模式。」3D立體環繞「放大用寬鬆型字距,「真實與品質感」共存可以簡化。「超長續航」這段文字縮小放到底下,作為點的形式出現。 

加上一些裝飾元素,這樣的一個字疊字文字組就做好了。

講到燈光,我們從中提取光源發散的形狀,來作為我們設計中的圖像。

把圖形放到畫面中,然後給圖形填充顏色,模式變為正片疊底,因為光是發散的,所以做一個漸變處理,在上方加一個截面,增加它的立體感。

然後再把圖像處理的有質感一些,濾鏡——雜色——添加雜色——10% 。

把分好層級關係的文字放到畫面中,圖形上方與下方的比例是黃金比1:1.618。之後再用網格來約束各個元素的位置,這個畫面就完成了。

接下來用這三張圖,做一系列的家具網站的Banner,同樣用到正片疊底的模式。

我們先畫網格,有的同學在後臺會留言問,到底應該先畫網格還是後畫網格呢,其實這個沒有固定的標準,比如說這裡我希望所有畫面中的元素都按照網格規範擺放,我就先畫網格。

放入圖片,這個圖片左邊沒有卡到網格上,實際上是它佔有了這個網格的一半,這也是可以的。

這個主題文字組我們用字疊字的形式,模式為正片疊底,畫面中要有呼應的顏色,所以填充一些點綴色。

第二個方案,我們用三個圖層的正片疊底 ,分別是圖像層、文字層和文字層。

版面搭建好之後,我們給畫面填充色彩,文字與圖像的正片疊底,還有文字和文字之間的正片疊底 ,畫面中其他元素也點綴的填充一些顏色,作為呼應。

第三個方案也是三個圖層的正片疊底,分別是圖像層、色塊層和文字層。

同樣先畫網格,添加圖片,這個圖片的兩邊,分別佔據了網格的一半。

然後放一個色塊,先以灰色代替,放主題文字、其他文字信息與網頁組件。

搭建好版面之後,就填充顏色,色塊和文字的模式都改為正片疊底,然後填充一些點綴色,這個設計就完成了。 

這節課到這裡就結束了,正片疊底是比較簡單的圖層模式,這裡我介紹了一些它所能應用的領域,還有一些領域比如說製造陰影、增強立體感等等。

希望今天的內容能夠對你有所幫助。那麼本期的分享就到這裡我們下期見!



關鍵詞回覆:

印刷、名片、海報、logo設計、茶包裝、色譜、折頁

BANNER、吐槽視頻、外賣餐飲、AV、報價、日式海報

版式、民國、軟體、奧運、福利、簡歷、月餅、天貓

雙十一、菜譜、紅包

(可見相對應知識文章)



創意 | 素材 | 產品 | 服務 

一個設計資源共享的微店 


發現 | 分享 | 成長

設計師的家園,交流設計中的難題

分享行業最新資訊

訂閱號:SJ-QUAN


分享/投稿/產品入駐

 sj-quan1  719155723

相關焦點

  • 掃盲貼——這才是[正片疊底]的正確打開方式!
    空心粉們,你們用過正片疊底和濾色模式嗎?哈哈我猜肯定很多空心粉都用過,不過相信很多人對於正片疊底和濾色的概念還是比較懵逼的,甚至對它還有些錯誤的認知。今天Air君邀請了小夥伴—克嘉,給大家好好梳理一下正片疊底和濾色模式的概念。
  • 教你用「正片疊底」調色
    圖層混合模式,是用函數的方法,對兩個圖層進行更複雜的混合,每個模式都有相應的公式,但是對於大多數人來說知道這些模式有怎樣的效果,怎麼用就行,至於原理運算不用太過在意,除非你真的很喜歡或者很像弄懂。我這裡不可能一次性講完,所以會分開來一樣一樣的講,這樣大家才能全面理解。
  • PS中黑字白底的素材如何使用正片疊底、疊加組、實色混合處理?
    PS中圖層混合模式如果對於黑字白底的素材,最常用的就是正片疊底,它是去白留黑的,下面看小編的操作吧!1.我們首先導入素材,製作一個大字體的效果。3.點擊右側圖層混合模式下,選擇——正片疊底。4.這樣就一鍵過濾掉了白色的背景了。5.還有的是給漫畫添加漫畫的邊框,拖入漫畫和漫畫的邊框。6.同樣選中邊框圖層,點擊——正片疊底。
  • 『PS摳圖』四種方法教你摳透明物體
    第一摳:圖層模式摳圖  圖層模式摳圖:充分運用了圖層模式裡的「屏幕」和「正片疊底」的性質來摳圖。說直白點就是某個圖層運用了「屏幕」後,該層的白色看得見,黑色看不見了;運用了「正片疊底」後該層的白色看不見,黑色看得見。  具體摳法大家往下看。  1、首先用工筆工具或套索工具勾出不透明的部分。注意:紅框裡的工具都是可用的,我一般都是喜歡用精確的鋼筆工具。
  • PS+SAI轉手繪教程:你不知道的古風水彩插畫上色方法
    基本的上色方法古風水彩插畫的上色方法有很多種,不同的畫師有不同的上色方法。下面介紹幾種我常用的上色方法。圖層疊加上色法這種方法是我最常用的,其效果非常明顯,但是唯一不好的就是採用「正片疊底」的圖層疊加會使顏色與顏色之間混合。這與選取的顏色有色差,一定要注意這一點。Step 01在Photoshop中打開線稿,首先複製一層線稿圖層,得到「線稿副本」圖層。