PS绘制可爱小黄鸭输入法皮肤UI教程

UI / UI设计教程 / PS教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:雾逐月

关键词

PS绘制可爱小黄鸭输入法皮肤UI教程,萌萌哒输入法皮肤UI

硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

教程步骤—

步骤 1

确认输入法皮肤的构成部分,手机皮肤由候选栏+拼音区+云候选区+键盘大背景+9键键盘+26键键盘+上划弹泡等元素成。分别构思各部分的草稿,确认各部分的风格,形状和颜色与主题匹配。

本次输入法的主题是小黄鸭,从而定下了软萌可爱的风格,,因此尽量避免尖锐的转角,颜色也选择偏暖色调,按键形状可以采用小黄鸭本身的特征,如鸭爪等。通过小黄鸭,还可以联想小黄鸭漂在大海上的图像,因此大海,沙滩,沙滩球等元素都可以转化成为输入法的一部分。


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

步骤 2

利用PS将草稿转化为图像,注意每个部分的尺寸要求,因为涉及到安卓和ios系统的不同,可能会对部分元素进行拉伸,因此不可以大于其要求的尺寸(可在官网下载模板,在制作时直接将切图模板拖到自己的设计图中)。


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

新建一个1080*832的画布,新建矩形作为键盘背景,注意键盘大背景不可有圆角或异性设计,否则会被黑色填充。接着制作候选栏,注意右侧图像不可过大(220*200),设计尽量简洁,确保每个icon能显示清楚。


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

步骤 3

接着制作按键部分。注意:按键的投影图层的混合模式必须是正常,否则会影响后续切图。本次输入法的按键的设计为符合小黄鸭的形象,投影和斜面浮雕的过渡都比较柔和。做出想要的效果后,拷贝图层样式粘贴到其它按键图层即可。

部分功能键可以由小黄鸭的相关变形构成,可以增加变化。鸭爪的绘制可以使用布尔运算,三个椭圆按不同角度叠加,这样做出来的形状比较圆润耐看。之后,粘贴图层样式时,因为按键颜色不同,记得改变高光和阴影的颜色。


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

上滑弹泡和长按弹泡的设计必须符合尺寸要求,按键不能单纯按下变字体颜色,需要有明显的变化。本次输入法按键利用沙滩球作为灵感设计上滑弹泡,在颜色上和背景键盘有个区分,并且不影响整体主题呈现。因为按键和候选栏都是立体的设计,沙滩球也必须做出体积感,以免有违和感。


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网


硬盘皮肤:PS绘制可爱的小黄鸭输入法皮肤,PS教程,思缘教程网

 收藏