photoshop切片使用教程(保存为页面与图片)
2010-06-17 18:05
477 查看
先做一个简单的说明为什么选择Photoshop软件而没有选择Firework软件。Friework Dreamweaver Flash号称网页***三剑客,Friework与Dreamwaver整合得更为紧密,在这里只所以选择photoshop只是因为我的偏好,况且我对firework软件使用的次数很少,不太喜欢他提供的层面板。
在这里我们使用的PS的版本是CS3 以前的版本与此相差无几,但注意不能使用迷你安装版,必须是完整安装。
再说一下我们为什么要使用切片:
1 使用切片是最直白的网页布局方法。不要再想如何去设计表格,也不要想什么DIV,你首先要想的是你的网页要做成什么样子?把你所想的画出来就行了!!
2 使用切片可以有效地减小页面文件的大小,提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快,还是把一个图片分成若干个小图同时下载快呢?
如何切片:
一 打开你设计好的PS图,选择切片工具
二 按网页的结构和图片的特点进行切片
切片的大水上和位置可以通过切片选项来进行调整
三 选择文件菜单 另存为WEB格式命令,保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)
四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑,删除不必须的图片和进行内容的填充。
切片原则和常见问题:
一 切片是生成表格的依据,切片的过程要先总体后局部,即先把网页整体切分成几个大部分,再细切其中的小部分。
二 对于渐变的效果或圆角等图片特殊效果,需要在页面中表现出来的,要单独切出来
三 在DW中进行编辑时,少用图片,如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景
四 在DW中进行编辑时,删除图片时出面表格错位如何办?
删除图片的时候记住图片的长宽,再插入一个相同长宽的表格。
五 在DW中如何自定义表格的长宽?
使用表格长宽一样的图片做为单元格的背景。
六 如何在图片上输入文字?
把图片设置成背景。
其实我感觉很重要的两步如下:
第一步:
第二步:
在这里我们使用的PS的版本是CS3 以前的版本与此相差无几,但注意不能使用迷你安装版,必须是完整安装。
再说一下我们为什么要使用切片:
1 使用切片是最直白的网页布局方法。不要再想如何去设计表格,也不要想什么DIV,你首先要想的是你的网页要做成什么样子?把你所想的画出来就行了!!
2 使用切片可以有效地减小页面文件的大小,提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快,还是把一个图片分成若干个小图同时下载快呢?
如何切片:
一 打开你设计好的PS图,选择切片工具
二 按网页的结构和图片的特点进行切片
切片的大水上和位置可以通过切片选项来进行调整
三 选择文件菜单 另存为WEB格式命令,保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)
四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑,删除不必须的图片和进行内容的填充。
切片原则和常见问题:
一 切片是生成表格的依据,切片的过程要先总体后局部,即先把网页整体切分成几个大部分,再细切其中的小部分。
二 对于渐变的效果或圆角等图片特殊效果,需要在页面中表现出来的,要单独切出来
三 在DW中进行编辑时,少用图片,如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景
四 在DW中进行编辑时,删除图片时出面表格错位如何办?
删除图片的时候记住图片的长宽,再插入一个相同长宽的表格。
五 在DW中如何自定义表格的长宽?
使用表格长宽一样的图片做为单元格的背景。
六 如何在图片上输入文字?
把图片设置成背景。
其实我感觉很重要的两步如下:
第一步:
第二步:
相关文章推荐
- html使用js截取页面保存为图片
- FFMPEG教程1_解码后保存图片(使用2014年新SDK重新整理编译通过)
- 使用Photoshop不改变图片尺寸,保存图片到30K以下的解决办法
- photoshop切片使用教程
- 使用JS禁止页面打印,右击保存图片
- 使用Python保存网页上的图片或者保存页面为截图
- 使用Photoshop辅助线制作ps切片教程
- 【opencv 官方教程】翻译1 基本安装使用 编译工程 读取、显示、保存图片
- 使用PS切片工具进行切片生成div布局的页面的方法以及如何确定图片中某个点在图片中的位置
- struts2中使用Blob类型处理图片上传保存在数据库中并在JSP页面中显示图片
- GdPicture.NET使用教程:旋转页面并保存覆盖原始的PDF
- 使用JavaScript将当前页面保存成PDF,支持图片和文字的保存
- 使用Python保存网页上的图片或者保存页面为截图
- 使用cookie保存页面登录信息
- 扫描识别工具Dynamic Web TWAIN使用教程:建立一个“Hello World”扫描页面
- ServerU FTP 9.1.0.5完美破解版 使用教程 学校局域网上课上传下载文件用--图片来自网络
- 使用Python3批量保存贴吧图片-附爬虫程序
- 扫描识别工具Dynamic Web TWAIN使用教程:建立一个“Hello World”扫描页面
- 在.net中使用GDI+来提高gif图片的保存画质
- PS教程新手入门(二)--保存清晰透明的.Png格式图片的方法和技巧教程