且行资源

关注教育技术发展与应用,关注学习资源设计与开发技术。

上一篇: 提供建站帮助与空间,想做网站的朋友来看看 下一篇:mysql使用教程

photoshop切片使用教程

szichuan发表于2007-10-30 17:48 分类: 教育技术|网络浏览: 评论: 5  【我来说两句】

本教程为且行资源原创,欢迎转载,遵循:“署名-非商业用途-保持一致”的创作共用协议.szichuan@gmail.com QQ:510280445

先做一个简单的说明为什么选择Photoshop软件而没有选择Firework软件。Friework Dreamweaver Flash号称网页制作三剑客,Friework与Dreamwaver整合得更为紧密,在这里只所以选择photoshop只是因为我的偏好,况且我对firework软件使用的次数很少,不太喜欢他提供的层面板。
在这里我们使用的PS的版本是CS3 以前的版本与此相差无几,但注意不能使用迷你安装版,必须是完整安装

  先来看看且行完全用切片制作的一个工作室网站:淮南比特网

再说一下我们为什么要使用切片:
1 使用切片是最直白的网页布局方法。不要再想如何去设计表格,也不要想什么DIV,你首先要想的是你的网页要做成什么样子?把你所想的出来就行了!! 
2 使用切片可以有效地减小页面文件的大小,提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快,还是把一个图片分成若干个小图同时下载快呢?

如何切片:
一 打开你设计好的PS图,选择切片工具
qiepian1

二  按网页的结构和图片的特点进行切片
切片的大水上和位置可以通过切片选项来进行调整
qiepian2 
三 选择文件菜单 另存为WEB格式命令,保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)
qiexing3 
四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑,删除不必须的图片和进行内容的填充。
qiexing4

切片原则和常见问题:
 一 切片是生成表格的依据,切片的过程要先总体后局部,即先把网页整体切分成几个大部分,再细切其中的小部分。
二  对于渐变的效果或圆角等图片特殊效果,需要在页面中表现出来的,要单独切出来
三 在DW中进行编辑时,少用图片,如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景
四 在DW中进行编辑时,删除图片时出面表格错位如何办?
    删除图片的时候记住图片的长宽,再插入一个相同长宽的表格。
五 在DW中如何自定义表格的长宽?
    使用表格长宽一样的图片做为单元格的背景。
六 如何在图片上输入文字?
    把图片设置成背景。

本文链接地址:http://www.qiexing.com/post/717.html

且行微博】【已有5位网友发表了看法,点击发表

相关文章:   或许你还对下面的文章感兴趣

 

  • quote 1楼.小蒋
  • Gravatar Icon
  • 我想更详细了解PS切片与DW布局 ,有没什么好点的资料送我一份 我的邮箱:312392114@qq.com 先谢谢你了哈
  • 2008-7-25 18:48:55 回复该留言
  • quote 5楼.lili
  • Gravatar Icon
  • 能不能把切片怎么做说具体一点?这只是说了整个过程,并没有详细说明切片的技巧。。


  • 2010-8-3 11:04:23 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

且行资源

QQ:510280445

E-mail:szichuan@gmail.com

最新评论及回复

最近留言

网站分类

热文排行使用

教育技术 版权所有且行 设计程序:RainbowSoft Studio Z-Blog

联系方式:sunfang@qiexing.com QQ:510280445 电话:013955453231
转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议. 皖ICP备07002369号