13-4 实战网页设计稿

ps教程 2023-06-15

13-4 实战网页设计稿

新建一个640×480的白底图像，然后使用形状工具〖U/SHIFT_U〗的矢量方式，画出一个长方形。这个长方形本身具有4个锚点，我们使用锚点添加工具〖P/SHIFT_P〗，在长方形的上边和下边分别各增加两个锚点，这样矩形就有了8个锚点。现在使用直接选择工具〖A/SHIFT_A〗选中位于右侧的上下4个锚点，将它们整体向上方移动些许。形成一个带拐角的S形。过程如下左图所示。

完成后使用直接选择工具将两条垂直边分别向左右端移动达到画面边缘，如下右图所示。

13-4 实战网页设计稿

网上找个人物素材图片，将人物抠出来。可使用魔棒工具选择背景后反选得到人物选区，具体过程不再介绍。将人物移动到设计稿中，放置在矩形拐角处。并视情采取必要的手段调整人物的色彩。如下左图。

再将我们之前做好的文字和徽标放进来，排列在左端的位置，大致如下右图。下方的小文字使用的是“准圆”，大家也可使用其它的字体。只是注意在字号比较小的时候，要尝试各种文字抗锯齿方式，找到最合适的。图示中是采用了“犀利”。但依据字体的不同，这个设定也许也会不同。

13-4 实战网页设计稿

现在来制作栏目菜单，在画面的左上角绘制一个矢量的圆角矩形，其层次应该位于之前所有图层的下方。然后如下图所示，将其中一个片断向右方移动些许。这样做是为了与原先的图形形成较平滑的衔接。为避免视觉干扰，可暂时隐藏人物图层。

需要注意的是，虽然新建的圆角矩形位于最下方图层，但在对其路径进行操作的过程中，路经锚点和片断都会不受遮挡地显示出来。因此大家不用担心层次的问题。并且在图示中我们看到实际上这个圆角矩形露出来的只是很小一部分，因此在绘制的时候大些小些都无所谓。

13-4 实战网页设计稿

在组织了一些物体之后，设计稿的整体性就逐渐突出了，此时有必要将各元素进行一次协调修改，以达到最好的配合。现在我们就来进行第一次的协调修改。如下左图，将大师之路用自由变换工具压扁一些；将徽标缩小一些；增大小文字的间距；所有文字和徽标整体略微向下移动一些；将遮挡了栏目菜单拐角的人物往左移动些许。当然这些修改都并不是必须的，大家完全可以按照自己的想法去修改。创意是没有正确与否的区别的。不必过分在乎别人的评价，只要你做出来的作品表达了你目前想要表达的效果，那就是成功的。

接着在栏目菜单区域打上文字，由于文字是白色，因此背景的圆角矩形填充色应适当加深一些。如下右图。在实际的网页制作中，栏目菜单文字经常是以文本方式制作的。而我们现在是以图片方式制作的，但这并无大碍。况且大家对网页的一些特殊性质也还并不了解。相应内容我们会在专门的网页制作教程中介绍。

13-4 实战网页设计稿

现在图层的数量也逐渐多了起来，此时就要注意加强管理，否则越到后面数量越多。如下图，将除背景层外所有图层组成一个“Top”组，Top表示顶部的意思，然后再将所有的栏目文字组成一个组。从层次上来看，栏目文字组只要不是位于“栏目背景”层之下，在任何层次都可以正常显示。但出于相关性原则，我们还是将其与在“栏目背景”层相邻。这样也有利于今后的快速查找。图示中因为我们采用了无缩览图的方式，因此为了让大家看图方便，给每一个图层改了名字。实际操作中不必如此。

这种图层整理工作也不是必须的，但良好的图层组织会给今后的修改带来方便，如果你把文件移交给别人，别人也容易看懂。

13-4 实战网页设计稿

接着制作两个圆角矩形，使用恰当的图层样式(渐变填充和描边)，形成组合体，如下左图。接着输入一些文字，并适当设定字体、字号、行距、不透明度等，并为下方的“在线阅读>>”添加上些许投影。如下中图。然后对“>>”两个字符单独处理为上标形式，前面加一个空格拉开距离；将下方的按钮改为深色，文字相应改为浅色并视情加粗或选用更粗笔画的字体，如下右图。这样色彩的对比可以突出按钮。

13-4 实战网页设计稿

这个组合体应该由5个图层组成，现在讲它们组成一个图层组，然后对图层组进行移动复制，形成如下左图的布局效果。可将更改复制出来的文字改为其他文字内容以示区别。这里就不作介绍，大家自己动手即即可。

现在感觉画面的底部空间余留不足，可能不足以制作落款，因此要将加大画布尺寸(非图像尺寸)，虽然可以通过【图像_画布大小】〖CTRL_ALT_C〗进行设置，但它不够直观。实际上直接通过裁剪工具〖C〗更方便，如下右图，用裁减工具的裁剪框充满全图像，然后将裁减框底部的裁剪线向下移动，超出图像原有范围。提交裁减后图像就变大了。由于要超出原有图像尺寸，因此事先要将图像窗口拉大一些才好操作。以后遇到此类需求时都可以使用该方法。

13-4 实战网页设计稿

上一篇：第十五章：协作开发,15-1 软件协作下一篇：利用画笔及滤镜制作绚丽的高光漩涡

13-4 实战网页设计稿

热门文章

最新文章

标签列表