一句话,如果本身设计元素就不算太多的话,那么剩下的部分可能更需要精致,需要更多细节,这样才能更耐看一些。

如下为图层样式的拆解,以9键布局为例,其余键帽差别不大(调整图层样式时,无需死抠数据,主要通过最终的视觉效果来选择图层样式的应用程度。此外,图层样式的添加每一步都有确切的目的,不要为所欲为。)

(此处正是之前提到的错误的脱离切图尺寸制作的键帽,若将其转化为智能对象,并进行拉伸,边缘圆角很有可能出现变形等其他问题。不提倡脱离切图尺寸进行制作,不过此处仅作图层样式设置的讲解,影响不大。)

不要死抠数据,根据需求情况及最终效果进行反复调整。

(注意!未标明色值的颜色要么为因为重复所以略去的颜色,要么就是纯黑纯白(通过不透明度参数的调整实际所需的阴影颜色等))

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

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

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

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

 

两层内阴影加一层内发光做出厚度,特别强调下部边缘的厚度

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

键帽的顶部同理,相似的方法根据不同的光影情况给予略微不同的参数不断调整即可。不过此处的渐变叠加是用于做

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

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

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

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

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

单独使用投影+蒙版的方式刻画或强化前后立面的深度。注意参数的调整,使得阴影更加真实(后立面深度也可不进行单独强化,这取决于光源的选取,实际作品中为对比更为强烈,未对后立面进行单独强化)

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

最后做出整体键帽在键盘或键槽上的阴影(如果切图要求能满足的话)

至此,一个键帽就完工了,其余部分大体不过形状位置或大小或图层样式参数的调整,此处就不赘述了

  

03 键槽部分

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

键槽部分的把控既麻烦又简单。简单指键槽的表现和放置;麻烦指键槽的尺寸大小的把握和键帽和键槽如何进行较为和谐的结合,这两者并不矛盾。