实验16 动态闪烁果酱字.doc

16photoshop网页美工实验16 动态闪烁果酱字随着三维动态科学的不断发展，在网页制作中，各种各样的动态效果层出不穷。作为二维图像处理软件的Photoshop，也提供了为制作动态效果的Image Ready。本实验就是使用Image Ready的动态效果制作功能，使得一种静态的特效文字，具有动态闪烁的效果。实验目的通过本实验的学习，您可以： 掌握Image Ready的切片管理功能 掌握Image Ready的制作滚动效果功能 掌握Image Ready的制作动画功能 掌握通过改变图层样式制作特效文字的方法 深化在通道中的操作方法最终效果图图16-1 静态的显示状态图16-2 动态的绿色闪烁状态图16-3 动态的黄色闪烁状态图16-4 动态的红色闪烁状态图16-5 动态的粉红色闪烁状态16.1 静态文字制作首先在Adobe Photoshop窗口下制作静态文字，为动态的制作提供基本的闪烁状态。16.1.1 背景层制作1. 新建一个psd文件。执行命令文件 | 新建，命名为goop，参数设置参见图16-6；图16-6 新建对话框2. 选择适当的样式对背景层进行填充。执行命令编辑 | 填充，参数设置参见图16-7，其中选择的填充样式为我们以前所作的图1-2；填充后得到背景效果图16-8；图16-7 填充样式选择 当然，各人的审美观是不同的，也可以根据自己的创意制作出自己喜欢的样式填充。以后的操作，将是以这个背景层为基调。图16-8 填充后的背景层16.1.2 制作文字效果层1. 文字层的初始状态载入。在背景层上用笔刷或者在网上下载相关的字体形状；本实验从网页上选择了一种字体效果，经过复制粘贴后，得到的效果参见图16-9；图16-9 加上原始的果酱字2. 选定文字区域。上一步的操作将产生一个新的图层，将它命名为goop；按住Ctrl，单击图层goop，将选定图层上的文字区域； 也可以通过菜单栏选择文字区域，单击选择，选择载入选区即可。3. 新建通道Alpha 1。单击通道面板，单击右下角的新建通道按钮，得到一个新通道Alpha 1，编辑 | 填充，选择填充色色值为#FFFFFF（白色），得到通道的效果图16-10；图16-10 通道Alpha 1的填充4. 复制Alpha 1，并对新通道进行高斯模糊 。右击通道Alpha 1，选择复制通道，命名为Alpha 2；单击Alpha 2，执行命令滤镜 | 模糊 | 高斯模糊，模糊半径为5像素，得到效果图16-11；图16-11 Alpha 2的高斯模糊5. 另存Alpha 2的状态。右击通道Alpha 2，选择复制通道，将Alpha 2复制成新的psd文件goop style，准备为文字层制作果酱效果提供纹理样式；参见图16-12的储存方式；图16-12 另存通道模糊效果6. 新建文字图层，对新文字图层style进行相关的图层样式设定。回到图层控制面板，按住Ctrl，单击图层goop，将选定图层上的文字区域；单击右下角的新建图层按钮，得到一个新的图层，命名为style；对选区进行颜色，填充执行命令编辑 | 填充，选择填充颜色，色值为#656BE9；使用快捷键Crtl+D，取消选区；双击图层style，在图层混合样式对话框中对图16-13所示的几个样式进行设置；图16-13 style层的图层样式选择各项图层样式的参数设置参见图16-14，15，16，17；图16-14 投影的设置说明：投影的设置，使得style层在背景层上有一个相对的投影。距离的设置，使得style和其投影之间产生距离感，为7个像素；扩展的设置将投影区的百分比设定在18%，指的是比原来的字体扩大18%后投影；大小设置的是投影区的尺寸设置，为10个像素；品质选择的是投影所用的光照方式。图16-15 内阴影的设置说明：内投影的设置，使得文字本身的边界有一个平滑的效果，本实验只设置了其不透明度为50%。图16-16 外发光的设置说明：外发光的设置，使得文字的边界上有一种向外发光的效果。为了使得发的光能与文字本身的颜色相融合，我们选择了外发光的颜色色值为#4047D8；品质中的范围设置了发光的范围，向文字的外部发光范围为文字大小的37%。图16-17 倾斜和浮雕的设置说明：倾斜和浮雕的设置，使得文字产生凹凸感。深度的设置是将文字的边界以其100%进行向上的延伸，大小设置了延伸的区域为5个像素。7. 为文字加上玻璃质感效果。在文字图层style上，执行命令滤镜 | 扭曲 | 玻璃,参数设置参见图16-18；此步结束后，将得到效果图16-1;图16-18 玻璃滤镜参数设置说明：玻璃扭曲滤镜的参数设置，将扭曲度和光滑度设为最值后，选用的纹理为操作5中存储的goop style。16.1.3 选择不同的色相/饱和度1 对图层style进行色相/饱和度调节。如图16-19所示，单击图层控制面板右下方的调节按钮，在弹出的菜单中选择色相/饱和度，进行调节；参数设置参见图16-20；确定后得到效果图16-2；图16-19 对style层选择校正参数2 多次调节色相/饱和度得到不同的颜色。重复执行1，进行不同的色相/饱和度的设置，参见图16-21，16-22，16-23；三种设置分别得到图16-3，16-4，16-5的效果； 图16-20 色相/饱和度设置（将得到图16-2） 图16-21 色相/饱和度设置（将得到图16-3） 图16-22 色相/饱和度设置（将得到图16-4） 图16-23 色相/饱和度设置（将得到图16-5）小知识：通过图16-20，21，22，23的设置，我们可以看出，通过设置不同的色相/饱和度的值，可以得到不同的颜色效果。如果选择着色，可以直接用颜色吸管选取颜色，对图区进行色彩的调配。16.2 动态效果制作使用Image Ready对16.1所制作的静态文字作动态处理。Image Ready提供了以下几种基本功能：切片管理功能，图像优化功能，图像链接功能，制作动画功能，制作滚动效果功能。本实验中，将使用Image Ready的切片管理功能，将文件分割成三个小文件，分别是：静止时的状态文件Normal，鼠标放在上面时的状态文件Over，按下后的状态文件Down。使用Image Ready制作滚动效果功能和制作动画功能，制作滚动区Over的动画效果。16.2.1 文字闪烁效果1 新建滚动区Over单击工具栏最下方的Photoshop/Image Ready转换键，进入Image Ready界面；单击Web内容控制面板有上角的下拉菜单按钮，如图16-24所示；在菜单中选择新建翻转状态，如图16-25所示；得到滚动区Over； 图16-24 对静态Normal的操作 图16-25 新建翻转状态2 对滚动区Over制作闪烁效果选择新建的滚动区Over，在窗口菜单下，选择动画，单击该窗口右下角的复制当前帧，在连续单击四次，并对画面2-5进行设置，参见图16-26；1号画面就是在Photoshop中制作的最终画面；图16-26 动画的五个状态说明：动画窗口中的1-5号，代表动画效果的五个中间状态，Image Ready正是对这五个状态循环扫描，得到动画的效果，单击Play按钮可以进行预览。本实验中一个循环的扫描时间是计算机的扫描周期，得到的是闪烁的文字效果。根据不同的需要，可以增加各个状态的停顿时间，则得到不同的动画效果，可以尝试修改。 图16-27 画面2的可视图层 图16-28 画面3的可视图层 图16-29 画面4的可视图层 图16-30 画面5的可视图层说明：图16-27，28，29，30对原始的psd文件进行不同的可视图层的设置，分别得到图16-2，3，4，5即图16-26中的2，3，4，5四个状态。16.2.1 按下效果制作1 新建滚动区Down单击Web内容控制面板有上角的下拉菜单按钮，如图16-24所示；在菜单中选择新建翻转状态，如图16-25所示；得到新的滚动区Down；2 选择适当的文字特性除了背景层之外，将其他所有层置为不可视，单击背景层，在工具栏选择文字工具，其参数设置参见16-31；图16-31 输入文字参数设置3 输入按下时的文字在背景层上输入GO NEXT，即得到按下滚动区Over时的效果图16-32；图16-32 按下滚动区的效果图4 观察效果制作过程完毕，现在来检测一下整个的动态效果如何。在Image Ready界面下，单击工具栏下方的浏览器预览按钮；在弹出的网页浏览器页面上，有三个状态：1 鼠标没有放在图区上，将显示图16-1的静止状态；2 鼠标放在图区上，但没有按下，将按显示图16-1，2，3，4，5的顺序循环扫描闪烁效果；3 鼠标在图区按下，检显示图16-32的静态效果。检测完毕！动态闪烁果酱字制作完毕。16.3 实验小结本实验的制作，重点分为两大部分：一，使用图层样式以及玻璃扭曲滤镜对文字进行特效效果的制作，并通过对色相/饱和度的调节校正得到不同的静态颜色效果；二，在第一部分的基础上，使用Image Ready的切片管理功能，制作滚动效果功能，制作动画功能，对不同的颜色效果进行动态效果制作，得到了具有静止，动态闪烁，按下三个状态的文字效果。16.4 举一反三通过本实验的制作，Image Ready的动态制作功能可见一斑。我们不难看出：动态效果实际上就是计算机对不同的静态图像，进行循环扫描的结果。所以，使用Image Ready制作动态效果，大致可分为以下几步：1 静态图像素材的制作选择；2 使用切片管理功能将图像分为几个相对独立的状态；3 对于各个状态，使用图像优化功能制作动画功能，制作滚动效果功能分别进行制作；4 使用图像链接功能，将该动态效果的图像与其他链接相连。根据提示，参考本实验的制作方法，请尝试制作下面的练习。要求：鼠标不放在图区时，显示静止状态如图16-33；鼠标放在图区，但没有按下时，将显示动态效果参见图16-35；鼠标按下后，将显示静止状态如图16-34。 图16-33 静止状态 图16-34 按下后的状态图16-35 动态扫描的7个状态图16-36 原始图片的所有图层提示：原始图片的图层见图16-35，其中GO TO NEXT层为文字层；gauss50，gauss20，gauss10分别为文字层的三种高斯模糊，模糊半径分别为50像素，20像素，10像素；scanline为水平扫描线层；color为颜色层；色相/饱和度为调整层。鼠标不放在图区时，显示静止状态，图层gauss50，gauss20