如何用AI来制作高大上的网页设计

多数用到PS，但AI也用，有事PS处理不了的，就用AI，软件不同，功能自然也不同，PS处理位图的，AI是矢量图形处理软件，当网页中出现像素特别小的logo标志时，一般会选择用AI来做。

PS是位图，AI是矢量图，位图与矢量图的区别和优缺点：

位图就是你看到普通图片那种，颜色信息丰富，但放大会模糊并且有马赛克块；

矢量图是可以无限放大都不会模糊和马赛克的；但好像颜色控制不好；经常会很鲜艳和单调

PS是最优秀的专业图像编辑软件，做出的图是位图。位图是点或像素方式来记录图像的，因此图像由许多小点组成。优点是色彩显示自然、柔和、逼真。缺点是图像在放大或缩小的转换过程中会产生失真，且随着图像精度提高或尺寸增大，所占用的磁盘空间也急剧增大。位图放大后图像会变得模糊。

而AI，或者CorelDraw、Freehand等是用于绘制矢量图形的软件，矢量图，是以数学方式来记录图形的，由软件制作而成。优点是信息存储量小，与分辨率完全独立，在图形的尺寸放大或缩小过程中图形的质量不会受到丝毫影响。缺点是用数学方程式来描述图形，运算比较复杂，且所制作出的图形色彩显得比较单调，图形看上去比较生硬，不够柔和逼真。

在图形的复杂程度不大的情况下，矢量图具有文件短小，可无级缩放等优点。

接下来，现在对比PS和AI两软件，看一下它们的应用吧。

Photoshop是非常优秀的专业图像处理软件，一直占据着图像处理软件的领袖地位，是平面设计、建筑装修设计、摄影后期、三维动画制作及网页设计等的必用软件。其惊人的功能也引起广大业余图像处理爱好者的强烈兴趣。

Illustrator作为全球最著名的图形软件，以其强大的功能和体贴的界面已经占据了便于矢量编辑软件中的大部分份额。据不完全统计，全球有67％的设计师在使用Illustrator进行艺术设计。无论你是线稿的设计者和专业插画家、生产多媒体图像的艺术家，还是互联网页在线内容的制作者，都可以用到Illustrator。但并不局限于用它进行广告作品、报纸插图、海报宣传画等侧重矢量图效果的表现。它的位图处理功能依然强大。

哪个更适合做网页完全取决于你对哪个软件的熟练度更高，就现在的市场份额来看，用photoshop做网页的很多，AI现在主要适合做图标，UI设计。

AI做的网页的尺寸是：宽度不超过1280px； 高度根据网页高度自定义。

网页界面设计可以使用：Adobe Illustrator 或是Adobe Photoshop网页代码与CSS样式表可以使用：Adobe DreamWeaverAdobe系列软件的兼容性比较强的。所以推荐你使用AI。的目前应用在平面广告比较广泛。如果有兴趣可以学学的。 追问： ps做页面，但是字体效果感觉很淡，所以就想学个做矢量图片的软件，就不知道学哪个比较好。 回答： 如果只是单单的做个网页的话就不用去学AI了。如果你是美工的话到可以学习的。其实在PS里字体效果跟最后网页完成的实际字体效果是有出入的。 追问： 美工学哪几个 就可以不掉饭碗了。 回答： 美工的话PS是必须会的。DreamWeaver 也是要会的。因为要写框架或是写源码的。AI跟CDR两个矢量软件也是要用得到的。 追问： 就会ps 和dreamweaver 能胜任美工吗？ 回答： 能的。但是AI还是会在美工作业时要用到的。至少你要懂AI的基本操作。

pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。

px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

字号：是中文字库中特有的一种单位，以中文代号表示特定的磅值pt，便于记忆、表述。

pt和px的换算公式可以根据pt的定义得出:

你设计网页，用 px就可以了，但一般习惯上字体大小还是用pt

在制作用于网页设计的图片时，将1个完全的网页切割许多小片，以便上传。是将我们设计的网页设计稿切成1片1片的，或1个表格1个表格的，这样我们可以对每张进行单独的优化，以便于网络上的下载。可以做成网格的，然后可以用dreamwaver来进行细致的处理。利用切片工具可以快速的进行网页的制作。使用快捷键：shift+K用法和PS1样，只不过是路径

UI设计常用软件中，PS和AI的地位举足轻重。于是常看到设计群里，一些新手问经常在问：做APP

UI或是网页设计到底用Photoshop还是AI(Adobe

illustrator)好?AI和PS的区别如下：

1、出生时间

首先看看这2个巨头软件的诞生时间:

illustrator:

1987年

Photoshop:

1990年

2、第一版本的启动界面

双方都是粗糙的单色像素图像设计

3、最多用在那个方面?

illustrator:

矢量图形设计

Photoshop:像素图像设计

4、什么用户使用最多?

illustrator:

设计师

Photoshop:

艺术家

5、放大之后

illustrator:

放大后，图像依然清晰

Photoshop:

放大后，图像会被模糊

注：也就是说，用AI绘制的图形是可以放大而不失真，而PS就不可以，因为PS绘制的图形都是以像素点来画，除非直接使用矢量工具来绘制。

6、画板

illustrator:

可同时新建多个画布工作

Photoshop:

只能新建一个画布

7、剪贴蒙版

illustrator:

在对象上面

Photoshop:

在对象下面

8、选择工具

illustrator:

选择的是对象

Photoshop:

选择的是区域

9、图层

illustrator:

一个图层可以包含多个对象

Photoshop:

一个图层只能包含一个对象

10、Ctrl

+

Z

(撤销)

illustrator:

可以多次连续的撤销

Photoshop:

只能撤销一次，要按Ctrl+Shfi+Z才能继续撤销操作

注：其实PS是特意这样设计撤销的，如果你想像AI一样，可以直接修改快捷键即可。

11、工作区域

illustrrator:

可以在画布以外的区域继续绘制

Photoshop:

只能在画面以内的区域绘制，超出会被隐藏

12、保存时间

illustrator:

保存快

Photoshop:

保存缓慢

总结：

这是比较清晰的对比，重点是：

AI适合用来绘制矢量图，比如手机APP、网页设计的布局排版、按钮、图标等矢量元素。PS适合用来做平面广告、插画或后期处理等。

首先你要明确一个问题：

网页设计其实包含很多设计：代码设计/布局设计/艺术设计

代码设计：

代码设计的意义是如何使整个网站的功能性和网站的效率达到更好，这样需要扎实的网页设计基本功，HTML/CSS/DIV/JS 涉及软件DW NOTEPAD++

布局设计：如何布局整个页面，让用户使用起来更加方便和快捷。这个要求不少的经验。

艺术设计：

艺术设计的意义如何提升用户的体验，让整个页面看起来更加赏心悦目。涉及的软件有PS/AI等。

那从代码设计到布局设计到艺术设计是一步步靠近用户的，因为本身网页设计就属于前端设计，它的功能就是和用户起到一个交互的作用。

首先明确一个概念，PS做的是位图，AI做的是矢量图。

所以我们在做网页布局设计的使用一般是用AI。但是如果做网页风格和图片的设计的时候我们一般选择PS，因为两个软件出于同一家Adobe 公司，所以兼容性也没的说。