从事网页设计，需要学哪些软件？

小编：平面与网页设计两者之间有着太多的共性，共通的基础理论、常用的设计软件都大同小异。其最大的不同就是承载媒介的区别——一个是“印刷纸张”，一个是电子屏幕。所以对于网页设计需要学什么软件，其主要还是以Photoshop为主，包括UI也是一样。

本文源于@酷coo豆的知乎回答：想要从事网页设计，需要学习哪些软件？我大一，因为专业的问题需要自学？ 

一、平面设计与网页设计

自从@酷coo豆 由平面设计，转向了网页设计后。感觉到两者之间有着太多的共性，共同的基础理论、常用的设计软件都大同小异。其最大的不同就是承载媒介的区别——一个是“印刷纸张”，一个是电子屏幕。所以对于网页设计需要学什么软件，其主要还是以Photoshop为主，包括UI也是一样。

另外由于是电子屏幕上的设计，相对传统平面设计多了时间、空间两个维度的变量。时间上的延伸，可以推演出更多的交互，和动态效果；空间上：体现在其版面可以上下滚动或左右切换，不受固定尺寸的约束。但其本质还是平面设计！只是网页设计在交互方面可以发挥更多的创意；而平面设计则可以在印刷工艺、材质、印刷刀版上的变换，做出更多颇有创意，触手可及的互动效果来。

我在 《认识一下什么是平面设计？》一文中也分享了自己的观点：广告设计师、UI设计师、网页设计师、等设计岗位，则正是朝着各自不同领域专研细分的发展结果，而广义的平面设计则更像是对这些职位的一个更加笼统的称谓。

二、网页设计需要学什么软件？

以下则是上述问题是全部回答内容。 ↓↓↓

1. 必学Photoshop软件

既然是网页设计，那么 Photoshop自然是必须要学的咯。在写代码前，我时常用photoshop来完成网站内页效果图的制作。学习Photoshop不是最终目的，其更需要的是：要懂一些视觉层面、设计理论以及交互设计相关的知识，以避免一些常识性错误。

▼用PS完成的：网页设计标注图

2.掌握Dreamweaver软件

懂点HTML、CSS前段代码，并掌握 Dreamweaver（点击下载DW），是一个网页设计师的标配。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，重设计、轻代码所见即所得是初学的必备。因为网页设计稿完成后，它只是一张静态的图片，此时还需要你配合web前段工程师，在浏览器中重构设计稿，你的工作才算完成。

关于配合

虽然在实际工作中，写代码是由前段工程师负责，但掌握一些代码知识是必须的。你必须明白你设计出来的东西，哪些该用代码实现、那些该用图片实现，方便你更好地切图、以及图片资源输出以提高效率。相信在这样的情况下，你会和Web前段配合得很愉快的。

每天工作时，我的Partner（前段工程师）就坐在我的旁边，每天交流密切，感情甚好。还好我懂点代码，偷笑:-D。

精通以上两款软件，对于从事网页设计工作是足够了的。如果需要更好的提升、以及团队协作。可学习以下一些软件。

3. illustrator软件、CorelDRAW

处理矢量图形、提取一些素材、同事之间协作，可能会用得到。 CorelDRAW软件同理。

4.After effect软件

用于做一些网页所需的动画效果制作，可导出为mp4、swf等多种格式。可能也有人会想到用Flash，不过感觉用flash有些过时，没必再要学了。

以上就是 @酷coo豆 整理的有关“从事网页设计需要学什么软件？”问题的全部内容，最后感谢你的阅读。

——

三、拓展阅读

网页设计的核心技能是视觉、交互、代码，这是网页设计师自家技能的一亩三分田，值得我们在上面一直去下功夫的，其相关度由强到弱。

相关教程： 网页设计自学教程（来自BAT网页设计师的实力巨献） 

网站建设流程：

1. 解析需求——2. 交互设计——3. 视觉设计——4. 网页重构——5. 调试上线，其具体的内容，过几天我将在「平面设计学习日记网」详细地分享一下其制作流程。

实例说明：

▲浏览器测试 | 代码撰写 | PS输出的设计稿。

上图为 @酷coo豆 制作平面设计设计学习日记网（http://www.xxriji.cn/）的过程截图，像这种比较简单的网站就主要运用到Photoshop、Dreamweaver软件就可搞定。上图中编写代码用的是件sublime_text（用Dreamweaver也行，看个人习惯）。

（完）

——

版权声明

作者：@酷coo豆 ，公众号：followdesign；

原文地址： http://www.xxriji.cn/diary/117.html

主站：平面设计学习日记网（www.xxriji.cn）

本文为@酷coo豆原创，首发于知乎与平面设计学习日记网（xxriji.cn）。非商业转载请注明「作者」、「原文地址」，若需商业转载或用于培训转载请联@酷coo豆 获得授权。