2.6 了解出血和滚动条
版式设计最常用在平面设计和网页设计中,在平面设计中通常会为设计稿设置出血值,以保证良好的印刷效果。在网页设计中,如果页面高度超出了屏幕的显示高度,则会自动出现滚动条以方便用户浏览,所以在设计网页的版式时,也要充分考虑滚动条对页面版式的影响。
出血线与出血
出血线是用来界定图片或色块的哪些部分需要被裁切掉的线。(出血线以外的部分会在印刷品装订前被裁切掉,所以也叫裁切线。)出血就是出血线以外的图片或色块,也就是会被裁切掉的部分,如图2-49所示。
图 2-49
出血的设置可以很好地避免由于裁剪不当造成图片偏小而漏出页面的底色,影响版式的效果。如图2-50所示分别为未设置出血和设置了出血的版式。
图 2-50
文件的出血值一般设置为3mm,也就是图片的四边多留出3mm。出血线的粗细为0.1mm,长度按实际需要而定。一般设置为10mm,如图2-51所示。
图 2-51
应用出血除了可以保证正确的印刷输出外,在实现一些特殊的版式设计上也能起到意想不到的作用。例如当希望某些图片更加引人注意的时候,可以对图片进行出血处理,通过将图片放大到超过页面大小的尺寸,使整个页面效果显得更加宽阔,如图2-52所示。
图 2-52
滚动条
网页设计中版式的应用其实与平面设计是一致的。但是由于网页中要显示的内容过多,所以在设计和制作网页时要充分考虑页面中纵向的滚动条。正常页面和浏览器页面效果如图2-53所示。
图 2-53
众所周知,标准网页设计一般不能出现横向滚动条,这是由网页美观,易用性等多方面决定的。而现在主流设计还都是针对800×600分辨率设计的。在这可怜的800像素里,设计师既要考虑到最大限度地表现出文字与图片,还要为了美观来美化页面元素、增加质感和效果。所以网页设计中对每一个像素都要认真对待。
Windows操作系统下,IE9的滚动条宽度为17像素,活动窗口边框宽为6像素,但是Windows为了增加效果,会再有1像素宽的阴影,所以一共是2像素,如图2-54所示。
图 2-54
根据以上计算方法可以得出,右侧窗口边框6像素+滚动条17像素+阴影1像素=24像素,再加上左侧窗口边框和阴影一共是31像素,如图2-55所示。
图 2-55
具体设计时,一般为了考虑内容居中和方便计算,大多采用双数,所以对于浏览器宽度为800像素的设计稿769像素是最佳尺寸。知道这个原理,1024或1280的也都可以轻松算出来了。
1、在IE6.0浏览器下,宽度为显示器分辨率减21,比如1024的宽度减去21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox浏览器下,宽度的分率辨减19。比如1024的宽度减去19就变成1005
3、在Opear浏览器下,宽度的分率辨减23。比如1024的宽度减去23就变成1001
Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。所以如果是1024的分辨率,最好将网页的宽度设置成990像素。如果是800的分辨率一般都设成770像素。
以上所讲需要明白并且牢记,不然很可能做出来的东西在不符合浏览器要求的同时,也会影响整个页面的版式。而且在实际的网页设计工作中,可以将页面尺寸设定的再稍微小一点,因为有些浏览器加了插件或者其他的东西宽度会有变化,所以800的分辨率一般设定在760左右;1024的设定在990左右。