快速业务通道

PS把PSD网站模板切图为XHTML+CSS的网页

作者 佚名技术 来源 平面设计 浏览 发布时间 2012-06-09

之前我们用photoshop设计过一个blog网页界面---用PS设计清爽博客网站界面,这次将会将会用photoshop将网页设计稿制作成HTML页面

现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码,这样我们就会得到一个完整的博客设计。

PS把PSD网站模板切图为XHTML+CSS的网页_webjx

在上一个教程里面,我们创建了一个包含了所有框架,设计,色彩,拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css,哪些需要使用到原来的图片。

PS把PSD网站模板切图为XHTML+CSS的网页_webjx

PS把PSD网站模板切图为XHTML+CSS的网页_webjx

首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层,然后选择大的背景图导出为web使用格式。

从第一印象上来讲,这个大图片很容易让人觉得他很大,所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已,这里需要你来拿捏文件的质量和整体的体积的平衡。(译者注:图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点,一般来讲背景图不必使用特别清晰的底图,增加体积却又吸引眼球影响阅读。)

PS把PSD网站模板切图为XHTML+CSS的网页_webjx

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号