手把手教你包裝一份高大上的设计稿

2016-02-16 19:44 11 1 收藏

下面请跟着图老师小编一起来了解下手把手教你包裝一份高大上的设计稿,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - 平面设计 】

接了一个200万的单,最后给甲方几张PNG,当然不行,学会包装设计稿是一个设计师最基础的技能,让甲方看懂你的设计,体验你的用心,才不会无休止地改改改,过稿率也能迅速提高。今天庫倪Qoli做了一份详尽的教程,从设计理念到色彩、细节、展示都有方法,学起来。

作为一个主要以接项目的设计师,包装一个项目是很重要的。

我们分几个内容来说明一下吧。

目录

为什么需要包装?

设计如何包装?

举个例子,以我最近的一个项目;

说明设计理念;

色彩运用;

细节说明;

界面展示。

为什么需要包装

在生活中,我们无时无刻不在面对包装。

例如,超市的洗发精、饮料;外卖食品;新的电子产品。

我们会因为这些包装而购买,也会因为这些包装而不想购买。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

这是我看到包装就忍不住购买的洗发精。

面对设计元素,也同样道理。我们也需要包装我们的设计产品。你试想一下,你作为甲方,支付了 5 万元的一个项目,拿到只是一堆 PNG 格式的图片,这种心情,是什么样子无奈。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

甲方收到的一堆PNG

设计如何包装

设计如何包装,这是我们的问题。

在我习惯上,我习惯了为甲方提供一份包含 PDF 说明档案的档案包。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

应该提供的档案包。

「档案包」的档案夹结构

请先阅读

PDF 说明档案(由 Keynote 自动生成,以免甲方在 Windows 下无法打开);

Keynote 档案

预览图形

所有界面屏幕所组成的大型预览 PNG 档案;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

所有屏幕

每一个界面的单独 PNG 输出。

PDF(Keynote)说明档案

这是「包装」中的重中之重,我会使用 Keynote 制作,加上合适的幻灯片切换动画以及部份构件的进入动画,说明一下设计理念、色彩运用、界面细节等之类的东西。

若面对面时候,则用我的 Macbook Air 来展示(Keynote 使用 1080P 分辨率),若邮件传送,则输出为 PDF,以保证一致的显示质量。

以例子来一起学习一下

XX(为防同学们误认为软文,此处皆替换为XX,见谅)是我最近的一个设计元素,我为他们提供了界面、交互以及少量产品上的专业支持。它是一个 Wechat 智能娱乐助手,能够推荐你附近好玩、好吃的地方。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX,一个微信智能娱乐助手(我的例子项目)

主要设计理念

既然,XX是一个关于「娱乐」的项目。我第一个的想法就是,要多姿多彩、色彩丰富、不应该单调在一个颜色上。接着,对于整体来说,却又应该简洁明了,恬静舒适,以保持整体控制在色彩丰富但是又不会觉得隆重,凌乱的感觉。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

恬静、舒适是XX的真实追求。

色彩运用

上文以及提及到了,我们应该「色彩丰富」。所以,我确定一个鲜艳的「Carnation」作为高亮色调,接着,其他饱和度相对低的,作为辅助色彩。

(一般来说,如果是单色调项目时候,应担搭配上灰度色调)

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX:色彩运用的方面

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

FMS:色彩运用的照片档案

界面细节

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

我们讨论完,主概念、色彩,是时候来说一下「界面细节」了。

界面细节,在包装中,更习惯使用一个一个的描述线来说明。这个看看例子就马上明白了。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX:主界面细节说明

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX:设定界面细节说明

细节说明这个,你可以多做 4 ~ 5 个页面,来把一些你值得注意的地方,放大说明。或者这个 icon 你很用心去绘制,更要放大说明。千万不要把你的心思,埋没在一堆 PNG 之中。

界面展示

完成了理念、色彩、细节,我们做一个大 PNG 来一个 Happy END 就可以了。

不过由于 PPT 一般放不入长条的大型 PNG 组合界面显示,往往我会放一个好看的说明图,来告诉「甲方」应该打开哪个档案来浏览。

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX:主要界面组合显示

手把手教你包裝一份高大上的设计稿,PS教程,图老师教程网

XX:长条形界面的单独组合

享受

或许花了 30 分钟,你把自己的 Keynote 制作出来了。不要心急给甲方发过去,先自己 Enjoy 一下,检查检查一下有没有错字、写得不够好的地方。自己给自己多播放几次,感受一下自己要演讲一样的样子。

感觉一切没问题,就给他们发过去把。

结语

其实,我一开始做外包时候,也和大家一样,就交一堆 PNG 给甲方,就这样完事了。但是,那个时候,往往甲方会不理解,不明白,老是要我修改这里,修改哪里。我就需要很用力地,解释为什么这些是这样做的,为什么那里不能修改。

经过一次看那些什么文章「你看看别人是怎么拿到 200 万的设计」,我突然感受所悟。

自此之后,我每次的设计工作,无论项目还是版本递进修改,都会产生一份说明的 Keynote 档案,并且输出一份 PDF。

同时也因为这样,甲方的过稿率就大大提高了。我要乱来修改的项目也减少了不少。因此,我认为,好的包装,是实力的证明。

来源:http://www.tulaoshi.com/n/20160216/1572803.html

延伸阅读
标签: 自制面膜
这是做好的成品哦!还不错吧。   1.首先我们将蜂蜡和橄榄油倒入烧杯中。   2.之后放在锅里隔水加热,直至蜂蜡融化为止。   3.再将液体倒入唇膏管中。   4.将唇膏管竖立放置,等待完全凝固。  ...
标签: 电脑入门
前几天当图老师小编听到朋友说没想到2012就这么到了的时候才恍然大悟2012年真的来了。不管怎么样,新的一年到来,自然是要告别过去,面向未来,辞旧迎新。对于像图老师小编这样整天跟电脑打交道的人来说,辞旧自然是要围绕电脑了,电脑的CPU、显卡、主板这些硬件图老师小编不敢轻易辞掉,但对于键盘这样的硬件来说,图老师小编当辞不让挨了一年...
平常家里买的鲜花很容易枯萎的,如果我们手工制作一款毛毡水仙花放在家里就不容易枯萎了喔!想在家摆多久就摆多久。而且将这个花朵摆放在什么位置都很好看喔!接下来就来看图老师如何手把手教你制作毛毡水仙吧! 第一步:用剪刀将毛毡修剪成上图的形状。 第二步:把...
标签: 盘发教程
 上一张后面的效果图,还不错吧!   1.将头发分出两层,将上层的头发扎成马尾。   2.将马尾分成两股。   3.将两股头发交叉盘绕成一个丸子。   4.再使用一个夹子固定住丸子...
标签: 化妆
1.首先我们选择一直口红,使用唇刷沾取口红。 2.将口红刷在嘴唇上,如果妳怕画出去,那么可以事先使用唇线笔描绘一遍唇形的轮廓。   2.再沾取黑色 。 3.刷在嘴角的位置上,扫一扫颜色过渡。     最后的效果就出来了哦!像不像吸血鬼呢!...

经验教程

879

收藏

81
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部