无缝背景图制作之一

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

  本节我们要学习的,就是制作一个六边形的图片,然后通过处理将六边形的图片作为无缝背景平铺的背景图片,大家可以试验采用其他的效果图来作为无缝背景平铺的背景图片。
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、好了,作为无缝背景拼接图的图形已经出现了,输出、保存它,测试一下吧?怎么测试?看看效果吧(如下面的表格背景)!

时间: 2024-11-03 08:43:52

无缝背景图制作之一的相关文章

无缝背景图制作之二

上一节我们学习了如何制作简单的无缝背景拼接图的方法,本节我们来学习制作可以应用到FW的材质库中的无缝拼接的图案,并且学习如何保存一个新图案.重点需要掌握的工具是Rubber Stamp Tool(橡皮图章工具),该工具在使用中可能不会很轻松的上手,需要多多试验才能熟练使用,希望各位能够做好心理准备.1. 打开Fw,然后打开需要转换为图案的图片文件,本例打开的图片如下图所示: 2. 选择图片中某一部分作为图案的基础部分,选取工具箱中的Marquee(选框工具),打开Option(选项)面板,进行设

在线完成线框图制作的几个网站

  线框图制作在设计中经常会用到,比如网页设计师们处理设计稿时会先做出线框图来讨论网站的功能与结构,如果不想下载线框图制作软件,可以通过一些在线网站来完成线框图的制作,这些网站功能上并不比软件差,十分强大. 今天在网上看到了一篇关于线框图汇制软件的分析推荐文章,产品经理们也不要只关注axure,也要看看别的软件,故与大家分享之: 随着经济推动云计算的不断向前发展,浏览器已经变得越来越精密,越来越强大.在此,我不想就"浏览器的未来"再做过多累赘的观点陈述,这在分享网络2.0已经讨论的太多

如何ps动态非主流闪图制作教程

这款闪图制作教程是一款用photoshop教程制作的动态非主流教程实例教程和气,如果你正在学习非主流的话,这篇制作教程肯定适合于你哦,好了费话不说多了我们进来看看如何啊. 1.新建一个50 x 50像素文件,背景填充黑色,全选(ctrl+a),拷贝(ctrl+c). 2.另开新档,大小为50 x 100像素,贴上(ctrl+v)黑色对齐上方.   3.选择菜单:编辑--->定义图案. 4.新建一个500 x 1000像素文件,新增图层,填充任意颜色.选择菜单:图层 > 图层样式 > 图案

论坛签名档动图制作方法

网店论坛推广是网店很好的推广途径,其中论坛签名是论坛合法宣传的途径,不会被论坛管理员当着广告贴删除.大家将自己制作好的图片上传支持外联的空间,然后在论坛签名设置添加好图片,就可以开始去回复.发贴宣传了.那论坛会动的签名图怎么做呢?淘宝学堂和大家分享论坛签名档动图制作方法. 第一:论坛签名图片添加代码 [img]图片地址[/img] 第二:论坛签名档制作方法: 论坛签名档图片的要求:仅支持gif和jpg,图片尺寸468*60像素,文件大小100k以内.制作过程: 1.先准备几张宝贝图片,大小为60

移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂

为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例github地址:https://github.com/iwangx/WebApp 访问地址:https://csssprite.herokuapp.com/ 准备 psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,

3dmax8.0简单造型+表面贴图制作三维笔记本

今天我们学习用3dsmax的简单造型和贴图制作三维笔记本. 先来看一下完成的效果图. 1.首先启动3dsmax8.0进入系统默认状态界面,选择创建面板中的"标准几何体"命令中的"长方体"命令在视图区中的"顶视图"中绘制一个高为7宽为130长为100的几何体做为本本的台面如图所示. 2.接着用鼠标选择建立好的几何体按住"shift"键拖动鼠标对模型图进行复制复制的数量为3,将复制的图形分别本本的显示器和屏幕以及本本的键盘面板,然

360浏览器炫图制作工具怎么安装

  打开360浏览器,在浏览器的左侧有一些应用图标,如360云盘,右击一个图标,在显示的菜单中选中管理我的扩展. 进入360应用市场页面,在搜索框中输入炫图,点击搜应用按钮. 在搜索结果中有一个炫图制作应用,点击安装按钮. 如果出现如下图中的提示窗口,说明读者当前用的360浏览器版本不支持炫图制作工具安装,需要安装最新版的360浏览器. 开发者工具"> 点击确定按钮后新建了一个最新版360浏览器下载任务,点击下载按钮,下载最新版360浏览器安装包. 待安装包下载完成后,双击安装包程序打开安

Xmind思维导图制作软件怎么样?

  XMind 是一款国产的思维导图制作软件(尽管它的网站没有提供中文服务),但是在国际上也有一定的名气了.作为一款开源软件,获得过sourceforge社区2009最佳学术奖.而且,XMind 还可以运行在 Windows.Mac.Linux 等平台,实实在在的方便呢.Xmind 对于个人用户完全免费,商业应用则需要购买Pro版本. XMind 还可以制作鱼骨图.二维图.树状图.逻辑图等,上面的和下面这几幅都是我用 XMind 制作的哦,不错吧~ 树状图 用 XMind 制作出来的思维导图看上

13款靠谱实用的信息图制作工具

  大量的数据和信息怎么展示才好玩儿?答案当然是信息图 .信息图 的流行已经有几年之久,但是做的足够好的终究是少数.要把趣味性.娱乐性.视觉和数据的严谨与信息的可靠性结合到一起,极其考验设计师和编辑的能力与脑洞.之前我们发过信息图的设计技巧,也发过信息图模板,但是它们的限制也是很明显的,要么你得从头建构,要么你只能借助模板修修改改. 所以,今天我们总结了13个靠谱好用的信息图制作工具,省去你许多麻烦,将最基础最琐碎的部分替你完成.这些工具要么是免费的,要么是提供了免费的版本,哪个最适合你,你试过