Photoshop把PSD网站模板切图为XHTML+CSS的网页
来源:asp之家 时间:2010-04-05 21:46:00
之前我们用photoshop设计过一个blog网页界面---用PS设计清爽博客网站界面,这次将会将会用photoshop将网页设计稿制作成HTML页面.
现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码,这样我们就会得到一个完整的博客设计。
在上一个教程里面,我们创建了一个包含了所有框架,设计,色彩,拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css,哪些需要使用到原来的图片。
首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层,然后选择大的背景图导出为web使用格式。
从第一印象上来讲,这个大图片很容易让人觉得他很大,所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已,这里需要你来拿捏文件的质量和整体的体积的平衡。(译者注:图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点,一般来讲背景图不必使用特别清晰的底图,增加体积却又吸引眼球影响阅读。)
标签:切图,photoshop,PSD,模板,xhtml,css
0
投稿
猜你喜欢
入门:图文讲解Photoshop曲线的用法
2009-03-05 23:46:00
Photoshop 发光的蝙蝠标志
2009-02-25 05:33:00
Photoshop制作精美高光流线字
2009-06-16 13:40:00
Photoshop 打造漂亮的蓝色MM小天使
2009-10-27 17:35:00
Photoshop制作漂亮的蓝色音乐海报
2009-04-02 10:03:00
Photoshop巧妙的抠出透明的雨伞
2009-04-03 09:44:00
Photoshop 风景照片处理成水彩画效果
2009-03-02 00:33:00
放松:Photoshop CS3还是可以跑在雪豹上的
2009-08-30 10:04:00
Photoshop打造一座神秘的海上城堡
2010-12-06 21:03:00
Photoshop调出人物照片流行的艺术灰色调
2009-04-20 09:54:00
Photoshop设计制作汽车网站头部流程
2009-03-24 08:51:00
PS合成动感旋律的舞者
2009-02-23 08:55:00
Photoshop教程:美女真实照片转手绘效果
2009-03-20 10:30:00
Photoshop制作iPhone 4教程
2010-12-06 21:02:00
使用Photoshop+960 Grid System模板进行网页设计
2009-02-28 13:44:00
Photoshop调出浪漫的渔舟晚唱夜景
2010-03-14 09:51:00
PHOTOSHOP国外教程 可爱的发光字体设计
2010-03-14 13:47:00
透视入门教程
2009-06-04 09:47:00
Photoshop打造个性潮流音乐海报
2009-06-09 12:39:00
Photoshop邮票滤镜轻松给照片添加邮票边框
2009-03-16 08:48:00