论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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

通常我们在制作网页的时候,会使用一些现成的小图片平铺的方法来作为网页的背景图,但是假如我们想要制作自己的背景效果图片的话,如何才能达到构成背景图的各个小图片之间的的无缝拼接呢?想一想可能是很简单的事请,但是做起来就不是那么轻易的事情了,好了,下面我们一起来看看制作的步骤。

  本节我们要学习的,就是制作一个六边形的图片,然后通过处理将六边形的图片作为无缝背景平铺的背景图片,大家可以试验采用其他的效果图来作为无缝背景平铺的背景图片。

1、打开FW,新建一个文件,文件的大小为50*50像素,背景色为白色。[注重]一般来说,背景图片都是比较小的,我们这里采用50*50像素大小的目的是,希望制作的演示步骤能够清楚些。

2、选取工具箱的多边形绘制工具,因为我们需要绘制一个六边形,所以现在我们打开Options面板,进行相关设定如下图所示:

3、设定完毕,我们就可以绘制出一个六边形了,记得绘制的同时配合Shift键,这样我们就可以绘制出一个等边六边形。绘制的时候,请注重鼠标的拖动方向及其范围,通过鼠标拖动可以调整绘制出的六边形的位置、方向、大小等,请大家绘制时参考下图所示:

4、此刻六边形的大小可能与编辑区的大小不符合,我们可以使用缩放工具对其进行大小的调整,使其大小和编辑区基本相符即可,如下图所示:

5、将六边形拖放编辑区的中心,如下图所示:

6、呵呵,忙了半天,似乎还没有给六边形填充颜色呢,这里我给它填充的是白色,描边色的具体设定请看下图所示:

7、经过以上设定后,此刻编辑区的对象如下图所示:

8、选定六边形对象,复制它,然后使用快捷键“Ctrl+N”,新建一个文件,新建文件的宽和高的大小会自动符合复制图形的大小,此刻我们需要对新建文件的大小进行一下调整,将宽由默认的39像素变为78,高由45像素变为90像素,也就是说都调整为原来的2倍大小,如下图所示:

9、将六边形对象粘贴到新建文件的编辑区,并且对它的位置进行调整,使其基本上位于编辑区的中心即可,如下图所示:

10、然后再次复制一个六边形对象,对其位置进行调整,使其右上侧的边和位于中心的六边形的坐下侧的边达到重合,具体的调整如下图所示:

11、再次复制5个新的六边形对象,然后分别围绕位于中心六边形的其余5个边进行摆放,注重相交的边一定要重合,请参考下图所示进行位置的调整:
[注重]假如感觉调整的不够细致的话,可以放大编辑视图一定的倍数,这样就便于调整了。

[ ] 200% 视图下进行位置的调整

12、要害的一步到了,首先我们选定位于编辑区中心的六边形对象,然后打开Info面板,纪录一下该对象的各项参数大小,如下图所示:

13、选取工具箱的切割工具,在编辑区拖动鼠标,此刻会出现切割选区,同样,还是打开Info面板,按照我们刚刚纪录的位于中心的六边形的各项参数的大小,再次输入相同的各项参数,这样我们就可以轻松的定义切割选区的大小、位置了,请看下图已经定义好的切割选区:

14、双击切割选区的边缘,即可自动的将编辑区进行切割操作,而且编辑区仅仅留下我们选定的图形对象,如下图所示:

15、好了,作为无缝背景拼接图的图形已经出现了,输出、保存它,测试一下吧?怎么测试?看看效果吧(如下面的表格背景)!

 
上一篇:一款立体字的制作 人气:3250
下一篇:无缝背景图制作之二 人气:2563
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