PS把PSD网站模板切图为XHTML+CSS的网页
2009年03月20日 作者:网页教学网 责任编辑:zengxiaolan
文章导读:现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码,这样我们就会得到一个完整的博客设计。
我们先来看看效果图:

效果图

图1
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层,然后选择大的背景图导出为web使用格式。
从第一印象上来讲,这个大图片很容易让人觉得他很大,所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已,这里需要你来拿捏文件的质量和整体的体积的平衡。(译者注:图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点,一般来讲背景图不必使用特别清晰的底图,增加体积却又吸引眼球影响阅读。)
图2
接下来导出的是主体内容区,画出另一个大的选区,其重要包括整个中部面板--当然别忘记那些带有效果的地方比如阴影,半透明的边框等,都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域,所以选取应该直接延伸到顶部。

图3
一般来讲允许网页垂直重复的话,只要选择中部区域一小列内容导出就可以,我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。

图4
相关快问问题
频道精选
- 粽子飘香!Illustrator打造端午节海报05-26
- Photoshop制作网站Logo中实用文字效果05-26
- Windows 7新徽标Logo设计曝光05-22
- 环保行动!绿色自然设计矢量素材推荐05-23
- Photoshop CS4打造屈原国画效果05-25
论坛热帖
热门软件下载推荐
本周十大热评文章
十大人气文章
- 气氛肃杀!《哈利波特6》最新主海报曝光05-26
- Photoshop CS4绘制粽子端午节主题海报05-25
- Photoshop制作网站Logo中实用文字效果05-26
- Photoshop CS4打造爱国诗人屈原国画05-25
- 提高工作效率!Photoshop CS4动作入门05-25
- 粽子飘香!Illustrator打造端午节海报05-26
- AutoCAD二维教程:机械零件轴测图的画法05-26
- 吃粽子忆屈原!PS与AI作端午节主题海报05-27
- 用Illustrator CS2打造儿童节主题海报05-27
- 巧用美图秀秀 打造非主流花葬凄美图片05-27
软件今日报价







