ai网页设计制作教程

利用ai制作一个简单的网页界面很多的人不会，本教程制作出来的网页界面比较简洁，很适合新手来学习，今天小编主要给大家分享ai制作教程，希望对你们有帮助!



1.
首先，使用ill来设计网页的总体布局。

2.
然后选择几个按钮，执行object/slice/make命令，立即出现所需的切片。这种切片可以根据对象的大小自动调整，对于网页的设计非常方便。

3.web下面的文字，因为字体很小，直接输出图像可能不容易看得清楚，所以我们先用工具箱切片工具手动设置一个切片范围，这个切片中的内容之后可以在Dreamweaver或golive中进一步编辑，最后加工成文字可能效果更佳。

4.
使用切片选择工具调整切片的大小。

5.
然后选择file/save
for
web命令，打开下面的面板。通过
切片选择工具
，可以选择不同的切片对他们进行不同的优化。首先，根据切片图像的特点，确定优化模式是GIF、jpeg还是PNG格式。然后为各种图像格式选择合适的优化参数。在图像大小面板中，可以确定页面输出的大小。

6.
单击面板右下角的ie图标，预览要输出的web页面。当一切就绪后，点击
保存
按钮，从弹出的对话框中选择
html
and
image
。

7.
回到illustrator继续进行编辑。要实现
滚动效果
，再次选择几个按钮并更改按钮的颜色。

8.
然后选择file/save
for
web命令。不要忘记将图像的大小调整到与第一次相同的大小。

9.
优化之后，单击save
for
output输出，更改文件的名称，否则它将覆盖输出的图像。例如，当第一次将文件命名为index，第二次将其命名为indexover。然后在保存类型中选择
image
only
，在最后选项中选择
selected
slice
输出。

10.
最终输出。

教程结束，以上就是AI做的一个简单的web界面教程，希望大家喜欢!

以上是整理的ai网页设计制作教程全部内容。