注：以下内容适合初学者阅读，专业人士敬请绕道。

对初学者而言，理解网站效果图设计的重要性不言而喻。

很多人在学习网站设计的过程中，会遇到各种难题，觉得难以上手。确实如此。

学生如果学不会，很大程度上是老师的责任。

这和老师正确的引导有很大关系。

通过实际操作，大家能更直观地了解网页效果图的制作过程。

学生提问：做网站效果图有什么意义？

答：房子装好了之后，需要进行装修设计，我们会让设计师先出一些建筑内饰效果图。这样我们就可以提前看到装修好后的样子，如果达不到预期效果，可以随时修改以节省不必要的费用。

同理，在设计网站之前，也需要先制作出效果图，客户对效果图满意后，我们才能进行下一步设计工作。如果不满意，则可以在此时进行调整，避免后续不必要的麻烦和时间浪费。

打开各种各样的门户或企业网站，我们看到的页面都属于网站的界面设计。在生成网站之前，这些页面其实都是一个图片形式的效果图。

经过反复修改和审核，最终才形成现在的网页效果。

学生提问：什么是网站效果图？

答：先找到相关主题的网站效果图，将其中对自己有用的部分提取出来，使用Photoshop进行拼接，形成一个自己的效果图。这就是我们所称的“拼接”。

拼接的好处在于，它能让我们快速了解网站效果图的制作过程。

然而，拼接出的效果图往往不能作为最终的版本。

学生提问：既然如此，那还学它有什么作用？

答：我说了，拼接的主要目的是为了让初学者更好地理解网站效果图的设计原理。

当您掌握了制作网页效果图的方法后，这个阶段就可以跳过了。

学生提问：在做拼接的时候，需要注意哪些问题？

答：1. 最好先在纸上画出草图、找几个相关主题的网站效果图进行拼接（拼接时要遵循网站的六大设计要素）。
2. 在新建图层时要注意两点：
a. 图层的顺序；
b. 分组（按这六大要素分组）。
3. 页面色调要保持统一和一致；
4. 善用参考线、缩放工具、抓手工具；
5. 在Photoshop中新建文件时，宽度一般为950px—1000px，高度尽量高一些左右，分辨率选择72dpi。
6. 最后可以裁剪掉页面的多余部分。
7. 有两个非常实用的快捷键要记住：
a. Alt+Shift+移动：在当前图层水平或垂直移动选区内容；
b. Ctrl+J：将选区内容复制到新图层。

学生提问：没有美术基础，能学会吗？

答：有没有美术基础不重要，重要的是是否有兴趣。
很多做网站成功的人士也都是半路出家。比如马云在做电商之前，是教英语的。
千万不要给自己设限。

学生提问：这样的话，学习网页效果图需要多长时间？

答：只要你有效、针对性地去学习，拼接几天就足够了。
学习效果的好坏取决于方法是否正确。

最后，插一句，我在这里分享一个拼接教程，希望大家能先了解整体设计过程，然后再逐步细化到局部。

文/郭朋涛
用最简单的话讲网站设计，加公众微信webdesign1，读我写的《网站设计宣言》。