字效（3） Layer Style 字效（2）
2007‧1111 Final
紋理字效的原理
四向連續無接縫（Seamless Tile）紋理
紋理字效（1）
紋理字效（2）
無紋理、非 2.5 D 斜邊字效
玻璃字效（1）
玻璃字效（2）
Layer Style 再幾例
( Rapidshare 使用說明 )
筆者深知很多網友視英文為仇寇、看到英文就龜懶趴火、…
不過要玩多媒體的軟體，是不可能不用英文版的
所以筆者就把 Layer Style 的介面來個中英文對照：
中英文對照不是讓您拿英文來對照出中文就了事，而是希望您能慢慢適應英文的專有名詞
畢竟多媒體的軟體，怎麼用就只是那幾百個英文的專有名詞
而大半的多媒體軟體都沒有中文版，不趁此適應，以後只會更痛苦 !
這是上一單元 Layer Style 字效 ( 1 ) 中的字效：
其中與紋理有關的字效不多
簡單來說，字效並不適合有紋理：
一則因為紋理要看得清楚，字就要很大，而這種機會並不多
再則紋理通常不易於處理成 2.5 D，縱純 3D 字的紋理，也不一定好看
三則上述 非紋理的字效，反而比較明亮強眼
Layer Style 字效 ( 1 ) 與紋理有關的，不外乎下面三種：
第一、假紋理 ( 如鑽石類 )
花花綠綠、亂七八糟，不算是真材質
第二、半紋理
把紋理加上 Layer Style 的光影，營造出 2.5 D 的感覺
第三、真紋理
可以強調出紋理表面的凹凸起伏
以下就先來看看 真紋理：
１. Pattern Overlay ( 圖樣覆蓋 )：填入紋理
２. Bevel ans Emboss ( 斜角和浮雕 )：編製出 2.5 D 的立體感
３. Bevel ans Emboss 中的 Texture ( 紋理 )：把紋理加上凹凸起伏
最後再加上 Drop Shadow 的陰影
完成圖 ( 粗細字體的參數會略有不同 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
紋理的來源又可以分成幾類：
‧Photoshop 內建的紋理
‧( 相機拍照 ) 相片圖檔的紋理 ( 本項不必討論吧 )
‧無中生有的紋理
。非四向連續無接縫紋理
。四向連續無接縫紋理
雖然 Layer Style 可以變化出數以百計類似下圖的字效
但 Layer Style 最基本的原理 就是：( 不管是 背景透明的字圖 Layer，還是 文字 Layer )
‧先填入顏色或是紋理
。顏色：Color Overlay, 顏色覆蓋
。紋理：Pattern Overlay, 圖樣覆蓋
‧如果有必要就加上 Sroke ( 筆畫 ) 的框邊
‧再來加入 2.5 D 的 Bevel and Emboss, 斜角和浮雕
‧表面的凹凸起伏：Bevel and Emboss > Texture ( 紋理 )
‧陰影, Drop Shadow
‧一按即字效：
如果 100% 都是以 Layer Style 搞出來的字效，就可以把喜歡的效果新增到 Style ( 樣式 ) 的面板
日後只要在 背景透明的字圖 Layer，或是 文字 Layer 上一按，字效就會蹦出來
雖然 Layer Style 字效有著無數的變化技巧，但紋理字效能變化的則很有限
基本上就只能遵循上述的法則，不然紋理就會被其它的設定搞到效果不彰了
以下就討論 Photoshop 內建的紋理 → 無中生有紋理 → 無中生有四向無接縫紋理
Photoshop 內建的紋理（Pattern）
１. Pattern Overlay ( 圖樣覆蓋 )：貼上紋理
此時貼上的紋理，是 Photoshop 內建的 Pattern
２. Bevel and Emboss ( 斜角和浮雕 )：編製出 2.5 D 的立體感
紅框處這兩個設定項有很多種的排列組合，請務必多練習之
３. Bevel and Emboss ( 斜角和浮雕 ) > Texture ( 紋理 )：設定凹凸
因為是設定凹凸，所以挑選到的 Pattern 只顯示灰階 ( 白為凸，黑為凹 )
紅框處這兩個設定項可以 調整 Pattern，很實用喔 !
４. Drop Shadow ( 陰影 )：設定陰影
完成圖 ( 粗細字體的參數會略有不同 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
無中生有紋理、無中生有四向無接縫紋理
Photoshop 內建的 Pattern，都是四向連續無接縫的圖檔，所以您在套用時，不會感覺有啥異狀：
反正不管圖多大，只要套用 Photoshop 內建的 Pattern，一律都不會有 接縫不連續 的情況發生
以 Photoshop 7 內建的 Pattern 為例：
上排左三
上排右三
下排左三
下排右三
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
全部都是四向連續無接縫的紋理 !!
如果您把下圖紅框處的圖定義為圖樣：
在套用後就會發生接合處不連續的窘境
也就是發生了下圖的狀況
所以既要有能力 無中生有紋理、也要有能力編製出 四向連續無接縫紋理：( 如此編製 Layer Style 字效的自由度就更大了 ! )
‧四向連續無接縫紋理 ( 1 )
。Photoshop Pattern ( 圖樣 ) 拼貼
。Eye Candy 5 Textures 無中生有紋理
。Backdrop Designer 無中生有紋理
。Texture Maker 無中生有四向連續無接縫紋理、載入圖檔再編修成四向連續無接縫紋理
‧四向連續無接縫紋理 ( 2 )
。Genetica 無中生有四向連續無接縫紋理
‧四向連續無接縫紋理 ( 3 )
。Seamless Factory 把現成的圖檔編修成四向連續無接縫紋理
。imageSynth 把現成的圖檔編修成四向連續無接縫紋理
‧四向連續無接縫紋理 ( 4 )
純手工編製出四向連續無接縫紋理
編製紋理
１. 填入灰色
２. 套用 Filter ( 濾鏡 ) > Noise ( 雜訊 ) > Add Noise ( 增加雜訊 )
３. 這個就是紋理 ^^|||
套用 Layer Style
１. 在 背景透明的字圖 Layer 或是 文字 Layer > Pattern Overlay ( 圖樣覆蓋 )
２. Bevel and Emboss ( 斜角和浮雕 )：編製出 2.5 D 的立體感
３. Bevel and Emboss > Texture ( 紋理 )：表面的凹凸起伏
４. Drop Shadow：陰影
完成圖 ( 粗細字體的參數會略有不同 )
１. 把 Bevel and Emboss 裡的 Size ( 尺寸 ) 調低
２. 換一個 Texture：表面的凹凸起伏
完成圖 ( 粗細字體的參數會略有不同 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
即令您很熟悉無中生有紋理與四向連續無接縫紋理，紋理字效其實還是很受限：大概也就是圖 A 與 圖 B 的表現方式罷了
圖 A
圖 B
但別忘了，在上一單元 中，我們把兩個 Layer Style 的眼睛都打開，就得到不錯的效果：
所以囉，在 Layer Style 字效 ( 1 ) 中隨便挑兩個來跟 圖 A or 圖 B 做 Blending Mode ( 混合模式 )，就可以有還不錯的效果：
１. Lighten ( 變亮 )
２. Lighten ( 變亮 )
３. Screen ( 濾色 )
４. Screen ( 濾色 )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
紋理字效當然不只上述那些：
１. 請先看：
字效 ( 1 ) Channels 字效，以建立 Channels 的基本概念
２. 最重要的單元：
字效 ( 2 ) Layer Style 字效 ( 1 )
接著就是本篇的 字效 ( 3 ) Layer Style 字效 ( 2 )
３. 休息一下，看看：
字效 ( 4 ) 純 3D 字
字效 ( 5 ) 書法字
４. 行有餘力：
字效 ( 6 ) 其它字效 ( 1 )，看看還有哪些的字效技巧
５. 最後：
字效 ( 7 ) 其它字效 ( 2 ) 一按即字效大系 ( 1 )
字效 ( 8 ) 其它字效 ( 3 ) 一按即字效大系 ( 2 )
字效 ( 9 ) 其它字效 ( 4 ) 一按即字效大系 ( 3 )
６. 很多小 Tools 都不支援 2 Byte 的中文輸入，所以我們也要有能力造 1 Byte 的中文字型檔：
字效 ( 10 ) 造字
上述只是 Photoshop 字效的第一波 ....
是的，當然還有第二波，那就是 Plug-Ins 字效（本 Blogger 就是討論 Plug-Ins 咩）
以下是 字效 ( 7 ) 其它字效 ( 2 ) 一按即字效大系 ( 1 ) 中，與紋理字效相關的部份：
含蓄的紋理：
就是紋理：
紋理的舖陳：
紋理字效，一樣可以變出很多花樣
０. 要搞下面的字效，字體要粗一點，所以換用這個字型
１. 前景要設為白、背景設為黑，等一下套用 Stained Glass ( 鏡片著色 ) 的效果才會明顯
２. 套用 Filter ( 濾鏡 ) > Texture ( 紋理 ) > Stained Glass ( 鏡片著色 )
３. 先按 Ctrl + I ( 負片效果 )，然後在 Layer 縮圖上按 Ctrl + 滑鼠左鍵 取得選取區，最後按 Ctrl + C ( Copy )
４. 在 Channels ( 色版 ) 面板 新增一個 Alpha ( Alpha 1 )
５. 按 Ctrl + V 把步驟 3 所 Copy 的貼上
６. 把 Alpha 1 拖曳到 新增 Channel 的小圖示，複製出了 Alpha 1 copy
７. 等一下就在新增的 Alpha 1 copy 作業，而 Alpha 1 則留著備用
８. 接著，就在 Alpha 1 copy 繼續作業
９. 套用 Filter ( 濾鏡 ) > Blur ( 模糊 ) > Gaussian Blur ( 高斯模糊 )
10. 按 Ctrl + L ( Level, 色階 )，並依圖調整之
11. 如此，就得到了類似 鵝軟石 的圖案效果
12. 在 Alpha 1 copy 的縮圖上按 Ctrl + 滑鼠左鍵，取得選取區
回到 Layer 的面板，開一個新的空白 Layer，填入灰色
13. 套用 Layer Style
14. 其中的 Pattern Overlay ( 圖樣覆蓋 )，可以套用自製的紋理
套用 Inner Shadow ( 內陰影 )，讓石紋暗沉一點
15. 完成圖
類似的方法也可以搞出這種效果：( 而且更簡單，留給您當作業囉 )
‧紋理字效的字不能太小，太小會不清楚 ( 不好看 )
‧2.5 D 斜邊字效的字也不能太小 ( 理由同上 )，輔之 2.5 D 的斜邊字效太科技感了，在應用上也會受限
無紋理、非 2.5 D 斜邊字效 並不是指沒有字邊，而是指字邊不要那麼地 2.5 D
因為不搞 2.5 D 的斜邊，所以 無紋理、非 2.5 D 斜邊字效 比較適用於中小型的字效
在 Layer Style 字效 ( 1 ) 中，有兩個 無紋理、非 2.5 D 斜邊的字效：
縮小後還不錯看喔 ( 縮小的方法：Layer Style 字效 ( 1 ) > Layer Style 原理 > A. 從黑字開始 >【 模組化 A 】> 方法二 )
同上，縮小後邊框似有若無，這也算是一種「細節」
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下述的字效，在下載檔中都有
大字看起來很普通
縮小後就好看多了
大字就不錯看 ( 甲 )
縮小後也不賴
大字有點 Over ( 過亮、過炫 )
但縮小後就沒那麼嚴重了
加上反光效果後就順眼多了 ( 乙 )
縮小後更漂亮了
把 甲、乙 兩圖 Blending Mode ( 混合模式 )，就得到很優雅的淺藍反光字效
縮小後更顯雅緻
Layer Style 字效 ( 1 ) 的字效太曜眼、太 2.5 D了，而紋理字效又太暗沉了
所以把 無紋理、非 2.5 D 斜邊字效 的精神再發展下去，就是下面四例的玻璃字效
１. 首先，從背景透明的灰色字圖 Layer ( or 灰色的文字 Layer ) 開始
底圖不要用白色，會看不清楚後續的字效，故填入淺灰色
２. 套用 Bevel and Emboss ( 斜角和浮雕 )，讓左上角的顏色比較亮一點兒
３. 套用 Stroke ( 筆畫 )，編製出白邊
４. 加上陰影
看起來不怎麼樣呀 !! 年輕人，不要猴急，請繼續往下看
５. 先在 Layer 的縮圖上按 Ctrl + 滑鼠左鍵，取得選取區
然後下拉選單 > Select ( 選取 ) > Modify ( 修改 ) > Contract ( 縮減 )
６. 新增一個空白 Layer，填入黑色 ( 黑色是為了方便觀看 ) 後，關掉步驟 4 的 Layer 眼睛
７. 套用 Bevel and Emboss ( 斜角和浮雕 )，編製出玻璃邊
８. 套用 contour ( 輪廓 )，不讓玻璃效果太強眼
９. 套用 Gradient Overlay ( 漸層覆蓋 )，至此已是不錯看的字效了
10. 套用 Pattern Overlay ( 圖樣覆蓋 )，總要試看看紋理字效好不好看
11. 套用 Outer Glow ( 外光暈 )，增加玻璃反光的效果
12. 打開步驟 4 的 Layer 眼睛
完成圖
( 既有紋理、又有字邊、不會太 2.5 D、有點明亮卻不會暗沉 )
縮小後也一樣好看
１. 從黑字開始 ( 因為全都是 Layer Style，所以可以從文字 Layer 開始 )
２. 套用 Bevel and Emboss ( 斜角和浮雕 )，上方產生的白色區，就是反光面
３. 套用 Gradient Overlay ( 漸層覆蓋 )，這個步驟的目的是上色
４. 套用 Satin ( 緞面 )，這一步驟很巧妙：緞面卻搞出了斜邊
５. 套用 Stroke ( 筆畫 )，細細 1 個 pixel 的漸層邊框，這是屬於細節的部份
６. 加上陰影
７. 套用 Inner Shadow ( 內陰影 )，把下方加深，這是屬於細節的部份
８. 套用 Inner Glow ( 內光暈 )，這也是細節的部份，可加可不加
完成圖
第三例 ( 100% Layer Style )
第四例 ( 100% Layer Style )
Aqua Style 的前期練習 ( 100% Layer Style )
金屬效果 ( 100% Layer Style )
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
１. 從黑字開始 ( 是不是黑字都無傷 )
２. 套用 Gradient Overlay ( 漸層覆蓋 )：上色
３. 套用 Stroke ( 筆畫 )：加上邊框
４. 套用 Bevel and Emboss ( 斜角和浮雕 )
５. 在 Layer 的縮圖上按 Ctrl + 滑鼠左鍵，取得選取區
６. 套用 Select ( 選取 ) > Modify ( 修改 ) > Contract ( 縮減 )
７. 已縮減了 5 個 pixels
８. 按 Ctrl + Shift + I ( Inverse, 反轉 )，再按 Ctrl + Shift + Alt + 滑鼠左鍵按 Layer 的縮圖：取得了 5 pixels 寬的選取區
９. 新增一個 Layer，填入漸層，並關閉原先 Layer 的眼睛
10. 套用 Stroke ( 筆畫 )，增加 1 個 pixel 的邊框
11. 套用 Inner Shadow ( 內陰影 )，編製出暗部
12. 打開剛才關閉眼睛的 Layer ( 即下方的 Layer )
13. 把下方的 Layer 往右移動 4 個 pixels
如此就有點立體感了
完成圖
上圖與下圖《 見 字效 ( 7 ) 其它字效 ( 2 ) 》都是模擬 3D，也都各有巧妙之處
適合小字的例子：
‧不能只顧大字，比較小的標題字也很常用
‧筆者只能儘量整理出各種大字的技巧，至若小字的部份，各位網友可以經由把大字的參數縮減一二而達成
