投递文章投递文章 投稿指南 RSS订阅RSS订阅

用PhotoShop将PSD网站模板制作成XHTML+CSS网页

来源:译言 发布时间:2009-03-13 收藏 投稿 字体:【
本教程教你如何用photoshop将网页设计稿制作成HTML+CSS的网页

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

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

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

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

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

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

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

接下来导出的是主体内容区,画出另一个大的选区,其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影,半透明的边框等,都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域,所以选取应该直接延伸到顶部。

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

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

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

下面来完成页脚部分,选择同样的宽度,然后高度要包含灰色渐变的图形。

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

为了导出侧边栏,主体区域现在暂时的使用垂直拉伸。

PhotoShop将PSD网站模板切为XHTML+CSS网页_ittang

顶一下
(2)
66.7%
踩一下
(1)
33.3%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见