返回列表

WEB UI 切图经验/切图心得/切图技巧分享

默认分类 2012-05-22 03:34:34

WEB UI 切图经验分享:

1.维度 HTML在渲染页面时除了XY方向上的布局还有一个很重要的是Z轴z-index方向的布局,因此我们切图时不仅要考虑如何在平面布局, 更要考虑如何在Z轴上布局,非常关键的一点是需要找到各个页面元素在Z轴上的分布,然后将各个层抽取出来,然后分层实现平面布局。

2.平面布局 平面布局时,有一点像切蛋糕,找出一条分割相对明显的分割带,然后切下去,一般一个不错的设计师,正如恺华所讲的那样,一定会遵参考线进行设计, 我们要做的是沿基准线切分就可以了。

3.关于CSS 提取完成主要元素之后,尽量使用CSS实现其他效果,一个很棒的设计师完全能做到所有效果不用图片全用CSS就能实现,因此我们应该尽可能用CSS实现所有的效果, CSS实现不了再选择图片或其它方式,如滤镜及JS。

4.实现方式 掌握尽可能多的实现方式,然后根据情况选用即可。 两个小技巧: a.position不设置left,top时定位和relative相同,可以使用margin调整其位置,熟练掌握此技巧可以轻松做到页面结构解耦; b.z-index可以为负,在处理不规则横向不规则背景时,及其有效。

5.不同精度放置在同一张图片 保留高精度的颜色表,然后另存合并后的图片时,调用高精度的颜色表,即可实现不同精度图片放在同一张图片中。

王海洋 2012.05.22