網站首頁 趣味美術 生活小製作 兒童製作 親子互動 陶藝製作 傳統手工 民間手藝 歲月綻放 創意與設計

Photoshop打造超絢的3D字插畫

欄目: 設計教程 / 發佈於: / 人氣:4.58K

效果圖看上去確實非常壯觀,色調非常和諧,文字視覺效果突出,而且背景紋理渲染的很經典。整個效果製作的天衣無縫。完美到了極點。不過製作起來需要花費大量的精力。

最終效果

Photoshop打造超絢的3D字插畫

1、如何開始,最好的開始方式是給字母找到合適的顏色。在這篇教程裏,背景的顏色是很陽光的,給我們一個很溫暖的感覺。在這裏,我們將使用冷色調。

首先我們需要新建一個1350*1600px,分辨率爲300px/inch的新文檔。創建一個新層並作簡潔的顏色匹配。不要使用你選擇的第一種顏色,要嘗試一些不同的色調。難看的背景顏色往往會毀掉大家辛苦的工作。(簡單來講就是想讓大家多嘗試幾種顏色)

現在,我們找到了一個很好的匹配色,使用油漆桶工具(G),用#166a91填充新圖層。命名此層爲”background”(背景)。

Photoshop打造超絢的3D字插畫 第2張

2、背景的深度:現在我們需要的是給這個背景一些生命力!同樣,要花費一些時間尋找合適的顏色,嘗試使用一些適當的冷色調。我說的是找到一些深的或淺的藍色。我使用的顏色如下圖所示。如果你已經選擇了一些很好的較暗的顏色(或如果你在選擇上有疑問那就使用下圖的顏色——我所使用的特定顏色)。使用畫筆工具(B),設置流量5%,硬度爲0%,並使你的畫筆直徑非常大,如你在下圖看到的一樣。創建一個新層,命名爲“bg_color”,用這個大筆刷在角落處塗抹。使每一個畫筆的新顏色塗抹在它自己的新層上。

嘗試塗抹不同的地方,基本上就是邊緣黑,中間亮。這樣你會得到一些不規則的漸變效果,這正是我們想要的。

Photoshop打造超絢的3D字插畫 第3張

Photoshop打造超絢的3D字插畫 第4張

3、調整顏色:

當你完成背景的着色後。這個顏色對我來說似乎有點亮,所以我決定去圖層面板,在所有圖層之上添加一個新的色相/飽和度調整層。然後,我稍微減低飽和度,消除一些顏色。

Photoshop打造超絢的3D字插畫 第5張

4、準備飛濺的紋理:

無論如何,污漬就是要點,你可以挑選一個自己喜歡的圖片。但它必須符合你的需求。現在點擊Command+T鍵,使用扭曲在這個畫面上做透視效果。然後點擊Command+Shift+U減低飽和度。在這層的縮略圖上點擊Command-click建立選區。按Command+C複製它。(Command=Ctrl以下相同)

Photoshop打造超絢的3D字插畫 第6張

5、創建潑濺,形狀和陰影

回到我們的主要項目文檔。使用鋼筆工具(P),繪製一個潑濺的形狀,然後把它變成一個選區。首先在所有層之上創建一個新層,命名爲“texture”(紋理)。現在去編輯>粘貼到。我們的紋理現在應該是動態的粘貼到選區上,就意味着你可以改變選區內部的位置。現在改變該層的混合模式爲疊加,並設置不透明度爲70%,得到的效果應類似於下圖2(就是第二張圖片)。

現在在所有層之上創建一個新圖層,其命名爲“splattershading”(飛濺的陰影),使用畫筆工具(B),改變顏色爲#125361。確保你的畫筆設置非常柔軟,硬度0%,流量10%。現在在紋理層上做一個選區(Command-click圖層的縮略圖)。看看下圖3,塗抹在指定的地點。我們需要變暗這一飛濺的內邊緣,創建一個凸面的視覺效果。這個飛濺需要突出一點,不能太平坦。請參閱下圖4和圖5。

Photoshop打造超絢的3D字插畫 第7張

Photoshop打造超絢的3D字插畫 第8張

6、創建邊緣高亮效果

OK,上一步創建了一些陰影,現在開始做邊緣高亮效果。看看下面的第一副圖像。我做了一個小小的準備(這不是你必須要做的)。在你添加光亮之前需要想象做成什麼樣子它纔會顯得真實。因此,我創建了一些簡單的線條顯示出哪些地方是適合設置光亮的。

如果你已經準備好了,那就在所有層之上創建一個新層,其命名爲“splatterlighting”(飛濺光亮),在“texture”層上選擇選區。現在用同樣的畫筆設置和一個更亮的顏色#99e9ea,開始在指定的地點描繪(要在飛濺邊緣留下一點小小的空間)。

注意:記住你可以隨時更改你覺得不正確的地方,如果你塗抹了太多陰影或亮光,那就用柔軟的橡皮擦工具(E)擦除不需要的部分。

Photoshop打造超絢的3D字插畫 第9張

Photoshop打造超絢的3D字插畫 第10張

7、創建飛濺,筆刷設置

在我們繼續之前,去筆刷面板,並按下圖更改畫筆的設置。

這是爲什麼呢?用一個小的,柔軟的褪色筆刷,你可以輕鬆地使用鼠標塗抹。如果你在一個地方塗抹,畫出了一些失敗的線條,但是它們幾乎看不出來。請參閱下圖2,看看光線是如何建立的。下圖3上的白色箭頭會指示你如何塗抹。在每一個飛濺的外邊緣添加這些光線。

Photoshop打造超絢的3D字插畫 第11張

Photoshop打造超絢的3D字插畫 第12張

Photoshop打造超絢的3D字插畫 第13張

Photoshop打造超絢的3D字插畫 第14張

8、創建飛濺,添加光線

現在,不要改變你的畫筆設置,只是增加一點直徑,改變顏色爲白色。然後在所有層之上創建一個新層,命名爲“lightingoverlay”(光線疊加),設置這個層的混合模式爲疊加,開始在步驟6所示的同樣的點上描繪。創建一些很少的點,而不是行(爲的是突出高光效果,看下圖就明白了)。

Photoshop打造超絢的3D字插畫 第15張

Photoshop打造超絢的3D字插畫 第16張

9、創建飛濺,再添加些光線

繼續對選定的飛濺部分增加光線。記住你的直徑是動態的。你可以從大到小創建更好的光線。

你也可以藉助橡皮擦工具(E),用一個非常柔軟的橡皮擦,0%硬度和8%流量,添加細節。(這步需要的是耐心與細緻!)

Photoshop打造超絢的3D字插畫 第17張

10、創建飛濺,修飾

接下來,首先在所有層之上創建一個新層,命名爲“splattertouchups”(飛濺修飾),並改變它的混合模式爲正片疊底。重新設置你的畫筆,設置畫筆硬度爲0%,流量5%,改變顏色爲#125361。現在看下圖1,並在指定的地點修飾。然後切換到白色,創建一個新層,命名爲“splatterlight”(飛濺光亮),然後使用相同的畫筆設置添加一些更多的光線到飛濺上。

Photoshop打造超絢的3D字插畫 第18張

11、陰影過程解釋

在我們進入創造飛濺陰影之前,這裏有幾件事情你需要了解:

1:當你想在三維空間裏放置一個物體,你需要注意你的光源在哪。

2:記住物體自己投下的陰影(參閱下圖,“”theshadowbetweenboxanddesk”(盒子和桌子之間的陰影)。這是很多設計師容易忘記(或不知道)的事。

3:這意味着有時候一個物體陰影的多少取決於光源以及它的位置。

4:也要記住的“darkenedarea”(暗區)(參考下圖)始終保持比其他地方暗。

5:它同樣也有“lightenedarea”(亮區),這亮於物體中其他的部分。

活力盒子注:如果你學過美術或者素描,那麼上面的道理很容易就能明白。

Photoshop打造超絢的3D字插畫 第19張

12、創建飛濺,陰影過程

我們沒有規定光的來源,因此我們將跳過光源所造成的陰影。我們只要關心以下這個飛濺圖形的陰影就好(參考上一步驟的解釋2)。

Photoshop打造超絢的3D字插畫 第20張

Photoshop打造超絢的3D字插畫 第21張

13、飛濺陰影

現在飛濺的陰影和非陰影的地方就有了一個輕微的區別。在本教程的第二部分,我們將使表面更髒,這將提供一個新的更大的陰影效果。

我們即將要完成了,但在我們繼續之前,我希望你再看看下圖3。也許你想知道爲什麼這些地方沒有影子?這個飛濺就像一個三維物體,因此如果你在3D程序裏旋轉它,能看到每一個邊是什麼樣子的。現在,如果你可以看到飛濺的右邊,陰影確實是存在的。但是,從我們的角度(前)看,卻是不可見的,所以我們不添加它。

這有點兒很難解釋,有時你只需要想像在現實中它會是什麼樣子的就OK。

Photoshop打造超絢的3D字插畫 第22張

14、文字準備

OK,我們已經做了飛濺效果,我們可以創造文字了。但在做之前,讓我們先看下面的第一幅圖。正如你所看到的,並不是整個飛濺都覆蓋着光線和陰影。粉紅色表示的區域看起來沒有完成。因爲我一開始就計劃在這個中間創建文本。所以,文本應覆蓋住背後這一點不完善的地方。

下圖2、3、4顯示了我基本上是如何做文本的。我做了一個小準備,因爲我不知道它會是什麼效果。這不是你必須要做的,但有時多嘗試一下也不錯。所以,現在這個平面文本激發了我很多靈感。這使我看到了我想要實現的目標。

Photoshop打造超絢的3D字插畫 第23張

Photoshop打造超絢的3D字插畫 第24張

15、3D環境下的文本

爲了將3D文字放在三維空間的表面,你需要設置地平線。看看下圖1。我的基線是我創建的飛濺形狀。在這裏地平線應略高於飛濺的頂部邊緣。你不必像我在下圖1這樣畫線,只要在腦袋裏想像一下這條線應該放在哪就可以啦。

在一些抽象作品裏這是沒有必要的,例如:字母在空中飛行,它們還可以旋轉等等。

在我們繼續創建3D文字之前,你也需要了解字母的位置:看看下圖2。如果字母放在地平線之下,那麼請記住,你是從高處看它們,這就是我們將創建的文本。

Photoshop打造超絢的3D字插畫 第25張

Photoshop打造超絢的3D字插畫 第26張

16、在Xara上準備文本

OK,,現在打開Xara3D6。正如我以前說過的保持字母的頂部可見。Xara是非常容易使用的,如果你花費約5分鐘,你就會知道一切。在下圖,我指出了一些更重要的被用來生成這個文本的選項。我建議你使用你自己的設置。但是,如果你想達到的目標和我類似,那麼顏色就用這個:光1:#FBDBFF光2:#EF72D2光3:#E35DB0

在其餘的顏色選項保持不變。

Photoshop打造超絢的3D字插畫 第27張

Photoshop打造超絢的3D字插畫 第28張

Photoshop打造超絢的3D字插畫 第29張

Photoshop打造超絢的3D字插畫 第30張

17、保存文本

人們有時會忘記有關Xara3D6以下幾點:

在你保存時,要去陰影選項,關閉陰影(不希望保留Xara自帶的影子,它看起來會非常糟糕)。

然後將文件保存到Photoshop的可讀格式,去文件>導出,選擇PNG格式,並按下圖2的設置保存該圖像。

Photoshop打造超絢的3D字插畫 第31張

18、調整文本

OK,我們以PNG格式保存了文本。現在,在Photoshop中打開文本,並將其拖到我們的項目中。然後點擊Command+T鍵(自由變換),選擇彎曲。設法使文字彎曲,有些弧度。這樣能提供更好的3D感覺。下一步參考下圖3:使用加深工具(O),設置範圍是中間色調,曝光度爲25%,在每個字母的底部塗抹一點(後面這將有助於更好的實現陰影效果)。在此之後,應用圖層>調整>可選顏色更改文本的一些色調(下圖4和圖5)。這取決於個人品味。嘗試調整大部分紅色,因爲這個選項會主要影響你的粉紅色文本。

Photoshop打造超絢的3D字插畫 第32張

Photoshop打造超絢的3D字插畫 第33張

19、文字修飾

現在看看下圖1。我曾指出圖像的一些地方看起來很糟糕。這個深色不完全適合我們的圖像。另外,紅色箭頭指示的點是Xara破壞的,這看起來很髒。我們將會把所有這些點修飾一下。因此首先使用鋼筆工具(P),在文本上看不來不好的點上描繪一條路徑(紅色箭頭指示的地方)。打開這個選區(點擊右鍵>創建選區)。然後選擇仿製圖章工具(S),參考下圖3。你的設置要和我的一樣(也設置爲0%的硬度)。然後修飾這個看起來不好的點,這樣它在新層上就完美了~

Photoshop打造超絢的3D字插畫 第34張

Photoshop打造超絢的3D字插畫 第35張

Photoshop打造超絢的3D字插畫 第36張

20、文本修飾,加亮

現在修飾其餘糟糕的點。在文本圖層之上創建一個新圖層,你可以命名它爲“textcorrection”(文本更正),並改變其混合模式爲疊加。使用畫筆工具(B),更改筆刷設置,流量爲10%,硬度0%,並使用一個大的直徑。現在選擇顏色#ffbdf3。下一步按住命令鍵點擊文本圖層的縮略圖選擇選區。然後用軟筆刷在看起來暗的點上塗抹。

其主要任務是使用一個明亮的粉紅色(與文字顏色相匹配),用疊加的混合模式覆蓋了一些不完善的地方。你也可以修改文字表面一些隨機的點,這會給文本一個不錯的色調。

Photoshop打造超絢的3D字插畫 第37張

21、創建光環

現在,讓我們創建光環。我在下圖寫上了要做的一切,你應該能夠很容易地按步驟做到。最主要的是在文本的中間到頂端建立一個柔軟的漸變。你可以按自己的想法做,但我認爲下圖的方式很酷,很快。

Photoshop打造超絢的3D字插畫 第38張

Photoshop打造超絢的3D字插畫 第39張

Photoshop打造超絢的3D字插畫 第40張

22、創建倒影(折射效果)

我們將創造一些深度。這些文字現在看起來不錯,但是它沒有什麼特別的。我們需要給它們一個更獨特的外觀。我們要創建一個錯覺,該文本在它的環境中反映了一些事物。而這是沒人會在意是否反射出了真正的還是虛無的物體,只要它好看就行了。

因此,按住命令鍵點擊文本層縮略圖選擇選區。然後點擊Command+SHIFT鍵+C(複製合併)和Command+V(粘貼)。現在,我們得到了完全相同的整個文本的副本。命名此層爲“Reflection1”(反射1),重複複製這層幾次,依次命名爲“Reflection1″,”Reflection2″和”Reflection3″。

現在使用其中一個反射圖層,點擊Command+T鍵(自由變換),如下圖1旋轉它,然後選擇原來的文本層(下圖2)。去選擇>反選,點擊刪除(記得當你點擊刪除時選擇了變換反射層)。你應該得到類似於下圖2的圖像。

然後改變反射層的透明度大概15-20%,並設置其混合模式爲疊加。你應該得到如下圖3的效果。確保反射層只在文本表面,因此如果它出界了,就用柔軟的橡皮擦修飾(如下圖4)。

重複反射過程2-3次,直到覆蓋了整個文本(小心,不要把它弄髒)。請參考下圖5,得到的結果應該是這樣的。

Photoshop打造超絢的3D字插畫 第41張

23、光環和反射糾正

現在,我們使光環和反射的效果更強。使用橡皮擦工具(E),設置其流量爲5%,硬度爲0%,然後用一個小橡皮擦擦除每個字母周圍的光澤(如白色箭頭所示)。然後切換到減淡工具(O),設置範圍爲中間調,曝光度爲20%左右,併爲每個字母添加一些深度(如紅色箭頭所示)。射過程2-3次,直到覆蓋了整個文本(小心,不要把它弄髒)。請參考下圖5,得到的結果應該是這樣的。

Photoshop打造超絢的3D字插畫 第42張

24、文本修飾

現在,讓我們解決一些光線問題。顯然文本的左上角比右上角亮(見下圖1)。。當然文本的某些區域是沒有光源的,但我們的重點是修飾最強的光源。

看下圖2,它看起來缺了一些東西。其餘這些字母有很好的光線和陰影。但字母“L”和“R”的頂部幾乎沒有陰影。它可能是由於Xara的光線造成的。但這不是問題,我們將修復它,之後它看起來就好多了。

因此,創建文本選區(下圖3)。使用與之前相同設置的筆刷工具(硬度0%,流量5%),更改顏色爲一些較暗的粉紅色(#79185d)。在所有圖層之上創建一個新層,命名爲“additionalshade”(額外的陰影),開始在這些字母頂部的右上方塗抹,參照下圖3。

下一步在所有圖層之上創建一個新層,命名爲“additionallight”(額外的光線),並重復同樣的過程,但這次要從這些字母的左邊塗抹(見下圖4)。

注:記住如果塗抹的不對,要用柔軟的橡皮擦擦除。

Photoshop打造超絢的3D字插畫 第43張

25、文本修飾

去圖層面板,在所有圖層之上建立一個新的漸變映射調整圖層。選擇從黑色到白色的漸變,類似於下圖1。然後改變這層的混合模式爲柔光,降低不透明度至70%(下圖2)。

最後調用文本層選區,去選擇>反向。然後到圖層面板,選擇了漸變映射圖層的蒙版。使用油漆桶工具(G),改變顏色爲黑色,填充蒙版(下圖3)。

現在,我們要確保這個漸變映射隻影響該文本,不影響其他的。

Photoshop打造超絢的3D字插畫 第44張

26、文本修飾

現在做一個小細節。改變你的筆刷設置,硬度100%,100%的流量,然後使用鋼筆工具(P)。首先在所有層之上創建一個新層,並在每個字母頂部作一條曲線或直線。當你完成後,右擊選擇描邊路徑。請確保模擬壓力被選中。

Photoshop打造超絢的3D字插畫 第45張

Photoshop打造超絢的3D字插畫 第46張

Photoshop打造超絢的3D字插畫 第47張

27、創建文本陰影

我想最難的部分經常是增加陰影。首先讓我們在飛濺和字母之間建立一個標準的陰影。

在開始之前,請記住用與表面相同的顏色創建陰影是不錯的選擇。因此,我們飛濺表面的顏色爲淡藍色,那就選擇深藍色(#092330就行)。現在使用畫筆工具(B),設置0%的硬度,其餘的選項如下圖。

在文本圖層之下創建一個新圖層,命名爲“textshadow”(文本的陰影)。先用一個小直徑筆刷在文本下方添加一些細微的陰影線。然後把直徑變大填充字母之間的區域。

注意:軟橡皮擦始終能幫助到你!

Photoshop打造超絢的3D字插畫 第48張

Photoshop打造超絢的3D字插畫 第49張

Photoshop打造超絢的3D字插畫 第50張

Photoshop打造超絢的3D字插畫 第51張

28、最後的調整

我們第一部分的教程即將結束。我在完成之前通常會做一些總體的調整。因此,去圖層面板,創建一個新的漸變映射調整圖層,選擇“紫,橙”預設,單擊確定。然後改變該層的混合模式爲柔光,不透明度降低至20%左右(這會給圖像多一點冷色~)。

重複這一過程,但這次創建一個從深藍色(黑綠色)#202930到淺色(甚至灰色)#31505b的漸變。設置這層的混合模式爲柔光,不透明度爲80%左右。這將增加一些色彩和對比度。

此文字看上去對我來說仍然太冷,所以我決定使用相同的步驟再創建另一個漸變。這一次我使用了#2e2111到#e2be84(下圖3)的漸變色。這些棕色的,黃色的顏色能增加更多的溫暖。再次改變這個圖層的混合模式爲柔光,不透明度30%左右。

最後,你可以添加曲線調整圖層。這不是必要的,但我認爲黑暗和對比色調能體現出不錯的感覺。你也可以在曲線中應用紅色通道,使文字的顏色看起來更理想。

Photoshop打造超絢的3D字插畫 第52張

Photoshop打造超絢的3D字插畫 第53張

Photoshop打造超絢的3D字插畫 第54張

Photoshop打造超絢的3D字插畫 第55張

29、最後的修飾

在添加了一些漸變之後,我決定移動一些光線(白色箭頭所示)。我還更正了一個小陰影,因爲它看起來太暗太密。你可以看到下圖2,我降低了文本和飛濺之間陰影的透明度。這只是因爲曲線使它顯得有點暗。

準備好做任何更正,調整顏色和對比度之後,有時你可能還想改變一些細節。,看看它是否給了你一個清新的形象。

Photoshop打造超絢的3D字插畫 第56張

最終效果:

Photoshop打造超絢的3D字插畫 第57張


感謝作者活力盒子譯投稿。