切页面速成手册当设计把页面制作完成之后,剩下的工作就是由我们来切页面了。所谓切页面,实际上,是由把设计制作的 PSD 效果图切成若干张小图片和把这些小图片拼合在一起形成最终网页形式这两部分组合而成。简单的说, 切页面就好比是玩儿拼图, 我们把一幅画打散, 然后再把碎片按原样拼起来。页面只有被切过之后, 才能够被我们随心所欲的进行文字方面的编辑。许多人认为切页面很难,说自己不会切。其实,这个并不像想象中那么难, 也许只是因为大家拿到页面后感觉无从下手,所以才会认为它难。所以切页面的重点主要就在于对于页面结构的把握。下面就进入我们切页面的第一步——分析页面的整体构架。页面整体构架看到一个页面,首先要知道它是由哪几部分组成的。一般的页面都可以广泛的划分为由头部、中部和尾部组成。(如下图) 这样,我们至少可以把页面分为三个部分来处理,即头部、中部和尾部。下面我们对中间部分进行一下分析。页面的中间部分无非分为左中右、左中、中右几种形式。下面我们就最常见的结构来说明一下。上面这张图是典型的左中右结构,它把页面分为了三个部分。有人可能会说,这种页面结构和我切页面有什么关系? 下面我来说说页面结构的重要性: 我们在切页面的时候, 第一步要根据页面的结构来确定表格,如上图,这个地方可以先做出一个一行三列的表格,只有在确定了具体结构之后,再进行对各个部分的细节处理,如背景、表格边框、图片、文字等工作才会变得容易。(具体的表格制作、插入图片等我们将在后面介绍) 如果对于结构的分析不够全面和准确的话,很容对我们后期的工作易造成麻烦。比如图,如果把页面做成上下两行,现在看来不是不可以,但是如果左边的焦点快报再多出一行,则会出现页面撑开的现象。如果把表格确定成一行两列, 那么在延展性上面就会比上下两行要好得多。上面我们了解到页面的基本结构,那么在 photoshop 中,我们应该怎样确定页面结构呢?这就需要用上 photoshop 中的一个功能——辅助线。辅助线辅助线在我们切页面的时候,可以帮助我们确定页面结构,加大切片工具的易用性。调用辅助线的方法:首先在视图中把标尺调出来然后从标尺处点中鼠标向页面中拖。你会看到一条线,把它拖到你想要放的地方松开鼠标即可。一条辅助线就这么产生了。如下图当把辅助线都确定好之后,我们就要开始进行最关键的部分了——拿起刀子,准备开切! 切片工具其实,如果说起开始来切,反而到很容易了,实际就是把尺寸比较大的图片分成一小块一小块的,然后拼合起来。头部、尾部、和中间一些花边都可以切成小图。从下图处点选切片工具点中后,鼠标会编成相应的样子,在页面要切图的地方,把按住鼠标不放, 选择截取范围,选好合适位置后松开鼠标,一个切片就好了。重复上述动作,做完所有切片。等图片全部切完之后,点击文件中的存储为 web 格式在其中的保存对话框中选择 HTML 和图像。另外要注意一下左侧的图像品质,一般定在 30-50 即可。如果品质过高图片的质量会增大,但是在视觉效果上面不会有很明显的变化。保存后,会有一个文件夹(里面是切散的图片)和一个页面,这样,就把一个页面切散了。下面我们只要把切散的图片拼在一起就可以了。附:页面拼合常用代码基本标签创建一个 HTML 文档<html></html> 设置文档标题以及其他不在 WEB 网页上显示的信息<head></head> 文档标
切页面速成手册 来自淘豆网m.daumloan.com转载请标明出处.
