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

因为之前的设计,所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域,以便容纳更多的内容防止超出设计的部分,另一个是一个小的底部,底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。

这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。

下一步是薄的底部部分,这样侧边栏部分就完成了。

另一个导出的小的可自动伸缩部分的是导航栏的背景,它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景,这样看起来会更~和谐~~~~

文章部分在概念设计稿上是跟侧边栏有一样的边线效果,但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题,所以我们将会用纯粹的css代码来实现他的效果。

接下来就是使用了蓝色渐变的内容区(也就是放留言数继续阅读等的区域),这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。

小的评论气泡,箭头,rss标志和电子邮箱图标等,都随着logo一起单独的导出即可,最好使用png格式这样适应性更强——当然如果你确定放弃给ie6的用户使用或者浏览的话。

文章共6页: [
1] [
2] [
3] [
4] [
5] [
6]
更多的如何把PSD文件制作成XHTML+CSS文件请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期:2009-4-23