<b>PS与ImageReady打造动态Logo</b>[Photoshop设计]

　制作网站时,计划精良、富于动态的Logo老是能为网页增色不少.大概有的朋友见过Logo四周有一圈细细的虚线环绕着Logo缓缓爬动的效果,没有见过的朋友请看这里:

下面我就和大家一同来探究制作这种爬动虚线框的一种办法.

　　运行你的Photoshop,翻开你制作好的Logo文件.什么?若何制作Logo?这可不是几句话能说得清的,并且不是本文的谈论内容,读者朋友可以参考相关资料.需求夸大的一点是,Logo的尺度尺寸是88×31像素.本文中为了让大家看得更清楚,笔者利用了一幅较大尺寸的图片（如图1）.

（图1）

　　1、扩大画布的尺寸.

　　翻开Logo文件后,该图象只有一个后台图层,由于我们需求它的表面,所以不能直接在该层上扩大画布.在Layers面板上,双击Background图层右侧的空白区域,在弹出的对话框中单击OK按钮,便可将后台图层转换为普通图层Layer 0.双击图层的名字,将其命名为“Logo”.按住Ctrl键单击面板底部的新建图层按钮,在“Logo”图层下面新建图层Layer 1.然后挑选菜单号令“Image→Canvas Size”,在对话框中将长度单位改成Pixels,勾选Relative复选框,Width和Height均增添40像素,Anchor保持默许的中间位置（如图2）.

（图2）

这步操作的后果是使画布在上下左右四个方向都增大了20像素,为我们下面的步骤开辟了空间.

　　2、制作用来填充后台的图案.

　　利用菜单号令“File→New”新建一个8×8像素,笔风光为白色的文件.为了可以看清,我们可以按下Ctrl+"+"键数次,将文件视图放大到符合比例以便于操作.挑选矩形挑选工具（快速键为M）,在左上角画出一个边长为4像素的正方形选框,再按住Shift键,在右下角增添一个一样的选框.确认当前的前风光为默许的黑色,假如不是可以按下D键将其恢复为默许.按下Alt+BackSpace键利用前风光黑色填充选区,然后按下Ctrl+D键撤消挑选（如图3）.

（图3）

挑选菜单号令“Edit→Define Pattern”,在对话框中为新图案命名为“黑白方格”,然后按下OK按钮,保存自定义的图案.
3、制作虚线框.

　　回到Logo所在的文件,在Layers面板上,挑选下面的Layer 1图层,然后挑选菜单号令“Edit→Fill”,在对话框中挑选利用Pattern填充,在下面的下拉列表中挑选我们方才自定义的“黑白方格”图案,别的选项保持默许（如图4）.

（图4）

　　肯定后,Layer 1图层将被密布而规律的黑白方格填满（如图5,图中将“Logo”图层躲藏）.

（图5）

　　在Layers面板上,单击面板底部的新建图层按钮,成立空白图层Layer 2.按住Ctrl键单击“Logo”图层,将其表面作为选区载入.再挑选菜单号令“Select→Modify→Expand”,在对话框中输入1,按下OK按钮,选区将向外扩大一个像素.按下Ctrl+Shift+I键,将选区反向.确认当前图层为Layer 2,按下Ctrl+BackSpace键,利用后台色白色填充选区.将图层Layer 2命名为“白边”.按下Ctrl+D键撤消挑选,可以看到Logo四周呈现了一圈虚线框（如图6）.

（图6）

　　4、使每条边的虚线彼此独立.

　　读者朋友们一定已经看懂得了,没错,这条虚线框是假的,这里使了个障眼法,是让后台图案通过一条1像素宽的缝隙暴露来一部份,假如让它动起来的话会很艰难.该怎么办呢?我们持续利用障眼法——用四块后台来辨别对应四条边.在Layers面板上,将图层Layer 1拖动到面板底部的新建图层按钮上,新建一个该图层的副本图层Layer 1 copy.再反复两次复制操作,得到四个相同的充满“黑白方格”图案的图层.挑选单列像素挑选工具,将图象视图放大到符合比例,在Logo左侧的虚线上单击,将该条虚线所在的直线全部挑选.在Layers面板上,挑选图层Layer 1,然后单击面板底部的增添图层蒙版按钮,后果将为该图层增添一块几近为全黑色的蒙版,只在Logo左侧的虚线所在的直线上是白色的,也就是说图层Layer1只在那条直线上可见.接下来,一样的原理,辨别利用单行像素挑选工具和单列像素挑选工具挑选Logo上方、右侧和下方的虚线,顺次为余下的三个图案图层增添蒙版.这时刻,从表面上看Logo毫无改变,实际上环绕在它四周的虚线框已经是由四部份构成的了.可以躲藏某一图层,查看一下情形能否如此.按照四个图案图层对应的部份,辨别为它们命名为“左”、“上”、“右”和“下”（如图7）.

（图7）
5、在ImageReady中让虚线动起来.

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

（图8）

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

　　　6、最后的设置.

　　ImageReady默许的设置是每帧动画逗留0秒钟,我们需求改变这个数字.在Animation面板上,单击第1帧挑选它,再按住Shift键单击第8帧,将8帧动画全部挑选.单击肆意一帧下面的逗留时间下拉菜单,挑选0.1seconds,于是全部帧的逗留时间全都改成0.1秒钟（如图9）.

（图9）

　　我们的动画已经制作完了,下面要对输出文件举行设置.在Optimize面板上,将Setting挑选为GIF Web Palette,具体设置保持默许便可（如图10）.

（图10）

　　通过菜单号令“File→Save Optimized”,在对话框中挑选目录,命名文件,保存范例挑选Image Only,保存后便可将文件输出为GIF动画.在图象查看软件中翻开该GIF动画,大概将其插入到网页顶用网页浏览器翻开,便可以看到我们的Logo有了一条爬动的虚线框（如图11）.

（图11）

　　按照具体的需求,我们还可以将虚线框表面的白边改成其他颜色大概裁切掉,以便越发适应网页计划和制作的需求.

　　好了,动画制作完了.聪明的读者已经看出,这篇教程整个历程就是实现了一个视觉上的拐骗,只要摸清了思绪,制作历程极其简单.只要开辟我们的思绪,一样的例子还可以制作出多种爬动方法的虚线框来.

　　最后的后果是这样的:

需求阐明的是,第5步中,可以复制出第2帧后直接将各部份移动7像素,再在Animation面板的功效菜单中挑选Tween,有软件自动生成中间的6帧——这样大概更简便,但不如一帧一帧的移动简单理解.