photoshop的切片功能.ppt_第1页
photoshop的切片功能.ppt_第2页
photoshop的切片功能.ppt_第3页
photoshop的切片功能.ppt_第4页
photoshop的切片功能.ppt_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一 用Photoshop制作网页模板切片 网页中的元素有很多 像Banner条 文本框 文字 版权 Logo 广告等 尽量把这些相对独立的元素放在不同的图层中 这样方便以后的再编辑 图层多时 可建立多个图层组来进行管理 单击图层面板右上角的小三角按钮 从弹出菜单中选择 新建组 在随后出现的对话框中为新建组取一个名称 确定即可 建组名称依据可依照css对版块的布局名称来命名 如头部文件可建立立一个header组 在header中建立bannerlogo等常用的组 点击图层组前面的小三角 就可以像文件夹一样展开或折叠它 对同一组中的所以图层可以方便地进行统一操作 如整体移动 复制 删除 隐藏 合并等 小提示 如果要合并而且不影响以后修改 可以尝试盖印图层 具体操作时在所有图层上面新建空白图层 然后使用快捷键 盖印可见图层到新建的图层 如果你想借鉴某个网页的设计 不妨把它截成图片放在最下面的图层中 再拉出多个参考线划出网页的大致版式 再在此基础之上边参考边制作自己的网页 二 为什么要使用切片 1 使用切片是最直白的网页布局方法 不要再想如何去设计表格 也不要想什么DIV 你首先要想的是你的网页要做成什么样子 把你所想的画出来就行了 2 使用切片可以有效地减小页面文件的大小 提高浏览者浏览页面的体验 想想看是把一个图片完整下载下来快 还是把一个图片分成若干个小图同时下载快呢 三 如何切片 1 打开你设计好的PS图 选择切片工具 2 按网页的结构和图片的特点进行切片切片的大小和位置可以通过切片选项来进行调整 3 选择文件菜单另存为WEB格式命令 保存时会生成index html图片文件会存放在images文件夹中 CS3要选择存储为html和图片 4 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑 删除不必须的图片和进行内容的填充 四 切片原则 1 切片是生成表格的依据 切片的过程要先总体后局部 即先把网页整体切分成几个大部分 再细切其中的小部分 2 对于渐变的效果或圆角等图片特殊效果 需要在页面中表现出来的 要单独切出来3 在DW中进行编辑时 少用图片 如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景 五 常见问题 1 在photoshop中设计网页大小如何确定 800 600我一般宽会设成780px 1024 768宽度会设成1000px 高度当然要看内容多少来定 布局就不好说了要看设计者的喜好 习惯 网站的功能 设计风格来定了 2 在dreamweaver中如何看到从photoshop中到导出的网页是如何布局的 从Photoshop中导出的页面已经自动用表格划分好了 你可以在屏幕上方的工具栏选择到布局一项 之后在右边选择扩展模式 这样就能看见表格了 3 在DW中进行编辑时 删除图片时出现表格错位如何办 删除图片的时候记住图片的长宽 再插入一个相同
人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论