第六章 Dreamweaver离不开的Photoshop应用

如果你对Photoshop不熟悉，没有关系，通过本章的学习，我们会让你掌握做网页过程中，Photoshop处理图片所发挥的作用。

第一节 按钮的修改

一、按钮文字的替换

我们在浏览别人的网页时，可能会发现，有些人做的按钮图片很漂亮，我们也想做成跟它们一样的效果，只是要把文字替换成自己的，怎么办呢？

我们先来看一下这个按钮，，我想把“首页”这两个字换成“论坛”，

1、在Photoshop中打开这个图片文件button1.gif，将鼠标移到工具栏中，选择左上角第一个矩形选框工具单击，在弹出框中选择最后一个“单列选框工具”，如图027所示：

[图027]

2、然后移到图片中间单击，接着按键盘上的“ALT”键+“T”键，如图028所示，出现了三个矩形框，

[图028]

3、将鼠标移到中间的矩形框，待鼠标变成“左右方向箭”时，按住鼠标左键不要放开，向右拖动，如图029所示，按钮上的字就被擦除掉了，而且保持整个按钮原有的背景效果。

[图029]

4、然后按回车键确定，再按“CTRL”键+“D”键，取消选择框，如图030所示：

[图030]

[提示：为什么我们可以采用这种方法把文字去掉，保留原有的背景效果呢？从这张图上我们可以看出，这个按钮的填充色是自上而下的一个过渡色效果，所以我们利用的原理就是选择其中的一个垂直象素的图片来填充。相同道理，如果按钮的渐变是从左向右，那我们就选择“单行选框工具”，通过上下拖动的方式来完成填充。----这是非常实用的一个图片处理方法，你会发现，单行或单列的选框有时候并不能很好的满足我们的操作，这时你可以换成矩形框，我只要框取图中的一小块区域，然后同样按ALT+T，再按动小方块来实现局部区域的填充。对于一些复杂背景的处理效果，我们会在后面的章节中继续介绍。]

5、接下来我们要来输入文字，选择文本工具“T”，然后移到图中单击，输入“论坛”二字；

(在此之前，我们要先完成一步操作，那就是点击“图象”---“模式”---“RGB颜色”，因为我们刚才打开的是.gif格式的图片，默认的图象模式是“索引颜色”，为什么要改成RGB颜色，我们会在后面的章节中另外介绍，如果你有兴趣，也可以先研究一下这两者的区别。）

[图031]

6、设置字体属性，如图032所示：

7、改变字体颜色：

首先我们先来介绍几处跟颜色相关的，如图033所示：

[图033]

[图034]

设置文字颜色为白色，如图035所示：

[图035]

8、设置文字的字间距：

9、移动工具的使用，如图037所示：

[图037]

8、图片保存

点击菜单栏中“文件”--“保存为Web所用格式”,如图038所示：

[图038]

二、按钮加宽缩小

1、按钮加宽

比如我们要输入文字“个人作品”，这时按钮宽度不够，我们需要增加；

（1）点击菜单栏中的“图象”--“画布大小”，将“相对”左侧的复选框选中，定位在水平居左，垂直居中的那格，在宽度栏中输入40象素，按“确定”

[图039]

结果如图040所示：

[图040]

（2）用“矩形工具”框选右侧的一部分，然后点击“移动工具”，再一直按向右方向键，直到如图041所示，按Ctrl+D取消选择区域，

[图041]

（3）用单列选框工具在图中间单击，再按住ALT+T，拖动中间的小方块向右拉，如图042所示；

[图042]

（4）选中“文字图层”，在图中单击，把文字“论坛”换成“个人作品”，如图所示；

（5）用此方法将几个所需的按钮制作出来，效果如下所示：

2、文件的保存（PSD格式）

Photoshop一个重要的特点就是图片文字都可以是分开独立的图层，如果你希望把一个文件保存起来，在以后还可以继续拿出来编辑，而且图片和文字都还是分开的，那你就必须保存成.PSD的文件，而不能存为.gif或.jpg,否则所有图层就会被合并起来，日后你要重新编辑就麻烦了。

点击菜单栏中“文件”--“保存”，如图043所示，输入文件名，选择保存位置，点击“保存”

[图043]

三、按钮颜色的修改

Photoshop有一个非常实用的调整颜色的工具，那就是点击菜单栏中的“图象”--“调整”--“色相/饱和度”，也可以直接按键盘上的CTRL+U调出“色相/饱和度”，如图044所示：

[图044]

拖动“色相”、“饱和度”、“明度”的滑块向左向右移动，看看效果。