以下是iH5新近一场线上的分享会——《零基础,如何设计好看的H5?》的分享实录,请来行内月收入10万的H5设计师进行知识分享,完整内容参见文末链接。
以下设计师制作H5,所用软件均为iH5.cn,无需下载的专业H5页面制作工具。
他是悟脚叔叔,业内知名的H5设计师,这次揭秘了很多的个人设计经验,以及他一个公益项目的制作历程(《你,有什么资格睡觉?》)。
以下内含大量秘闻...
1、一个作品是怎么诞生的?
早期的时候卓越集团找到我需要做一个H5,他们给到的需求只有一个Word文档,里面有5句话,说卓越集团怎么样、要带什么功能、要有一个照片分享,要求是做得酷炫。
当时做这个H5,我在想怎么去把这5句话拆分,怎么和卓越集团所在的地产行业结合?其中最重要的是加载页面,后面乱七八糟的功能我都不关心。前面的30秒钟,我要把用户留住,后面什么都好说——
因为前面10秒钟如果不酷炫,基本上80%的用户都会流失。
所以后来我做了一个3D旋转的地球,用C4D和AE合成、导出序列帧,然后用iH5的图片序列解决这个问题。序列帧一共有100张,我设置播放到99张的时候让标题出现,作品如下:
悟脚叔叔为卓越集团做的H5-DEMO版
2、什么绘画技巧适合美术小白?
关于插画,我教大家一个比较简单的方法,每天临摹一张画。
不知道有没有人知道小人书是什么?它是50、60年代,我们老一辈的人看的一些小漫画。
现在很多珍藏版市场价都要十万一本,不过京东上有翻印版,你可以去搜一下,一套下来可能也就百来块钱。很实惠,可以考虑入手一套,每天临摹一张,学习其中线条的运用,一段时间下来,你就可以轻松驾驭白描技法。
白描指什么?
《你,有什么资格睡觉?》这个H5,用的就是白描。
我从小就学画画,高中一心想考国美的山水专业,需要的是国画的白描基础,要用单勾、复勾的技巧画画。
单勾指的是从头至尾用一根线条,勾勒出一个人的形态、身体结构;复勾还可以在上面来回轻勾、顿挫去表现人体结构。需要区分的是,它和线描速写又不一样。
我光白描就学了两三年,大学四年也一直在教学生。
我的建议是一开始在纸上学习,能更直接地感受到用笔的回馈,后面就可以买个手绘板,入门级四五百就可以买一个。
(编者注:以下省略200字左右的手绘板采购攻略)
3、《你,有什么资格睡觉?》的由来?
这个H5背后涉及比较庞大的体系。
不是画完就没事了,你要考虑在手机上看的比例。每一页我都是当做海报去做,才能平衡画面的比重、内容的大小、比例、用户操作习惯等。
设计的时候,一开始我会做加法,把很多内容都往上放,不要嫌多。
画完看的时候,发现内容好多,画面失去比重了,再果断地把前面的序列帧都删掉。
后面的答题需要填写信息资料,里面包含很多细节上的设计,比如信息选项、答题进度、电波设计等等。
这个H5的答题环节比较多,主要是因为需要一定的题量才能得出测试结果。
甲方可能忽略了大家看H5,很多是报着玩的心态,这点是一个遗憾的地方。
4、(秘1)这个单子的报价…
“我请你睡觉”这个H5,是我前阵子离职后准备做简历找工作,还没正式成立自己的工作室时,找过来的一个公益项目。
因为是公益的,我也没收多少,其实一般我现在一个H5起步价要35K,手绘类的是50K起。因为是做公益的,我也没收什么钱,不是没有收,但是不多。
5、(秘2)我是这么画画的...
这些是我电脑里的设计相关的一些软件——
比如Corel Painter 13、SAI等,是比较小众的日漫绘画软件,它们和PS这些软件模拟真实绘画效果就不一样。我最早期做电脑绘画就是用Corel Painter 13,有很多笔触、笔刷,后面才慢慢转到PS上面。
比如智图,是用来压缩图片的,因为用PS导出原图图片非常大,压缩可以降低网页加载速度。
建议没有手绘基础的,不要一上来就用Corel Painter这种对绘画要求比较高的软件。下面是几年前我用这个软件做的毕业设计——
上面这张图,我的原意是:
你去照亮别人的时候,却不知道自己已经陷住了自己,或者不知道该往哪里走。
【彩蛋】
(分享过程中,悟脚叔叔爆的料)
问:你多大?
答:不到30。
问:你的电脑配置?
答:去年4万多买的苹果电脑。
问:你为什么没考上国美?
答:第一年我考,专业全国排名第15名,第二年第3。为什么没有进?都是因为英语没过。现在我教过的很多学生上了国美,也有去列宾美术学院的。
问:你的收入?
答:我一个月接3到4单,1单35K起,你可以自己算一下。
【三方直播间回顾】
讲完课第二天,悟脚叔叔和小牙都因为身体原因跑医院了,悟脚叔叔还调笑自己:35岁前收山。
高薪设计师实在是高危行业啊……