制作简单网页物体

在这个简单的效果中，我们将分析图像大小对样式和其他设置的影响。如您所见，在图层样式中，用于每个项目的值通常是px（像素），很少是百分比。这就导致了一个问题，我们刚才画的圆角矩形的宽度是90像素左右，我们把浮雕样式中的大小设置为5像素，两者的比例是16，看起来不错，不多不少。但如果矩形是900像素宽，两者的比值是160，同样的浮雕量几乎不可能显示出来。另一方面，如果矩形只有9个像素宽，浮雕效果会太明显。此外，还可以在以后的变换操作中放大或缩小对象。

尽管我们假设的比例被夸大了，但事实上，图层样式通常有其适当的大小。当用在大小物体上时，效果会有偏差。所以当图层样式不明显或太明显时，不要删除它。首先尝试更改其中设置的像素数。事情越大越小。百分比值的影响很小，可以不加修改或稍加修改。角度值通常不受影响。但是，如果旋转对象，则可能需要更改使用的某些角度，其中最明显的是渐变叠加角度。

除了图层样式因子外，圆角矩形的圆角半径也是一个像素值，因此当我们绘制一个较大或较小的圆角矩形时，这个值应该相应地增大或减小。其他形状，如矩形或椭圆，没有这个问题。

在Illustrator中，我们可以将样式设置为随图形缩放，这是一个非常有用的功能，我希望它将添加到未来版本的Photoshop中。

现在继续造型。倾斜的浮雕通常与投影共存，这是最常见的用于赋予深度感的组合。因此，现在添加上下拉样式，如左侧和右侧所示。注意阴影的不透明度应该很低；过高会产生浓重的阴影。这对于初学者来说是个问题，他们倾向于使用重阴影。其实，轻微的投影就可以达到反射的效果，要知道物体是反射而不是投影，投影是一种衬托，不应该成为主体，所以应该淡化。过于沉重的投影会分散注意力，使工作显得粗糙。

接下来，双击填充层的缩略图并将填充的颜色更改为亮黄色。下面是左边的图片。这时，你会觉得黄色的浮雕效果变得不那么明显。这是因为浮雕效果也是通过高光和阴影来体现的，而亮黄色本身亮度更高，这使得浮雕的高光变得不那么明显，阴影也不受影响。但现在更重要的问题是，亮黄色按钮在白色背景上并不突出，这就是缺乏边界。

在图像构图中，我们都试图冲淡界限，因为我们想创造一种统一的感觉。但在网页设计中，功能对象（如按钮）应该有清晰的边界，便于阅读。不然你怎么知道按钮在哪里？所以我们通过设置笔划样式来解决这个问题。下面是中间的图片和右边的图片。请注意，我们在笔划颜色设置中使用灰色而不是黑色，主要是为了避免创建太强的边框。

好了，这个按钮完成了。你觉得被骗了吗？第一个大的介绍结果只是两到三个步骤。这个按钮实际上是用来让你了解网页设计的特点。我们不能一味地用各种功能来制造各种效果，网页设计草稿不是堆砌的效果，而是应该有风格的选择，用适当的手段来创造。

可以说，在网页设计中只有Photoshop的一些特性被使用了。例如，我们不使用过滤器，不需要调整颜色，甚至看不到选择。所使用的只是矢量路径和图层样式。然而，矢量方法将大大提高我们的工作效率，因为在创造力方面，矢量具有很强的优势。真正的设计师使用Illustrator而不是Photoshop，因为后者提供了更广泛的创作可能性。在未来，我们将为您编写教程，学习在Illustrator。

立体感和边界感是网页设计草稿的基本元素，立体感使物体显得饱满，边界感划分了网页的功能区域。创建深度感的最常见方法是使用倒角浮雕，而边界可以使用笔划样式或颜色对比度创建。页面功能区的划分一般是通过线条或色块。

S1310使用矢量的好处，是不是在变换时不失真不失品质的优势？对。作为一个设计草案，后期肯定会有变化的可能，这当然包括放大和缩小改造。但我们之所以一再强调使用矢量图形，除了其在质量损失层面的变换外，还具有改变形状的优势。

一般来说，放大或缩小就是拉伸或压缩整个物体。假设我们想让圆角矩形变短一点，首先想到的是使用Transform工具来减小宽度，如下面图片的上半部分所示。但仔细观察就会发现圆角也被压缩了。但是，如果使用直接选择工具将右侧的四个红色锚定点向左移动一定距离，则可以缩短宽度，同时仍保留圆角。显然，在大多数情况下，我们需要后一种效果。

使用我们在路径部分学到的知识，我们可以将圆角矩形更改为更多形状。如下图所示，删除56个锚定点，下移47个锚定点；删除78个锚定点；将锚点2345整体移动到锚点1678的左侧。请注意，不是使用删除锚点工具，而是使用直接选择工具进行选择，然后按Delete键进行删除。这将创建一个开放路径，但对填充或图层样式没有影响。

矢量图形的优势是显而易见的，当谈到改变形状。只要有足够的耐心，你就可以把这个圆形的矩形变成任何东西，从火车到飞机再到大炮。中国古典名著《西游记》将孙悟空描述为具有改变形体的特殊能力。根据今天的观点，可以得出结论，孙悟空也是由向量路径组成的。

除了对对象本身进行更改外，还可以对其进行复制和修改以形成组合。复制上一个按钮并向下移动相应的定位点以增加其高度。并取消浮雕样式，添加图案叠加样式，创建扫描线效果。将原来的按钮改为“平底”，去掉浮雕和阴影。最后，将两者结合起来形成一个带有标题的文本框。图案覆盖样式设置，如右图所示。

虽然这种组件的结构很简单，但复制技术在生产过程中非常有用。由于两个对象的宽度相同，因此重新绘制会比较麻烦，这必须通过信息调色板的值或其他方式来保证。利用复制的方法生成新的对象，可以直接继承前者的大小，并利用向量路径的独特优势，通过移动锚点的位置来改变对象的大小，这就是所谓的向量克隆和移动锚点的方法。尽管这个方法的名字稍微长一点（让我们称之为“向量移位”），但强调“向量”一词表明它不适用于晶格图形。具体原因不用说。

复合对象没有“样式”这样的东西；我们指的是构成构图的单个物体。在构图形成之前，每个对象可以设置为不同的样式。不管你怎么设置。但在组合之后，有些模式需要改变。例如，我们刚刚创建的圆角矩形本身有阴影，但是如果两个矩形组合在一起，并且每个矩形保留一个阴影，效果将不好。这是为了避免重复这种风格。即使必须使用相同的样式，参数也存在差异。但是，这些参数不包括照明角度，因为组合使用两个阴影方向显然是不正确的。

S1312是两层、三层的组合，如果标题区域中有文本，尽管技术上标题文本不是对象之一，但是这样的组合必须具有完整的标题文本。让我们添加标题文本并将它们分组到一个图层组中，如左图和下图中所示。

制作此图层组的多个副本并将其移动到不同的位置，然后更改大小和颜色以创建简单的web布局。下图显示