|
对于网页制作者来说，学习网页切图，也许是从事这一行业，干好这一职业的必修课程之一。但需要指出的是，千万不要只紧抱这一根稻草，因为这只是网页制作中进行网页布局的最基本和最初级的方法之一。 众所周知，目前几乎所有图文设计和排版软件都可以形成最终的html文件，也都是进行网页布局的选项之一，这其中不乏有word、frontpage、网页三剑客（Dreamweaver、Fireworks和Flash），以及各种国际通用的图文处理和设计软件，如PS、AI、Indesign、coreldraw、freehand等。当然，不可否认，应用最广泛的当属网页三剑客三大软件。 不过，任何行业都有三教九流之分，专业与非专业（爱好者）之别，凡事不能一概而论。正因为如此，我个人的观点是，不强求每个人都能做到“门门通"的境界，能达到"一门精"的高度也不错，但必须了解或懂得各应用软件彼此之间的相互联系和相互转化这一特性。就拿切图来说吧，很多人并不知道其全部。如AI和PS之间就有非常强的互通性和相互转化的特性，在切图上更不例外。 baidu网络界，的确可以轻而易举地搜索用PS切图的各种视频和文字教程，但很难搜索到有用AI来切图的一丝帮助。用小沈阳的话来说，“这是为什么呢？”你自己捉摸去吧。 为了弥补这一遗憾，本人冒天下之大不韪把自己撰写的《AI切图教程：AI也可以切图》一文上传至QQ空间，与大家分享，望大家多多赐教和评论。 应用软件工具：Adobe Illustrator CS4。追求的目标是，得到一个网页的初步布局架构，得到一段<table>....</table>代码。 1、我们打开AI软件，再打开用AI或PS等其他软件设计好的待切网页设计稿文件。然后根据打开的设计稿文件的布局、底色和用图，进行切图之前的腹中分析、规划，如面对设计稿我们到底该怎么切才效果最好，最快，且切得又最精准，哪些元素必须用切图的方法来获得，哪些元素不是必须的；为了切图方便，哪些文字必须暂时被隐藏或去掉，以便于日后在此处替代上网上动态文字和链接，等等。下边是我准备好一张用AI设计好的待切某网站首页（注，这是个AI源文件）。  2、我们要用到的切图工具位于AI工具栏中下部，与PS一样也有有两个，即一个是切片工具，另一个是切片选择工具。左边有个小按钮，你按住它这两个工具选项就会显露出来。  3、对照上图，网页底色如为纯色，我们可以不考虑切片，因为在制作网页可以在CSS中采用定义一个class颜色值的方式来进行填充，如是有规则的渐变，可根据渐变的方向不同采用切一个PX大小的图片，供在网页制作中进行横向或纵向平铺填充之用；  4、接下来就是对整个LOGO和右下角广告图片的大切片。如箭头所指的地方。  5、最后，就是对文字区域的切图。  6、为了切得准，切得的大小区域适当，力求与设计稿完全一致，还可以进行如下微调操作。一是按ctr+R待标尺出来后向下向右拉参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置，这一点与PS切图完全一样。二是可对被选择切片区域的长宽尺寸，通过改变数值来调整。  7、待切片区域确定好后，接下来就是对各区域的保存了。不过，需要重点提醒的是，在保存之前，必须将不希望以图片呈现的文字隐藏或暂时删除。  8、切好图之后就到最重要的步骤了，如下图所示，选择文件下面的存储为WEB和设备所用格式，最好能记住快捷键。  9、切片的存储格式有：jpg、gif和png格式的各种不同品质展现形式，如格式设定为JPEG，它就是JPG，gif的就是gif的。  10、如同PS切图最后的存储一样，关键是品质的设定，我们都知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品质设的越低，它的大小就越小，但是如果品质太差，图片会变模糊，所以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求，试试就知道了。同样，这里也有个需要注意的地方，问题是你只是对其中一个切片设置品质，其他切片又要重新设置，所以存的时候最好检查一下。  11、一切设置好后，点击存储会显示以上界面。格式选项选择HTML和图像，默认是图像的，这样我们就能得到网页代码了。这里需要指出的是，切片存储时，可以存储全部的，也可以只储指定的，随用途所欲。  12、存好后，便可得到一个图片文件夹和一个html网页文件。可能你在你电脑上看到的文件图标跟我这个不一样，这个没有关系，这主要是因为我们所选用的默认浏览器可能不一样。 13、图像文件夹中存储的即是我们所切的切片图文件,在做网页的过程中，还得将这些文件上传至网络空间才能显现完整网页,别人才会看的到。 14、用DreamWeaver、frontpage、text文本软件都可以打开这个html文件，并可看到如下界面。至此，我们急需要得到<table>....</table>已经呈现在了我们眼前。如大红框中标识的即是。最终形成实际网页时，还得替换所有图片的存储地址，或给相关图片添加上相关链接地址才能完整呈现。 15、如用IE浏览器打开这个html文件，我们之前的这个AI设计稿，就以网页的形式呈现出来了。这里需要强调的是，切图得来的html文件，只是网页制作的最最基本的一点点工作而已，能省用多少时间和工作量呢，只能是仁者见仁，智者见智，不好说。 16、写到这里，我切身感受到AI切图与PS切图大致相同，方式方法、工作量、难易程度、注意事项等等，基本一致。按常理说，你会PS切图，就一定会用AI切图。但如果你对AI软件如何应用毫无所知，可能的确会有一定的难度。但愿该篇日志能对您有所帮助。 17，另外，请关注我的下一篇日志：《AI同样可以还您一个不折不扣的带层PSD文件》，您想知道吗？欢迎来踩！ |
|
|
