艺术迷网
艺术迷 >> 平面广告 >> Photoshop教程 >> PS与ImageReady做动态Logo
2007-9-21   作者:佚名    来源:eNet硅谷动力   点击:1821
页面功能: 【评论】有错就点】 【字体: 】 【打印】 【关闭【收藏本页】

确定后,layer 1图层将被密布而规律的黑白方格填满(如图5,图中将“logo”图层隐藏)。



在layers面板上,单击面板底部的新建图层按钮,建立空白图层layer 2。按住ctrl键单击“logo”图层,将其轮廓作为选区载入。再选择菜单命令“select→modify→expand”,在对话框中输入1,按下ok按钮,选区将向外扩张一个像素。按下ctrl+shift+i键,将选区反向。确认当前图层为layer 2,按下ctrl+backspace键,使用背景色白色填充选区。将图层layer 2命名为“白边”。按下ctrl+d键取消选择,可以看到logo周围出现了一圈虚线框(如图6)。








4、使每条边的虚线相互独立。


读者朋友们一定已经看明白了,没错,这条虚线框是假的,这里使了个障眼法,是让背景图案通过一条1像素宽的缝隙露出来一部分,如果让它动起来的话会很困难。该怎么办呢?我们继续使用障眼法??用四块背景来分别对应四条边。在layers面板上,将图层layer 1拖动到面板底部的新建图层按钮上,新建一个该图层的副本图层layer 1 copy。再重复两次复制操作,得到四个相同的布满“黑白方格”图案的图层。选择单列像素选择工具,将图像视图放大到合适比例,在logo左侧的虚线上单击,将该条虚线所在的直线全部选择。在layers面板上,选择图层layer 1,然后单击面板底部的添加图层蒙版按钮,结果将为该图层添加一块几乎为全黑色的蒙版,只在logo左侧的虚线所在的直线上是白色的,也就是说图层layer1只在那条直线上可见。接下来,同样的原理,分别使用单行像素选择工具和单列像素选择工具选择logo上方、右侧和下方的虚线,依次为余下的三个图案图层添加蒙版。这时候,从表面上看logo毫无变化,实际上围绕在它周围的虚线框已经是由四部分组成的了。可以隐藏某一图层,查看一下情况是否如此。根据四个图案图层对应的部分,分别为它们命名为“左”、“上”、“右”和“下”(如图7)。



5、在imageready中让虚线动起来。


我们的准备工作已经做完了,下面要切换到imageready中制作动画。按下工具箱最底部的跳转按钮,imageready将自动运行,并且自动载入我们刚才准备好的文件,并且图层和蒙版等元素全都保持原貌。在animation面板上,可以看到当前图像自动成为动画的第1帧。单击复制当前帧按钮,将建立与第1帧相同的第2帧(如图8)。



选择移动工具,在layers面板上,选择图层“左”,按下↑箭头按钮,使其向上移动一个像素。然后分别将图层“上”向右移动一个像素,图层“右”向下移动一个像素,图层“下”向左移动一个像素。从图像上看,就像是虚线框顺时针方向蠕动了一下。再在animation面板上复制第2帧为第3帧,使用相同的方法再次让虚线框顺时针方向蠕动一下。重复以上过程,直到将第8帧制作完毕。我们在前面制作的图案基本单位是8像素,每帧移动1像素,刚好经过8帧可以周而复始。


6、最后的设置。


imageready默认的设置是每帧动画停留0秒钟,我们需要改变这个数字。在animation面板上,单击第1帧选择它,再按住shift键单击第8帧,将8帧动画全部选择。单击任意一帧下面的停留时间下拉菜单,选择0.1seconds,于是全部帧的停留时间全都改为0.1秒钟(如图9)。



我们的动画已经制作完了,下面要对输出文件进行设置。在optimize面板上,将setting选择为gif web palette,具体设置保持默认即可(如图10)。



通过菜单命令“file→save optimized”,在对话框中选择目录,命名文件,保存类型选择image only,保存后即可将文件输出为gif动画。在图像查看软件中打开该gif动画,或者将其插入到网页中用网页浏览器打开,就可以看到我们的logo有了一条蠕动的虚线框(如图11)。



根据具体的需要,我们还可以将虚线框外面的白边改成其他颜色或者裁切掉,以便更加适应网页设计和制作的需要。


好了,动画制作完了。聪明的读者已经看出,这篇教程整个过程就是实现了一个视觉上的欺骗,只要摸清了思路,制作过程极为简单。只要开拓我们的思路,同样的例子还可以制作出多种蠕动方式的虚线框来。


最后的结果是这样的:


需要说明的是,第5步中,可以复制出第2帧后直接将各部分移动7像素,再在animation面板的功能菜单中选择tween,有软件自动生成中间的6帧??这样也许更简便,但不如一帧一帧的移动容易理解。:)





PS与ImageReady做动态Logo

1 |2|
上一篇:

用Photoshop为照片添加动感效果

下一篇:

图层混合模式之浅析 [图]

页面功能: 【评论】有错就点】 【字体: 】 【打印】 【关闭【收藏本页】更多讨论请到论坛
声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如有疑问请与站长联系。
用Photoshop为照片添加动感效果 2007-9-21
PS与ImageReady做动态Logo [图]2007-9-21
图层混合模式之浅析 [图]2007-9-21
PHOTOSHOP CS2 智慧对象Smart Object的应用 [图]2007-9-21
情人节用PS做个戒指送给她 [图]2007-9-21
Photoshop CS2新手入门之文字工具 [图]2007-9-21
网友评论
目前没有评论!
发表评论
您的姓名: 匿名发送
电子邮件:
评论内容:
不能超过100个字符



所有留言只代表网友个人观点,不代表本站观点。
请各位遵纪守法并注意语言文明。
新闻搜索
关 键 词:
搜索范围:
全站精华
图文精彩
lee
【2007-9-18 17:19:59】
lee 平面广告
Photoshop中打造绚丽花朵[图]--平面广告
【2007-9-18 12:29:46】
Photoshop中打造绚丽花朵
Forest
【2007-9-14 17:07:13】
Forest of angels-时尚摄影(1)
yoyo-时尚摄影作品欣赏[图]--摄影艺术
【2007-9-14 17:07:13】
yoyo-时尚摄影作品欣赏
数码时代-商业摄影欣赏[图]--摄影艺术
【2007-9-14 17:07:13】
数码时代-商业摄影欣赏
时尚人像摄影
【2007-9-14 17:07:13】
时尚人像摄影 遗世芬芳
glamourous
【2007-9-14 17:07:13】
glamourous 时尚摄影
Remiges
【2007-9-13 15:10:27】
Remiges -时尚摄影欣赏(1)
苏醒-时尚摄影(1)[图]--摄影艺术
【2007-9-13 15:10:27】
苏醒-时尚摄影(1)
ANOTHER
【2007-9-13 15:05:05】
ANOTHER BRENDA -时尚摄影
小俊人像摄影作品-芭芘吗?[图]--摄影艺术
【2007-9-13 15:05:05】
小俊人像摄影作品-芭芘吗?
国外经典创意平面广告[图]--平面广告
【2007-8-11 10:39:41】
国外经典创意平面广告
Platinum精彩平面广告欣赏[图]--平面广告
【2007-8-2 9:30:55】
Platinum精彩平面广告欣赏
精品茶叶包装设计[图]--平面广告
【2007-8-2 9:18:15】
精品茶叶包装设计
Tetsuya
【2007-6-27 1:58:25】
Tetsuya Takenomata 包装设计
壹品包装设计欣赏[图]--平面广告
【2007-6-25 22:20:16】
壹品包装设计欣赏