您的位置:首页 > CSS PS切图教程 > 【 返回上一页

CSS制作之PS对源网页美工图片分析

DIV CSS切图前对网页美工图片必要分析

接下来我们来讲解切图前对网页美工图进行分析的必要性。

平时div+css网页开发者拿到一个需要切图开发重构的网页美工图的时候,都不是直接到软件中切图的,而是需要对这个网页美工图进行分析,分析要点如下:
1、分析网页结构是怎么样的
2、分析不需要切出来的图片有哪些
3、分析切图前需要隐藏的文字内容
4、分析怎么切图可以有利于架构网页(与第一点有雷同)
5、分析怎么切图可以减少图片大小(字节,图片文件大小)
6、考虑到有利于seo
7、分析切图重复性,如有些背景图片需要重复即可,那就只需要切一块即可,无需整图切下来
8、分析网页特效部分,准备解决特效制作方法方案。

下面我们通过一个简单实例讲解让大家掌握以上知识。

讲解实例截图:CSS分析图
CSS分析图截图

CSS讲解内容:
1、制作网页前分析美工图片结构
通过以上网页图片观看,我们可以从上到下,从外到内分析得到,网页是上中下结构,上是顶部头部、中是内容、下是底部版权,中间内容区是左右结构。

CSS制作分析效果截图
分析效果截图

根据以上画图我们即可得出A是上B是中C是下,而B又包括了D和E左右两部部分。

2、分析不需要切出来的图片有哪些
根据分析以上图片除了A区头部背景可以切出来,其它可以不用PS切成小图片作素材。

CSS切出图片素材
切出图片素材

可将这个作为背景,当然切的时候宽度可以小一点,切成2-5像素即可

3、分析切图前需要隐藏的文字内容
当然这里这张要制作的图片根本不复杂,也没有挡住需要切图的背景,所以没必要隐藏挡住背景图片的文字或内容

4、考虑到有利于seo

可以将A区的

图片的文字当成网站LOGO可以用h1标签来制作网页,也是考虑到SEO角度。其它可以不用考虑。

最后开始介绍分析一个网页美工的几点,在这里没有涉及到所以就不用讲,当然平时制作的时候需要你掌握及运用,关键是在制作和开发DIV+CSS网页的时候做到心中有数,而心中有数就需要你对无论多复杂或多简单的网页进行分析与理解解读。

大家下来可以找一个简单的网页进行分析不明白的可以进讨论区进行讨论。

相关标签: 网页分析
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css-ps/831.shtml

日期:2016-04-18 21:04:02 来源:www.thinkcss.com 作者:ThinkCSS

热门点击