发新帖

  • 简洁大气有逼格的商务展示(内有彩蛋)
  • 易企秀   2016-08-11 16:21:25
  • [复制链接]
  • 14459    40
  • 我们先来欣赏一下今天要教大家制作的样例

    无需PS也可制作简洁大气cool的商务样例
    -场景中所有文字均可随意编辑;
    -场景中所有装饰素材均可随意修改颜色;
    -场景中素材均可在形状库 0.png 中提取。
    1. 第1页除了文字其余都是形状素材,都可随意修改颜色,具体位置我就不截图了,大家进入形状库→图形→花纹和形状→文字→字符里找。
    1.png
    2.   第2页的细线三角形取自形状→图形→边框。由于是简单目录页,所以特将数字颜色做的亮一点,再配上下方的主题即可,字号可根据需求调整。
    3.   后面的大致类似,不做多的解释,主要是整体色彩统和风格统一,本场景的特色在于素材和动画效果,具体可进入场景详细查看。


    看一送一,再来个模板
    经过多次试验发现深色调炫酷邀请函备受大众的青睐

    制作步骤详解:
    1. 邀请函第一页一般介绍本次活动或者会议等的主题及时间,这样比较明确,打开场景一看就知道是做什么的。
    (1)为突出“邀请函”,用用矩形形状工具拉出了线条通过旋转围成一个倒三角形,上方放邀请函三个字,具体时间放在三角形内,突出这两个内容的重要性。三角
    形底部放入邀请函的主题。可根据需要放大字体突出效果。
    1)_副本.png
    (2)本场景为家居行业邀请函,所以选用了线条房子的素材,并做了闪烁动画作为装饰点缀。
    2)_副本.png
    (3)深色背景做了些白色小圆圈作为小星星并做了闪烁循环的动画,结合流星光的素材,做出星空的感觉,利用图片库中的装饰素材——蓝色炫光,放在场景中
    位置做了旋转动画,根据背景深度相应调整透明度,做出星空的动感。
    3.png

    2.   第二页起是对本次活动的介绍,背景结合首页与之呼应,只是把线条房子放在了页面底部,动画效果不变。
    (1)  用形状矩形拉出边框线条围成一个矩形(和页面大小等比例),并在每个角用矩形形状工具做出颜色为黑色,黄色描边,旋转了45度的菱形(菱形素材无法做
    出这种贴边的描边),做了旋转动画作为装饰,内容都做在此框内。
    2.1.png
    (2)  根据主题需要,将标题“在这里,你可以”着重显示,字号做大,上下并用线条作为装饰,做移入和淡出的动画,为的是重点说明“在这里,你可以”得到的
    东西。
    2.2_副本.png
    (3)  将标题先暂时移到旁边,计算好进入和淡出的时间,接下来就进入正文“在这里,你可以”得到的东西。并用圆形为背景,三层重叠做出中心放大动画,做出
    按钮的效果,给文字添加超链接,可以点击跳转到另外一个对本次展会活动宣传的场景。当然也可以跳转到其他页面。
    2.3_副本.png
    (4)  完成后将组件摆放好位置,预览时显示最终效果。
    2.4_副本.png

    3. 第3页为图片展示区,背景和第二页都一样,因图片有边框,所以将内容展示框去掉,图片排列为常规排列,主题展示在中心位置,并用菱形做了背景,与整体
    风格呼应,菱形复制了3个,做了中心放大动画且每个之间相差0.1秒,起到突出主题作用。
    2.5_副本.png
    0.png
    4. 第4页,用线条拼接矩形,矩形内放标题,并用英文和线条来装饰(提升逼格),突出了标题。酒店的介绍属于图文排版,同样用线条矩形,内容及图片都在矩
    形框内展示,最后将在线预订按钮用色块展示并凸出框外,是为了强调预订按钮,可给文字加超链接。
    2.441_副本.png 2.442.png

    5.  第5页为交通指南,为保持整体风格一致,同样采用线条和矩形框。内容展示在框内,标题凸出框外着重显示。地图可在互动里选用。
    100.png 2.522.png

    6.  第6页为尾页,一般邀请函到最后要加表单邀请人员提交参加信息,此数据可根据需要下载下来,非常方便。
    (1)本页面的表单,我做了样式修改,采用了图标和表单结合的形式,图标可在形状库中找到,具体路径看下面截图。并对图标做了背景透明,描边+弧度调节+颜
    色修改,最终得到 100.png
    6.11_副本.png
    基础样式
    6.12.png
    边框样式
    6.13.png
    (2)表单做了处理,背景做了完全透明,无边框。用矩形拉出线条放至透明输入框底部,就形成另外一种输入框形式啦!最后用提交按钮修改颜色修改文字做出索票
    按钮,用户点击索票即可提交表单我们就可以后台进行数据收集啦!
    6.2_副本.png
    6.22.png



    套用样例模板,戳这里

    推荐阅读:


    回复
  • 最新评论
  • 添加评论
  • 发表于 2016-8-29 10:28:13 | 显示全部楼层
    讲解的很细致,收藏了

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 发表于 2016-8-31 16:09:23 | 显示全部楼层
    看起来好复杂啊,抽时间来练个手。

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 发表于 2016-9-10 22:22:40 | 显示全部楼层
    纯技术,真干货!不错

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 匿名  发表于 2016-9-17 18:46:23
    很详细!我就想问下 这个倒三角的线条放大之后为什么那么粗啊?怎么样能调细一点?

    点评

    我们会考虑做成素材上传使用~  详情 回复 发表于 2016-10-13 09:03
    回复 支持 反对
  • 发表于 2016-9-22 15:32:03 | 显示全部楼层
    效果用好了,做出来的内容就相当贴心了,做活了

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 发表于 2016-9-22 16:47:45 | 显示全部楼层
    M_猫小豆 发表于 2016-9-22 15:32
    效果用好了,做出来的内容就相当贴心了,做活了

    说的太有道理了
    回复 支持 反对
  • 发表于 2016-9-24 09:25:24 | 显示全部楼层
    感觉很高大上啊  厉害

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 发表于 2016-9-24 13:11:19 | 显示全部楼层
    哇,新技能GET

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:05
    回复 支持 反对
  • 发表于 2016-9-25 13:22:16 | 显示全部楼层
    好像学到了新技能,原先我都喜欢直接使用免费的魔版,但是昨天制作完毕后发现无法翻页......

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:06
    回复 支持 反对
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 易企秀
  • 城管
    • 15170
      积分
    • 7050690
      金币
    • 4273
      帖子
    猜你喜欢

    快速回复 返回顶部 !pub_help!