当前位置: 主页 > 平面设计 > PS教程 > 制作实例 > 动画制作 > PS制作淘宝网店动态闪图店标的详细教程

PS制作淘宝网店动态闪图店标的详细教程

  • 2022-04-14
  • 来源/作者: Ps123.Net    / 凤凰社 太平洋    
  • 3 次浏览

效果

按此在新窗口浏览图片

淘宝旺旺头像是120X120,店标100X100像素,这里我们以头像为示例,启动PS2 软件 新建一个120X120的文档

按此在新窗口浏览图片

示例是女装店的店标,我们提前准备了几个漂亮的女装图片,当然您可以根据你店铺需求换成别的 照片 ,好比您做洗车用品,那不妨找几个漂亮的名车,呵呵,图片不如道在哪里找?那就旺旺找我吧

按此在新窗口浏览图片

剪裁工具,我们将画面都裁剪成120X120像素尺寸,???看不懂??那真的您PS的基础不太过硬,那我建议您回头先看看我们前面的系列 教程,那里我们写比较详细,排序渐进吧:)

按此在新窗口浏览图片

“移动工具”将剪裁好的照片放置到我们刚才新建好的120像素的空白文件中,只需拖拽拷贝就好了

按此在新窗口浏览图片

 

按此在新窗口浏览图片

F7调出图层调板,我们得到了一个多张照片重叠在一起的多图层文件,再罗索几句,PS做动态的GIF动画,主要已经配合图层使用PHOTOSHOP捆绑的软件lmagereody完成的。因此图层调板的使用就是核心技巧,这个示例我们的目标也是全面掌握图层调板的各种使用基础。

按此在新窗口浏览图片

调整拾色器,选择桃红色后,填充上步我们建立的空白图层。

按此在新窗口浏览图片

使用“编辑”>“填充”命令,将调好的前景色填充新图层

按此在新窗口浏览图片

新建出几个辅助参考线,分别为水平:10、20、100、110像素

按此在新窗口浏览图片

注意选中径向渐变模式
有了店铺的文字层后,现在我们做那个发光效果的图层,现在我们做那个发光效果的图层,在桃红色直译的图层7上面新建一个空白层图层10。 

按此在新窗口浏览图片

渐变工具使用径向模式,注意拾色器调整出粉红前景色和桃色 背景 色,制作出发光效果的图层10,所有准备工作做好了。
点击这里,我们切换到lmogereaody

按此在新窗口浏览图片

lmogereaody是PS的捆绑软件,界面大同小异,使用非常简单,“窗口”菜单调出“动画”调板。配合图层的显示和隐藏,我们就能设计出漂亮的动画。

按此在新窗口浏览图片

 

按此在新窗口浏览图片

图层的显示和隐藏,就是通过图层调板上“眼睛的小图标”控制的,您单击眼睛就可以看到对应图层显示和隐藏了,操作很简单,多实验几次就熟悉了。

按此在新窗口浏览图片

动画关键帧
GIF动画的核心就是通过一个个动画关键帧完成,关键帧就是动画调板上的那小窗口,我们可以通过点击调整这帧的演示时间。 

按此在新窗口浏览图片

点击动画调板下新建关键帧,然后配合图层调板,调整新建帧显示的图层,我们就能设计出照片一个个交替显示的动画。
新建复制一个新动画关键帧

按此在新窗口浏览图片

依次编排出五张照片顺序显示
编排动画中,您可以点击箭头试着播放观看编排效果,单击播放演示和再点击停止动画。

按此在新窗口浏览图片

下面我们编排文字动画效果,先通过控制两个

发光效果图层
参考动画框中我们示意的关键帧效果,配合图层的显示和隐藏,相信您一定调整出了适合的动画效果。最后我们配合前面做好的发光层让动画更丰富起来。 

按此在新窗口浏览图片

最后松果一遍动画调板中关键帧,记得最后一个帧为了停留时间更长,我们调整成了2秒,当然时间您可以灵活运用,相信您一定能够调整出更棒的动画效果!
编排动画中,您可以随时点击箭头试着播放观看编排效果

按此在新窗口浏览图片

 

按此在新窗口浏览图片

所有的动画效果编排完毕后,最后调出优化调板,调整相应的颜色和参数,然后发布您就大功告成了,上面我们只是讲解了一个女装店店标的动画编排,相信关键是学会方法,那你就可以灵活应用,设计自己独特个性的漂亮店标了。这个练习是有一定难度的。如果您学习比较吃力,那请关注前面我们的系列基础教程,学后再学习就容易多了。

按此在新窗口浏览图片

完成最终效果

按此在新窗口浏览图片