网页设计师入行必备，新手如何掌握网页设计师基本功

现在有一些平面设计师想转行做网页设计师，但是网页设计师和平面设计师是完全不同的行业思维，作为网页设计师我们应该怎么去学习基本功？下面品索教育小编就来教你一些新手必备的技能知识点吧，希望大家能够运用在实践中。

Photoshop

基本中的基本，只要是任何单位是「PX」、给屏幕用的图稿我都建议用 Photoshop 制作，Illustrator 是印刷用软件，对 PX 支持度很差。

Grid

现在新开发的网页通常会要求制作 Responsive ，为了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的观念，《Guideguide下载及使用说明》能帮助你在 PS 里快速建立参考线。

切图

当你会写 Html、搞懂 Div、Css 后，你就知道怎么切图了（无误），不会写 Code 的视觉设计师切出来的图常常被退货也只是刚好…做个蛋糕需要糖和巧克力粉、材料供应却老给他盐和胡椒粉，是想逼写 Html 的人从种甘蔗和可可树开始吗？

Illustrator

既然都是平面设计师想转型，这套一定用的非常熟悉，可惜我对这套的定义就是「送印刷厂」用。在我的制图过程中，所有能用向量绘制的部份我都会用向量。PS 的向量工具不太好操作，遇到比较复杂的图型我会在 AI 里画好、贴进 PS 为形状图层，再来调整图层样式。所以 AI 只会用到画向量的功能，其他全进 PS 处理。

HTML

推荐：HTML5

不会切图、不会手写 Code 的不要说自己是网页设计师，做网页只靠 Dreamweaver？和蒸饭箱蒸出来的便当感觉差不多，勉强能入口但很难吃。有的 RD 会接受用 Dreamweaver 之类可视化软件产生的 Code，这要看和设计师配合的 RD 接受度到哪里。通常平面想转网页设计很大部份是薪水可以喊比较高，如果想拿更高的薪水就不要依赖 DW ，老老实实的练英打吧。

CSS

推荐：CSS current work & how to participate

margin、padding 是初学者最容易搞混的两个值；Float 很常用但不小心就破版；熟悉 Background 可以玩出很多花样…等等。在 CSS 细节部份就可以偷懒一点用现成的了，虽然产出的 Code 比较丑不优雅，但 RD 比较少去动到这一块，所以还可以接受。我自己常用的偷懒工具如下：

圆角框：CSS Border Radius Generator

阴影：Box Shadow CSS Generator

按钮：Buttons – A button library built with Sass and Compass

可以看 browser 对 html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc

Responsive

先把 Html 和 Css 练熟了再来看 Responsive 这个大难题。要做好一个 RWD 从 Wireframe 就要规划好。在 Wireframe 阶段我习惯先设计 Desktop 版本，功能最多最完善。但在写 Code 的时候会是反过来、先从 Mobile 的尺寸开始刻。刚接触 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了觉得不够用绑手绑脚的时候，差不多该踏进 Sass、Compass、Susy 的领域。

以上便是网页设计师入行必备了，写的非常粗浅，只能算是给个方向让初学者知道要怎么学习。如果能把上述 5 项都练起来，就能自己接案赚外快了。只要和程序无关的静态网页都难不倒你。网络上有些套装的特效包可以拿来改一改套用，看起来也很炫。