PS绘制灰白色机械键盘样式手机输入法皮肤图片

在购物车里窥视了很久的实体键盘一直舍不得买？本教程教你如何构思并制作一款简约拟物风格的输入法皮肤，至少能在手机上过上一把实体键盘的瘾。

先看看效果图：

教程步骤—

01 构思草图

首先要仔细了解输入法的组成部分：候选栏+拼音区+云候选区+键盘大背景+9键键盘+26键键盘+上划弹泡等。

刚开始着手设计的时候，建议从整体入手，大致规划好各个部分的设计元素的摆放位置等，尽管这样的工作无法得到立竿见影的成效，但这的确是笔者经过惨痛的教训后得到的宝贵经验。一开始把整体的设计布局确定好了，之后就算有改动的地方，通常也只是小改，否则…

一句话，天才第一步，构思皮肤整体布局。

本次参赛作品选用了深受部分程序员喜爱的ikbc 1系键盘Poker作为拟物原型，毕竟是拟物风格的输入法皮肤，所以设计过程中遵循了“尽可能像”的设计原则。

此图为实体键盘官网宣传图。

这款键盘的特点“60%键位”“小巧”，即精简了键盘，用户不需要上下左右移动手腕，即可保持较高的的输入效率。所以在皮肤的设计中，为了体现这种简洁的设计思想，未在工具栏、候选栏、云候选区或拼音区区域做任何设计，简单就好。

而在主体键盘部分的设计中，以质感设计优先，键槽体现为辅的宗旨着手后续工作。

02 键帽部分

键帽部分千万注意不要脱离切图尺寸而独立设计!

切图模板可从搜狗输入法皮肤比赛详情页获取

26键和9键布局的键帽大小差异较大，先独立设计而后进行拉伸复制很有可能导致边缘圆角(如果有的话)变形，出现锯齿或过渡不自然等情况。故而强烈建议带圆角的键帽，直接基于26或9键的切图尺寸的框架内进行设计。

本次参赛作品的设计较为简单，使用图层样式表达出实体键盘质感即可，不需要进行其他的效果制作。故而质感在表现时，相对须设计地较为精致耐看一些，否则可能会显得较为单调。同理，尽管实体键盘的配色基本为黑白灰，但在实际的质感表现时，一定注意，灰度的层次感要相对拉开。此外，其实仔细观察，实体键盘在不同键位上的键帽上手指敲击处的斜度处理也有所不同，故而在本次参赛作品中笔者也有所还原(9键中较为明显)，不过由于时间紧迫，未来得及做出上下倾斜的感觉，实属遗憾。