• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 素材太丑?学会这5个方法照样能做好设计!

素材太丑?学会这5个方法照样能做好设计!

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

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

@设计便利店:今天来讲讲当客户只给一张丑哭的素材,还想要高大上的设计时,应该怎么做呢?来看看中文排版如何化腐朽为神奇!

若照片本身够抢眼或者主题很明确,光是一张图铺满画面,打几个字就足够了。

但,哪有那么好的事?客户一般都是怼一张很丑的照片,就像上图一样,这么low,想要高级感,要设计感,咋办?那这时设计上就必须下多工夫。

其实,一张丑图片其实也可以靠版式玩出花来,例如,将照片裁成正方形,或者将边角调成圆弧,整体气氛就已经会不一样了,此外,也可以巧妙运用留白,让自己有更多的空间发挥。

下面我就用上面那张图,用6种方法来化腐朽为神奇:

将版面2等分

依照片的构图或内容,将版面分割成上下或者左右两等分,其中一半配图片,一半配文字的简单设计。根据照片的构图以及拍摄的主题来决定横切还是竖切。

△ 左右分割的版面,左边是图右边是字,右边字体采用直排居中,以取得视觉平衡,照片处理成直长型,看起来会比较有新鲜感。

△ 上下分割的版面,图在上,将图裁切到合适的样式;字在下,用大标题居右,小文字居左,顶对齐,左下角有个小标作为点缀,取得视觉平衡感。

△ 上下分割的版面,图在下,同样将图裁切到合适的样式;字在上,因为图在下方比较视觉感重,所以用大标题居中,其他同理与上一个,原因都是为取得视觉平衡感。

满版设计,添加文字区域

使用最大尺寸的照片,让照片充满整个版面,再在满版照片上覆盖一个正方形区域,将文字编排在方形区域中。方形的尺寸和位置要把握好,避免破坏图片的构图和气氛。

△ 将树作为主体放在黄金分割的位置,对称的地方安排文字区域,有视觉连贯性的作用。

△ 将文字区域安排在最上方,无论照片构图如何,都可以营造出井然有序的版式。

切成正方形图片,留出空间

将图片切成正方形,并放大到满版宽度的设计,将照片编排在上中下的哪个位置,呈现的效果气氛都会有所不同。正方形照片给人工整感,所以可以运用文字来增加变化。

△ 正方形有时会太过工整,可以用直排文字来破开画面,让版式更加丰富。

△ 配合裁切适当的画面,加上规矩的版式,给人安静,舒适的感受。

△ 将正方形安排在正中央,文字分别配在图片上、下区域,明确出标题和正文的差别。

设置圆角

在版面四周留白,并配上圆角照片。去掉尖锐的直角,让整体印象变得柔和。

△ 结合上一个方法的图片切割,将裁切成正方形的圆角安排在下方,给人更柔和的感受。

△ 依整个版面的长宽比例,将圆角图片裁成接近的比例,缩小,可营造出一定的空间感。

配半透明色块

在覆盖版面照片上来排版时,可以参照上述第二个方法。配半透明色块的好处是不会破坏照片整体的气氛,既能让照片和文字和谐,又能同时确保可读性。

△ 配置半透明白色色块,保留照片原有的风格气氛。

△ 同样根据画面的氛围,更改色块形状。

将照片和文字倾斜编排

将照片和文字都水平编排是基本的做法,有时还是会有感觉到死板,如果这时将其倾斜,便会产生动感,变成轻松活泼的设计。有一点需要注意,过多倾斜会变得难以阅读,或照片主体难以辨别,因此角度不宜过大。

△ 将照片和文字倾斜编排,让画面产生动态感。

△ 这个方式和第一个方法对半切是同理的,左右两边各自分配,同时也可感受到赋予倾斜角度时所展示的动感。

欢迎关注作者的微信公众号:「设计便利店」

「想掌握排版四原则?3个海报设计教程满足你!」

  1. 《设计易容术!如何设计一张高品位高水准的海报?》
  2. 《设计易容术!如何设计一张高品位高水准的海报(二)》
  3. 《设计易容术!如何设计一张高品位高水准的海报?(三)》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

  • 用超多案例,帮你学会排版中最基础的对比和对齐原则
  • 没素材就做不出好作品?高手说不一定!
  • 素材太丑?学会这5个方法照样能做好设计!
  • 专业科班系列!超实用的标题排版小套路

相关文章

  • 2018-08-23进阶实例教程!如何通过设计提升产品的增值服务?
  • 2017-08-06网页中使用任意字体之实际操作附演示
  • 2018-08-23AI+AE教程!手把手教你做出Game boy的飞机大战游戏
  • 2018-08-23创意十足!如何在平面设计中运用双重曝光效果?
  • 2017-08-06rgba alpha 透明度的转换计算表
  • 2018-08-23那些让你无法自拔的游戏们是怎么做出来的?专访网易游戏设计总监邵堃
  • 2018-08-23如何做好 Banner设计?我总结了这4类基础知识
  • 2018-08-23三八XX节专题页设计该怎么玩?看这篇就够了!
  • 2018-08-23该怎么运用情绪板,才能让设计作品更有说服力?
  • 2018-08-23实在干货!为老年用户做体验设计应该注意的6个细节

文章分类

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

最近更新的内容

    • 想提高可用性?看谷歌Material Design 的官方教程是怎么做的!
    • 拍一张照片就能设计成一张海报,这种技能你想不想要?
    • 想做AR类的APP?那么你应该从这三个关键点着手
    • 在大公司,APP的设计流程和时间分配是怎样的?
    • 讲真,这可能是目前最全的在线配色工具合集了
    • 腾讯设计师:超实用的数据可视化零基础教程之实战案例篇
    • 前端进阶之路!如何高质量完成产品需求开发?
    • 网页变灰的笔记 细节问题处理
    • 2018年5月前端开发者实用干货大合集
    • 腾讯高级设计师:交互知识树系列之平台规范

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

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