Div css制作之美工图处理

    作者:课课家教育更新于: 2016-10-14 17:38:10

    Web开发

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

    Div css制作之美工图处理_Div css制作_web开发_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导出网页功能的依赖,用人工的方法来完成这一工作。希望小编以上整理的思维总结可以对大家有所帮助。

课课家教育

未登录