各式按鈕作法:文字篇


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

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

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

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

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

基礎篇1:文字陰影

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

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

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

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

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

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

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

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

特別篇1:文字材質

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

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

特別篇2:文字凹陷

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

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

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

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

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

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

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close