网页diy制作(简易网页制作)

本文主要介绍网页diy制作(简单网页)，下面跟着东辰网详细了解一下吧。

在掌握了路径和图层样式之后，我们终于可以从头开始制作网页了。这与之前的操作不同，比如打开一个图像进行调整，或者通过蒙版或者图层混合模式合成两个图层。它是在一个空白上一步一步地构建所需的图像。由此，你也会学到一些关于制作网页设计草稿的技巧。其实我们很希望把所有的内容都写在一本书里，但是由于篇幅有限，我们会在另外一个专门的教程里介绍。

虽然我们还没有t还没有开始，如果我们记住了以下三个原则，并且运用得当，就相当于掌握了一半的知识。开始种是矢量，第二种是图层样式，第三种是混合模式。注意，这里的混合模式不是图层之间的构图，而是图层样式中的混合。例如,纯色加渐变我们特别介绍的就是其中之一。在制作过程中，基本都是以矢量模式进行。虽然一开始你可能会觉得不舒服，但是你很快就会明白为什么我们强调向量路径的重要性。

s1306从本地开始，尝试做一些小纽扣之类的。新建一张白色背景200200左右的图片，使用圆角矩形工具【u/shift_u】，顶部选择形状图层模式，半径10px左右。在图像中画一个9030左右的矩形(可以使用信息调板[〖F8〗观察数)。设置填充颜色为灰色，如下左图所示。形状图层法其实就是矢量纯色填充图层。这将是生产过程中最常用的方法，其次是简单路径法。它看起来很丑，不它看起来一点也不像纽扣。我们需要使用图层样式来创建一个效果。由于它是一个按钮，通常具有三维效果，所以使用坡度和起伏风格。如下图设置，注意尺寸不要设置太大，底部阴影的不透明度要低一些，避免形成太大的明暗对比。效果如右图所示。它看起来像一些按钮。

s1307就是这种简单的效果。我们需要分析图像大小对样式和其他设置的影响。可以看到，图层样式中各种设置的值往往是px，也就是像素，很少是百分比。这就导致了一个问题。我们刚刚画的圆角矩形的宽度大约是90像素，我们在浮雕样式中设置的大小是5像素。两者比例为16，更好看，不多也不少。但如果矩形的宽度是900像素，两者的比例会达到160，同样数值的浮雕几乎表现不出效果。反之，如果矩形的宽度只有9个像素，浮雕的效果就会太明显。另外，后期也可以放大或者缩小对象。虽然我们假设的比例有些夸张，但现实中确实存在。也就是说，图层样式通常有其适用的大小。当用于更大或更小的物体时，效果会有偏差。所以当一个图层样式的效果不明显或者太明显的时候，不要不要匆忙删除样式，而是先尝试更改其中设置的像素值。物体大了就变大，小了就变小。百分比值影响不大，可以不改，也可以稍改。角度值通常不受影响。但是，如果旋转对象，可能需要改变使用角度的一些值，其中最明显的是渐变叠加角度。除了图层样式，圆角矩形的半径也是一个像素值，所以当我们要画更大或更小的圆角矩形时，该值也要相应地增加或减少。其他形状，如矩形或椭圆形，没有这个麻烦。在Illustrator中，我们可以设置样式随图形缩放，这是一个非常实用的功能。希望以后的Photoshop版本可以加入这个功能。

s1308现在继续引领潮流。一般坡度起伏与投影共存，是用来体现立体感最常用的组合。所以现在添加上投影样式，分别如左图和右下图所示。注意投影的不透明度要低一些，太高会造成强烈的阴影。这是新手需要注意的问题。他们常常喜欢用浓重的阴影来表现自己。其实稍微投射一下就能达到反射的效果。需要注意的是，物体应该是被反射的而不是投影的。投影是陪衬，不应该是主体，所以要淡化。太厚的投影会偷走宿主让工作看起来粗糙。

s1309接下来，我们双击填充层的缩略图，改变填充颜色为亮黄色。如左图所示。这个时候你会觉得黄色的浮雕效果变得不明显。这是因为浮雕效果也是通过高光和阴影来体现的，亮黄色本身亮度高，使得浮雕的高光不明显，而阴影受影响不大。但现在更重要的问题是，亮黄色的按键在白色背景下并不抢眼，是缺乏边框感。在图像合成中，我们都试图淡化边界，因为我们想创造一种整体感。但是在网页设计中，按钮等功能对象要有明显的界限，让人一目了然。不然你怎么知道按钮在哪里？所以我们通过设置笔画样式来解决这个问题。如下图中图和右图所示。注意我们在笔画颜色的设置上用灰色代替黑色，主要是为了避免造成太强的边界感。

好了，这个按钮准备好了。有被骗的感觉吗？一开始的大介绍，结果只是两三步。其实这个按钮是用来让大家了解网页设计稿的特点的。我们可以不要盲目的用各种函数做出各种效果。网页设计稿不是一堆效果，而是要有选择地、有风格地运用适当的手段进行创作。说这个并不过分在网页设计稿中，只会应用Photoshop的几个功能。例如，我们不。;不使用过滤器，我们基本上不不需要调整颜色。连选择区都很少见。你所使用的是矢量路径和图层样式。即便如此，矢量模式也会大大提高我们的工作效率，因为矢量在创意上有很强的优势。真正的设计师用的是Illustrator而不是Photoshop，因为后者提供了更广阔的创作空间。以后我们会写一个Illustrator的教程给大家学习。

立体感和边界感是网页设计稿的基本要素。立体感让对象看起来很饱满，边框感划分了页面的功能区域。营造立体感的通常是斜浮雕，边界感可以通过笔触风格或色彩对比产生。一个页面的功能区一般是用线条或者色块来划分的。

s1310在使用矢量而不失真或损失质量的变换中有优势吗？是的作为一个设计稿，后期肯定有改动的可能，当然也包括放大缩小之类的变换。但是，我们之所以反复强调使用矢量图形，除了它在变换层面上失去质量的优势外，还有改变形状的优势。一般来说，无论是放大还是缩小，都是拉伸还是压缩整个物体。假设我们现在要缩短这个圆角矩形，大家首先想到的就是【CTRL_T】用变换工具缩小宽度，如下图上半部分所示。但如果你仔细观察结果，你会发现圆角也被压缩了。但是，如果右端的四个红色锚点被直接选择工具向左移动一定距离，宽度将会缩短，圆角将保持不变。显然，我们在大多数情况下需要后一种效果。

利用我们在路径一章中学到的知识，我们可以把圆角矩形变成更多的形状。如下图，分别删除56个锚点，下移47个锚点；删除78个锚点；将2345锚点整体移动到1678锚点的左侧。注意这里的操作不是使用删除锚点工具，而是使用直接选择工具选择然后按D《西游记》;的经典，描述了孙悟空有一种特殊的能力，改变其形状，所以根据今天s的角度，可以判断孙悟空也是由矢量路径组成的。

s1311不仅可以对对象本身进行更改，还可以复制和修改它以形成一个集合。流程如左图所示。复制上一个按钮并向下移动相应的锚点以增加其高度。并取消浮雕图案，增加图案叠加图案的效果来制作扫描线。水果。然后把原来的按钮改成平底并取消压纹和凸起。最后，将两者结合起来，形成一个带有标题的文本框。图案叠加样式设置如右图所示。

这种组装虽然结构简单，但是制作过程中的临摹技巧非常有用。因为两个对象的宽度是一样的，所以重绘起来比较麻烦，必须借助信息调色板或者其他手段来保证。新对象的大小可以通过复制直接继承，利用向量路径的独特优势，通过移动锚点来改变对象的大小，称为载体克隆和移动定位点。虽然这个方法的名字有点长(或者简称为向量移位和)，我们可以从矢量与数学它不适合点阵图形。具体原因就不用多说了。

事实上，组合对象并没有像风格。我们指的是那些组成组合的单个成员对象。在形成一个组合之前，每个对象都可以设置自己不同的风格，它不如何设置并不重要。但是组装成型后，需要改变一些样式。比如我们刚刚做的圆角矩形都有阴影样式，但是如果两个矩形形成一个组合，仍然保留它们的阴影，效果就不好了。就是避免风格重复。即使必须使用相同的样式，参数也应该不同。但是这些参数不包括光照角度，因为一个组合中有两种阴影方向显然是不正确的。

s1312这个组合由两层组成，如果标题区有文字，那应该是三层，虽然严格来说，标题文字不是对象之一，但是像这样的组合必须有标题文字才算完整。然后我们再添加标题文字，将它们组合成图层组，如下图左图和下图中图所示。将这个图层组复制几份，移动到不同的位置，然后改变大小和颜色，形成一个简单的网页布局。如右图所示。

了解更多网页diy制作(简单网页制)相关内容请关注东辰网。