Fireworks打造javascript图片提示效果

所属分类: 平面设计 / Fireworks教程 阅读数: 253
收藏 0 赞 0 分享
  本教程利用Fireworks的层、帧、切片等工具,让Fireworks自动生成javascript来打造图片提示效果。通过学习本教程,读者可了解到关于层、帧、切片及导出html网页格式的方法及技巧,而且网友们还可以将此种效果应用到各种网页上,最终效果如下(光标放在按钮上,下面的提示图片也相应的发生变化):


效果演示
  下面我们一起来学习Fireworks如何实现这种效果:
  一、点击:文件—新建命令,设置宽度为450像素,高度为400像素,分辩率为72像素,如图1所示。

Fireworks打造按钮图片提示效果
图1
  二、点击:文件—导入(快捷键为Ctrl R),如图2所示。

Fireworks打造按钮图片提示效果
图2
  三、导入所需的素材,如图3所示。

Fireworks打造按钮图片提示效果
图3
  四、点击:窗口—对齐,打开对齐面板,如图4所示。

Fireworks打造按钮图片提示效果
图4

  五、选择三张素材图片,分别点击水平居中及垂直居中命令,让三张图片居中对齐,如图5所示。

Fireworks打造按钮图片提示效果
图5
  六、选择矩形工具,在画布上绘制出一个矩形,并设置为黄色。如图6所示。

Fireworks打造按钮图片提示效果
图6
  七、点击工具架中的文本工具,在黄色矩形上面输入:漫画,如图7所示。

Fireworks打造按钮图片提示效果
图7
  八、用同样的方法,制作另一个按钮。如图8所示。

Fireworks打造按钮图片提示效果
图8
  九、点击:窗口——样式(快捷键为Shift F11),打开样式面板,如图9所示。

Fireworks打造按钮图片提示效果
图9

  十、选择二个矩形(小提示:按住Shift,可以多选),点击如图所示的样式(当然,读者也可以选择其它样式甚至自定义样式),如图10所示。

Fireworks打造按钮图片提示效果
图10
  十一、同时选择三张位图,如图11所示(选择技巧:在层面板中,点击第一个位图层,再按着Shift点击最后一个位图层便可多选了)。

Fireworks打造按钮图片提示效果
图11
  十二、在选择三个位图层的状态下,点击帧面板中的分散到帧按钮,如图12所示的红色部分。

Fireworks打造按钮图片提示效果
图12
  十三、选择两个按钮,点击:编辑——复制(快捷键为Ctrl C),如图13所示。

Fireworks打造按钮图片提示效果
图13
  十四、在帧面板中选择帧1,并按Ctrl V粘贴,如图14所示。

Fireworks打造按钮图片提示效果
图14

  十五、用同样的方法,在帧面板中选择帧2贴上按钮,如图15所示。

Fireworks打造按钮图片提示效果
图15
  十六、在工具箱中选择切片工具,如图16所示进行切片。

Fireworks打造按钮图片提示效果
图16
  十七、使用选择工具,将漫画切片中心拖拽到位图切片区,并在弹出的交换图像中选择帧3,如图17所示。

Fireworks打造按钮图片提示效果
图17
  十八、使用选择工具,将油画切片中心拖拽到位图切片区,并在弹出的交换图像中选择帧2,如图18所示。

Fireworks打造按钮图片提示效果
图18
  十九、最终完成,我们可以按F12在浏览器上看一下效果。确定没有问题,便可导出html网页了。如图19所示。

Fireworks打造按钮图片提示效果
图19

更多精彩内容其他人还在看

Fireworks设计绘制五彩炫光效果的图片实例教程

本课程主要讲述如何设计制作五彩的炫光效果图片,很简单的哦
收藏 0 赞 0 分享

Fireworks设计绘制超炫的五彩发光斜线条背景实例教程

本章用Fireworks绘图软件来为大家介绍,超炫超酷的五彩发光斜线条背景图片的制作过程,希望大家喜欢
收藏 0 赞 0 分享

淘宝开店宝贝图片如何制作?用Fireworks和淘宝助手做产品

Fireworks是macromedia旗下一个很好的图片制作工具,相比Photoshop简单易上手,而且制作简单的动画相当直观,是翛儿很喜欢的一款图片制作工具
收藏 0 赞 0 分享

Fireworks利用流光效果制作出具有层层激发彩光魅力效果的背景图实例教程

本章主要介绍大家用Fireworks绘图软件,利用Fireworks中的流光效果把一部手机的背景作出绚丽四射的效
收藏 0 赞 0 分享

Fireworks设计制作红色老旧砖墙特效实例教程

本章主要是为大家介绍绘制红色老旧砖墙的实例教程步骤
收藏 0 赞 0 分享

Fireworks用陨石背景打造飞火流星动画特效实例教程

本章我们用Fireworks软件制作出以陨石背景为主的飞火流星的动画实例教程
收藏 0 赞 0 分享

Fireworks利用滤镜工具轻松制作可爱Gif动画实例教程

本章我们来教大家利用ireworks中的滤镜工具来设计制作出,精致可爱的GIF动画效果图片
收藏 0 赞 0 分享

Fireworks软件中动态元件的基本制作及高级运用实例教程分享

首先讲一下什么是动态元件,在Fireworks中,我们可以创建“图形”、“按钮”、和“动画”三种元件,但往往我们只是直接从文档库里面直接把元件拖出来用,我们把这种元件成为静态元件
收藏 0 赞 0 分享

Fireworks运用笔触制作飘逸白云图实例教程

本章教大家如何运用Fireworks软件中的笔触来制作飘逸的白云图片
收藏 0 赞 0 分享

Fireworks不抠图实现标识反白特效实例教程

通常我们会想到抠图去底来解决,然而根据一个压缩过的点阵图,logo 本身的颜色已经不够纯净了,更有些细节很难用抠图来表现。最明显的例子是商标一角常有的注册标记 ® 。如果使用单纯的扣图技法, ® 字会显得很不自然
收藏 0 赞 0 分享
查看更多