在 App 裡，許多操作方式都需要透過「按鈕」，本篇將介紹如何在Photoshop作出各種樣式按鈕上的「文字」。包含立體凸起、或是凹陷的質感。按鈕本身的作法也有很多種表現形式，將另開一篇專講背景製作。

準備工作：先做個按鈕背景、輸入文字吧！

1.先建立背景，這裡以深色為例，色碼設定為#33333。

2.使用圓角矩型工具，繪出一個長方型按鈕底圖，色碼設定為#10d9c4。

3.使用水平文字工具，輸入按鈕上的文字，色碼為#ffffff。

基礎篇1：文字陰影

這是最基本的文字樣式，使用圖層樣式的陰影。iOS 預設光源皆由正上方往下打，除非 App 另有設定陰影角度，建議和 iOS 相同，使用 90 度角。Photoshop 預設陰影為75%，有時會造成陰影太黑過於厚重，我習慣調淡使用 35% 或 55% 左右，視情況而定。

基礎篇2：文字陰影+漸層

純白的文字很明顯，但缺少點氣氛，使用和按鈕底色同色系的漸層可以強調氛圍，淡淡的就好。

雖說是淺色，能避免使用純白就盡量不要，再淺的色彩都要帶一點和底圖相同的色調。（不過偷懶的話我會用純白…）

進階篇1：文字陰影+漸層+外光暈

除了陰影與漸層色外，設定一層外光暈，使用和底圖與文字同色系的深色，讓文字邊緣柔和。

進階篇2：文字陰影+漸層+外光暈+內陰影

看到「陰影」2字可別以為它只能用在加深顏色，反過來思考，若把內陰影設定成淺色不就成了邊緣高光了嗎？數值設定可以依畫面尺寸和光線來源設定，建議同樣使用和按鈕底圖相同的色系淺色，若文字已是淺色再使用純白。

特別篇1：文字材質

文字加上材質有很多種作法，最簡單方便的就是使用「圖樣覆蓋」。在設定圖樣覆蓋前先把「漸層覆蓋」調成色彩增值，讓設定的圖樣能顯示出來。

圖樣覆蓋同樣使用色彩增值，可依材質不同調整透明度與縮放。

特別篇2：文字凹陷

1.凹陷的文字也是種常見的作法，只要掌握內陰影和高光，就能做出凹陷的效果。比按鈕底色更深的文字漸層色，上淺下深。

2.混合模式選擇「色彩增值」，不透明度的百分比可自行調整。

3.內陰影，使用比底圖更深的色彩，注意角度與間距。

4.加上高光凸顯文字邊緣，讓按鈕更生動。

5.也可以使用圖樣覆蓋製作文字材質，增加按鈕質感。

以上共舉了 6 個例子，適合做比較大顆的按鈕。如果是 NavigationBar 上的按鈕我會省略很多文字材質上的細節（尺寸太小也看不出來）。比起視覺美觀、我會優先考量易用性，明確的反差辨識度較高，有時得犧牲一些材質表現（先求不傷身再講療效）。有空的話可以先跟著步驟做一次後設成 Style，以後直接套用改顏色改數值就好。（然後就會忘記當初自己怎麼做出這個效果的，我就是這樣。）