photoshop网页设计教程之七十三-----实战路径运算_扯面的空间==网页设计在线教程|photoshop网页设计在线教程|网站优化在线教程|

查看文章

photoshop网页设计教程之七十三-----实战路径运算

2007-09-07 14:48

photoshop网页设计教程之七十三-----实战路径运算

现在我们来学习路径的另外一个很重要的操作，那就是运算。与选区运算一样，路经也具备添加、减去、交叉等功能。这其实应该在学习路径绘制的时候就接触，但当时单一的路径不容易体现出运算的效果，现在通过形状图层来学习就很直观了。因为形状图层会在图像中产生一个色块，这样就很容易观察到路径运算的效果。
在顶部公共栏红色箭头处选择形状图层方式，橙色箭头处即为各种运算方式。绿色箭头处的按钮如果按下，可以在样式列表中为形状图层指定图层样式。把需要用到的图层样式存储到列表中，这时就可以直接使用。当然也可以通过样式调板使用。最后是填充的颜色。

路径的运算方式分别为：
新形状图层：此方式下使用形状工具所绘制的形状将作为新的颜色填充图层。
添加形状区域：所绘制的形状将与原有的形状区域共同产生填充颜色效果。
从形状区域减去：从原有的形状中减去填充色区域。如果没有重叠则没有减去效果。
交叉形状区域：在多个形状区域的重叠部分填充颜色。
反交叉形状区域：在多个形状区域的重叠部分以外填充颜色。如果没有重叠则等同于添加。

需要注意的是，有两种情况会导致填充色无效。一是在减去和反交叉方式下，如果两个形状完全相同且位置一致，则填充色无效。二是在交叉方式下，如果多个形状没有重叠则填充色无效。在实际使用中应避免发生这些情况。

现在新建一个400×300的图像，使用矩形工具〖U/SHIFT_U〗，如下左图，在顶部公共栏点击红色箭头处，开启形状的几何选项。这个选项依据形状工具的不同，其内容也不同。将矩形尺寸设为固定的200×20像素，这个数值是相对整个图像的尺寸而言的，大家可以自己设定。然后在图像中画出一个矩形。由于后面要对路径进行操作，因此现在先填充一个较浅的灰色，这样就比较容易看清楚路径的线条。
需要注意的是，要确认目前的样式为无样式。否则矩形绘制出来就带着图层样式效果。

现在要为这个矩形添加一个箭头，我们使用多边形工具〖U/SHIFT_U〗来完成，多边形的选项如下左图，其中半径我们并没有指定，大家也可以设置为30像素这样的数值。
现在要确认之前的矩形路径在图像中处于显示状态(如果填充颜色太深可能路径就不明显)，即图层调板应如下中图所示，在矢量蒙版周围有选择框。如果同时开启了路径调板，则应如下右图所示。

接着确认顶部公共栏中的运算方式为添加，可通过快捷键〖+〗来快速切换。然后在图像中绘制一个三角形，位置任意。然后使用路径选择工具〖A/SHIFT_A〗，按住ALT键(这样就启动了移动复制功能)将三角形拖动到矩形的左侧。然后〖CTRL_T〗启动自由变换，将其水平翻转。过程大致如下图。
也可以通过〖CTRL_C〗和〖CTRL_V〗的方式对路径进行复制，但由于粘贴后的路径位置与复制时候相同，所以最好在复制之后移动一下原路径，再进行粘贴。

细心的读者会发现，使用路径选择工具的时候，公共栏出现了对齐选项。那么就可以在选择多个路径后利用它们来完成排列，如分布和居中。如下图。注意在对齐的时候要全部选择所需的路径。另外，与普通图层的对齐相同，分布排列类型的选项需要选择至少3个路径才有效。
完成后可按下回车键，这样路径就不再显示，可以看到最终的效果。此外也可以点击图层调板中的矢量蒙版缩略图，或点击公共栏的按钮。

现在我们将三角形再复制一个出来，通过变换将其缩小到65%(可在使用变换时的公共栏中填入)左右，再将其移动到原先的三角形之内，然后在公共栏指定为减去方式(可通过〖-〗来切换)，制作出挖空效果。过程大致如下图。

通过以上各步骤，我们知道只有处在同一路径组中的各路径之间才可以进行运算。而要让多个路径处于同一路径组，从第二个路径开始，就必须通过除了新形状图层以外的方式去绘制。此外大家所要掌握的知识是：
1：用路径选择工具去移动、复制、对齐路径。不要再犯使用移动工具的错误。此外也可以通过键盘方向键轻移。
2：复制出来的路径，具有和原路径相同的运算方式。比如之前所复制出来的三角形。
3：路径运算方式可以更改。比如之前从添加方式改为减去方式的小三角形。

尤其是最后一点，可在后期更改运算方式的功能带来很大的方便，我们不必像以前的选区运算那样，运算之前必须胸有成竹，因为选区运算的结果不可改变只能撤销。而路径运算即便操作错误(如把该添加的做成了减去)也不用撤销。再加上可通过路径选择工具或键盘移动路径，可以很容易地调整运算结果，比如减去太多了可以改少些。而选区运算只能推倒重来。

现在我们制作的效果应如下左图。现在需要做出如下右图的挖空效果。大家先想象一下该如何实现。在继续看后面的讲解。

我们来看一下该如何制作这个效果，从简单的层次上考虑，就是制作出下左图红色区域的形状，然后将其改为减去方式即可。而制作这个红色区域主要的问题在于其左端，那是一个与三角形边缘相符的曲线。

那现在我们就来制作这个红色区域，首先将左端的三角形和矩形一起选择，然后移动复制到其他的地方，移动的时候最好是同时按住SHIFT键，垂直复制到原路径的上方或下方，这样制作完之后再垂直移动回去，就免去了一步对齐。
接着适当减少矩形的高度和宽度，以留出空隙。可以使用直接选择工具〖A/SHIFT_A〗，选择水平和垂直方向的片断，将其向内移动。也可以通过自由变换完成(应使用路径选择工具选择矩形)。然后用路径选择工具选择三角形，按下〖-〗将其改为减去方式。
此时如果只作为个体来看，已经是完成了制作。但如果将这两个形状移动回去的话，三角形的减去方式也会对其他路径产生效果。所以现在用路径选择工具选择两者，然后点击公共栏的“组合”按钮，这样两个路径就合并为了一个，这其实是最关键的一步。现在将这个路径移动回原先的路径中并设为减去方式，大功告成。

现在来看一下有关路径组合的内容，先画出一个大圆，然后以添加方式画一个小圆，将两者重叠一部分。这样组合之后，可以看到路径合并为了一个，如下左图。从实际操作来看，要用锚点控制完成这个8字型的路径是比较困难的，而通过这种组合的方式却可以轻易做到。所以这种方法也可以用来创建一些较复杂的路径。如果小圆是减去方式，在组合之后合并为了一个月牙形，如下中图。但如果小圆是添加方式，又与大圆相离，如下右图。则组合后也还是两条路径。所以并不是所有情况下都会合并。
多条路径组合之后，就失去了独立性，不能通过路径选择工具进行单独的移动，如下中图的月牙形。因此若非必须(某些运算或对齐用途)，应避免使用组合功能。在组合之前应确认所选择的几个路径是否正确，如果没有选择任何路径，则组合对整个路径组都有效。

对于这个箭头的制作，也许大家觉得没有必要这么麻烦，使用多个图层也能完成，同样是矢量，同样可以排列对齐，也同样可以通过蒙版来制作挖空。那为什么要费这么大的劲通过路径来制作呢？首先是用这个例子来练习路径的操作，这些方法、思路和技巧也适用于Illustrator及其他矢量绘图软件。也是在徽标设计等方面常被用到的。再者，这样制作出来的成品可以作为自定形状存储起来，方便以后的调用。
使路径处于显示状态，然后【编辑_定义自定形状】，如下左图。之后就可以在形状列表中找到，如下右图。如果将形状列表存储为外部文件，则还可以提供给他人使用。如果我们是采取图层的方式制作的，尽管也都是矢量，但由于无法同时显示所有的路径，因此也就无法定义为自定形状了。
需要注意的是：自定形状中的路径不再具备独立性，相当于和使用了组合功能后一样。

最后介绍一种可能出现误操作的情况。如下左图，我们先绘制了方形，接着绘制了减去方式的圆形。这样形成了“圆减去方”的效果。如果想要变为“方减去圆”，大家可能想到的方法是：选择圆改为添加方式，接着选择方改为减去方式。但最后的效果却会如下中图般。
如果〖CTRL_C〗复制方型路径并将其〖DELETE〗删除(或直接〖CTRL_X〗剪切路径)，然后再〖CTRL_V〗粘贴，此时改变运算方式就可以得到如下右图的效果了。

这是因为在一个路径组中，第一个被绘制出来的路径称为基础路径，默认其为添加方式。如果将其改为减去方式，会造成反相的效果。因此不应试图用其对其他路径执行减去运算。如果基础路径被删除，则其他路径按照绘制的顺序“继位”成为基础路径。因此我们后来采用剪切的方式让方形“退位”，再粘贴进来执行运算，就可以既保留路径形状又达到运算的目的。

返回photoshop网页设计教程

photoshop网页设计教程之一RGB色彩模式

photoshop网页设计教程之二灰度色彩模式

photoshop网页设计教程之三图像通道

photoshop网页设计教程之四CMYK色彩模式

photoshop网页设计教程之五色彩模式选择

photoshop网页设计教程之六颜色的选取

photoshop网页设计教程之七HSB色彩模式

photoshop网页设计教程之八图像尺寸

photoshop网页设计教程之九点阵格式图像

photoshop网页设计教程之十矢量格式图像

photoshop网页设计教程之十一图像格式的选择