Div css制作之美工图处理

       在网页制作之前，我们通常预先设计出网页的大致效果，画出美工图，但画美工图和编写页面代码的可能不是同一个人，对于Div css制作人员而言，对美工图进行相关处理是一个必不可少的步骤。那么，我们应该怎样处理美工图呢？下面小编就为大家介绍一下。

　　一、对美工图进行分析

　　首先，小编想问一下大家，当你拿到网页美工图时，第一件事是做些什么?是不是切图呢?小编觉得这种做法是错误的，在切图之前我们有更为重要的一步就是分析美工图，主要可从以下两方面进行分析：

　　1、网页结构分析

　　为了方便我们架构网页框架，我们可以从上到下，从外到内进行分析。此时，我们无需画出相关情况，直接在心里默默分析即可。

　　2、图片素材分析

　　分析完结构后，接下来我们要分析图片类型。即哪些是内容图片，哪些是背景素材。

　　注意：以上分析均不需要动手画，只要做到心中有数即可。当然，如果你想画出来，小编也不反对。

　　二、切图

　　对美工图进行相关分析之后，我们就需要使用软件切出所需要的图片内容和图片素材了。

       切图时，我们应注意以下两方面：

　　1.图片不需要整切，应尽量切小，方便平铺使用。

　　2.与周围联系，技巧性切取。

　　三、图片导出

　　切好图片后，就是导出图片素材。

　　导出图片有2种情况：

　　第一种：切好一处导出一次。

　　第二种：切好多处一次性导出。

　　文件导出时，我们需要保存图片格式，常见的3种格式是gif、jpg和png。

　　一般情况下，我们通常使用gif。但如果图片色彩比较绚丽丰富，gif格式图片就不是那么清楚漂亮，这个时候应当选择jpg或png格式图片。

　　如果我们需要使用jpg，应注意在导出图片时候要根据实际需求选择高或非常高的质量。

　　当需要导出半透明或阴影图片时，我们通常使用png，注意导出时候应选择png-24格式质量。

　　其实photoshop本身就支持导出网页，但很可惜的是至今都只能导出为表格，而表格所特有的一些布局在Div css中并不容易实现。所以，想要根据美工图完成Div css布局，我们需要摆脱对Photoshop导出网页功能的依赖，用人工的方法来完成这一工作。希望小编以上整理的思维总结可以对大家有所帮助。