各式按鈕背景:基本篇


最常見的按鈕就是個長條型的色塊,配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化,在視覺上更顯精緻。可接著各式按鈕作法:文字篇 的步驟接著做。

基礎篇1:邊框

圖層樣式「筆畫」,在內側增加一條細線,使用和按鈕底色相同的色系,調成較深色強調按鈕輪廓。
1.jpg

基礎篇2:邊框+漸層

漸層可說是運用與變化最廣泛的手法,從基本的兩種色彩做出上淺下深、上深下淺的方式,到 iOS6 內建使用四種色彩的玻璃折射光澤,都是透過漸層來達成。

如果按鈕已有一個標準色彩,可以使用色彩增值的方式在原本標準色上壓上灰階漸層,能快速做出立體按鈕的效果。
2.jpg

上淺下深的漸層是最基本的作法,能讓按鈕有凸出的效果。
3.jpg
4.jpg

上深下淺的漸層主要運用在希望按鈕在視覺上有凹陷感的時候。
5.jpg

四種色彩的玻璃折射光澤,iOS6 的 TabBar 就是使用這種效果。這個顏色運用在按鈕最下方的反光,會是 4 色按鈕次深的顏色。
6.jpg

最深的顏色,注意色彩的飽和度,若飽和度低易造成按鈕灰灰髒髒的感覺。
7.jpg

較淺的色彩,如果這個App有標準色的話可運用在此。
8.jpg

最淺的顏色,由上往下照射的光線會在此處形成反光,彩度低而明度高,盡量避免使用純白色。
9.jpg

基礎篇3:邊框+漸層+白色內陰影

深色的內陰影可以製作凹陷的效果,若是淺色的內陰影就會變成高光線。
10.jpg

特別篇1:邊框+漸層+白色內陰影+打光

1.這種製作方式能增強玻璃折射的質感,運用各種顏色,讓按鈕更繽紛。新增一個圖層在按鈕上方,框出扁橢圓形,並填上淺色。
11.jpg

2.套用高斯模糊。
12.jpg

3.在模糊的橢圓形圖層上建立遮色片。
13.jpg

4.同樣的方式建立上方的淺色橢圓形,並將它壓得更扁。
14.jpg

5.套用遮色片,調整圖層透明度。完成。
15.jpg

ps.製作橢圓形高光時運用和按鈕不同的色調,就能做出在不同色光照射下的玻璃光澤。
16.jpg

這篇是基本常見的按鈕,可以依此加上材質、斜角什麼的,在大量快速製作和調整個種顏色非常方便。為了做示範我有把效果誇張一點點,可以將數值減少和對比調弱些、按鈕會更精緻。雖說現今扁平化流行,但在台灣這種平均復古5年的審美觀來說,基本篇的風格在有點年紀的客戶眼中接受度較高。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
各式按鈕背景:進階篇

32.jpg
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影,為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景:基本篇 製作~

各式按鈕作法:文字篇


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

Nest Pastiche 製作過程

這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。

快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close