PS做网页切片的方法

  • A+
所属分类:Photoshop笔记

切图的好处,第一,是要控制单张图片的大小。把大图片切割成几个小图片,有利于浏览者尽快看到你的网页。第二,为了使排版不受到网页制作软件的限制。
我们先用PS做好以下图片(这个你爱怎么做就怎么做啦,在PS里没有排版的限制,不用考虑太多的)
PS做网页切片的方法

【图8.1】
图片做好了,我们开始切图,使用PS中的切割工具:

PS做网页切片的方法
【图8.2】
对于画面的切割,总体的原则是要保证每个切片控制在一定大小内(一般10K以内)。注意我上面切割的图,标号(1)的区域是菜单,标号(2)的区域是打算放内框架的部分。在下面的部分里,我们将学到这两个区域的用途。
切好图片之后,我们通过菜单的“文件”-“存储为web所用格式”,打开“存储为web所用格式”窗口。
PS做网页切片的方法
【图8.3】
PS做网页切片的方法
JPG格式一般适用于颜色较多,尤其是有渐变色的图片,一般品质为60就可以。GIF格式适用于颜色较少的图片,颜色可以选择128、64、32、16等。
选择切片格式和品质的原则,就是在浏览器中看起来和压缩前变化不大。点击【图8.6】中的小三角,选择弹出菜单中的“编辑输出设置”。弹出【图8.7】的输出设置窗口。

PS做网页切片的方法
【图8.6】

PS做网页切片的方法
【图8.7】

在【图8.7】中,其他的设置都不用管。点击“下一个”,切换到【图8.7】的页面, 注意这里的“将图像放进文件夹”。这个选项的意思就是,如果你把图片的html文件保存为example.html,那么切掉的小图片就保存在于example.html同目录的images文件夹中。大家试试看就知道了。
最后,点击【图8.3】中的“存储”,就跳出保存文件的窗口了。我们现在把文命名为example.html,存放在合适的位置。

好,现在关闭PS,打开DW。打开刚才保存的example.html文件。我们可以看到,其实这个图片是被保存在表格中的。现在我们需要重新回顾【图8.2】中的两个切割区域了。
区域(1),这个是菜单,是要在各个菜单选项上做上链接的。选择区域(1)的图片,在属性框里,我们选择“热点切割”工具,在图片上划出热点链接区域。见【图8.9】。

PS做网页切片的方法

【图8.8】

PS做网页切片的方法

【图8.9】

【图8.9】就是区域(1)被热点切割后在DW中显示的样子。选择蓝色的热点,就可以在属性中定义超级链接、替换文本等。

PS做网页切片的方法
【图8.10】
然后我们看区域(2),我们注意到,其实这个区域图片是一张纯白色的图片,没有任何内容,我们可以直接把这张图片删去。删掉后就可以在单元格中直接输入文字了。这里要注意的是,不要轻易使用回车,否则可能会打乱整个表格的。
PS做网页切片的方法

【图8.11】

一般来说,我们习惯于在区域(2)做一个内框架,就是把一个网页嵌在内部,并且有滚动条。
查看example.html的源代码,找到区域(2)这里的代码部分,
<TD ROWSPAN=5>
<IMG src="images/example_4.gif" alt="PS做网页切片的方法" WIDTH=28 HEIGHT=250 ALT=""></TD>
<TD ROWSPAN=4></TD>
<TD ROWSPAN=5>
<IMG src="images/example_6.gif" alt="PS做网页切片的方法" WIDTH=42 HEIGHT=250 ALT=""></TD>
在<TD ROWSPAN=4>和</TD>间插入内框架的代码:
<iframe
border=1 frameborder=0 framespacing=0 height=100% marginheight=0
marginwidth=0 name=new_date noResize scrolling=yes
src="news.html" width=100% vspale="0"></iframe>
其中,news.html就是内部框架要应用的网页。你可以按照实际情况来修改。内框架的边框大小、颜色、是否显示滚动条等都可以设置。对滚动条定义一下风格,就可以于这个图片统一了(IE5.5以上支持)。

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: