QQ情报站 » 『QQ空间』 » 超详细的FD模块实例制作教程

qq仟湫 发表于 2008-1-22 12:53

超详细的FD模块实例制作教程

这次我们采用实例教程的形式来分析一下大图、FD模块的制作过程。实例的形式，就是我们把所用的材料都提供下载，你下载后然后根据教程边学边自己动手作，这样就很容易记住制作的过程。等你看完教程，你自己的大图、FD模块也就制作成功了。

[size=4][b]首先你的电脑先准备如下工具：[/b][/size]
[font=Times New Roman]1. Adobe Photoshop－版本不限，不过教程是以[font=Times New Roman]Photoshop [/font]CS3为例。主要用于图片部分的处理，大图模块制作仅用它就可以了。
[url=http://www.orsoon.com/Soft/7480.html][b][color=#0000ff]点击下载[font=Times New Roman]Photoshop[/font] CS3精简版[/color][/b][/url]
[font=Times New Roman]2. SWFDecompiler（闪客精灵）－主要用于初学者简单添加特效。
[url=http://www.jb51.net/downtools/SWFDecompiler3.3.rar][b][color=#0000ff]点击下载闪客精灵V3.3汉化版[/color][/b][/url]
3. Macromedia Flash－主要用FLASH部分的制作
[url=http://www.onlinedown.net/soft/9866.htm][b][color=#0000ff]点击下载Macromedia Flash 8.0[/color][/b][/url]
当然还有其它工具可以利用，比如光影魔法手，可以让我们轻松添加边框。闪客之锤可以让我们轻松制作动感特效。这些软件我就不一一介绍了，有兴趣的话可以自己去搜索相关资料。

[size=4][b]然后把下面的素材下载到你的电脑里：[/b][/size][/font][/font]
[font=Times New Roman]图片素材：
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018204119350.png[/img] 个人形象等模块用[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018232353809.png[/img]心情小留言用
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018212359512.png[/img]日志相册大模式用[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018240971369.png[/img]扣图后的美女
如你是制作大图模块可以下载边框素材后另行修改尺寸，即中心空白地方为原系统模块的大小。[/font]


[b][size=4]现在开始一步一步来制作一个简单黑色风格的FD模块了：
[/size]一、PS部分：[/b][font=Times New Roman][font=Times New Roman]
打开Photoshop（以下简称PS），新建一个文档，设置宽为715像素，高为990像素。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018293949656.jpg[/img]

菜单栏上点击编辑－填充－弹出颜色项后选择黑色
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018302423025.jpg[/img]

在背景图层上双击，让它变成普通图层（解除锁定）
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018334925180.jpg[/img]

把刚才下载的所有图片素材打开。
如果你没有下载图片，也不想下载到电脑里，那你可在图片上右键－复制－然后直接粘贴到刚刚新建的文档里。
按住Ctrl键后全部选定可一次性全打开。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018384866132.jpg[/img]

点一下小还原键后图片全部列开
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018391661565.jpg[/img]

然后点移动工具（V）直接在有像素的画面上按住左键拖到黑色背景的大图片上来。当然也可以用Ctrl+C和Ctrl+V进行操作。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018410421491.jpg[/img]
把黑色背景大图片最大化，其它的先不要管了。现在开始编辑这个画面。把网格调出来（视图－显示－网格），方便对齐，智能参考线也可以钩选上。
如果你觉得放模块的边框太少，可以按住Alt键，在任一边框上轻轻一拖就可以复制出一个。也可以在你选定的边框图层上选择复制图层。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018422115694.jpg[/img]

别忘了把背景的位置锁定，不然很碍事的。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018454099422.jpg[/img]

对齐边框后可以取消息网格，进行美女的编辑，选中美女，按Ctrl+T键会显示出变换工具来。可以对美女进行放大缩小等处理。
新建一图层，用画笔进行一些处理，当然也可不用处理，画笔很多地方可以下载，我们的FD学习交流群内也有一些整理过的画笔包可以下载。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018505535043.jpg[/img]

晕，写得太复杂了，仿佛成了PS的教程了。好了，现在对边框进行处理，你可以用滤镜、样式混合模式、等等多种形式进行处理，也可以做成Action（动作）进行批量处理。也可以早就做成现成直接粘贴进来也行。我这里采用简单的样式进行一下处理。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018512979662.jpg[/img][/font][/font]
最后用魔术棒配合Delete键把框内的像素消除掉。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018533067410.jpg[/img]

另外要加些文字，比如我的日志、我的相册等等这些东西，留给你们去加上去吧。
最后点文件－存储为web所用格式
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018540173909.jpg[/img]

弹出对话框，选择存储格式为PNG24，你也可以选择GIF格式，但千万不要选GPEJ格式。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018542181734.jpg[/img]  

至此PS部分结束，可以把PS关闭退出了。如果只是做大图模块到此也就完成了。
[b]二、闪客精灵部分
[/b]把下面的透明FLASH下载到你的电脑
星光效果透明FLASH

[flash]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012018565191967.swf[/flash]

启动闪客精灵，把刚下载的星光效果FLASH打开，点击导出FLA，即可把它转为我们可以编辑利用的文件。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019031996815.jpg[/img]

选择保存位置后，接下来点击yes，这样我们就结束了闪客精灵部分，接下来就交给FLASH编辑器去处理了。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019035591666.jpg[/img]

[b]三、FLASH部分[/b]
打开FLA文件后，我们来设置它的文档大小属性，宽和高设置为我们所做的大图背景一样，即715X990。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019054742748.jpg[/img]

新建一个图层2，你可以改名为背景层，因为这个是放背景的图层
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019063947588.jpg[/img]

把这个背景图层拖置到最下。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019422346367.jpg[/img]

好了，现在点文件－导入－导入到舞台，把我们的背景图片导入进来。因为我们文档已设置好，所以导入后大小位置是正好不需要调整了。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019430596409.jpg[/img]

选择工具（V）选中星光，移动星光到适当的位置，移动时最好先把背景图层锁定。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019444076368.jpg[/img]

移动好后将星光图层锁定，把背景图层解锁。这一步是必须的。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019451337586.jpg[/img]
Ctrl+A全选，然后Ctrl+B进行分离打散（也可照图片上的修改－分离）
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019465142765.jpg[/img]

选择套索工具（L），在下面的选项中设为魔术棒
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019501929758.jpg[/img]    [font=Times New Roman][/font]
在图片上的边框内点击，变成只有框内有小网格时，按Delete键清除，这样这些区域就是透明了。好了的话就把这个图层也锁定吧。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019510810713.jpg[/img]

至此我们一个有点特效的FD模块也就做成了。不过你要问，我要做多种效果的如何添加呢？这个当然就要麻烦点，因为我们是用现成的透明FLASH效果做的，你得把库里的元件名都改了（避免重名）。然后打开另一个效果FLA文件，把它们的图层都复制粘贴进来就可以了。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012020011714424.jpg[/img]

下面我们重点来说一下如何把GIF动画也导入进来。因为GIF动画很多，而且不要用到闪客精灵来转换这么麻烦。
先下载下面的一张GIF的闪字图片。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019543774608.gif[/img]

再新建一个图层3，然后把这个图层拖动到上层去，当然也可以是中间，只要不要放到背景图层下就行了。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019562760696.jpg[/img]

[b]重要更正：[/b]以下几步写得复杂了点，其实你如果选择导入－导入到库，然后选择其中的一个影片剪辑文件拖动到舞台，会更容易操作，而且不用添加帧了。你不妨试下，所以下面几步你可以略过不看了。
[font=Times New Roman][font=Times New Roman]不过也可以看一下，下面是处理多帧动画的知识，看了也是有点用处的。

选择文件－导入－导入到舞台
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019564846433.jpg[/img]

导入后，它的位置是默认的左上角，这当然不是我们想要的。所以我们选择帧面板上的编辑多帧，再选择右边小按钮－绘制全部
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019571418162.jpg[/img]

用Ctrl+A选择全部，用选择工具移动到你需要的位置，下面图片中的文字有些错误，在PS里为移动工具，在FLASH里叫做选择工具。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019584320194.jpg[/img][/font][/font]
这时如果我们用Ctrl+Enter键测试影片的话，会发现画面是不连续的。所以我们在帧面板上，为下面的两个图层相同帧上（即第3帧）各插入一个帧。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012019594860278.jpg[/img]

这样你再Ctrl+Enter测试影片，如果满意，我们的就可以导出影片了，至此我们的简单FD模块就做好了。
[img]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012020004623150.jpg[/img]

差点忘了把成品发出来了，文件不大不小81.3KB
[flash]http://www.wodiqq.cn/UpLoadFiles/QQKJ/2008/1/2008012020263736883.swf[/flash]
有需要的可以下载或用到空间哦，呵呵，不过估计没人用这个。

[b][size=5]最后说一下：[/size][/b]
我们这个教程只是一个很简单的实例，也只能说是提醒你如何去制作的教程而已。也是一个在制作上比较偷懒的方法，等你们以后PS和FLASH的水平提高了，你就完全可以自己制作一些特殊效果。因为我们这不是一个PS或FLASH的教程，所以这些方面的知道你们可以去网上搜索学习一下。师付领进门，修行靠自己。发挥你的想象力，细心去创作你们超凡作品吧！！

莫莫 发表于 2008-1-22 13:53

[em37] 好麻烦

莫莫 发表于 2008-1-22 13:54

[em34] 慢慢学

一個人的戰役 发表于 2008-1-23 14:50

这个很好哦

寂寞的虫子 发表于 2008-1-26 03:31

[em48] 我想要这个

[[i] 本帖最后由 雁儿 于 2008-2-11 20:35 编辑 [/i]]

极度深寒 发表于 2008-3-24 22:26

xuexi!!!!!!!!!!!!!!!

化缘 发表于 2008-3-26 18:34

学习学习.....

一個人的戰役 发表于 2008-5-13 19:22

绝对精品！

腾讯特工 发表于 2008-6-3 13:42

太强大了

freezing 发表于 2008-7-23 21:04

还可以
但是不是很好。

迷茫 发表于 2008-8-21 01:21

对我来说
实在是太难了
呵呵~~~~~``见笑
没办法 笨

80年代 发表于 2008-10-3 03:16

[em50] 太罗嗦了。

苏苏 发表于 2008-10-10 22:36

我还正在学ps，慢慢来，..[em53]

查看完整版本: 超详细的FD模块实例制作教程