恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
四个步骤设计扁平风格banner
0.0°
2018-06-05 原创文章 教程 举报 3413 57 60 5

第一次录制视频,以工作经验分享,主要给小白们学习,慢慢完善,谢谢(提供充电宝png素材)

Image title


· 几何图形:

现在先理解一下关于几何图形的要点,图形无处不在,大部分图形都是由圆、三角、方形不断组合而成为重要的视觉图像。图像也分为平面图形和立体图形两种,下面两种案例,左边平面视觉,通常会作为背景纹理使用,容易融入色调,具有线条感和导向性;右边立体视觉,根据商品的角度,调整立体图型的角度突显视觉层次感,图形使用要点:板式是没有固定限制的,不过要根据文字,商品的位置关系排列调整位置、大小,留出重要信息清晰的阅读区域,色调通常使用整体色值的接近色,在视觉上呈现若隐若现的感觉,既存在也不抢走重要信息的阅读。(*小提示:设计banner前可以先把文案,商品排列进去,确认了色调后,有了大概的构思,再设计出图形,然后调整大小和位置)

Image title

· 色调:

其实不会调色的老铁们,最快最简单的是去找参考,看你喜欢的颜色,在图片上吸取你喜欢的颜色,但是很多时候都会把banner设计的很灰,要么就是什么颜色都有,乱糟糟的,所以运用起来还是需要点技巧的,简单说下色调使用方式:

Image title

渐变色调最常用于背景,其实同样也可以用于上面说的图形形状,背景渐变与形状的渐变色搭配可以带来不错视觉效果,根据banner的排版方式,进行不同方向表达,通常有3种渐变效果,在下面举几个小例子:

Image title

· 商品:

banner摆放商品尽满足一下几个条件:商品图清晰,多种摆拍角度的商品组合,在使用不同类型的商品尽可能使用同色系商品,根据光源的位置做出投影。(*小技巧:1,。在白底下设计的投影请使用灰色,状态选正片叠底,投影一般都用两层,在正片叠底的效果下,会区分出深色投影和浅色投影,这样会比较好看自然。2.在有颜色的色块上用该色值饱和度低偏深的颜色,不建议使用黑色做投影。3.如果是做玻璃瓶的商品的投影,请在投影里再添加一层白色的模糊图层,状态选叠加,会有种透光的效果) 下面展示4种投影的方式:

Image title

· 文案:

这里我只简单说说比较简单的排版方式,有机会的话再分享关于字体设计以及排版的方法,常见的电商类文案分三层:主标题、副标题、优惠信息,只要分清主次,突出最重要的主标和优惠信息,一张banner字体尽量不要超过3种,因为要给用户在视觉化上有统一性,字体过多,会很乱。


· 练习步骤:

Image title

Image title



Image title

Image title


更新:2018-06-05

收藏

57人已收藏

  • 8

    作品

  • 40

    粉丝

  • 20

    关注

  • Thishop App 服务泰国人的电商平台
  • 优购APP(概念)设计
  • 优购吉祥物设计
  • 学无止境,继续深造
相关标签
扁平

    猜你喜欢

      2018-06-05 原创文章 教程 举报 3413 57 60 5

      四个步骤设计扁平风格banner

      0.0°

      你确定要举报四个步骤设计扁平风格banner

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      60
      57
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录