Photoshop鼠繪質感冷灰色主題風格的機械鍵盤，輸入法皮膚鍵盤。效果圖：

教程步驟—

01 構思草圖

首先要仔細了解輸入法的組成部分：候選欄 拼音區 雲候選區 鍵盤大背景 9鍵鍵盤 26鍵鍵盤 上劃彈泡等。

剛開始着手設計的時候，建議從整體入手，大緻規劃好各個部分的設計元素的擺放位置等，盡管這樣的工作無法得到立竿見影的成效，但這的确是筆者經過慘痛的教訓後得到的寶貴經驗。一開始把整體的設計布局确定好了，之後就算有改動的地方，通常也隻是小改，否則…

一句話，天才第一步，構思皮膚整體布局。

本次參賽作品選用了深受部分程序員喜愛的ikbc 1系鍵盤Poker作為拟物原型，畢竟是拟物風格的輸入法皮膚，所以設計過程中遵循了“盡可能像”的設計原則。

此圖為實體鍵盤官網宣傳圖。

這款鍵盤的特點“60%鍵位”“小巧”，即精簡了鍵盤，用戶不需要上下左右移動手腕，即可保持較高的的輸入效率。所以在皮膚的設計中，為了體現這種簡潔的設計思想，未在工具欄、候選欄、雲候選區或拼音區區域做任何設計，簡單就好。

而在主體鍵盤部分的設計中，以質感設計優先，鍵槽體現為輔的宗旨着手後續工作。

02 鍵帽部分

鍵帽部分千萬注意不要脫離切圖尺寸而獨立設計!

切圖模闆可從搜狗輸入法皮膚比賽詳情頁獲取

26鍵和9鍵布局的鍵帽大小差異較大，先獨立設計而後進行拉伸複制很有可能導緻邊緣圓角(如果有的話)變形，出現鋸齒或過渡不自然等情況。故而強烈建議帶圓角的鍵帽，直接基于26或9鍵的切圖尺寸的框架内進行設計。

本次參賽作品的設計較為簡單，使用圖層樣式表達出實體鍵盤質感即可，不需要進行其他的效果制作。故而質感在表現時，相對須設計地較為精緻耐看一些，否則可能會顯得較為單調。同理，盡管實體鍵盤的配色基本為黑白灰，但在實際的質感表現時，一定注意，灰度的層次感要相對拉開。此外，其實仔細觀察，實體鍵盤在不同鍵位上的鍵帽上手指敲擊處的斜度處理也有所不同，故而在本次參賽作品中筆者也有所還原(9鍵中較為明顯)，不過由于時間緊迫，未來得及做出上下傾斜的感覺，實屬遺憾。

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

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

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

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

(注意!未标明色值的顔色要麼為因為重複所以略去的顔色，要麼就是純黑純白(通過不透明度參數的調整實際所需的陰影顔色等))

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

兩層内陰影加一層内發光做出厚度，特别強調下部邊緣的厚度

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

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

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

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

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

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

03 鍵槽部分

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

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

9鍵布局部分筆者選取了大鍵槽結合字母鍵的結合方式，一方面可以潛意識地将使用者的視線集中在字母鍵上，減少其他鍵位在打字時的幹擾;同理，右部的功能鍵區采用長鍵槽;而左部的标點符号區因為鍵帽與鍵帽之間間距較大，所以沒有采用相同的策略，而是單獨為每一個标點符号設置鍵槽，而若采用長鍵槽，可能會因為間距部分的鍵槽而使得空間組織顯得過于疏松。

26鍵布局中的主體鍵盤部分也因為間距較大的原因，沒有使用大鍵槽，其餘部分就較為簡單了，一個個安排下來即可。

鍵槽隻需要一個制造深度的圖層樣式即可。

04 前景字符部分

在比賽規則框架下盡量匹配實體鍵盤字符風格。

實體鍵盤中字體的選用是偏幾何風格的，故而在皮膚的字體選用中也應盡可能匹配原字體風格(比賽要求限制，此處選用漢儀旗黑而非實體鍵盤的字體或類似字體)，部分符号作了微小的改動以匹配風格，比如将一些圓潤的轉折部分去掉了。

05 其他部分

長按氣泡及按下效果清晰明确，不會造成誤解即可。

按下效果制作很簡單，調整頂部形狀位置，略微調整圖層樣式的參數即可效果展示

最終效果—

第一版後第一次大改的版本(第一版找不到了..)

最終版9鍵

最終版26鍵

免責聲明：本教程來源于網絡，禁止商業使用， 禁止個人使用，僅供學習交流使用 ，版權歸原作者所有， 若涉及版權問題，請及時聯系删除！！！（小編分享隻為自己和大家學習所用！越努力，越幸運！本頭條号不承擔任何法律責任！）