确定后,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为照片添加动感效果 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
- ps让MM更美白 [图]
- 天使翅膀的制作 [图]
- Photoshop笔刷绘制写意灰色羽毛 [图]
- 纽约平面设计师作品欣赏(2)[图]
- 苦涩与迷茫的血腥世界:美国插画师Aaron Nather(二)[图]
- 洋果子的插画[图]
- 土耳其设计师MEHMETGOZETLIK(四)[图]
- “圆”于细节-设计师Evgeny Kiselev(二)[图]
- 美女变成美丽的孔雀 [图]
- Seok chan-yoo CG欣赏[图]
- 纽约设计师 DH LEE 平面设计欣赏[图]
- Guerrilla Games 平面广告[图]
- fizzgig 插画欣赏[图]
- 初秋(人体摄影)[图]
- Mikaël Aguirre 人物插画[图]
- PS与ImageReady做动态Logo [图]

lee 平面广告
![Photoshop中打造绚丽花朵[图]--平面广告](/smallimg/20079/20079181236101.jpg)
Photoshop中打造绚丽花朵

Forest of angels-时尚摄影(1)
![yoyo-时尚摄影作品欣赏[图]--摄影艺术](/smallimg/sheying/2007913/2007913101615653778075.jpg)
yoyo-时尚摄影作品欣赏
![数码时代-商业摄影欣赏[图]--摄影艺术](/smallimg/sheying/2007913/2007913101615713778062.jpg)
数码时代-商业摄影欣赏

时尚人像摄影 遗世芬芳

glamourous 时尚摄影

m.cristina lo cascio 水彩插画欣赏

Remiges -时尚摄影欣赏(1)
![苏醒-时尚摄影(1)[图]--摄影艺术](/smallimg/sheying/2007913/200791310161684778092.jpg)
苏醒-时尚摄影(1)

ANOTHER BRENDA -时尚摄影
![小俊人像摄影作品-芭芘吗?[图]--摄影艺术](/smallimg/sheying/2007913/2007913101616264778095.jpg)
小俊人像摄影作品-芭芘吗?
![国外经典创意平面广告[图]--平面广告](../smallimg/20078/20078111027232.jpg)
国外经典创意平面广告
![Platinum精彩平面广告欣赏[图]--平面广告](../smallimg/20078/200782928155.jpg)
Platinum精彩平面广告欣赏
![精品茶叶包装设计[图]--平面广告](../smallimg/20078/200782917471.jpg)
精品茶叶包装设计
![2012年伦敦奥运会会徽正式发布[图]--平面广告](../smallimg/20077/2007711246432.jpg)
2012年伦敦奥运会会徽正式发布
![早晨设计公司的平面设计作品欣赏[图]--平面广告](../smallimg/20077/2007711127291.jpg)
早晨设计公司的平面设计作品欣赏
![神奇的座椅--创意家居用品设计欣赏[图]--环境艺术](../smallimg/20077/200771957033.jpg)
神奇的座椅--创意家居用品设计欣赏

Tetsuya Takenomata 包装设计
![壹品包装设计欣赏[图]--平面广告](../smallimg/20076/20076252217193.jpg)
壹品包装设计欣赏