PS绘制一款拟物风机械键盘

效果图

01 构思草图

输入法的组成部分：候选栏+拼音区+云候选区+键盘大背景+9键键盘+26键键盘+上划弹泡等。大致规划好各个部分的设计元素的摆放位置。

02 键帽部分

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

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

使用图层样式表达出实体键盘质感即可，不需要进行其他的效果制作。故而质感在表现时，相对须设计地较为精致耐看一些，否则可能会显得较为单调。同理，尽管实体键盘的配色基本为黑白灰，但在实际的质感表现时，注意灰度的层次感要相对拉开。此外，其实仔细观察，实体键盘在不同键位上的键帽上手指敲击处的斜度处理也有所不同。

根据需求情况及最终效果进行反复调整。

渐变叠加做键帽底部四面的颜色。

两层内阴影加一层内发光做出厚度，下部边缘的厚度。

键帽的顶部同理，根据不同的光影情况给予略微不同的参数不断调整即可。

键帽顶部本身的弯曲度，渐变不宜选区差异过大的颜色，否则会变形。

添加上一个较为柔和的投影做出键帽的顶部与底部的上下层级关系的感觉，可以不必太深，之后还可以通过强化某一立面暗影的方式凸显键帽深度。

单独使用投影+蒙版的方式刻画或强化前后立面的深度。注意参数的调整，使得阴影更加真实。

最后做出整体键帽在键盘或键槽上的阴影。其余部分大体不过形状位置或大小或图层样式参数的调整。

03 键槽部分

键槽部分结合键帽部分共同进行尺寸调整。

9键布局部分选取了大键槽结合字母键的结合方式，一方面可以潜意识地将使用者的视线集中在字母键上，减少其他键位在打字时的干扰;同理，右部的功能键区采用长键槽;而左部的标点符号区因为键帽与键帽之间间距较大，所以没有采用相同的策略，而是单独为每一个标点符号设置键槽，而若采用长键槽，可能会因为间距部分的键槽而使得空间组织显得过于疏松。

26键布局中的主体键盘部分也因为间距较大的原因，没有使用大键槽，其余部分就较为简单了，一个个安排下来即可。

键槽只需要一个制造深度的图层样式即可。

04 前景字符部分

实体键盘中字体的选用是偏几何风格的，故而在皮肤的字体选用中也应尽可能匹配原字体风格，部分符号作了微小的改动以匹配风格，比如将一些圆润的转折部分去掉了。

05 其他部分

长按气泡及按下效果清晰明确，不会造成误解即可。

按下效果制作很简单，调整顶部形状位置，略微调整图层样式的参数即可。