PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

2019-02-11 00:00:00 來源/作者: 自媒體 / 錕棟 己有:900人學習過

一句話,如果本身設計元素就不算太多的話,那么剩下的部分可能更需要精致,需要更多細節,這樣才能更耐看一些。

如下為圖層樣式的拆解,以9鍵布局為例,其余鍵帽差別不大(調整圖層樣式時,無需死摳數據,主要通過最終的視覺效果來選擇圖層樣式的應用程度。此外,圖層樣式的添加每一步都有確切的目的,不要為所欲為。)

(此處正是之前提到的錯誤的脫離切圖尺寸制作的鍵帽,若將其轉化為智能對象,并進行拉伸,邊緣圓角很有可能出現變形等其他問題。不提倡脫離切圖尺寸進行制作,不過此處僅作圖層樣式設置的講解,影響不大。)

不要死摳數據,根據需求情況及最終效果進行反復調整。

(注意!未標明色值的顏色要么為因為重復所以略去的顏色,要么就是純黑純白(通過不透明度參數的調整實際所需的陰影顏色等))

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

漸變疊加做鍵帽底部四面的顏色

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

 

兩層內陰影加一層內發光做出厚度,特別強調下部邊緣的厚度

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

鍵帽的頂部同理,相似的方法根據不同的光影情況給予略微不同的參數不斷調整即可。不過此處的漸變疊加是用于做

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

鍵帽頂部本身的彎曲度,漸變不宜選區差異過大的顏色,否則會變形。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

添加上一個較為柔和的投影做出鍵帽的頂部與底部的上下層級關系的感覺,可以不必太深,之后還可以通過強化某一立面暗影的方式凸顯鍵帽深度。

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

單獨使用投影+蒙版的方式刻畫或強化前后立面的深度。注意參數的調整,使得陰影更加真實(后立面深度也可不進行單獨強化,這取決于光源的選取,實際作品中為對比更為強烈,未對后立面進行單獨強化)

PS繪制灰白色機械鍵盤樣式手機輸入法皮膚圖片

最后做出整體鍵帽在鍵盤或鍵槽上的陰影(如果切圖要求能滿足的話)

至此,一個鍵帽就完工了,其余部分大體不過形狀位置或大小或圖層樣式參數的調整,此處就不贅述了

  

03 鍵槽部分

鍵槽部分結合鍵帽部分共同進行尺寸調整

鍵槽部分的把控既麻煩又簡單。簡單指鍵槽的表現和放置;麻煩指鍵槽的尺寸大小的把握和鍵帽和鍵槽如何進行較為和諧的結合,這兩者并不矛盾。