• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)

想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计作品,设计师作品集等相关知识,希望在学习及工作中可以帮助到您

@菜心设计铺 :上期简单的介绍了几点包装的技巧,这期再分享一波,接着上期,再深入的讨论一下关于包装的技巧。

上期回顾:《想让作品从80分到100分?你需要这3个包装作品的小技巧!》

我们包装的目标就是:吸引眼球!

我个人觉得要想吸引眼球就要注意以下两点——层级与细节。

接下来的时间,我们就来了解一下层级与细节具体是什么》

一. ?层级

1.1 颜色层级

很多作品包装背景颜色都是有深有浅,为什么?

其实就是打造一种颜色层级,刺激视觉感官,看下图:

左侧黑白相间的版本要比右侧纯黑色层级更丰富,在展示作品的时候,就会给人一种视觉冲击力。

来看真实的作品排版包装,如下图:

当然颜色层级不一定非要用深浅,色相的对比也可以,如下图:

△ ?behance优秀作品

但是色相比较难控制,对新人来说最好的方法就是主色和白色相间使用,不易出错。

1.2 内容层级

们每做完一个作品包装,可以审查一遍,看看整体一共可以分为几层,如果只有两层,那就重新做吧。

我们来看看优秀的包装如何让层级丰富。

比如使用一些模型,并让界面局部与模型分离:

△ ?behance优秀作品

再比如让背景多几个层次:

△ ?behance优秀作品

再比如像拍照一样,让景深变长,在前景增加修饰物,如下图:

△ ?behance优秀作品

1.3 方向层级

方向层级意思就是展示的内容不要都放在同一个方向,要有变化,左右一定要混合使用,不然看着就会死气沉沉的。

比如下面这张图:

右侧的排版是不是要比左侧灵活很多?

我帮你答了:是的!

那我们再看看优秀的案例:

△ ?behance优秀作品

主形象的方向顺序是右-左-右,看起来变化很丰富。

二. 细节

细节体现专业,这句话大家应该都听过,但是也许很多人并不知道这个细节到底是什么,能举几个例子吗?

接下来我们就来举几个活生生的例子。

1.1 加点小修饰

△ ?behance优秀作品

整个展示界面加了很多点、线、面的元素,使整体看起来很丰富,但是上期说过了,这种方式不好驾驭,一定要谨慎使用。

1.2 质感上的细节

图片素材的质感,手机模型的质感等等都是提高美观的细节,如下图:

△ ?绝命图师作品

手机模型上加一层屏幕的反光,显得质感倍增,再加上图片的质量很高,所以最后的视觉效果非常棒。

1.3 适当加点投影

投影是一个非常出效果的方法,但很容易用脏,一定要多练:

△ ?behance优秀作品

1.4 适当的“破”

当一个东西规规矩矩的放在一个容器中时,你看不出他的美,但如果你能适当的将其释放出去一部分,也许能够得到不一样的收获,例如下图:

△ ?绝命图师作品

如果蜘蛛侠没有“走出屏幕”,冲击力就不会那么强了。

再比如下图:

△ ?绝命图师作品

黑白背景色本来没有什么关联,作者用一些元素适当将其打破,增加了一些活力。

这些就是“破”的力量!

其实细节无处不在,多去看那些优秀的作品包装,你会发现很多很多的细节,这里就不举那么多例子了。

总结

以上就是我个人对于层级和细节的理解,目前就只整理了这些,大家如果有什么好的方法欢迎与我交流。

当我们没有什么思路的时候,就多去看看大神们的作品,看看他们是怎么包装展示的,总结出自己差在哪里,针对每一个点去进行优化。

当然也不要太过依赖于最后的包装,因为作品本身才是灵魂所在,还是要先把作品做好,再去思考包装,千万不要因为懂了点包装,就把事情搞的本末倒置哦!

欢迎关注作者的微信公众号:「菜心设计铺」

「帮你包装作品的好文合集」

  1. 《学会这13个方法,才能完整地包装你的UI设计作品》
  2. 《一键搞定包装!超实用的傻瓜式透视效果图制作神器》
  3. 《从平庸到卓越!5个帮你快速提高设计稿质感的实用方法》
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23超全面总结!产品设计中的可拓展性原则
  • 2018-08-23阿里巴巴将以“全链路”设计取代UI/交互岗位,高手怎么看?
  • 2017-08-06div 盖在flash上面 flash透明方法实现将DIV层放在flash上面
  • 2018-08-23设计师如何评估工作量?来看腾讯设计师的总结!
  • 2018-08-23从“免费试用”模块设计反思UI的设计思路
  • 2017-08-06网页设计中对于图片格式与设计关系的详解
  • 2018-08-23超全面!移动端响应式的7种UI布局解析
  • 2017-08-06编制网站首页的基本原则
  • 2017-08-06怎么设计响应式WEB?响应式WEB设计的优缺点
  • 2017-08-06Web前端开发工程师需要掌握的核心技能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css中position属性(absolute|relative|static|fixed)概述及应用
    • 关于网页配色中的叠柔配色法的详解
    • 看不见的用户体验,教你学会用数据丈量它!
    • 设计师被“拼多多”的一天…
    • 用京东的概念案例,深入浅出为你解读「品牌化」
    • 优设国庆节专题!超实用的精选素材打包+出效果教程
    • 实例教学!25个帮你运用好极简风格的设计方法
    • 让你的原型不再Low!这个设计师出品的 Axure 原型组件库现在免费下载
    • 负margin功能介绍及用法总结
    • 豆瓣9.0分的《我不是药神》,海报也是超高分!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有