淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 641|回复: 9
收起左侧

[美工相关] 纪念碑谷风格页面。。。

[复制链接]
  • TA的每日心情
    臭美
    2017-3-18 18:19
  • 签到天数: 10 天

    连续签到: 1 天

    [LV.3]武林新秀

    7

    主题

    39

    帖子

    3195

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3195

    发表于 2016-7-22 15:39:26 | 显示全部楼层 |阅读模式
    首页-堂品.jpg

    想做一版动态的 ,,可是权限不够啊。。。哪位兄弟有30的 能帮我看看代码不 。。

    http://www.taobaoux.com/forum.ph ... 5%85%A8%E5%B1%8Fgif

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2017-8-25 17:30
  • 签到天数: 310 天

    连续签到: 1 天

    [LV.8]自成一派

    72

    主题

    816

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    60027

    天猫美工最佳新人热心会员

    QQ
    发表于 2016-7-22 15:45:23 | 显示全部楼层

    回帖奖励 +50

    现在根本不用那么麻烦啊

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2017-3-18 18:19
  • 签到天数: 10 天

    连续签到: 1 天

    [LV.3]武林新秀

    7

    主题

    39

    帖子

    3195

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3195

     楼主| 发表于 2016-7-22 15:49:12 | 显示全部楼层
    SKI 发表于 2016-7-22 15:45
    现在根本不用那么麻烦啊

    现在怎么搞

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2017-8-25 17:30
  • 签到天数: 310 天

    连续签到: 1 天

    [LV.8]自成一派

    72

    主题

    816

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    60027

    天猫美工最佳新人热心会员

    QQ
    发表于 2016-7-22 16:21:04 | 显示全部楼层
    楼主你要看的不知道大家有没有发现,很多店铺的全屏海报都是静态的,一张全屏大图死死的摆在那里一动不动。可能会有朋友说了,想要动画的话,那直接设计一张GIF图不就行了!... 如果你这样想,那只能说明你太不把装修当一回事了。

    设计全屏GIF海报,有两个问题是无法解决的,其一,图片的大小容量会变得非常大;其二,图片清晰度将会严重下降。先说第一个问题,全屏的GIF图片大小容量少则五六百KB,多则上M、几M。为什么GIF图片容量会那么大?因为他是帧帧动画的,一帧就是一个图层,帧数超多,图片容量也就同时变得越大。一张图片的容量达到500KB就已经是个非常恐怖的数字了!我们平时设计的1920*500的大图,经过合理正确的优化后,图片的大小容量是100-200KB左右,最多不能超过300KB。

    第二个问题,GIF图片最多只能保存256色,当我们的图片色彩过于丰富,颜色远远多与256色时,有些颜色无法保存就会产生躁点,图片也就因此而变得不清晰。这就是为什么很多朋友不明白,为什么保存GIF格式,图片就会变得不清晰,而保存其它格式却不会。试想一下,一张全屏的GIF图将会出现多少躁点,一张这么不清晰的图,谁又会用呢?

    所以,如果你想直接设计全屏GIF海报,那绝对是不现实的,除非你无视店铺的载入速度以及图片的清晰度。

    为了解决以上问题,今天给大家分享一种全新的装修技巧,让大家可以拥有一张漂亮的全屏GIF动画海报,即保证图片的大小容量,又能保证图片的清晰度。此技巧目前四金冠百分之一正在使用,其实不单是百分之一,在淘宝官方的各种活动页面都能看到这种装修技巧。

    我就不卖关子了,这种装修技巧其实很简单,我们只需要同时做两张图即可,一张静态的,一张动态的,把图片动态部分单独做成一张GIF。静态那张设置为背景,动态那张放在上面。

    店铺效果展示:http://uxux.taobao.com/#screen_gif

    具体步骤:
    1、设计海报时,先完成静态图片的设计,然后再把动态部分单独分离出来,下面以百分之一为例:
      
    这是静态图,图片大小容量为156KB。
      
    这是动态部分,图片大小容量为57KB,两张图共213KB。

    2、我们要把这两张图“合成”到一起,代码如下:
    <div style="width:1920px;height:550px;background:url();">
        <a href="#" target="_blank">
                <img src="http://demo.taobaoux.com/img/screen_gif2.gif" /></a>
    </div>
    复制代码
    3、以上代码只是简单的把两张图“合成”到一起,并没有实现全屏效果,

    全屏海报代码如下:
    <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'contentCls': 'bbs-taobaoux-com','navCls': 'bbs-nav','effect': 'fade','autoplay': false,'circular': false}">
        <div style="width:1920px;height:550px;overflow:hidden;" class="bbs-taobaoux-com">
            <div style="width: 1920px;left: -485px;">
                <div style="width:1920px;height:550px;background:url();">
                    <a href="#" target="_blank">
                        <img border="0" src="http://demo.taobaoux.com/img/screen_gif2.gif" /></a>
                </div>
            </div>
        </div>
        <div style="display:none;" class="bbs-nav"></div>
    </div>
    复制代码

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2017-5-26 18:50
  • 签到天数: 198 天

    连续签到: 1 天

    [LV.7]炉火纯青

    28

    主题

    949

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    29797

    热心会员最佳新人

    发表于 2016-7-22 16:22:18 | 显示全部楼层
    SKI 发表于 2016-7-22 16:21
    不知道大家有没有发现,很多店铺的全屏海报都是静态的,一张全屏大图死死的摆在那里一动不动。可能会有朋友 ...

    你这  拷贝的一字不差啊   

    其实我只是一枚小小的小白  大神不必在意啦~~
  • TA的每日心情
    臭美
    2017-3-18 18:19
  • 签到天数: 10 天

    连续签到: 1 天

    [LV.3]武林新秀

    7

    主题

    39

    帖子

    3195

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3195

     楼主| 发表于 2016-7-22 16:33:28 | 显示全部楼层
    SKI 发表于 2016-7-22 16:21
    楼主你要看的不知道大家有没有发现,很多店铺的全屏海报都是静态的,一张全屏大图死死的摆在那里一动不动。 ...

    兄弟 多谢了  。。 辛苦了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    5 天前
  • 签到天数: 513 天

    连续签到: 1 天

    [LV.9]已臻大成

    11

    主题

    181

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    65972

    发表于 2016-7-23 10:02:42 | 显示全部楼层
    大家的图是看不到呢?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2017-6-23 03:15
  • 签到天数: 389 天

    连续签到: 1 天

    [LV.9]已臻大成

    21

    主题

    802

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    90481

    发表于 2016-7-24 00:34:21 | 显示全部楼层
    上面说得很对。就是图片大小和颜色的问题。
    可以下面放一张JPG,上面覆盖上小张的动态GIF。

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-9-25 01:31 , Processed in 0.147871 second(s), 26 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表