下面我们还是以在帖子里添加背景图为例,给大家分享一下我的做法
。如果亲们想用在宝贝描述或个人空间,只需要把背景图片宽度和代码中的宽度值width相应做一下更改就可以了
。
我们先看一下原图,也是我从网上找来的,哈哈
:

下面我们将要把它拆成下面这三张图
:
图片1:
图片2:
图片3:
这三张图将分别对应代码中提到的图片1、图片2、图片3。背景图的最前面那张就是图片1,中间是图片2的无限重复,最后面那张就是图片3
。怎么样,心里有点数了吧
,加油
,我们马上开始拆图啦
。
首先我们用Photoshop打开原图:

(一)我们先做好三项准备工作
:
①改图片宽度。点“图像”→“图像大小”,在“约束比例”前面打勾,我们把图宽度像素改为我们所希望的宽度620,然后点“好”。

②调整对齐。我们要将“视图”→“对齐”以及“视图”→“对齐到”→“文档边界”的前面都打上勾
。

③改羽化值。我们还要将选项栏的“羽化”值改为0像素。

(二)好啦,
准备就绪,下面我们就要开始拆图啦
!
1.点工具栏里的“切片”工具

在图片2的位置从左上角点取并拖动鼠标至右下角然后放开,

这时这张图片已被切为3个切片了。
从上到下依次为切片01,切片02,切片03。注意:

为保证将来背景图的效果漂亮好看,我们在切片时,需要注意这三张图片之间衔接要自然
。因为图片2处在中间位置且它要无限重复,所以
尤其要注意图片2本身的首尾连接要流畅。例如本例中的图片2要这样选取,要前后都留点空余:

这样才能保证将来重复以后的衔接效果。而如果像下面这样选取的话,效果就不好了
。

结果在两张背景图衔接处会出现下面的问题
:

所以
一定记得在切片时首尾连接要流畅。
2.点“文件”→“存储为web所用格式”

会弹出下面的对话框:

点右上角的“存储”,弹出下面的对话框:

选择好您的保存路径,“保存类型”选“仅限图像”即可,完了点“保存”
。这时您打开您刚才选择的保存路径的地方,Photoshop已经为您建立了一个叫做“images”的文件夹

打开它,哈哈
我们所需要的那3张图片就是在这里啦
!

3.因为图片2是要无限重复的,
所以图片2的高度根据需要可以尽量小一点,而不必太高。在本例中图片2可以用裁剪工具裁剪如下:

结果就是下面这样:

好啦,这三张图片已经做好了,就是本文开头提到的那三张图。大功告成一件
!辛苦了半天,赶紧鼓掌奖励一下您自己吧![]()
![]()
。
二、第二种情况 当您选择的是*.gif动态格式的图片时
方法和步骤和第一种情况是基本一样的,只有两点不同的是:![]()
①打开图片时一定要用ImageReady,它是Photoshop自带的专门编辑动态图片的软件。在打开Photoshop后,同时摁下“Ctrl+Shift+M”就可以跳转到ImageReady软件。
②在切片做完保存时要点选“文件”→“将优化结果存储为”。
三、接下来就是上传到您的支持外链的网络像册里,就可以备用喽
。










