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

在購物車里窺視了很久的實體鍵盤一直舍不得買？本教程教你如何構(gòu)思并制作一款簡約擬物風(fēng)格的輸入法皮膚，至少能在手機上過上一把實體鍵盤的癮。

先看看效果圖：

教程步驟—

01 構(gòu)思草圖

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

剛開始著手設(shè)計的時候，建議從整體入手，大致規(guī)劃好各個部分的設(shè)計元素的擺放位置等，盡管這樣的工作無法得到立竿見影的成效，但這的確是筆者經(jīng)過慘痛的教訓(xùn)后得到的寶貴經(jīng)驗。一開始把整體的設(shè)計布局確定好了，之后就算有改動的地方，通常也只是小改，否則…

一句話，天才第一步，構(gòu)思皮膚整體布局。

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

此圖為實體鍵盤官網(wǎng)宣傳圖。

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

而在主體鍵盤部分的設(shè)計中，以質(zhì)感設(shè)計優(yōu)先，鍵槽體現(xiàn)為輔的宗旨著手后續(xù)工作。

02 鍵帽部分

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

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

26鍵和9鍵布局的鍵帽大小差異較大，先獨立設(shè)計而后進行拉伸復(fù)制很有可能導(dǎo)致邊緣圓角(如果有的話)變形，出現(xiàn)鋸齒或過渡不自然等情況。故而強烈建議帶圓角的鍵帽，直接基于26或9鍵的切圖尺寸的框架內(nèi)進行設(shè)計。

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