WEB开发网
开发学院图形图像PhotoShop Photoshop把PSD网站模板切图为XHTML+CSS的网页 阅读

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

 2009-03-09 19:30:29 来源:WEB开发网   
核心提示: 这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果,下一步是薄的底部部分,Photoshop把PSD网站模板切图为XHTML+CSS的网页(3),这样侧边栏部分就完成鸟,另一个导出的小的可自动伸缩部分的是导航栏的背景,所以我们将会用纯粹的css代码来实现他的效果,接下来就是使用了

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

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

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

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

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

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

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

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

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

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

上一页  1 2 3 4 5 6 7  下一页

Tags:Photoshop PSD 网站

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接