上一篇
下一篇
10-05
08
Photoshop把PSD网站模板切图为XHTML+CSS的网页
作者:Java伴侣 日期:2010-05-08
之前我们用photoshop设计过一个blog网页界面---用PS设计清爽博客网站界面，这次将会将会用photoshop将网页设计稿制作成HTML页面
现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。
在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。
从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。（译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。）
接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。
一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。
下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。
为了导出侧边栏，主体区域现在暂时的使用垂直拉伸。
因为之前的设计，所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域，以便容纳更多的内容防止超出设计的部分，另一个是一个小的底部，底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。
这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。
下一步是薄的底部部分，这样侧边栏部分就完成鸟。
另一个导出的小的可自动伸缩部分的是导航栏的背景，它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景，这样看起来会更~和谐~~~~
文章部分在概念设计稿上是跟侧边栏有一样的边线效果，但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题，所以我们将会用纯粹的css代码来实现他的效果。
接下来就是使用了蓝色渐变的内容区（也就是放留言数继续阅读等的区域），这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。
小的评论气泡，箭头，rss标志和电子邮箱图标等，都随着logo一起单独的导出即可，最好使用png格式这样适应性更强——当然如果你确定放弃给ie6的用户使用或者浏览的话。
现在概念设定已经完整的被分成了独立的图片，五部分的框架被拆分成了13个图片文件。他们一共才95Kb，这么来看即使是拨号网络也能比较流畅的观看网页了。
一个html网页设置控制结构的布局是必须的，上面那段话你没必要自己写，随便查看一个网页的源文件都能找到。一个单独的css样式表是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。
我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，直到CSS3才更广泛的支持第二个div在这个图像之上。
网站名字用H1的标签来控制，他也是logo的基础，上部导航和rss /电子邮件订阅选项是作为无序列表。
接下来开始用CSS重新构建页面，清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器，内容和页脚的div也要使用适当的背景图片和风格设置。
继续写CSS样式表，接下来的一些元素用代码写出来慢慢加上，建立一个无序列表然后加上合适的图片和颜色。
到目前来讲就可以在浏览器里面看看啦～基本上的大型已经出来啦～logo啊导航啊内容区啊基本上已经颇具雏形鸟。
接下来是在这个框架上渐渐丰满起来，用一个容器来搞定文章发布区，就像我们前面说的一样，这个地方我们不用图片只需要用代码就能搞定。
文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好（实在不行就照抄吧，囧rz）。对于网站开发来讲，大部分用 firefox的朋友有福了，这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。（不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来）
然后在浏览器里面测试下啦～如果没写错的话那么就跟设计稿上的效果是一样的～这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。
然后继续完善html的结构，现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。
继续添加更多的CSS样式来控制html里面的元素（可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……）比如字体的大小，颜色，种类等等（其实CSS也就这么些个本事了……）
接下来就可以在浏览器里面看到侧边栏鸟～注意别让内容超过了图片的宽度，及时的截断下看看效果就好啦（毕竟只是html的～）
记下来我们快速的搞定继续阅读和评论等这个位置的东东
继续给这些元素添加样式，用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图
搞定后又可以用浏览器YY下，重复的背景上面是坚实的文本啊！
大体效果就这么搞定了，设计稿的内容基本上也都呈现出来了，这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。
其实网页设计这玩意搞起来了就停不下来了。你必须在FF，opera，safari下面看看有没有问题，你看这不在IE下面就出问题了么？（好讨厌IE6……如果机器装了更高版本的ie的话，你可以试试ietester）
修改一些CSS样式表很快就能搞定这个问题，具体的参见上图。
订阅的选项似乎总是在IE下面会有问题，这个只需要简单地加上 display: inline在列表中就能解决。
改完这些问题后这个正在做的网站就恢复正常勒，像一个wordpress主题鸟，当然想要更多的东西必须在加入更多的代码，比如内页区域和评论区域等～
当然如果每行代码都详细地解释得话，我估计我没写完各位看官就已经困倒了，所以发挥举一反三地精神就看上面得源文件吧！
现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。
在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。
从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。（译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。）
接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。
一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。
下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。
为了导出侧边栏，主体区域现在暂时的使用垂直拉伸。
因为之前的设计，所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域，以便容纳更多的内容防止超出设计的部分，另一个是一个小的底部，底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。
这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。
下一步是薄的底部部分，这样侧边栏部分就完成鸟。
另一个导出的小的可自动伸缩部分的是导航栏的背景，它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景，这样看起来会更~和谐~~~~
文章部分在概念设计稿上是跟侧边栏有一样的边线效果，但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题，所以我们将会用纯粹的css代码来实现他的效果。
接下来就是使用了蓝色渐变的内容区（也就是放留言数继续阅读等的区域），这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。
小的评论气泡，箭头，rss标志和电子邮箱图标等，都随着logo一起单独的导出即可，最好使用png格式这样适应性更强——当然如果你确定放弃给ie6的用户使用或者浏览的话。
现在概念设定已经完整的被分成了独立的图片，五部分的框架被拆分成了13个图片文件。他们一共才95Kb，这么来看即使是拨号网络也能比较流畅的观看网页了。
一个html网页设置控制结构的布局是必须的，上面那段话你没必要自己写，随便查看一个网页的源文件都能找到。一个单独的css样式表是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。
我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，直到CSS3才更广泛的支持第二个div在这个图像之上。
网站名字用H1的标签来控制，他也是logo的基础，上部导航和rss /电子邮件订阅选项是作为无序列表。
接下来开始用CSS重新构建页面，清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器，内容和页脚的div也要使用适当的背景图片和风格设置。
继续写CSS样式表，接下来的一些元素用代码写出来慢慢加上，建立一个无序列表然后加上合适的图片和颜色。
到目前来讲就可以在浏览器里面看看啦～基本上的大型已经出来啦～logo啊导航啊内容区啊基本上已经颇具雏形鸟。
接下来是在这个框架上渐渐丰满起来，用一个容器来搞定文章发布区，就像我们前面说的一样，这个地方我们不用图片只需要用代码就能搞定。
文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好（实在不行就照抄吧，囧rz）。对于网站开发来讲，大部分用 firefox的朋友有福了，这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。（不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来）
然后在浏览器里面测试下啦～如果没写错的话那么就跟设计稿上的效果是一样的～这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。
然后继续完善html的结构，现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。
继续添加更多的CSS样式来控制html里面的元素（可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……）比如字体的大小，颜色，种类等等（其实CSS也就这么些个本事了……）
接下来就可以在浏览器里面看到侧边栏鸟～注意别让内容超过了图片的宽度，及时的截断下看看效果就好啦（毕竟只是html的～）
记下来我们快速的搞定继续阅读和评论等这个位置的东东
继续给这些元素添加样式，用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图
搞定后又可以用浏览器YY下，重复的背景上面是坚实的文本啊！
大体效果就这么搞定了，设计稿的内容基本上也都呈现出来了，这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。
其实网页设计这玩意搞起来了就停不下来了。你必须在FF，opera，safari下面看看有没有问题，你看这不在IE下面就出问题了么？（好讨厌IE6……如果机器装了更高版本的ie的话，你可以试试ietester）
修改一些CSS样式表很快就能搞定这个问题，具体的参见上图。
订阅的选项似乎总是在IE下面会有问题，这个只需要简单地加上 display: inline在列表中就能解决。
改完这些问题后这个正在做的网站就恢复正常勒，像一个wordpress主题鸟，当然想要更多的东西必须在加入更多的代码，比如内页区域和评论区域等～
当然如果每行代码都详细地解释得话，我估计我没写完各位看官就已经困倒了，所以发挥举一反三地精神就看上面得源文件吧！
[本日志由 blurxx 于 2010-05-08 02:27 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Photoshop psd xhtml CSS 切图 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 398
发表评论
