记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] 活动弹窗设计过程分享(Illustrator原创教程)[含5P]

[复制链接]
发表于 2017-6-3 09:50:00 | 显示全部楼层 |阅读模式
         分析需求
首先策划会给个文档,项目就算开始了。
下面就是拿到的需求,需求可能是纯文字,可能会有交互图(也叫线框图),但对于设计师来说,交互图也只是更清晰的说明文字的层级关系而已,不用按照交互图的版式来。
这次的需求是纯文字的:

标题:结盟
稳定的好友关系会让您在战争中如虎添翼!快点与好友结为盟友吧!
1.与好友结盟后可以获得下面其中一个宝箱,同时您的好友会获得一把宝贵的钥匙。
2.每天可以和10位好友结为盟友。
3.结盟好友等级越高,宝箱的价值越高。
活动时间:即日起至55

先不管3721把内容先都摆上去再说,就得到一张交互稿了。这样比起对着干巴巴的文字会更直观些。

活动弹窗设计过程分享(Illustrator原创教程) 如虎添翼,效果图,设计师,价值,万家 【UI】 095033psskxzccfiyssk77 1



这里做效果图的时候游戏背景不能去掉,因为这个弹窗是在游戏里弹出来的,不能有单独出现的情况,所以看效果的时候一定要模拟最终的效果。
看了内容就知道这是个与其他万家结盟的活动,结盟后还能得到宝箱。
接下来就开始胡思乱想阶段了。



胡思乱想

虽然是胡斯乱想,但也是结内容来联想。这步就看谁更有创意了。其实创意就隐藏在文案中,设计师傅要做的就是剥离出文案就核心表达的东西就好了。根据结盟这个标题,我脑子里就蹦出两个部落领导人亲切的握手的场面,旁边两部落的子民欢呼雀跃啊!不过这个表现有点难度,实现起来要时间还要一定技术含量啊。但里面一些元素是可以保留的,比如握手啥的,部落啥的。
下面是最终的想法,在此期间可以寻求百度啊,画点草图啥的。

活动弹窗设计过程分享(Illustrator原创教程) 如虎添翼,效果图,设计师,价值,万家 【UI】 095033a7li0fecnfwsszf0 2


找素材

脑子里有了概念,画好草图定个版式啥的,接下来就开始找素材了,因为最终的元素可能接触过,可能脑子里没货,就需要找素材然后再加工。所以平时建立一个素材库的话要用素材的时候会方便很多。这个案子里不用直接用的素材,主要是部落花纹什么的找点照片素材,然后自己画一个。图片素材可以上百度,全景http://www.quanjing.com/啥的找。

活动弹窗设计过程分享(Illustrator原创教程) 如虎添翼,效果图,设计师,价值,万家 【UI】 095033hg9aftpkk9p8th8t 3



制作

开始制作了,因为游戏是矢量风格,所以都会用矢量软件做,我用的ai,做完再黏贴进flash,还好这两软件都是一个妈生的,配合起来很方便,哈哈。制作没什么复杂的技术,使用钢笔工具路径>填色,如此反复,这时候有什么新的想法也可以继续添加,但不能推翻这个当初的点子,有时候觉得画不下去了也要坚持,反复是很消耗时间的。我绘画技术不怎么的,还请高手指点。

活动弹窗设计过程分享(Illustrator原创教程) 如虎添翼,效果图,设计师,价值,万家 【UI】 095033a7elfitrrmte27rj 4


经过了紧张的制作,比起交互稿这样好看多了吧。(呸,废话啊!!)

活动弹窗设计过程分享(Illustrator原创教程) 如虎添翼,效果图,设计师,价值,万家 【UI】 095033ggfzttmnunvpqnss 5



最后再加点修饰,丰富下画面,这样就大功告成啦。

这就是我做东西通常的一个流程,可能每个人都有差异,但分析》创意》找素材》制作》调整》完善这套流程应该都不错的,只是每个人在每个步骤中采取的方法有别之,比如有人对创意方法很有一套,有人对找素材或者说执行很厉害等等。最后调整完善花的时间越多意味着最终作品会更好,但商业设计总是有时间限制的,所以不能一味追求品质,要按照时间掌控好进度,不必太过执着,有时间的时候也不要草率。

最后,还有很多不足的地方,欢迎交流指教。




本文由 站酷网 - kolaai 原创,转载请保留此信息,多谢合作。

               
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表