PS教程!从零开始制作可爱的小黄鸭输入法皮肤

优设6年行业口碑保障!专业培养高薪设计人才,你想要的课程这里都有 前往咨询
  • 水平 : 普通
  • 观众 : 3995
  • 时间 : 2018-12-25

教程

教程作者:雾逐月(软件营33期学员)

作品展示:链接

交作业:#优设每日作业#

关于教程

想要一款完全符合自己喜好的输入法吗?不要再是简单地换换键盘背景,本教程教你如何构思制作一款动漫卡通风格的输入法皮肤。

此输入法参与第四届搜狗输入法手机皮肤设计大赛,点进链接可浏览作品,左下角作品链接可看展示长图,帮忙点个赞吧~

 

教程步骤

  • 步骤 1

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

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

 

  • 步骤 2

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

 

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

 

  • 步骤 3 

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

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

 

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

 

  • 步骤 4

输入前景字符。字体选择要与整体风格保持一致,因此选择比较圆润的字体。候选栏icon可以直接从模板中复制图层拖拽,可适当添加图层样式保持风格一致。本输入法分隔号竖线用水流代替,更加贴合主题。

 

  • 步骤 5

检查输入法皮肤的整体效果。主要检查整体颜色是否和谐,饱和度不要太低以免画面呈现出脏的感觉;字体和符号间的粗细尽量保持一致;再次检查各部分尺寸是否符合规定。

 

第一稿

终稿

 

  • 步骤 6

制作展示长图。新建图层,新建纯色填充背景。用小黄鸭的轮廓新建图案,背景用图案填充。注意不要让背景过于花哨,尽量降低透明度,减小缩放。

 

确认长图中需要展示的部分,本长图中总共包括6个部分:开头、颜色选择、字体选择、键盘展示、按键效果展示以及结尾。可根据自己的需求添加或删减,如灵感来源等。

注意成组的概念,即每个部分之间需要留出一定的距离,每个部分中的元素之间也要留出一定的空隙,以保证不产生歧义。

 

制作样机效果展示的时候需注意样机背景需与输入法风格一致,因为本次输入法是小黄鸭,因此样机背景为卡通风格的小黄鸭壁纸。样机的厚度通过钢笔绘制,注意不同的面颜色要有所区别。

 

效果展示

 

结语

本期教程到这里就结束了,希望大家在练习过程中多思考、理解制作思路和操作方法,活学活用。

 

相关推荐

PS教程!怎样从零开始制作一套拟物风格输入法皮肤?

 


一个人做练习的时候,做得好没人发现,做得差没人点评,总感觉很难坚持下去呢···

从今天开始参与「优优教程网 365 天打卡计划」,每天一个小练习, 4 位U站管理员与大家一起打卡练习,点赞点评,互帮互助。优秀练习还有机会被优优转发 【参与方式】每天在 #优设每日作业# 内,上传打卡练习,话题微博格式【 DAY 01~365 】转发视为参加。(动图为打卡演示) 【收获】更好的自己

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,转载请联系 @优设基础训练营 授权。原作品版权归属原作者。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

本文链接: https://uiiiuiii.com/photoshop/1212119330.html

欢迎关注 @优秀网页设计 @优设基础训练营 @优设大课堂 @你丫才美工 @优设微电台 @移动端设计 @招聘设计师

继续阅读与本文标签相同的文章

图层样式输入法皮肤
img

相关文章

发表评论

评论加载中....

把好文章收藏到微信

打开微信,扫码分享
优质教程 UiiiUiii 每日更新