Photoshop 网页设计 实例——动画LOGO图标制作

Photoshop 网页设计实例——动画LOGO图标制作
建造网站时，设计精巧、富于动态的LOGO总是能为网页增色不少。

要让其他人走入你的网站，必须提供一个让其进入的门户。

LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。

在如今争夺眼球的时代，这一点尤其重要。

本案例中是一则游戏网站，采用了个性字体的游戏名称作为LOGO，并将其制作成极富吸引的动画吸引浏览者停留。

动态LOGO实际上就是逐帧动画的GIF图片，在Photoshop 中，只要将每一帧的动画创建在不同的图层中即可。

动态LOGO全部显示在网页中，如图1-96所示。

图1-96 游戏网站
操作步骤：
（1）新建一个【宽度】和【高度】分别为400和65像素文档。

使用【横排文字工具】，在画布左边输入H字母。

设置【字体】为Def Writer|BASE Cyr；【字号】为60点；设置参数，如图1-97所示。

图1-97 输入文字
（2）双击文字图层，打开【图层样式】对话框，启用【渐变叠加】选项。

设置#FFBA01-#FEE671-#FFB400渐变，设置参数，如图1-98所示。

图1-98 添加渐变效果
（3）启用【外发光】效果，设置【外发光颜色】为黑色；【外发光的不透明度】为40%，设置参数，如图1-99所示。

图1-99 添加黑色外发光效果
（4）启用【投影】选项，设置【投影的不透明度】为100%，禁用【使用全局光】选项，如图1-100所示。

图1-100 对字母添加投影
（5）打开“墙壁”素材，放置文档中，对文字添加背景图案。

执行【窗口】|【动画】命令，打开【动画】面板。

在该面板中单击第一帧的【选择帧延长时间】，选择弹出式菜单中的【0.2秒】命令，第一帧动画创建完成，如图1-5所示。

图1-101 创建动画第1帧
（6）单击【动画】面板上【复制所选帧】按钮，创建动画第2帧。

选中文字图层，按Ctrl+J快捷键，制文字图层。

选中文字副本图层，隐藏文字图层。

使用【横排文字工具】，在H字母后面输入字母I，如图1-102所示。

上添加P、P、O、B、O、Y、S字母，创建每帧动画。

最后一帧动画，如图1-103所示。

图1-103 创建动画帧
（8）单击【动画】面板上【复制所选帧】按钮，创建动画第10帧。

在该面板中单击第一帧的【选择帧延长时间】，选择弹出式菜单中的【0.1秒】命令。

隐藏所有文字图层，如图1-104所示。

图1-104 创建动画帧
（9）创建完成动画后，单击【动画】面板中【播放动画】按钮，可以文档中预览效果，如图1-105所示。

执行【文件】|【储存为Web和设备所用格式】命令，储存为GIF 格式动画图片，然后将该图片插入网页中。

图1-105 动画每帧预览效果。