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

一、要用到的文字和紋理

關(guān)于糖果文字的字體，并不十分局限。我個(gè)人推薦的使用圓圓胖胖的英文字母，看上去有可愛感，比如我在這里使用的BubbleGum Regular。紋理的使用，我采用了斜紋，你也可以使用其他的紋理。在我的收藏夾—紋理中你可以找到各大免費(fèi)紋理下載的網(wǎng)站，去尋找適合字體的紋理。我個(gè)人的感覺是英文比中文更適合此類風(fēng)格，中文由于結(jié)構(gòu)比英文更為復(fù)雜，會(huì)顯得整體線條不夠明朗，所以如果內(nèi)容是中文的，謹(jǐn)慎之！

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

二、開始創(chuàng)建文字

STEP 01

打開PS，新建一個(gè)寬800px高600px的新文檔，如果只用于網(wǎng)頁(yè)上瀏覽無(wú)需打印則將分辨率設(shè)置為72。

STEP 02

可以將背景填充藍(lán)色背景。其實(shí)背景色只是為了接下來(lái)創(chuàng)建文字的需要。這時(shí)，可以在畫布中央用BubbleGum字體寫上你的文字，例如我在這里寫的“sweet dream”，當(dāng)然這是為了應(yīng)景。

STEP 03

把這兩個(gè)文字圖層復(fù)制一層，然后將復(fù)制層的填充降低至0，相信關(guān)注我的同學(xué)會(huì)記得曾經(jīng)在《PS新手教程!手把手教你繪制一枚擬物化水晶紐扣》中已經(jīng)有對(duì)于降低填充為0這一做法的印象。而在這里，我們這么做的目的是為了給文字增加高光。具體的做法讓等到教程的末尾我們?cè)偈媚恳源?/p>

三、層出不窮的圖層樣式

我們?cè)谶@里要使用的圖層樣式可謂“層出不窮”，關(guān)于圖層樣式，對(duì)于初學(xué)者來(lái)說(shuō)想必是一個(gè)盲點(diǎn)。這個(gè)盲點(diǎn)并非不知道如何使用，而是對(duì)其中的原理和復(fù)雜的因果關(guān)系理順無(wú)力，為了解決這一盲點(diǎn)，我的看法是，練習(xí)！經(jīng)驗(yàn)出智慧。只要大家多操作，慢慢就能懂得這些參數(shù)的意義，而不是死記硬背然后投入實(shí)踐時(shí)又茫然無(wú)措。

我接下來(lái)會(huì)一步一步為大家展示我的操作參數(shù)和應(yīng)用參數(shù)的效果。對(duì)于每一步希望初學(xué)者多多加以體會(huì)并結(jié)合自己的操作實(shí)踐。

就從“sweet”開始吧。

STEP 04

給圖層應(yīng)用圖案疊加。對(duì)了，就是讓我們的白色文字鋪上斜紋圖案。這一步比較簡(jiǎn)單。大家可以看到我把縮放調(diào)整到10%，這意味著這一功能可以縮放圖案的大小。

STEP 05

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

STEP 06

來(lái)到“等高線”這一樣式的參數(shù)，我們?cè)偕晕⑿揎椧幌律疃鹊谋憩F(xiàn)形態(tài)。這時(shí)，也需要我們手動(dòng)設(shè)置等高線的曲線。

STEP 07

“紋理”一項(xiàng)，在我們的圖案疊加的基礎(chǔ)上，再運(yùn)用一層紋理，這層紋理給文字增加了更多細(xì)微的質(zhì)感。

STEP 08

接下來(lái)讓我們應(yīng)用“內(nèi)陰影”這一效果。在其參數(shù)面板中對(duì)陰影的混合模式設(shè)置為白色的“顏色減淡”，它的角度應(yīng)該是和我們?cè)赟TEP 05中設(shè)置的光源的方向剛剛相反，這樣才能表現(xiàn)出陰影。而這里的陰影雖然是運(yùn)用了比較高光的發(fā)亮的效果，但其他是利用了邊緣的深度來(lái)創(chuàng)建的，強(qiáng)化了整體效果的透明感。

STEP 09

這時(shí)，我們想要讓高光區(qū)域也同樣變得更有透明感，光線更強(qiáng)一些。那么我們就要拿出“內(nèi)發(fā)光”的樣式。通常，內(nèi)陰影和內(nèi)發(fā)光是結(jié)合一起使用的。內(nèi)發(fā)光的參數(shù)面板讓我們先將混合模式設(shè)置為“線性減淡”，顏色可以運(yùn)用深棕色的漸變色系。顏色的選擇是配合了我們的圖案的色系。

STEP 10

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

STEP 11

由于在這里，我們看到文字經(jīng)過(guò)幾次高光的影響紋理的細(xì)節(jié)不夠清晰，這時(shí)，我們就需要讓細(xì)節(jié)更凸出，做法就是應(yīng)用上“顏色疊加”，疊加的混合模式變?yōu)椤罢B底”，目的是為了讓細(xì)節(jié)凸顯出來(lái)，但又不至于太過(guò)暗淡。

STEP 12

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

STEP 13

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

四、添加高光

還記得我們的復(fù)制層嗎？填充雖然被降低為0，但給它添加圖層樣式依然有效。這時(shí)，我們打開“sweet”的復(fù)制層的圖層樣式中的“斜面與浮雕”，為文字添加高光。而與此同時(shí)等高線變?yōu)榛⌒危鎏砹宋淖直砻娓吖獾膱A潤(rùn)感。

最后的成品：

把這兩個(gè)圖層的圖層樣式復(fù)制到另外一行文字，再稍微加以修飾，最終的效果如下：

后記

如果你的文檔大小和我們的案例中的不同，那你則需要在參數(shù)中鼓搗出另一個(gè)相應(yīng)的值。相信經(jīng)過(guò)一番練習(xí)，簡(jiǎn)單的3D效果對(duì)你已經(jīng)不是難題。初學(xué)者多多嘗試總是沒有壞處的。歡迎大家把自己的制作效果發(fā)到我的郵箱raysimon@126.com，任何提問必復(fù)。

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

原來(lái)這些黑科技效果這么簡(jiǎn)單！
《有哪些看上去很高大上，但實(shí)際很簡(jiǎn)單的PS技巧？》

你肯定見過(guò)這個(gè)效果，它叫德羅斯特效應(yīng)！
《PS教程！教你打造超酷炫的德羅斯特效應(yīng)》

震撼力爆表的街舞大賽海報(bào)！
《PS教程！教你快速打造視覺沖擊力MAX的街舞大賽海報(bào)》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com