ps cc 生成html,使用photoshop生成网页的方法

本文介绍了如何使用Photoshop CS6设计网页,并通过切片工具进行区域划分,然后利用Dreamweaver CC进行网页的进一步修改和添加链接。详细步骤包括打开设计图、切片、保存为Web格式、调整图像质量以及在Dreamweaver中编辑网页。
摘要由CSDN通过智能技术生成

很多人在设计网页时选择photoshop,而不是dreamweaver,因为ps它的图像处理技术更加强大。在ps中设计好网页后,需要将它生成网页,一般情况下,还需要使用dreamweaver来进行网页的修改。

软件名称:Photoshop CS6(PS CS6中文精简版) 西门探花作品 64位软件大小:166MB更新时间:2012-12-22立即下载

软件名称:Adobe Dreamweaver CC 简体中文正式版软件大小:332MB更新时间:2014-01-22立即下载

方法:

1、在这里,我借用百度经验的主页来给大家演一下(嘻嘻)。打开photoshop,打开设计好的图片。

d3a159bb21918560cf6336c7aecc3b52.png

2、一般来说,我们需要使用切片工具将它分为几个区域。一方面网页不至于过大而难以加载,另一方面也方便在dreamweaver中按区域来修改。

23b6dbc2f8722807cbaa993c171d41bb.png

3、将图片、文字等按照自己的设计需求来分割。在这里我就粗略的切一下。切完后也可以及时修改区域的大小。

0ed52528af5f3d8dd76d7c6ed2b24c05.png

4、我们选择文件,存储为web格式。

c8df1bf3db5995eb2124991a206518b3.png

5、这时会跳出来一个窗口,你可以在其中在此简单修改每个区域的画质等。不需要的话则直接点储存。

6、比如,其中的百度经验图标需要高像素,我们就选择该切片,在右侧的属性中修改。

d2068ef9ce1610fe568a8908f4124a01.png

7、不需要画质高的图片,也可以修改,这样可以方便加载出来。

ca4a45bf06bbf326d4585a8345a90411.png

8、储存时一定需要注意,要选择“html和图像”。它弹出的警告不需要理会,直接点确定就可以。一般来说,主页是index。

516e2c22e10efdcce89c6050e3a8f01b.png

9、储存完好,网页便生成了,同时还有包含有其中切片的文件夹。

2a870efb2bd317b2b94eec716ea5c7cb.png

10、这时的网页也只是图片,用dreamweaver打开,修改,可以加上链接、地图等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值