AI教程!教你制作海绵宝宝输入法皮肤

时间:2019-05-28
类别:AI教程
水平:进阶
观众:1.4w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

img

教程作者:软件基础营37期-B32-猪肉

辅导老师:小胡舵主

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

关于教程

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

 

教程步骤

  • 步骤 1

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

本次输入法的主题是海绵宝宝,从而定下了卡通可爱的风格,颜色选择以海绵宝宝黄色为主色调,搭配海滩的蓝绿色,按键形状直接采用海绵宝宝本身的特征,小海绵块的形状。通过海绵宝宝、海滩,还可以联想菠萝小屋、水泡、小船等元素都可以转化成为输入法的一部分。

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤 2

将构思好的主题输入法元素,在AI中新建图层,绘制元素,此处以海绵块为例:

(1)新建AI图层,矩形工具绘制两个方形作为海绵的顶面和侧立面;

(2)利用锚点选择工具,使其看起来有透视关系;

(3)为其填充颜色(此处注意明暗关系,颜色区分) 顶面:EBE532  侧立面:EBE532  描边:89841B;

(4)选择形状--效果--扭曲和变换--波纹效果,调整数据,使其看起来像海绵,数据如下;

(5)最后用椭圆工具再填加一些海绵洞,顶面海绵洞颜色:D1C239   侧立面海绵洞颜色:DDD431。

AI教程!教你制作海绵宝宝输入法皮肤

在AI中,将自己所需要的元素全部画好,点击 文件—导出—导出为PNG格式,此处注意勾选使用画板、范围,便于在PS中操作。

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤 3

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

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

将刚才AI中保存PNG图片导入PS中,根据自己的构思并按照输入法的固定的要求进行排版。此处注意所有按键的字符都要清晰可见,避免字符和背景图片混淆不清,所以在排版过程中,要及时调整元素位置、形态及颜色。

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤 4 

上滑弹泡和长按弹泡的设计必须符合尺寸要求,按键不能单纯按下变字体颜色,需要有明显的变化。本次输入法按键利用海洋气泡作为灵感设计上滑弹泡,在颜色上和背景键盘有个区分,并且不影响整体主题呈现。

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤 5

输入前景字符。字体选择要与整体风格保持一致,因此选择比较卡通的字体。候选栏icon可以直接从模板中复制图层拖拽,可适当添加图层样式保持风格一致。本输入法在工具栏加以砂石、气泡、植被,看起来更加生动,更加贴合主题。

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤6

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

 

第一稿

AI教程!教你制作海绵宝宝输入法皮肤

 

终稿

AI教程!教你制作海绵宝宝输入法皮肤

 

  • 步骤 7

制作展示长图。新建图层,可以用主色调填充背景,加一些输入法中运用到的元素,调整透明度,使画面看起来尽量简洁,避免过于花哨。

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

注意成组的概念,即每个部分之间需要留出一定的距离,每个部分中的元素之间也要留出一定的空隙,以保证不产生歧义。标题性文字和说明文字注意对比,避免混淆。字体使用最好与输入法中的字体相互对照。

制作样机效果展示的时候可以添加一些微信或者QQ对话的界面,看起来更完整美观。

 

效果展示

AI教程!教你制作海绵宝宝输入法皮肤

 

结语

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

 

相关推荐

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

AI教程!教你制作海绵宝宝输入法皮肤

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

AI教程!教你制作海绵宝宝输入法皮肤

AI教程!教你制作海绵宝宝输入法皮肤


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

收藏 10

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

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

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片