关闭→
当前位置:趣知常识网>游戏数码>互联网>网页动态Banner制作:[1]制作动态Banner图片

网页动态Banner制作:[1]制作动态Banner图片

趣知常识网 人气:2.06W

对于各位网页设计者特别是初学者而言,对于网页中Banner部分动态效果的制作一定感觉很好奇,那么这么唯美的动态Banner效果是怎么制作出来的呢?今天小编就与大家一起分享一下动态Banner的制作方法。

网页动态Banner制作:[1]制作动态Banner图片

操作方法

(01)其实实现页面动态Banner效果最简单的方法就是利用动态Gif图片来实现。我们可以借助PS来制作网页动态Banner。下面小编就制作一个简单的动态Banner,希望大家从中得到启发,制作出符合自己需求的Banner。

(02)打开PS,新建一空白文档,其参数如图所示(注:尺寸应根据实际需求来设定):

网页动态Banner制作:[1]制作动态Banner图片 第2张

(03)利用“渐变”工具,对当前图层进行填充,效果如图:

网页动态Banner制作:[1]制作动态Banner图片 第3张
网页动态Banner制作:[1]制作动态Banner图片 第4张

(04)接下来加入网站的宣传标语或企业文化。可以选择“文字”工具输入文字。

网页动态Banner制作:[1]制作动态Banner图片 第5张

(05)然后加入网站的LOG以及其它相关具有代表性的标记或图片,然后根据背景色选择合适的“图层混合”模式,并应用“蒙板”进行过度设置。

网页动态Banner制作:[1]制作动态Banner图片 第6张

(06)然后对文字所在图层应用“图层样式”。

网页动态Banner制作:[1]制作动态Banner图片 第7张
网页动态Banner制作:[1]制作动态Banner图片 第8张
网页动态Banner制作:[1]制作动态Banner图片 第9张
网页动态Banner制作:[1]制作动态Banner图片 第10张

(07)点击“窗口”->“动画”来打开动画面板。

网页动态Banner制作:[1]制作动态Banner图片 第11张

(08)在此就可以创建简单的动画啦。大家可以根据自己的实际需要来进行创建动画,在此小编创建如图所示的动画效果。

网页动态Banner制作:[1]制作动态Banner图片 第12张

(09)最后将动画文件输出。点击“文件”->“存储为Web所有格式”项。

网页动态Banner制作:[1]制作动态Banner图片 第13张

(10)在打开的窗口中,选择“Gif”格式输出,同时将“动画循环选项”设置为“永远”,最后点击“存储”按钮即可。

网页动态Banner制作:[1]制作动态Banner图片 第14张

(11)最后就可以将该动态图片插入到网页Banner位置啦。

网页动态Banner制作:[1]制作动态Banner图片 第15张
TAG标签:#Banner #网页 #