- 1、本文档共79页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页制作
网页美工
本章内容
Adobe套件简介
Photoshop处理图片
批处理
图片大小、颜色、对比度/亮度处理
Fireworks网页图片处理
批处理
热点、切片
按钮、导航
Flash动画制作
补间动画
按钮
综合示例
2
Flash is Dying/Dead
3
第一节 Adobe套件简介
传说中的网页制作三剑客是什么?
Adobe CS、CC指什么?
与网页制作有关的Adobe软件都有哪些?
4
1.网页制作三剑客
Macromedia 公司,后被Adobe收购
Dreamweaver
Flash
Fireworks
5
2.Adobe CS与CC介绍
CS:Creative Suite,最高版本CS6
CC:Creative Cloud
Adobe CS系列被Adobe CC取代
Adobe公司宣布不再销售盒装版的CS,工作的重点放在Creative Cloud云服务(CC)上
CC不会再有CS5、CS6这样的版本区别,而是统一的CC
用户将通过Creative Cloud来获取版本的更新,而不是购买新的安装包
除了提供新的更新模式,Creative Cloud还将为用户提供更多的云端服务,包括存储和在线助手等
参见备注
6
3.与网页制作有关的Adobe软件
Photoshop:切图、美工
Flash:动画、交互
Fireworks:网页图像图形处理,网页按钮、导航栏组件制作
Dreamweaver:网站建设、网页编辑
其他软件:
Acrobat(PDF编辑) Adobe Reader(PDF阅读)
Contribute(网页设计管理工具)
ColdFusion(构建企业Intenet应用程序)
Air(Adobe Integrated Runtime利用现有的web开发技能(Flash, Flex, HTML, JavaScript, Ajax)优势,建立和配置跨平台的桌面RIA(Internet Applications)应用。)
7
8
9
10
11
12
13
14
15
16
第二节 Photoshop处理图片
图片格式
图片调整:大小、裁剪、DPI等
图片调整:亮度、对比度等
图片批处理
网页切图
17
图片格式
JPEG
有损压缩,适合保存像素色彩丰富的图片如照片等
不适合用来储存有清晰边缘的图片,重复储存丢失细节
GIF
无损压缩格式(Lossless Compression),色彩在 256 色以内时使用
非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出。
支持透明背景、动画格式,100% 的浏览器支持
PNG
无损压缩格式, 因为 GIF 所使用的无损压缩格式专利问题而诞生
分为 PNG-8 以及 PNG-24 。不支持动画, PNG-24 支持Alpha 透明效果
缺点:文件大小增加、IE6不支持透明PNG
PSD
Photoshop文档格式,不能被浏览器直接识别
18
JPEG
19
Gif
20
png
21
2. 图像调整
图像-图像大小
图像-裁剪
22
3.图像调整(对比度亮度等)
图像-调整
调整面板
23
4.图片批处理
文件-自动-批处理
24
4.图片批处理
文件-脚本-图像处理器
25
5.网页切图
首先:在photoshop中打开一个要进行切图的图片
26
5.网页切图
用鼠标点击左侧工具栏的【切片工具】,使用【切片工具】在右侧要进行切图的图片中进行划分
27
5.网页切图
点击菜单栏中【文件】—【存储为Web所用格式...】
28
5.网页切图
弹出一个存储为Web所用格式的界面,在界面中选择所存储的格式。
29
5.网页切图
点击 “存储”按钮。会弹出一个【将优化结果存储为】的对话框。选择存储路径,并点击【切片】后面的三角按钮,从下拉框列表中选择【所有切片】选项。
30
5.网页切图
31
第三节 Fireworks网页图片处理
Fireworks简介
文本
批处理
Gif制作
切片、热点
32
1.Fireworks简介
默认文档格式为png
Fireworks 是一个用于创建、编辑和优化 Web 图形的多功能程序。
创建和编辑位图和矢量图像
设计 Web 效果(如变换图像和弹出菜单)
修剪和优化图形以减小其文件大小
可以将其导出或另存为 JPEG 文件、GIF 文件或其它格式的文件,与包含 HTML 表格和 JavaScript 代码的 HTML 文件一起用于 Web
使用Fireworks
34
2.文本
文本工具
文本属性
插入特殊字符:窗口-其它-特殊字符
笔触、填充、滤镜以及样式
将文本附加到路径
如果希望文本不受矩形文本块的限制,可以绘制路径并将文本附加到该路径。文本将顺着路径的形状排列并且保持可编辑性。
若要在路径上放置文本:
文档评论(0)