论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

无缝背景图制作之二

文章类别:Fireworks | 发表日期:2008-9-20 19:32:00

上一节我们学习了如何制作简单的无缝背景拼接图的方法,本节我们来学习制作可以应用到FW的材质库中的无缝拼接的图案,并且学习如何保存一个新图案。重点需要把握的工具是Rubber Stamp Tool(橡皮图章工具),该工具在使用中可能不会很轻松的上手,需要多多试验才能熟练使用,希望各位能够做好心理预备。1、 打开Fw,然后打开需要转换为图案的图片文件,本例打开的图片如下图所示:
2、 选择图片中某一部分作为图案的基础部分,选取工具箱中的Marquee(选框工具),打开Option(选项)面板,进行设定:Style(选框形式)采用Fixed Size(固定选框大小);将宽和高均设为100像素大小,如下图所示:
3、 在图片中需要转化为图案的地方进行选取,因为固定了选框的大小,所以可以很轻易的选定区域,并且可以灵活的使用鼠标拖动选取区域,选中的区域如下图所示:
4、 将选中的区域进行复制操作(快捷键为"Ctrl+C")。
5、 使用快捷键Ctrl+N新建一个文件,文件的大小设为刚才选框大小的二倍即可,刚才选框设为了100x100像素大小,则新文件宽高均设定为200像素大小。
6、 为了准确定位图片对象在编辑区的位置,执行菜单命令View(视图)/Grid(网格)/Edit Grid(编辑网格),在弹出对话框进行设定:将网格的尺寸大小设置为所选图片区域的大小(100*100),同时选中Show Grid(显示网格)和Snap to Grid(吸附到网格)选项,具体设置如下图所示:

7、 设定完毕,编辑区的网格显示如下图所示:

8、将刚才复制的选取图片粘贴到编辑区的左上角位置(快捷键为"Ctrl+V"),并吸附到左上角的网格,如下图所示:
9、 使用Alt+拖动(鼠标拖动或方向键拖动)方法复制图片。(当然,还可以用"Ctrl+V"的方式复制图片)将复制的图片放到第一幅图片右侧的网格。
10、 重复第9步操作,再次复制两个图片,分别将图片放置到左下角和右下角的网格内,如下图所示:

11、 执行菜单命令View(视图)/Show Grid(显示网格线),这样在网格显示的状态下就会关闭网格显示。
12、 执行菜单命令Edit(编辑)/Select All(全选)(快捷键"Ctrl+A"),选中编辑区的四幅图片,执行菜单命令Modify(修改)/Convert to Bitmap(转化为位图),四个图片会自动的合并成为一个位图图片。
[注重:]转化位图的操作是必须的,因为本节要学习的重点工具是Rubber Stamp Tool(橡皮图章工具),而该工具只能作用于位图对象上。

13、 选取工具箱中的Rubber Stamp Tool(橡皮图章工具),打开Option(选项)面板进行设定:将橡皮图章工具的边缘设置为最柔和的边缘,如下图所示:
[注重:] 下面的一步是整个过程的重点所在,需要技巧和耐心来完成,而且可能需要反复尝试才能成功。为了避免误操作而导致前面所有的工作全部报废,建议你现在最好先保存一下目前的图片。


[要害操作介绍:]关于橡皮图章的源点和操作点是橡皮图章在使用过程中的核心点所在,你可以提前打开任意一幅图片,用橡皮图章进行一番操作,理解一下源点和操作点的关系,以便于后面的操作能够顺利进行,请先看下面的热身运动:

第一步,打开位图图像,选取工具箱的橡皮图章工具。

第二步、在笑脸处,单击橡皮图章,这样就定义了“源点”。

第三步、定义了源点后,移动图章工具到下方,再次点击图章工具,这样就定义了操作点。

第四步、上一步我们已经看到编辑区发生的变化了,好,继续后面的操作,按照水平方向移动图章工具,看看出现了什么?

第五步、不知道各位对于图章工具的使用是不是已经有了初步的理解了?现在按住Alt键,我们就可以重新定义源点和操作点了。

第六步、再次移动图章工具定义操作点,然后水平拖动图章。

当然,你也可以垂直拖动图章工具进行操作,看看效果~~

结束:上面我们通过一个小例子简单的了解了图章工具的使用,大家需要多多动手,多做试验,才能更好把握这个工具的使用方法。

好了,请看下面教程的继续。

14、 首先处理左右两边图片之间垂直方向的接缝。在距离编辑区的左边缘或者右边缘几个像素的地方点下橡皮图章源点,从上到下拖动橡皮图章工具来处理垂直接缝,假如不满足现在的操作,或者需要切换方向和源点来改变操作方式,可以按住Alt键重新设定橡皮图章工具的源点的位置,然后重新进行操作。

15、 处理完垂直接缝后,按此方法对水平接缝进行模糊处理,根据需要配合Alt键改变橡皮图章的方向。
当完成垂直方向和水平方向的接缝出的模糊处理之后,应该得到无缝图案了,请看下面所示两幅图片:

垂直接缝处理<--|-->水平接缝处理

16、 执行菜单命令View(视图)/Grid(网格)/Edit Grid(编辑网格),将网格线大小设为原来的一半,同时选中Show Grid(显示网格)和Snap to Grid(吸附到网格)选项,因为刚刚设定的为100x100像素大小,现在就要设为50x50像素大小。
17、 选取工具箱中的Marquee Tool(选框工具),打开Option(选项)面板, Style(选框形式)采用Fixed Size(固定选框大小);宽和高均设为100像素大小。
18、 参考背景网格线,使用选框工具选取整个编辑区的中心部分,如下图所示:

(注重)其实我们可以发现,该选框分别占据了原来的四个图片的1/4。

19、快捷键Ctrl+C,复制选中的部分。
20、 新建一个文件,Fw会自动的将新文档的大小设为复制图形的大小,也就是说100X100像素大小,快捷键Ctrl+V,粘贴上一步复制的图形,这样我们现在就得到了最终的图案文件,如下图所示:

21、 保存该图片到X:\Program Files\Macromedia\Fireworks 4\Configuration\Patterns文件夹中。
(注:"X"为安装Fw的盘符)
22、 重新启动Fw,绘制一个大于图案大小的矩形框,然后从Fill(填充)选项中的填充方式里选择Pattern填充,在下拉列表中找到刚刚保存的图案文件,填充后便可马上看到效果。
[补充说明:]当然,你还可以将它作为网页的背景来使用的~~

 
上一篇:无缝背景图制作之一 人气:2151
下一篇:稚幼体字体效果制作 人气:1064
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058