photoshop-3d-candy-fonts-1

做一款3D糖果文字,并不是想象中容易。你得非常熟悉PHOTSHOP的圖層樣式的各種參數和性能,這一過程也幾乎完美地涵蓋了全部的圖層樣式,值得大家深入探索。今天@飛屋睿UIdesign?的教程不僅教你怎么做,而且具體說明了為什么要這么做,參數的意義在哪,絕對是新手最受用的教程,來收!

一、要用到的文字和紋理

關于糖果文字的字體,并不十分局限。我個人推薦的使用圓圓胖胖的英文字母,看上去有可愛感,比如我在這里使用的BubbleGum Regular。紋理的使用,我采用了斜紋,你也可以使用其他的紋理。在我的收藏夾—紋理中你可以找到各大免費紋理下載的網站,去尋找適合字體的紋理。我個人的感覺是英文比中文更適合此類風格,中文由于結構比英文更為復雜,會顯得整體線條不夠明朗,所以如果內容是中文的,謹慎之!

素材打包 ?百度云下載:http://pan.baidu.com/s/1kT2Ik0R

二、開始創建文字

STEP 01

打開PS,新建一個寬800px高600px的新文檔,如果只用于網頁上瀏覽無需打印則將分辨率設置為72。

STEP 02

可以將背景填充藍色背景。其實背景色只是為了接下來創建文字的需要。這時,可以在畫布中央用BubbleGum字體寫上你的文字,例如我在這里寫的“sweet dream”,當然這是為了應景。

STEP 03

把這兩個文字圖層復制一層,然后將復制層的填充降低至0,相信關注我的同學會記得曾經在《PS新手教程!手把手教你繪制一枚擬物化水晶紐扣》中已經有對于降低填充為0這一做法的印象。而在這里,我們這么做的目的是為了給文字增加高光。具體的做法讓等到教程的末尾我們再拭目以待。

三、層出不窮的圖層樣式

我們在這里要使用的圖層樣式可謂“層出不窮”,關于圖層樣式,對于初學者來說想必是一個盲點。這個盲點并非不知道如何使用,而是對其中的原理和復雜的因果關系理順無力,為了解決這一盲點,我的看法是,練習!經驗出智慧。只要大家多操作,慢慢就能懂得這些參數的意義,而不是死記硬背然后投入實踐時又茫然無措。

我接下來會一步一步為大家展示我的操作參數和應用參數的效果。對于每一步希望初學者多多加以體會并結合自己的操作實踐。

就從“sweet”開始吧。

STEP 04

給圖層應用圖案疊加。對了,就是讓我們的白色文字鋪上斜紋圖案。這一步比較簡單。大家可以看到我把縮放調整到10%,這意味著這一功能可以縮放圖案的大小。

STEP 05

給文字增加立體感的時候到了,第一步從“斜面和浮雕”開始。大家可以看到“斜面和浮雕”的參數面板,其中分為結構和陰影兩個部分。結構顧名思義就是對整體的立體感的塑造,比如對象的深度之類進行設置。在開始這一部時,你對文字就要虛擬一個光源,這樣在心里清楚哪里應該為陰影哪里為高光。對于光澤等高線需要你手動調整,才能讓邊緣的深度變得更加有層次感。

STEP 06

來到“等高線”這一樣式的參數,我們再稍微修飾一下深度的表現形態。這時,也需要我們手動設置等高線的曲線。

STEP 07

“紋理”一項,在我們的圖案疊加的基礎上,再運用一層紋理,這層紋理給文字增加了更多細微的質感。

STEP 08

接下來讓我們應用“內陰影”這一效果。在其參數面板中對陰影的混合模式設置為白色的“顏色減淡”,它的角度應該是和我們在STEP 05中設置的光源的方向剛剛相反,這樣才能表現出陰影。而這里的陰影雖然是運用了比較高光的發亮的效果,但其他是利用了邊緣的深度來創建的,強化了整體效果的透明感。

STEP 09

這時,我們想要讓高光區域也同樣變得更有透明感,光線更強一些。那么我們就要拿出“內發光”的樣式。通常,內陰影和內發光是結合一起使用的。內發光的參數面板讓我們先將混合模式設置為“線性減淡”,顏色可以運用深棕色的漸變色系。顏色的選擇是配合了我們的圖案的色系。

STEP 10

給文字的整體添加上“光澤”效果,這里需要注意的是光澤的色系也需和黃色搭配,為一種淺黃色。設置角度的時候牢記住自己的虛擬光源的位置。

STEP 11

由于在這里,我們看到文字經過幾次高光的影響紋理的細節不夠清晰,這時,我們就需要讓細節更凸出,做法就是應用上“顏色疊加”,疊加的混合模式變為“正片疊底”,目的是為了讓細節凸顯出來,但又不至于太過暗淡。

STEP 12

為了讓文字更具立體感,我們可以為它應用上“漸變疊加”,漸變疊加的目的是為了加深文字的頂部和底部,因此這里需要注意的是漸變模式運用的是對稱漸變。

STEP 13

最后一步給文字添加上陰影。陰影的光源位置也需要謹慎處理。

四、添加高光

還記得我們的復制層嗎?填充雖然被降低為0,但給它添加圖層樣式依然有效。這時,我們打開“sweet”的復制層的圖層樣式中的“斜面與浮雕”,為文字添加高光。而與此同時等高線變為弧形,增添了文字表面高光的圓潤感。

最后的成品:

把這兩個圖層的圖層樣式復制到另外一行文字,再稍微加以修飾,最終的效果如下:

后記

如果你的文檔大小和我們的案例中的不同,那你則需要在參數中鼓搗出另一個相應的值。相信經過一番練習,簡單的3D效果對你已經不是難題。初學者多多嘗試總是沒有壞處的。歡迎大家把自己的制作效果發到我的郵箱raysimon@126.com,任何提問必復。

【本月人氣最高效果最酷炫的PS教程】

原來這些黑科技效果這么簡單!
《有哪些看上去很高大上,但實際很簡單的PS技巧?》

你肯定見過這個效果,它叫德羅斯特效應!
《PS教程!教你打造超酷炫的德羅斯特效應》

震撼力爆表的街舞大賽海報!
《PS教程!教你快速打造視覺沖擊力MAX的街舞大賽海報》

原文地址:ifeiwu
作者:@飛屋睿UIdesign

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 2

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏