注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

很想大家呐

 只要朝着阳光,便不会看见阴影。

 
 
 

日志

 
 

【引用】【转】边框蠕动教程(附图)  

2011-04-22 20:24:57|  分类: 幻※教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自♀冰点儿♀《【转】边框蠕动教程(附图)》

 

引用

飞飞【半原创】边框蠕动教程(附图)

 【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

运行你的Photoshop,打开你制作好的Logo文件。需要强调的一点是,Logo的标准尺寸是88×31像素。为了让大家看得更清楚,使用了一幅较大尺寸的图片。(见图1)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

①    扩大画布的尺寸

 

打开Logo文件后,该图像只有一个背景图层,由于我们需要它的轮廓,所以不能直接在该层上扩展画布。在图层面板上,双击背景图层右侧的空白区域,在弹出的对话框中点击确定按钮,即可将背景图层转换为普通图层—图层0。双击图层的名字,将其命名为“Logo”。按住Ctrl键单击面板底部的新建图层按钮,在“Logo”图层下面新建图层 1。然后选择菜单命令“图像→画布大小”,在对话框中将长度单位改为像素,勾选“相对”选框,宽度和高度均增加40像素,定位保持默认的中间位置。(见图2)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

②制作用来填充背景的图案

  使用菜单命令“文件→新建”新建一个8×8像素,背景色为白色的文件。为了能够看清,我们可以按下Ctrl+"+"键数次(或用缩放工具点击),将文件视图放大到合适比例以便于操作。选择矩形选择工具(快捷键为M),在左上角画出一个边长为4像素的正方形选框,再按住Shift键,在右下角添加一个同样的选框。确认当前的前景色为默认的黑色,如果不是可以按下D键将其恢复为默认。按下Alt+BackSpace键使用前景色黑色填充选区,然后按下Ctrl+D键取消选择。(见图4)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

选择菜单命令“编辑→定义图案”,在对话框中为新图案命名为“黑白方格”,然后按下确定按钮,保存自定义的图案。(见图5)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

③制作虚线框

  回到Logo所在的文件,在图层面板上,选择下面的图层1,然后选择菜单命令“编辑→填充”,在对话框中选择使用“图案”填充,在下面的下拉列表中选择我们刚才自定义的“黑白方格”图案,其余选项保持默认。(见图6)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 如果不是这样的话,肯定是你的图层顺序出了问题,正确的顺序如图所示。(见图8)

 

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

在图层面板上,单击面板底部的新建图层按钮,建立空白的图层2。按住Ctrl键单击“Logo”图层,将其轮廓作为选区载入。再选择菜单命令“选择→修改→扩展”,在对话框中输入1,按下确定按钮,选区将向外扩张一个像素。按下Ctrl+Shift+I键,将选区反向。确认当前图层为2,按下Ctrl+BackSpace键(即清除键),使用背景色白色填充选区。将图层2命名为“白边”。按下Ctrl+D键取消选择,可以看到Logo周围出现了一圈虚线框。(见图9)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

如和上图不符,则是图层顺序不对,正确的图层顺序见下图。(见图10)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

④使每条边的虚线相互独立

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境(←图11)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境(←图12)

 

⑤在ImageReady中让虚线动起来

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境(←图13)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境(图14)

 

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

 

⑥最后的设置

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

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境

⑦完成(如图17【成品】)

【半原创】边框蠕动教程(附图) - 飞飞 - 梦之幻境 

  评论这张
 
阅读(96)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017