本教程详细介绍了如何从PSD设计稿切片，并将其转换为HTML和CSS结构的网页。通过合理导出背景图、主体内容、页脚、侧边栏和导航等元素，实现网页的优化加载。利用CSS实现边框、背景颜色和圆角效果，确保在不同浏览器中的兼容性。
从PS里面将之前的设计稿从PS里面输出然后再加上编码，转换成div+css架构。既有利于web优化而且更符合web发展趋势及标准。
在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。
从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。(译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。)
接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。
一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。
下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。
为了导出侧边栏&#
最低0.47元/天 解锁文章
扫一扫
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
