如何用ps制作gif动态图片动态
点击联系发帖人
时间：2018-01-03 07:35
当前位置： &
> photoshop如何制作gif动态图片
photoshop如何制作gif动态图片
photoshop如何制作gif动态图片
你知道怎么用来做动态图片么，如果你是一个爱学的人，那么就看看photoshop如何制作gif动态图片吧，photoshop如何制作gif动态图片为你提供最为全的制作教程，俗话说的好技多不压身么，这个photoshop怎么制作gif动态图片让你可以学到更多知识。
photoshop如何制作gif动态图片步骤与方法：
1.首先我们需要打开一个空白的图层
2.打开时间轴窗口，然后点击时间轴，打开就可以了。
3.这个时候你就可以输入文字了，在空白图层上输入你想要的文字。
4.栅格化文字图层栅格化文字的作用是把文字图层变成普通图层
5.之后在新建几个图层，点击图片上显示的新建按钮，新建几个空白图层。
6.然后开始填充空白图层，之后给新建的几个空白图层也都填充上不同的颜色。
7.盖印图层把新建的几个图层分别与文字图层盖印图层，然后我们就得到四个新的盖印图层，把四张图片设置在时间轴上面
8.最后保存图片点击文件&&储存为web所用格式，选择gif格式储存。
9.然后把得到的动态图片用IE打开就可以看到效果了。快去试试去吧。
本站的和都很全面哟。
[dl]13-27276[/dl]
[数码资讯]
[网游攻略]
[游戏资讯]ps gif动态图片制作图文教程
作者：佚名
字体：[ ] 来源：互联网 时间：01-17 12:06:34
这里介绍最基本的如何用ps做gif动态图片,用最简单的例子让初学者快速入门,能够做出简单的再找些复杂的例子来做,多做几个相信自己就能领会其中的原理
下面小编为大家分享ps gif动态图片制作图文教程，其实这个原理也很简单，就是在不同的时间显示出不同的画面。就这么简单，下面就来讲讲我们具体的步骤。
1、首先把你需要显示的图片全部在ps中打开，并且不同的图片放在不同的层中，放图要有顺序方便后期制 如图：
2、然后点窗口，选择时间轴，如图：
3、接下来设置第一帧显示，也就是初始画面。先点击时间轴上的第一帧 如图：再把图层一左边的框点一下出现一个眼睛（显示），其他图层全部去掉眼睛（隐藏），初始画面就出来了。如图所示：
4、然后设置第二帧，还是先点击时间轴上的第二帧。在图层中把刚刚点上的第一层的眼睛去掉，第二层的眼睛点出来，也就是这个时间只显示第二层的图片，其他都不显示。如图：
5、然后是同样的步骤，在第三帧上，隐藏一二层点出显示第三层，如图：
6、第四帧、第五帧、第六、七、、、、、、后边的帧数都一样的步骤以此类推，完成所有的帧之后，你可以点击播放看看你制作的效果如何。
7、如果觉得显示的时间不对可以选择自己设定每一帧的显示时间及间隔（点击每一帧的下面那个小三角箭头既可以设置）如图：
8、接下来当然就是保存了，保存时注意。要选择储存为（web所用格式）如图:
9、最后选择gif格式，保存就ok了。
在设置帧的时候一定要细心
以上就是ps gif动态图片制作图文教程，希望能够对大家有所帮助！
大家感兴趣的内容
12345678910
最近更新的内容西西软件园多重安全检测下载网站、值得信赖的软件下载站！
→ 怎样用Photoshop制作炫酷的gif动态图片
类型：桌面壁纸大小：92.0M语言：中文 评分：6.0
我们常常在网上看到gif动态图片，是不是很炫、很酷？是不是羡慕嫉妒恨？是不是很想学做gif动太图片？现在就讲解用制作超炫的gif动态图片。本次效果图需要的两个素材图1.打开用来制作gif图得张素材照片。2.点击菜单栏上的【窗口】-【时间轴】，本帖用到的事帧动画，即使是IR也可以完成的，CS6一下的版本调出动画后，应该就是自动的有一帧，CC版的需样先创建。接下来，就要设置一些功能。点击时间轴的右上角的下拉三角形，勾选“为每个新帧创建新图层”和“新建在所有帧中都可见图层”3.点击需要旋转的图层，Ctrl+T，输入旋转角度4°，Enter确认。Ctrl+Alt+Shift+T，重复动作10次。4.点击第一个图层，涉资上面的统一图层位子“同意图层位置”和“通用图层可见性”接着点击第二图层设置“统一图层可见性”。5.点击【时间轴】右上角的下拉三角形，勾选“从图层建立帧”，自动添加帧，把前面嗓不需要的帧删除。6.在图层2上新建一个图层，用椭圆工具画出一个椭圆形，并填充颜色#4ebfff。7.Ctrl+D取消选区，执行滤镜模糊―高斯模糊，模糊半径设置为18像素左右，并将图层的混合模式更改为滤色，选择统一图层可见性。8.修改这个亮点涂层在每个帧里面的不透明度，第一帧100%，第二帧80%，第三帧60%，以此类推修改即可。9.存储，点击菜单栏【文件】-【存储为web所用格式】，图片中选框的图像大小是可以更改的，预设选GIF，如何存储。最终效果
09-1209-1208-1808-0105-1204-3004-2304-2204-1504-15
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载【Ps】使用Photoshop制作loading GIF动图7 months ago6收藏分享举报文章被以下专栏收录总结，分享，随感～关于设计，科技和其他感兴趣的话题{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&总结，分享，随感～关于设计，科技和其他感兴趣的话题&,&urlToken&:&cypress&,&id&:27392,&imagePath&:&v2-eccd4f044a4fbeb9e1ce537.jpg&,&slug&:&cypress&,&applyReason&:&0&,&name&:&CY专栏&,&title&:&CY专栏&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fcypress&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:26,&avatar&:{&id&:&v2-eccd4f044a4fbeb9e1ce537&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-eccd4f044a4fbeb9e1ce537_l.jpg&,&articlesCount&:20},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&lastUpdated&:,&imagePath&:&v2-f15047e1fcda447909cb.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[116,3005],&summary&:&之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E设置ring的视觉效果1. 新建一个文件，如果你之后想要post到dribble上，可…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T04:03:18+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3141021,&withContent&:false,&slug&:,&bigTitleImage&:true,&title&:&【Ps】使用Photoshop制作loading GIF动图&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:27392,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:681537}],&title&:&【Ps】使用Photoshop制作loading GIF动图&,&author&:&chenyu.wang&,&content&:&\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.gif\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.gif\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='600'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.gif\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.gif\&\u003E\u003C\u002Ffigure\u003E之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E\u003Ch2\u003E设置ring的视觉效果\u003C\u002Fh2\u003E\u003Cp\u003E1. 新建一个文件，如果你之后想要post到dribble上，可以直接画布大小选择 800*600\u003C\u002Fp\u003E\u003Cp\u003E2. 使用图形工具画一个Ring，什么颜色都无所谓，因为之后会覆盖颜色上去。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_b.jpg\& data-rawwidth=\&2218\& data-rawheight=\&1716\& class=\&origin_image zh-lightbox-thumb\& width=\&2218\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2218'%20height='1716'&&\u002Fsvg&\& data-rawwidth=\&2218\& data-rawheight=\&1716\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2218\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E3. 双击新建的“Ellipse 1”，调出layer style窗口。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_b.jpg\& data-rawwidth=\&1678\& data-rawheight=\&1216\& class=\&origin_image zh-lightbox-thumb\& width=\&1678\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1678'%20height='1216'&&\u002Fsvg&\& data-rawwidth=\&1678\& data-rawheight=\&1216\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1678\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E4. 选择 Gradient Overlay并设置合适的gradient。记得style要选择Angle，这样才可以让它旋转起来变成一个loading的gif呀～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_b.jpg\& data-rawwidth=\&2172\& data-rawheight=\&1722\& class=\&origin_image zh-lightbox-thumb\& width=\&2172\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2172'%20height='1722'&&\u002Fsvg&\& data-rawwidth=\&2172\& data-rawheight=\&1722\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2172\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E5. 设置合适的inner glow让这个loading ring看起来更立体～不同的 Blend Mode, opacity, Color, 和 Contour ……会有不同的效果，可以根据自己的需要选择最合适的～在设置的时候可以在刚刚画好的圆环上看到实时的效果预览～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_b.jpg\& data-rawwidth=\&1738\& data-rawheight=\&1104\& class=\&origin_image zh-lightbox-thumb\& width=\&1738\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1738'%20height='1104'&&\u002Fsvg&\& data-rawwidth=\&1738\& data-rawheight=\&1104\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1738\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E制作动效\u003C\u002Fh2\u003E\u003Cp\u003E6. 现在就让它动起来吧！点击 Create Video Timeline，调出timeline编辑窗口～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_b.jpg\& data-rawwidth=\&2274\& data-rawheight=\&1706\& class=\&origin_image zh-lightbox-thumb\& width=\&2274\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2274'%20height='1706'&&\u002Fsvg&\& data-rawwidth=\&2274\& data-rawheight=\&1706\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2274\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E7. 就像使用after effect一样，设置keyframe。因为我们只是让它的style里的gradient填充在变化，所以我们只要在style那里设置就好啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_b.jpg\& data-rawwidth=\&1406\& data-rawheight=\&480\& class=\&origin_image zh-lightbox-thumb\& width=\&1406\& data-original=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1406'%20height='480'&&\u002Fsvg&\& data-rawwidth=\&1406\& data-rawheight=\&480\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1406\& data-original=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E8. 拖动时间轴到下一个需要设置keyframe的地方；然后跟上面一样调出创造gradient的窗口来调整gradient的填充。\u003C\u002Fp\u003E\u003Cp\u003E注意：Angle那里要写-89。因为直接从90到-90，photoshop并不知道到底是应该顺时针还是逆时针转动，所以写上-89，这样photoshop就知道应该顺时针转动到需要的位置了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_b.jpg\& data-rawwidth=\&2036\& data-rawheight=\&1464\& class=\&origin_image zh-lightbox-thumb\& width=\&2036\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2036'%20height='1464'&&\u002Fsvg&\& data-rawwidth=\&2036\& data-rawheight=\&1464\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2036\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_b.jpg\&\u003E\u003C\u002Ffigure\u003E9. 跟上面一样，设置好另外的一个keyframe，让gradient回到之前的位置，如果之前开始失手gradient的angle是90，那么这最后一个新的keyframe就可以91....；原理和上面一样，是为了告诉photoshop旋转的方向～\u003C\u002Fp\u003E\u003Cp\u003E10.选择Loop Playback，你就可以预览到旋转的loading了～\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_b.jpg\& data-rawwidth=\&1878\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb\& width=\&1878\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1878'%20height='632'&&\u002Fsvg&\& data-rawwidth=\&1878\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1878\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E添加pattern／texture\u003C\u002Fh2\u003E\u003Cp\u003E11.如果想要效果看起来更漂亮一点儿，还可以给它添加texture。新建一个group，把刚刚的ellipse 1放进去～这样我们就可以一起给整个group加texture了，之后如果想要给ring下面添加背景也是很方便的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_b.jpg\& data-rawwidth=\&476\& data-rawheight=\&302\& class=\&origin_image zh-lightbox-thumb\& width=\&476\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='476'%20height='302'&&\u002Fsvg&\& data-rawwidth=\&476\& data-rawheight=\&302\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&476\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_b.jpg\&\u003E\u003C\u002Ffigure\u003E12.双击 Group 1, 调出跟之前设置ring一样的那个窗口。添加pattern overlay；Blend Mode可以选择Overlay。然后就可以选择自己喜欢的pattern，调整各种参数，在窗口中预览效果啦！\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_b.jpg\& data-rawwidth=\&2054\& data-rawheight=\&1714\& class=\&origin_image zh-lightbox-thumb\& width=\&2054\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2054'%20height='1714'&&\u002Fsvg&\& data-rawwidth=\&2054\& data-rawheight=\&1714\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2054\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_b.jpg\&\u003E\u003C\u002Ffigure\u003E13.之后如果想要添加背景图片或者做更多的细节，只要添加不同的layer慢慢来就好了～\u003C\u002Fp\u003E\u003Cp\u003E14.导出文件，选择timeline 窗口下方的导出。就可以导出成为video啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_b.jpg\& data-rawwidth=\&1502\& data-rawheight=\&718\& class=\&origin_image zh-lightbox-thumb\& width=\&1502\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1502'%20height='718'&&\u002Fsvg&\& data-rawwidth=\&1502\& data-rawheight=\&718\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1502\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E15.想要把video变成gif的话，只要用photoshop再打开video，然后用File&&Export &&Save for Web (Legacy)导出成为GIF就大功告成(●°u°●) 」\u003C\u002Fp\u003E&,&updated&:new Date(&T20:03:18.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:6,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Adobe Photoshop&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户界面设计&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1440,&height&:655},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&cypress&,&name&:&CY专栏&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T04:03:18+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:null,&isFollowing&:false,&hash&:&f000e6d40bc0ec85ca044e&,&uid&:374500,&isOrg&:false,&slug&:&icey-94-5&,&isFollowed&:false,&description&:&&,&name&:&Icey&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ficey-94-5&,&avatar&:{&id&:&27e2bf5d68b88db9a3aa0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一个不想恋爱的人&,&isFollowing&:false,&hash&:&2dbdadc1005acd566482baaade3120f3&,&uid&:194400,&isOrg&:false,&slug&:&luo-ben-de-la-tiao-zi-zhua-fan&,&isFollowed&:false,&description&:&&,&name&:&Demons-27&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fluo-ben-de-la-tiao-zi-zhua-fan&,&avatar&:{&id&:&v2-ddac05ccf4adc27cb0bfad3&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&9a7f4dbe63c5d59b4edb5&,&uid&:68,&isOrg&:false,&slug&:&tu-mei-mei&,&isFollowed&:false,&description&:&&,&name&:&anonymity&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ftu-mei-mei&,&avatar&:{&id&:&3ea55eb9e9cf633dcef7bd09&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&e81f8781dacc16e88884&,&uid&:80,&isOrg&:false,&slug&:&nnnn-84&,&isFollowed&:false,&description&:&&,&name&:&ashitaka&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fnnnn-84&,&avatar&:{&id&:&c3820f80b&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&工程师&,&isFollowing&:false,&hash&:&2430cbbe7e31dc4fe44f0a&,&uid&:283300,&isOrg&:false,&slug&:&qi-qi-3-38-29&,&isFollowed&:false,&description&:&&,&name&:&七七&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fqi-qi-3-38-29&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_200x112.jpg\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.jpg\&\u003E之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E设置ring的视觉效果1. 新建一个文件，如果你之后想要post到dribble上，可…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-dab92801ef1aae801bdf88d3b09bef43_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户界面设计&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Adobe After Effects&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&cypress&,&name&:&CY专栏&},&content&:&\u003Cblockquote\u003E\u003Cp\u003E最近天气在晴与雪中反复波动。早上大雪纷飞然而到了下午就阳光明媚得睁不开眼～也是别有一番风味。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E使用aftereffect制作进度条GIF的快速方法：1. 变化的百分数；2. 进度条的动效-条形／圆形； 3. 从Video导出成GIF。我们从变化的百分数开始。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E变化的百分数\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E1. 新建一个 null object并且重命名为“Counter”\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-e4654eee9d3e30d721fe9_b.png\& data-rawwidth=\&1258\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb\& width=\&1258\& data-original=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-e4654eee9d3e30d721fe9_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E2. 在 Effects & Presets 中搜索slider并选择 Slider Control. 点击拖动至新建的null object来加入其中。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-0fc3bf8bf37f3b1de44a28_b.png\& data-rawwidth=\&422\& data-rawheight=\&226\& class=\&origin_image zh-lightbox-thumb\& width=\&422\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-0fc3bf8bf37f3b1de44a28_r.png\&\u003E\u003C\u002Ffigure\u003E3. 选择文字工具新建文字图层。任意输入一个百分数例如10%。选中Source Text，在hold住Option键的时候点击小停表图标，可以调出输入source text的窗口。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-f2c26ecf57aa721e3d3e3_b.png\& data-rawwidth=\&1646\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&1646\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-f2c26ecf57aa721e3d3e3_r.png\&\u003E\u003C\u002Ffigure\u003E4. 把一下内容输入source text中：注意Math.round(x)\u002F1那里，如果想要两位小数就是／100，以此类推，三位小数／1000，四位／1000……\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ex = thisComp.layer(\&Counter\&).effect(\&Slider Control\&)(\&Slider\&);\nMath.round(x)\u002F1 + \&%\&;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E5.
现在可以去试一试啦～，当你拖动slider control的时候屏幕上的数字也在随之变化。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-e29c9d3bf2bed025cdfa58_b.png\& data-rawwidth=\&946\& data-rawheight=\&344\& class=\&origin_image zh-lightbox-thumb\& width=\&946\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-e29c9d3bf2bed025cdfa58_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E6. 最后一步就是设置自动播放了。展开Counter的Effects，在slider control里设置key frame就好啦。右键单击选择 edit value，将开始的地方设为0，结束的时候设为100。这样当播放的时候就会自动从0%count到100%啦～\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-f5f5cc3ae_b.png\& data-rawwidth=\&828\& data-rawheight=\&560\& class=\&origin_image zh-lightbox-thumb\& width=\&828\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-f5f5cc3ae_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-954dda1b9b24de82ddfc663c26672d7a_b.png\& data-rawwidth=\&2342\& data-rawheight=\&522\& class=\&origin_image zh-lightbox-thumb\& width=\&2342\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-954dda1b9b24de82ddfc663c26672d7a_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E制作条形／圆形进度条\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在上面已经设置好百分数的基础上，我们来一起做进度条。这里就用圆形进度条来举例子吧～\u003C\u002Fp\u003E\u003Cp\u003E1. 新建 shape layer，并画上一个圆。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-9cf63ef8fbfdd3e0b2d4444_b.png\& data-rawwidth=\&497\& data-rawheight=\&207\& class=\&origin_image zh-lightbox-thumb\& width=\&497\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-9cf63ef8fbfdd3e0b2d4444_r.png\&\u003E\u003C\u002Ffigure\u003E设置画好的圆填充 Fill为透明或者所在位置的底色，调整stroke的宽度来决定到底想要环状的进度条还是实心圆形pie状的进度条。如果想要pie状的，只要把stroke调得很厚就好啦～\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-8780feb1fff_b.png\& data-rawwidth=\&325\& data-rawheight=\&217\& class=\&content_image\& width=\&325\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E2. 选取shape layer，并在contents里add \&Trim Paths\&\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-e5be27b2e1d37a6ae5cd5befaef9d882_b.png\& data-rawwidth=\&621\& data-rawheight=\&274\& class=\&origin_image zh-lightbox-thumb\& width=\&621\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-e5be27b2e1d37a6ae5cd5befaef9d882_r.png\&\u003E\u003C\u002Ffigure\u003E3. 打开刚刚添加的Trim Path 1的具体设置，hold option键并点击End前的小停表图标，就可以看到设置的具体内容；点住小漩涡?图标，并拖动到effect control窗口的slider那里～\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-602de1ac9402276acfdd38c_b.png\& data-rawwidth=\&321\& data-rawheight=\&118\& class=\&content_image\& width=\&321\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E4.
现在你就会发现，当你拖动slider的时候进度条和对应的数字都在动啦～利用第一部分里面设置好的key frame，也就可以自动播放了～\u003C\u002Fp\u003E\u003Cp\u003E(●°u°●) \u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T02:29:54+08:00&,&url&:&\u002Fp\u002F&,&title&:&【Ae】使用 After Effects 制作进度条GIF&,&summary&:&最近天气在晴与雪中反复波动。早上大雪纷飞然而到了下午就阳光明媚得睁不开眼～也是别有一番风味。使用aftereffect制作进度条GIF的快速方法：1. 变化的百分数；2. 进度条的动效-条形／圆形； 3. 从Video导出成GIF。我们从变化的百分数开始。 \u003Cb\u003E变化的百分数\u003C\u002Fb\u003E1.…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:2},&next&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-1da7964ccba7bddac92e81aa292e1d74_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&网页设计&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户体验设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&cypress&,&name&:&CY专栏&},&content&:&\u003Cp\u003E在这个速度尤为重要的时代，很多时候我们不需要解决每一个问题都从头开始，站在前人的肩膀上，充分利用现在地资源和惊艳，往往可以更高效地解决问题。这篇里面就摘录了10种在\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fplay.google.com\u002Fstore\u002Fbooks\u002Fdetails%3Fid%3DvJWJCgAAQBAJ%26source%3Dproductsearch%26utm_source%3DHA_Desktop_US%26utm_medium%3DSEM%26utm_campaign%3DPLA%26pcampaignid%3DMKTADgclid%3DCj0KCQjw5arMBRDzARIsAAqmJex8jOAVHl44aeD_qvSrAUBwXa_NssysW6QgXGLMiYURtcHFxmE5tmsaAnbdEALw_wcB%26gclsrc%3Daw.ds%26dclid%3DCOKzltXly9UCFZILNwodcQAP_g\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Einformation architecture\u003C\u002Fa\u003E 里面总结的常见的一些信息架构形式以及它们的使用情景。当然，这些形式们并不是互相排斥的，在现实生活中，它们往往同时被使用，相辅相成。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E1. 层级关系 Hierarchy \u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E常见的层级关系有：\u003C\u002Fp\u003E\u003Cp\u003Eo 泛层级： 在顶层有很多内容；层级不多\u003C\u002Fp\u003E\u003Cp\u003Eo 深层级：在顶层内容不多，但是分了很多层次，可以一直向下延伸很多层级\u003C\u002Fp\u003E\u003Cp\u003Eo 严格层级关系：每一个项目只能有一个，且只能出现在一个位置\u003C\u002Fp\u003E\u003Cp\u003Eo 多元层级关系：每个项目可以同时出现在多个位置\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E适合使用情景：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E1. 简单的，没有很多复杂内容的小型网站。这类网站的形式往往由：主页+几个内容页 组成\u003C\u002Fp\u003E\u003Cp\u003E2. 内容丰富且内容的形式不固定、复杂程度各异的一些大型网站\u003C\u002Fp\u003E\u003Cp\u003E例子：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7af838a0a844be92a57662_b.jpg\& data-rawwidth=\&2554\& data-rawheight=\&1400\& class=\&origin_image zh-lightbox-thumb\& width=\&2554\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7af838a0a844be92a57662_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E2. 数据库 Database \u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-3a8eab08abb702dbc74c_b.jpg\& data-rawwidth=\&872\& data-rawheight=\&404\& class=\&origin_image zh-lightbox-thumb\& width=\&872\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-3a8eab08abb702dbc74c_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这里的数据库并不是指我们常见的用于电脑存储的概念，而是指一种常见的信息架构形式。在这种信息架构形式中， 各个页面的内容各不相同，分别独立，不像层级关系那样有明显的主次从属关系，但是它们都遵循一致的形式／格式。\u003C\u002Fp\u003E\u003Cp\u003E举个例子，很多电商网站就是这样，各个商品页面之间分别独立，却遵从统一的格式。比如他们都会有：一段商品介绍，加入购物车，相似产品推荐……等等。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E适合使用情景：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E这种信息架构形式的使用范围很广泛，例如常见的音乐、视频网站，电商网站、个人作品集网站、博客……总的来说，凡是遇到不同页面遵循相同格式、需要给用户提供很多不同页面入口的情况，使用这种信息架构形式都是很有帮助的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E3. Metadata 元数据\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E同样这里也并不是一个technical的概念，而是一种信息架构的形式，它有三种不同的类型：\u003C\u002Fp\u003E\u003Cp\u003EIntrinsic: what the object actually is\u003C\u002Fp\u003E\u003Cp\u003EAdministrative:
How it used descriptive\u003C\u002Fp\u003E\u003Cp\u003EDescriptive: Description of the item\u003C\u002Fp\u003E\u003Cp\u003E用常见的博客类网站举例子，属于metadata 的项目包含：\u003C\u002Fp\u003E\u003Cp\u003E博文 (intrinsic)、作者 (administrative)、发表日期 (administrative)、URL(administrative)、状态：已发表／草稿(administrative)、类别(descriptive)、标签tag(descriptive)... 使用metadata来整理网站的信息，可以用来帮助生成所需要的特定内容的列表或者选择想要看到或者隐藏哪些信息。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E4. Hypertext 超文本\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e189d2dda592_b.jpg\& data-rawwidth=\&900\& data-rawheight=\&696\& class=\&origin_image zh-lightbox-thumb\& width=\&900\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e189d2dda592_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E超链接作为一种信息架构的形式十分微妙，因为它的存在本身就显得anti-structure。在这种信息架构的形式里，不同内容信息之间仅靠彼此之间的关系链接，并不存在层级形式或者数据库形式那样更高一级的架构。\u003C\u002Fp\u003E\u003Cp\u003E这种形式最常见于wiki类型的网站，比如维基百科、百度百科……，不同页面之间靠千丝万缕互相关联的文内链接相关联着。除此以外，很多时候当你最开始并不知道具体会有哪些、多少内容或者并不能明确知道什么架构方式合适的时候，从超链接开始建立自然的联系,之后当内容更加稳固之后，再重新整理也是一个选择。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E5. Linear线性\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-82f718dfb963ae26605dfe_b.jpg\& data-rawwidth=\&1224\& data-rawheight=\&110\& class=\&origin_image zh-lightbox-thumb\& width=\&1224\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-82f718dfb963ae26605dfe_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E在线性的关系里，人们必须遵照一定的顺序来浏览内容。这种形式常用于指引或者其他指导说明性的内容。除非按照顺序来一步步浏览理解非常重要，轻易不要使用这种形式。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E6. Combined Pattern\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-ccd5b2e7666747aaa94a68d3a406d4a3_b.jpg\& data-rawwidth=\&822\& data-rawheight=\&584\& class=\&origin_image zh-lightbox-thumb\& width=\&822\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-ccd5b2e7666747aaa94a68d3a406d4a3_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E除了单一的形式，使用更多的是将各种不同的信息架构形式都是混合在一起使用的，从而达到想要的目的。最常见的一种组合就是层级关系＋数据库的形式了（Hierarchy + Database pattern）\u003C\u002Fp\u003E\u003Cp\u003E这种组合适用于各种不同大小复杂程度的网站。它允许你为一些最基本的内容建立起层级关系（hierarchy），同时使用数据库（database）来整合各种细碎的信息和内容。使用这种结构的一个最主要的挑战就是决定到底哪些信息你需要把他们变成在database中的有标准格式的内容（structured content）\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E7. Catalog\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E还有一种常见的架构形式就是目录形式（catalog）。事实上这也算是一种数据库形式（database pattern）,但是为什么单独把它拎出来说呢～是因为在电商网站中，目录形式实在是太常见了。大部分的电商网站都应用的是这种形式。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-3a7476caa97d292ddd837d4_b.jpg\& data-rawwidth=\&846\& data-rawheight=\&614\& class=\&origin_image zh-lightbox-thumb\& width=\&846\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-3a7476caa97d292ddd837d4_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E8. Hub & Spoke\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cb\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-30db8d0df600a1ccd92c0a_b.jpg\& data-rawwidth=\&788\& data-rawheight=\&622\& class=\&origin_image zh-lightbox-thumb\& width=\&788\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-30db8d0df600a1ccd92c0a_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fb\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Ehub & spoke 其实就是浅一些的层级关系。在层级关系中，用户会沿着你铺好的线一点点走向更加详细的内容，而在hub & spoke中，用户会沿着深入一层，然后再退回最开始的地方（hub），然后再去查看另外的细节内容。举个例子，LinkedIn的profile page就充当了hub这样的角色。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E9. Subsites\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E当使用次级网站（subsites）的时候，很多时候最好保证各个站点之间使用一个统一连贯相承的页面布局和导航，这样可以让用户意识到这些次级网站都隶属于一个更大的网站品牌； 当然，也有很多时候，次级网站采用了非常不用的导航方式和页面布局从而互相区分开来并且更好地服务于它所面向的用户，但是它们之间也会通过一些其它的方式展现出之间的联系。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-567df0ba82ffbcc9bec1df_b.jpg\& data-rawwidth=\&772\& data-rawheight=\&514\& class=\&origin_image zh-lightbox-thumb\& width=\&772\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-567df0ba82ffbcc9bec1df_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个形式特别适用于有很多旗下品牌的大型公司／组织。同时也适用于：当你发现所有的内容无法只用一种的方式展现出来去最好地服务用户的时候。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E10. Focused Entry Points\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E根据用户不同的需求或者不同的经验，有时候你会发现完全没有办法找到一个方式来梳理内容使它们满足所有用户的需求。这种状况下，就可以尝试采用 Focused Entry Points这个架构形式。这种形式其实就是在一个主要的架构形式（例如：层级关系）之上，给特定内容之间为一定的用户群体设置新的联结，从而让他们可以更方便地找到所需的信息。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-fadce573ccf4_b.jpg\& data-rawwidth=\&748\& data-rawheight=\&508\& class=\&origin_image zh-lightbox-thumb\& width=\&748\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-fadce573ccf4_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T06:03:20+08:00&,&url&:&\u002Fp\u002F&,&title&:&【Web】常见的10种网站信息架构形式－Information Architecture Patterns&,&summary&:&在这个速度尤为重要的时代，很多时候我们不需要解决每一个问题都从头开始，站在前人的肩膀上，充分利用现在地资源和惊艳，往往可以更高效地解决问题。这篇里面就摘录了10种在\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fplay.google.com\u002Fstore\u002Fbooks\u002Fdetails%3Fid%3DvJWJCgAAQBAJ%26source%3Dproductsearch%26utm_source%3DHA_Desktop_US%26utm_medium%3DSEM%26utm_campaign%3DPLA%26pcampaignid%3DMKTADgclid%3DCj0KCQjw5arMBRDzARIsAAqmJex8jOAVHl44aeD_qvSrAUBwXa_NssysW6QgXGLMiYURtcHFxmE5tmsaAnbdEALw_wcB%26gclsrc%3Daw.ds%26dclid%3DCOKzltXly9UCFZILNwodcQAP_g\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Einformation architecture\u003C\u002Fa\u003E 里面总结的常见的一些信息架构形式以及它们的使用情景…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:7}},&annotationDetail&:null,&commentsCount&:0,&likesCount&:6,&FULLINFO&:true}},&User&:{&chenyu.wang&:{&isFollowed&:false,&name&:&CY王&,&headline&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&avatarUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fdb508d670c6_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&chenyu.wang&,&bio&:&UX Designer&,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&androidPassThroughPush&:&all&,&newMore&:&new&,&nwebQAGrowth&:&experiment&,&showTipInLiveDetailsPage&:&true&,&nwebFeedAd&:&experiment&,&newSign&:&newVersion&,&searchSectionStyle&:&loosen&,&marketTabBanner&:&market_tab_banner_show&,&liveStore&:&ls_a2_b2_c1_f2&,&qawebThumbnailAbtest&:&new&,&nwebSearch&:&nweb_search_heifetz&,&searchHybridTabs&:&without-tabs&,&enableVoteDownReasonMenu&:&enable&,&showVideoUploadAttention&:&true&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newQuestionDiversion&:&false&,&wechatShareModal&:&wechat_share_modal_show&,&newLiveFeedMediacard&:&old&,&hybridZhmoreVideo&:&no&,&recommendationAbtest&:&new&,&nwebGrowthPeople&:&default&,&qrcodeLogin&:&qrcode&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&questionRecommendReadingsAbtest&:&recommend&,&androidDbCommentWithRepinRecord&:&open&,&androidDbRecommendAction&:&open&,&zcmLighting&:&zcm&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&mobileFeedGuide&:&block&,&default&:&None&,&isNewNotiPanel&:&no&,&androidDbRepinSelection&:&open&,&nwebRelatedAdvert&:&default&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{},&cypress&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fcypress&,&name&:&CY专栏&,&creator&:{&slug&:&chenyu.wang&},&url&:&\u002Fcypress&,&slug&:&cypress&,&avatar&:{&id&:&v2-eccd4f044a4fbeb9e1ce537&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}}
> photoshop如何制作gif动态图片
photoshop如何制作gif动态图片
photoshop如何制作gif动态图片
你知道怎么用来做动态图片么，如果你是一个爱学的人，那么就看看photoshop如何制作gif动态图片吧，photoshop如何制作gif动态图片为你提供最为全的制作教程，俗话说的好技多不压身么，这个photoshop怎么制作gif动态图片让你可以学到更多知识。
photoshop如何制作gif动态图片步骤与方法：
1.首先我们需要打开一个空白的图层
2.打开时间轴窗口，然后点击时间轴，打开就可以了。
3.这个时候你就可以输入文字了，在空白图层上输入你想要的文字。
4.栅格化文字图层栅格化文字的作用是把文字图层变成普通图层
5.之后在新建几个图层，点击图片上显示的新建按钮，新建几个空白图层。
6.然后开始填充空白图层，之后给新建的几个空白图层也都填充上不同的颜色。
7.盖印图层把新建的几个图层分别与文字图层盖印图层，然后我们就得到四个新的盖印图层，把四张图片设置在时间轴上面
8.最后保存图片点击文件&&储存为web所用格式，选择gif格式储存。
9.然后把得到的动态图片用IE打开就可以看到效果了。快去试试去吧。
本站的和都很全面哟。
[dl]13-27276[/dl]
[数码资讯]
[网游攻略]
[游戏资讯]ps gif动态图片制作图文教程
作者：佚名
字体：[ ] 来源：互联网 时间：01-17 12:06:34
这里介绍最基本的如何用ps做gif动态图片,用最简单的例子让初学者快速入门,能够做出简单的再找些复杂的例子来做,多做几个相信自己就能领会其中的原理
下面小编为大家分享ps gif动态图片制作图文教程，其实这个原理也很简单，就是在不同的时间显示出不同的画面。就这么简单，下面就来讲讲我们具体的步骤。
1、首先把你需要显示的图片全部在ps中打开，并且不同的图片放在不同的层中，放图要有顺序方便后期制 如图：
2、然后点窗口，选择时间轴，如图：
3、接下来设置第一帧显示，也就是初始画面。先点击时间轴上的第一帧 如图：再把图层一左边的框点一下出现一个眼睛（显示），其他图层全部去掉眼睛（隐藏），初始画面就出来了。如图所示：
4、然后设置第二帧，还是先点击时间轴上的第二帧。在图层中把刚刚点上的第一层的眼睛去掉，第二层的眼睛点出来，也就是这个时间只显示第二层的图片，其他都不显示。如图：
5、然后是同样的步骤，在第三帧上，隐藏一二层点出显示第三层，如图：
6、第四帧、第五帧、第六、七、、、、、、后边的帧数都一样的步骤以此类推，完成所有的帧之后，你可以点击播放看看你制作的效果如何。
7、如果觉得显示的时间不对可以选择自己设定每一帧的显示时间及间隔（点击每一帧的下面那个小三角箭头既可以设置）如图：
8、接下来当然就是保存了，保存时注意。要选择储存为（web所用格式）如图:
9、最后选择gif格式，保存就ok了。
在设置帧的时候一定要细心
以上就是ps gif动态图片制作图文教程，希望能够对大家有所帮助！
大家感兴趣的内容
12345678910
最近更新的内容西西软件园多重安全检测下载网站、值得信赖的软件下载站！
→ 怎样用Photoshop制作炫酷的gif动态图片
类型：桌面壁纸大小：92.0M语言：中文 评分：6.0
我们常常在网上看到gif动态图片，是不是很炫、很酷？是不是羡慕嫉妒恨？是不是很想学做gif动太图片？现在就讲解用制作超炫的gif动态图片。本次效果图需要的两个素材图1.打开用来制作gif图得张素材照片。2.点击菜单栏上的【窗口】-【时间轴】，本帖用到的事帧动画，即使是IR也可以完成的，CS6一下的版本调出动画后，应该就是自动的有一帧，CC版的需样先创建。接下来，就要设置一些功能。点击时间轴的右上角的下拉三角形，勾选“为每个新帧创建新图层”和“新建在所有帧中都可见图层”3.点击需要旋转的图层，Ctrl+T，输入旋转角度4°，Enter确认。Ctrl+Alt+Shift+T，重复动作10次。4.点击第一个图层，涉资上面的统一图层位子“同意图层位置”和“通用图层可见性”接着点击第二图层设置“统一图层可见性”。5.点击【时间轴】右上角的下拉三角形，勾选“从图层建立帧”，自动添加帧，把前面嗓不需要的帧删除。6.在图层2上新建一个图层，用椭圆工具画出一个椭圆形，并填充颜色#4ebfff。7.Ctrl+D取消选区，执行滤镜模糊―高斯模糊，模糊半径设置为18像素左右，并将图层的混合模式更改为滤色，选择统一图层可见性。8.修改这个亮点涂层在每个帧里面的不透明度，第一帧100%，第二帧80%，第三帧60%，以此类推修改即可。9.存储，点击菜单栏【文件】-【存储为web所用格式】，图片中选框的图像大小是可以更改的，预设选GIF，如何存储。最终效果
09-1209-1208-1808-0105-1204-3004-2304-2204-1504-15
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载【Ps】使用Photoshop制作loading GIF动图7 months ago6收藏分享举报文章被以下专栏收录总结，分享，随感～关于设计，科技和其他感兴趣的话题{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&总结，分享，随感～关于设计，科技和其他感兴趣的话题&,&urlToken&:&cypress&,&id&:27392,&imagePath&:&v2-eccd4f044a4fbeb9e1ce537.jpg&,&slug&:&cypress&,&applyReason&:&0&,&name&:&CY专栏&,&title&:&CY专栏&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fcypress&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:26,&avatar&:{&id&:&v2-eccd4f044a4fbeb9e1ce537&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-eccd4f044a4fbeb9e1ce537_l.jpg&,&articlesCount&:20},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&lastUpdated&:,&imagePath&:&v2-f15047e1fcda447909cb.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[116,3005],&summary&:&之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E设置ring的视觉效果1. 新建一个文件，如果你之后想要post到dribble上，可…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T04:03:18+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3141021,&withContent&:false,&slug&:,&bigTitleImage&:true,&title&:&【Ps】使用Photoshop制作loading GIF动图&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:27392,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:681537}],&title&:&【Ps】使用Photoshop制作loading GIF动图&,&author&:&chenyu.wang&,&content&:&\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.gif\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.gif\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='600'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.gif\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.gif\&\u003E\u003C\u002Ffigure\u003E之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E\u003Ch2\u003E设置ring的视觉效果\u003C\u002Fh2\u003E\u003Cp\u003E1. 新建一个文件，如果你之后想要post到dribble上，可以直接画布大小选择 800*600\u003C\u002Fp\u003E\u003Cp\u003E2. 使用图形工具画一个Ring，什么颜色都无所谓，因为之后会覆盖颜色上去。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_b.jpg\& data-rawwidth=\&2218\& data-rawheight=\&1716\& class=\&origin_image zh-lightbox-thumb\& width=\&2218\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2218'%20height='1716'&&\u002Fsvg&\& data-rawwidth=\&2218\& data-rawheight=\&1716\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2218\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1c4caaa084f7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E3. 双击新建的“Ellipse 1”，调出layer style窗口。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_b.jpg\& data-rawwidth=\&1678\& data-rawheight=\&1216\& class=\&origin_image zh-lightbox-thumb\& width=\&1678\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1678'%20height='1216'&&\u002Fsvg&\& data-rawwidth=\&1678\& data-rawheight=\&1216\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1678\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-2ef32627eceb7f186ba57a57fbb12288_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E4. 选择 Gradient Overlay并设置合适的gradient。记得style要选择Angle，这样才可以让它旋转起来变成一个loading的gif呀～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_b.jpg\& data-rawwidth=\&2172\& data-rawheight=\&1722\& class=\&origin_image zh-lightbox-thumb\& width=\&2172\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2172'%20height='1722'&&\u002Fsvg&\& data-rawwidth=\&2172\& data-rawheight=\&1722\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2172\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-98a72f86a9aaedf7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E5. 设置合适的inner glow让这个loading ring看起来更立体～不同的 Blend Mode, opacity, Color, 和 Contour ……会有不同的效果，可以根据自己的需要选择最合适的～在设置的时候可以在刚刚画好的圆环上看到实时的效果预览～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_b.jpg\& data-rawwidth=\&1738\& data-rawheight=\&1104\& class=\&origin_image zh-lightbox-thumb\& width=\&1738\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1738'%20height='1104'&&\u002Fsvg&\& data-rawwidth=\&1738\& data-rawheight=\&1104\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1738\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-08d0cd5fb14c09c694ac_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Ch2\u003E制作动效\u003C\u002Fh2\u003E\u003Cp\u003E6. 现在就让它动起来吧！点击 Create Video Timeline，调出timeline编辑窗口～\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_b.jpg\& data-rawwidth=\&2274\& data-rawheight=\&1706\& class=\&origin_image zh-lightbox-thumb\& width=\&2274\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2274'%20height='1706'&&\u002Fsvg&\& data-rawwidth=\&2274\& data-rawheight=\&1706\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2274\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-2ceef35ec190beb8e8373d_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E7. 就像使用after effect一样，设置keyframe。因为我们只是让它的style里的gradient填充在变化，所以我们只要在style那里设置就好啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_b.jpg\& data-rawwidth=\&1406\& data-rawheight=\&480\& class=\&origin_image zh-lightbox-thumb\& width=\&1406\& data-original=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1406'%20height='480'&&\u002Fsvg&\& data-rawwidth=\&1406\& data-rawheight=\&480\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1406\& data-original=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic8.zhimg.com\u002Fv2-4ba0c458e7dc653ac2ea517b416b954b_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E8. 拖动时间轴到下一个需要设置keyframe的地方；然后跟上面一样调出创造gradient的窗口来调整gradient的填充。\u003C\u002Fp\u003E\u003Cp\u003E注意：Angle那里要写-89。因为直接从90到-90，photoshop并不知道到底是应该顺时针还是逆时针转动，所以写上-89，这样photoshop就知道应该顺时针转动到需要的位置了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_b.jpg\& data-rawwidth=\&2036\& data-rawheight=\&1464\& class=\&origin_image zh-lightbox-thumb\& width=\&2036\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2036'%20height='1464'&&\u002Fsvg&\& data-rawwidth=\&2036\& data-rawheight=\&1464\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2036\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-be9ee9925b91ccbb7894c6_b.jpg\&\u003E\u003C\u002Ffigure\u003E9. 跟上面一样，设置好另外的一个keyframe，让gradient回到之前的位置，如果之前开始失手gradient的angle是90，那么这最后一个新的keyframe就可以91....；原理和上面一样，是为了告诉photoshop旋转的方向～\u003C\u002Fp\u003E\u003Cp\u003E10.选择Loop Playback，你就可以预览到旋转的loading了～\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_b.jpg\& data-rawwidth=\&1878\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb\& width=\&1878\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1878'%20height='632'&&\u002Fsvg&\& data-rawwidth=\&1878\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1878\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-84cff76ca9ea28ae47a7bf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E添加pattern／texture\u003C\u002Fh2\u003E\u003Cp\u003E11.如果想要效果看起来更漂亮一点儿，还可以给它添加texture。新建一个group，把刚刚的ellipse 1放进去～这样我们就可以一起给整个group加texture了，之后如果想要给ring下面添加背景也是很方便的。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_b.jpg\& data-rawwidth=\&476\& data-rawheight=\&302\& class=\&origin_image zh-lightbox-thumb\& width=\&476\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='476'%20height='302'&&\u002Fsvg&\& data-rawwidth=\&476\& data-rawheight=\&302\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&476\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-df0ae8b6eb388c2c5182_b.jpg\&\u003E\u003C\u002Ffigure\u003E12.双击 Group 1, 调出跟之前设置ring一样的那个窗口。添加pattern overlay；Blend Mode可以选择Overlay。然后就可以选择自己喜欢的pattern，调整各种参数，在窗口中预览效果啦！\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_b.jpg\& data-rawwidth=\&2054\& data-rawheight=\&1714\& class=\&origin_image zh-lightbox-thumb\& width=\&2054\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2054'%20height='1714'&&\u002Fsvg&\& data-rawwidth=\&2054\& data-rawheight=\&1714\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2054\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-b9d0b4da8cfd1f8c1ef4f_b.jpg\&\u003E\u003C\u002Ffigure\u003E13.之后如果想要添加背景图片或者做更多的细节，只要添加不同的layer慢慢来就好了～\u003C\u002Fp\u003E\u003Cp\u003E14.导出文件，选择timeline 窗口下方的导出。就可以导出成为video啦。\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_b.jpg\& data-rawwidth=\&1502\& data-rawheight=\&718\& class=\&origin_image zh-lightbox-thumb\& width=\&1502\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1502'%20height='718'&&\u002Fsvg&\& data-rawwidth=\&1502\& data-rawheight=\&718\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1502\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-dc508fdba210a3a_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E15.想要把video变成gif的话，只要用photoshop再打开video，然后用File&&Export &&Save for Web (Legacy)导出成为GIF就大功告成(●°u°●) 」\u003C\u002Fp\u003E&,&updated&:new Date(&T20:03:18.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:6,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-f15047e1fcda447909cb_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Adobe Photoshop&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户界面设计&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1440,&height&:655},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&cypress&,&name&:&CY专栏&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T04:03:18+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:null,&isFollowing&:false,&hash&:&f000e6d40bc0ec85ca044e&,&uid&:374500,&isOrg&:false,&slug&:&icey-94-5&,&isFollowed&:false,&description&:&&,&name&:&Icey&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ficey-94-5&,&avatar&:{&id&:&27e2bf5d68b88db9a3aa0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&一个不想恋爱的人&,&isFollowing&:false,&hash&:&2dbdadc1005acd566482baaade3120f3&,&uid&:194400,&isOrg&:false,&slug&:&luo-ben-de-la-tiao-zi-zhua-fan&,&isFollowed&:false,&description&:&&,&name&:&Demons-27&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fluo-ben-de-la-tiao-zi-zhua-fan&,&avatar&:{&id&:&v2-ddac05ccf4adc27cb0bfad3&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&9a7f4dbe63c5d59b4edb5&,&uid&:68,&isOrg&:false,&slug&:&tu-mei-mei&,&isFollowed&:false,&description&:&&,&name&:&anonymity&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ftu-mei-mei&,&avatar&:{&id&:&3ea55eb9e9cf633dcef7bd09&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&e81f8781dacc16e88884&,&uid&:80,&isOrg&:false,&slug&:&nnnn-84&,&isFollowed&:false,&description&:&&,&name&:&ashitaka&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fnnnn-84&,&avatar&:{&id&:&c3820f80b&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&工程师&,&isFollowing&:false,&hash&:&2430cbbe7e31dc4fe44f0a&,&uid&:283300,&isOrg&:false,&slug&:&qi-qi-3-38-29&,&isFollowed&:false,&description&:&&,&name&:&七七&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fqi-qi-3-38-29&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_200x112.jpg\& data-rawwidth=\&800\& data-rawheight=\&600\& data-thumbnail=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_b.jpg\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d0e6baeaf677cfcd3a302e_r.jpg\&\u003E之前用\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003Eafter effect制作了loading ring和变化的百分数\u003C\u002Fa\u003E，最近学会了一个用photoshop特别简单快捷地制作美丽loading.gif的法子～分享给大家吧 :- ) 原教程可以参看 \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.iceflowstudios.com\u002FFtutorials\u002Floading-circle-animation-using-photoshop-cs6\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eiceflowstudios.com\u003C\u002Fa\u003E设置ring的视觉效果1. 新建一个文件，如果你之后想要post到dribble上，可…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-dab92801ef1aae801bdf88d3b09bef43_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户界面设计&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&Adobe After Effects&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&cypress&,&name&:&CY专栏&},&content&:&\u003Cblockquote\u003E\u003Cp\u003E最近天气在晴与雪中反复波动。早上大雪纷飞然而到了下午就阳光明媚得睁不开眼～也是别有一番风味。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E使用aftereffect制作进度条GIF的快速方法：1. 变化的百分数；2. 进度条的动效-条形／圆形； 3. 从Video导出成GIF。我们从变化的百分数开始。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E变化的百分数\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E1. 新建一个 null object并且重命名为“Counter”\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-e4654eee9d3e30d721fe9_b.png\& data-rawwidth=\&1258\& data-rawheight=\&632\& class=\&origin_image zh-lightbox-thumb\& width=\&1258\& data-original=\&http:\u002F\u002Fpic2.zhimg.com\u002Fv2-e4654eee9d3e30d721fe9_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E2. 在 Effects & Presets 中搜索slider并选择 Slider Control. 点击拖动至新建的null object来加入其中。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-0fc3bf8bf37f3b1de44a28_b.png\& data-rawwidth=\&422\& data-rawheight=\&226\& class=\&origin_image zh-lightbox-thumb\& width=\&422\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-0fc3bf8bf37f3b1de44a28_r.png\&\u003E\u003C\u002Ffigure\u003E3. 选择文字工具新建文字图层。任意输入一个百分数例如10%。选中Source Text，在hold住Option键的时候点击小停表图标，可以调出输入source text的窗口。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-f2c26ecf57aa721e3d3e3_b.png\& data-rawwidth=\&1646\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&1646\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-f2c26ecf57aa721e3d3e3_r.png\&\u003E\u003C\u002Ffigure\u003E4. 把一下内容输入source text中：注意Math.round(x)\u002F1那里，如果想要两位小数就是／100，以此类推，三位小数／1000，四位／1000……\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ex = thisComp.layer(\&Counter\&).effect(\&Slider Control\&)(\&Slider\&);\nMath.round(x)\u002F1 + \&%\&;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E5.
现在可以去试一试啦～，当你拖动slider control的时候屏幕上的数字也在随之变化。\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-e29c9d3bf2bed025cdfa58_b.png\& data-rawwidth=\&946\& data-rawheight=\&344\& class=\&origin_image zh-lightbox-thumb\& width=\&946\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-e29c9d3bf2bed025cdfa58_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E6. 最后一步就是设置自动播放了。展开Counter的Effects，在slider control里设置key frame就好啦。右键单击选择 edit value，将开始的地方设为0，结束的时候设为100。这样当播放的时候就会自动从0%count到100%啦～\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-f5f5cc3ae_b.png\& data-rawwidth=\&828\& data-rawheight=\&560\& class=\&origin_image zh-lightbox-thumb\& width=\&828\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-f5f5cc3ae_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-954dda1b9b24de82ddfc663c26672d7a_b.png\& data-rawwidth=\&2342\& data-rawheight=\&522\& class=\&origin_image zh-lightbox-thumb\& width=\&2342\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-954dda1b9b24de82ddfc663c26672d7a_r.png\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E制作条形／圆形进度条\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E在上面已经设置好百分数的基础上，我们来一起做进度条。这里就用圆形进度条来举例子吧～\u003C\u002Fp\u003E\u003Cp\u003E1. 新建 shape layer，并画上一个圆。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-9cf63ef8fbfdd3e0b2d4444_b.png\& data-rawwidth=\&497\& data-rawheight=\&207\& class=\&origin_image zh-lightbox-thumb\& width=\&497\& data-original=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-9cf63ef8fbfdd3e0b2d4444_r.png\&\u003E\u003C\u002Ffigure\u003E设置画好的圆填充 Fill为透明或者所在位置的底色，调整stroke的宽度来决定到底想要环状的进度条还是实心圆形pie状的进度条。如果想要pie状的，只要把stroke调得很厚就好啦～\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-8780feb1fff_b.png\& data-rawwidth=\&325\& data-rawheight=\&217\& class=\&content_image\& width=\&325\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E2. 选取shape layer，并在contents里add \&Trim Paths\&\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-e5be27b2e1d37a6ae5cd5befaef9d882_b.png\& data-rawwidth=\&621\& data-rawheight=\&274\& class=\&origin_image zh-lightbox-thumb\& width=\&621\& data-original=\&http:\u002F\u002Fpic3.zhimg.com\u002Fv2-e5be27b2e1d37a6ae5cd5befaef9d882_r.png\&\u003E\u003C\u002Ffigure\u003E3. 打开刚刚添加的Trim Path 1的具体设置，hold option键并点击End前的小停表图标，就可以看到设置的具体内容；点住小漩涡?图标，并拖动到effect control窗口的slider那里～\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\u002Fpic1.zhimg.com\u002Fv2-602de1ac9402276acfdd38c_b.png\& data-rawwidth=\&321\& data-rawheight=\&118\& class=\&content_image\& width=\&321\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fp\u003E\u003Cp\u003E4.
现在你就会发现，当你拖动slider的时候进度条和对应的数字都在动啦～利用第一部分里面设置好的key frame，也就可以自动播放了～\u003C\u002Fp\u003E\u003Cp\u003E(●°u°●) \u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T02:29:54+08:00&,&url&:&\u002Fp\u002F&,&title&:&【Ae】使用 After Effects 制作进度条GIF&,&summary&:&最近天气在晴与雪中反复波动。早上大雪纷飞然而到了下午就阳光明媚得睁不开眼～也是别有一番风味。使用aftereffect制作进度条GIF的快速方法：1. 变化的百分数；2. 进度条的动效-条形／圆形； 3. 从Video导出成GIF。我们从变化的百分数开始。 \u003Cb\u003E变化的百分数\u003C\u002Fb\u003E1.…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:2},&next&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-1da7964ccba7bddac92e81aa292e1d74_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&网页设计&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&用户体验设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&UX Designer&,&isFollowing&:false,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&slug&:&chenyu.wang&,&isFollowed&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&name&:&CY王&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&cypress&,&name&:&CY专栏&},&content&:&\u003Cp\u003E在这个速度尤为重要的时代，很多时候我们不需要解决每一个问题都从头开始，站在前人的肩膀上，充分利用现在地资源和惊艳，往往可以更高效地解决问题。这篇里面就摘录了10种在\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fplay.google.com\u002Fstore\u002Fbooks\u002Fdetails%3Fid%3DvJWJCgAAQBAJ%26source%3Dproductsearch%26utm_source%3DHA_Desktop_US%26utm_medium%3DSEM%26utm_campaign%3DPLA%26pcampaignid%3DMKTADgclid%3DCj0KCQjw5arMBRDzARIsAAqmJex8jOAVHl44aeD_qvSrAUBwXa_NssysW6QgXGLMiYURtcHFxmE5tmsaAnbdEALw_wcB%26gclsrc%3Daw.ds%26dclid%3DCOKzltXly9UCFZILNwodcQAP_g\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Einformation architecture\u003C\u002Fa\u003E 里面总结的常见的一些信息架构形式以及它们的使用情景。当然，这些形式们并不是互相排斥的，在现实生活中，它们往往同时被使用，相辅相成。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E1. 层级关系 Hierarchy \u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E常见的层级关系有：\u003C\u002Fp\u003E\u003Cp\u003Eo 泛层级： 在顶层有很多内容；层级不多\u003C\u002Fp\u003E\u003Cp\u003Eo 深层级：在顶层内容不多，但是分了很多层次，可以一直向下延伸很多层级\u003C\u002Fp\u003E\u003Cp\u003Eo 严格层级关系：每一个项目只能有一个，且只能出现在一个位置\u003C\u002Fp\u003E\u003Cp\u003Eo 多元层级关系：每个项目可以同时出现在多个位置\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E适合使用情景：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E1. 简单的，没有很多复杂内容的小型网站。这类网站的形式往往由：主页+几个内容页 组成\u003C\u002Fp\u003E\u003Cp\u003E2. 内容丰富且内容的形式不固定、复杂程度各异的一些大型网站\u003C\u002Fp\u003E\u003Cp\u003E例子：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7af838a0a844be92a57662_b.jpg\& data-rawwidth=\&2554\& data-rawheight=\&1400\& class=\&origin_image zh-lightbox-thumb\& width=\&2554\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-7af838a0a844be92a57662_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E2. 数据库 Database \u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-3a8eab08abb702dbc74c_b.jpg\& data-rawwidth=\&872\& data-rawheight=\&404\& class=\&origin_image zh-lightbox-thumb\& width=\&872\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-3a8eab08abb702dbc74c_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这里的数据库并不是指我们常见的用于电脑存储的概念，而是指一种常见的信息架构形式。在这种信息架构形式中， 各个页面的内容各不相同，分别独立，不像层级关系那样有明显的主次从属关系，但是它们都遵循一致的形式／格式。\u003C\u002Fp\u003E\u003Cp\u003E举个例子，很多电商网站就是这样，各个商品页面之间分别独立，却遵从统一的格式。比如他们都会有：一段商品介绍，加入购物车，相似产品推荐……等等。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E适合使用情景：\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E这种信息架构形式的使用范围很广泛，例如常见的音乐、视频网站，电商网站、个人作品集网站、博客……总的来说，凡是遇到不同页面遵循相同格式、需要给用户提供很多不同页面入口的情况，使用这种信息架构形式都是很有帮助的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E3. Metadata 元数据\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E同样这里也并不是一个technical的概念，而是一种信息架构的形式，它有三种不同的类型：\u003C\u002Fp\u003E\u003Cp\u003EIntrinsic: what the object actually is\u003C\u002Fp\u003E\u003Cp\u003EAdministrative:
How it used descriptive\u003C\u002Fp\u003E\u003Cp\u003EDescriptive: Description of the item\u003C\u002Fp\u003E\u003Cp\u003E用常见的博客类网站举例子，属于metadata 的项目包含：\u003C\u002Fp\u003E\u003Cp\u003E博文 (intrinsic)、作者 (administrative)、发表日期 (administrative)、URL(administrative)、状态：已发表／草稿(administrative)、类别(descriptive)、标签tag(descriptive)... 使用metadata来整理网站的信息，可以用来帮助生成所需要的特定内容的列表或者选择想要看到或者隐藏哪些信息。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E4. Hypertext 超文本\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e189d2dda592_b.jpg\& data-rawwidth=\&900\& data-rawheight=\&696\& class=\&origin_image zh-lightbox-thumb\& width=\&900\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e189d2dda592_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E超链接作为一种信息架构的形式十分微妙，因为它的存在本身就显得anti-structure。在这种信息架构的形式里，不同内容信息之间仅靠彼此之间的关系链接，并不存在层级形式或者数据库形式那样更高一级的架构。\u003C\u002Fp\u003E\u003Cp\u003E这种形式最常见于wiki类型的网站，比如维基百科、百度百科……，不同页面之间靠千丝万缕互相关联的文内链接相关联着。除此以外，很多时候当你最开始并不知道具体会有哪些、多少内容或者并不能明确知道什么架构方式合适的时候，从超链接开始建立自然的联系,之后当内容更加稳固之后，再重新整理也是一个选择。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E5. Linear线性\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-82f718dfb963ae26605dfe_b.jpg\& data-rawwidth=\&1224\& data-rawheight=\&110\& class=\&origin_image zh-lightbox-thumb\& width=\&1224\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-82f718dfb963ae26605dfe_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E在线性的关系里，人们必须遵照一定的顺序来浏览内容。这种形式常用于指引或者其他指导说明性的内容。除非按照顺序来一步步浏览理解非常重要，轻易不要使用这种形式。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E6. Combined Pattern\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-ccd5b2e7666747aaa94a68d3a406d4a3_b.jpg\& data-rawwidth=\&822\& data-rawheight=\&584\& class=\&origin_image zh-lightbox-thumb\& width=\&822\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-ccd5b2e7666747aaa94a68d3a406d4a3_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E除了单一的形式，使用更多的是将各种不同的信息架构形式都是混合在一起使用的，从而达到想要的目的。最常见的一种组合就是层级关系＋数据库的形式了（Hierarchy + Database pattern）\u003C\u002Fp\u003E\u003Cp\u003E这种组合适用于各种不同大小复杂程度的网站。它允许你为一些最基本的内容建立起层级关系（hierarchy），同时使用数据库（database）来整合各种细碎的信息和内容。使用这种结构的一个最主要的挑战就是决定到底哪些信息你需要把他们变成在database中的有标准格式的内容（structured content）\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E7. Catalog\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E还有一种常见的架构形式就是目录形式（catalog）。事实上这也算是一种数据库形式（database pattern）,但是为什么单独把它拎出来说呢～是因为在电商网站中，目录形式实在是太常见了。大部分的电商网站都应用的是这种形式。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-3a7476caa97d292ddd837d4_b.jpg\& data-rawwidth=\&846\& data-rawheight=\&614\& class=\&origin_image zh-lightbox-thumb\& width=\&846\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-3a7476caa97d292ddd837d4_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E8. Hub & Spoke\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cb\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-30db8d0df600a1ccd92c0a_b.jpg\& data-rawwidth=\&788\& data-rawheight=\&622\& class=\&origin_image zh-lightbox-thumb\& width=\&788\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-30db8d0df600a1ccd92c0a_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003C\u002Fb\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Ehub & spoke 其实就是浅一些的层级关系。在层级关系中，用户会沿着你铺好的线一点点走向更加详细的内容，而在hub & spoke中，用户会沿着深入一层，然后再退回最开始的地方（hub），然后再去查看另外的细节内容。举个例子，LinkedIn的profile page就充当了hub这样的角色。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E9. Subsites\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E当使用次级网站（subsites）的时候，很多时候最好保证各个站点之间使用一个统一连贯相承的页面布局和导航，这样可以让用户意识到这些次级网站都隶属于一个更大的网站品牌； 当然，也有很多时候，次级网站采用了非常不用的导航方式和页面布局从而互相区分开来并且更好地服务于它所面向的用户，但是它们之间也会通过一些其它的方式展现出之间的联系。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-567df0ba82ffbcc9bec1df_b.jpg\& data-rawwidth=\&772\& data-rawheight=\&514\& class=\&origin_image zh-lightbox-thumb\& width=\&772\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-567df0ba82ffbcc9bec1df_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个形式特别适用于有很多旗下品牌的大型公司／组织。同时也适用于：当你发现所有的内容无法只用一种的方式展现出来去最好地服务用户的时候。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E10. Focused Entry Points\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E根据用户不同的需求或者不同的经验，有时候你会发现完全没有办法找到一个方式来梳理内容使它们满足所有用户的需求。这种状况下，就可以尝试采用 Focused Entry Points这个架构形式。这种形式其实就是在一个主要的架构形式（例如：层级关系）之上，给特定内容之间为一定的用户群体设置新的联结，从而让他们可以更方便地找到所需的信息。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-fadce573ccf4_b.jpg\& data-rawwidth=\&748\& data-rawheight=\&508\& class=\&origin_image zh-lightbox-thumb\& width=\&748\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-fadce573ccf4_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T06:03:20+08:00&,&url&:&\u002Fp\u002F&,&title&:&【Web】常见的10种网站信息架构形式－Information Architecture Patterns&,&summary&:&在这个速度尤为重要的时代，很多时候我们不需要解决每一个问题都从头开始，站在前人的肩膀上，充分利用现在地资源和惊艳，往往可以更高效地解决问题。这篇里面就摘录了10种在\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fplay.google.com\u002Fstore\u002Fbooks\u002Fdetails%3Fid%3DvJWJCgAAQBAJ%26source%3Dproductsearch%26utm_source%3DHA_Desktop_US%26utm_medium%3DSEM%26utm_campaign%3DPLA%26pcampaignid%3DMKTADgclid%3DCj0KCQjw5arMBRDzARIsAAqmJex8jOAVHl44aeD_qvSrAUBwXa_NssysW6QgXGLMiYURtcHFxmE5tmsaAnbdEALw_wcB%26gclsrc%3Daw.ds%26dclid%3DCOKzltXly9UCFZILNwodcQAP_g\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Einformation architecture\u003C\u002Fa\u003E 里面总结的常见的一些信息架构形式以及它们的使用情景…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:7}},&annotationDetail&:null,&commentsCount&:0,&likesCount&:6,&FULLINFO&:true}},&User&:{&chenyu.wang&:{&isFollowed&:false,&name&:&CY王&,&headline&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&avatarUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-fdb508d670c6_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&chenyu.wang&,&bio&:&UX Designer&,&hash&:&a99aa7bcf8a87ab5ca8b&,&uid&:223400,&isOrg&:false,&description&:&https:\u002F\u002Fwang-chenyu.github.io\u002F .
UX Designer @ Petuum&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fchenyu.wang&,&avatar&:{&id&:&v2-fdb508d670c6&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&androidPassThroughPush&:&all&,&newMore&:&new&,&nwebQAGrowth&:&experiment&,&showTipInLiveDetailsPage&:&true&,&nwebFeedAd&:&experiment&,&newSign&:&newVersion&,&searchSectionStyle&:&loosen&,&marketTabBanner&:&market_tab_banner_show&,&liveStore&:&ls_a2_b2_c1_f2&,&qawebThumbnailAbtest&:&new&,&nwebSearch&:&nweb_search_heifetz&,&searchHybridTabs&:&without-tabs&,&enableVoteDownReasonMenu&:&enable&,&showVideoUploadAttention&:&true&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newQuestionDiversion&:&false&,&wechatShareModal&:&wechat_share_modal_show&,&newLiveFeedMediacard&:&old&,&hybridZhmoreVideo&:&no&,&recommendationAbtest&:&new&,&nwebGrowthPeople&:&default&,&qrcodeLogin&:&qrcode&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&questionRecommendReadingsAbtest&:&recommend&,&androidDbCommentWithRepinRecord&:&open&,&androidDbRecommendAction&:&open&,&zcmLighting&:&zcm&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&mobileFeedGuide&:&block&,&default&:&None&,&isNewNotiPanel&:&no&,&androidDbRepinSelection&:&open&,&nwebRelatedAdvert&:&default&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{},&cypress&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fcypress&,&name&:&CY专栏&,&creator&:{&slug&:&chenyu.wang&},&url&:&\u002Fcypress&,&slug&:&cypress&,&avatar&:{&id&:&v2-eccd4f044a4fbeb9e1ce537&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}}
我要回帖
更多关于 怎样用ps制作动态图片 的文章
更多推荐
- ·这个小于1秒视频怎么拉长在百度上显示2分1秒，怎么实际上只有2分种，而目外面显示的不是小于1秒视频怎么拉长的第一个画面？大姥们
- ·电视那一年才有的作品是哪一年的按拍摄时间算还是上映时间算？
- ·一加5和一加6开机键坏了怎么开机一样吗？
- ·怎么在iPhone 6苹果手机上下载奥特进化格斗3 ios下载曼格斗进化3？
- ·恢复出厂设置后打机时手机忘记了开机密码怎么办忘了怎么办？
- ·华为p9屏幕不自动熄屏plus怎么熄屏拍照
- ·6.2寸的手机都猎场手机是什么牌子的的
- ·Win7电脑内存测试工具具怎么打开
- ·求教大神格力家用空调安装教程仕空调价格
- ·今天刚到机子 17r4 请问手机贴膜有必要吗贴膜吗，我不
- ·如何制作骨关节疾病pptppt
- ·小米0月租月租卡怎么收费 小米0月租月租卡资费标准介绍
- ·中国移动积分商城受让人怎么删除掉
- ·更新到ios11好吗
- ·不越狱，有什么好的 苹果手机如何拒接来电电的软件
- ·win10忘记开机密码启动密码忘了怎么破dalao教教我系统是win7旗舰版
- ·win10忘记开机密码启动密码忘了怎么破dalao教教我系统是win7旗舰版
- ·人体工学竞技鼠标品牌排行竞技鼠标品牌排行最常见的品牌是哪个？
- ·如何用ps制作gif动态图片动态
- ·戴尔笔记本后壳怎么拆3557怎么拆
- ·电脑坏了，联想电脑保修期多久已过，哪里去修好一点
- ·我的平安银行微信公众号平安奋斗
- ·请问谁有数据库原理与应用技术教程陈志泊主编的电子书啊？第二版第三版都行，谢谢了！
- ·为啥没有七天免登陆登陆了啊啊啊
- ·新手淘宝接单平台app有哪些刷单流程，可以信吗
- ·不伦恋，总裁潇湘溪苑哥哥总裁妹妹的情人妹妹百度云
- ·移动硬盘为什么要分区移动要封杀OPPO
- ·跑美团众包必须买装备吗需要买装备吗，没箱子能跑吗？
- ·神舟战神zx8zx8怎么设置最高
- ·双电源同时供电的后果供电系统的分类有哪些
- ·网上在哪买猫机油在天猫买靠谱吗？
- ·用vc运行c++mfc7 程序运行 vc版本一直都是图片错误，运行c没问题，是怎么回事？怎样恢复正常
- ·手机胶粘剂应用用哪个牌子比较好？
