PS平面设计 第九章 S在网页中的应用.ppt

第九章 PS在网页中的应用 主讲：肖文高 9.1 网站LOGO 学习任务 9.1 网站LOGO 知识要点 9.1 网站LOGO 知识解析 9.1 网站LOGO 知识解析 9.1 网站LOGO 自主练习 9.1 网站LOGO 小结 9.2 水晶按钮 学习任务 9.2 水晶按钮 知识要点 9.2 水晶按钮 知识解析 9.2 水晶按钮 自主练习 9.2 水晶按钮 小结 9.3 金属质感的导航栏 学习任务 9.3 金属质感的导航栏 知识要点 9.3 金属质感的导航栏 知识解析 9.3 金属质感的导航栏 知识解析 9.3 金属质感的导航栏 自主练习 9.3 金属质感的导航栏 小结与作业 9.4 睡意阑珊的小猪 学习任务 9.4 睡意阑珊的小猪 知识要点 9.4 睡意阑珊的小猪 知识解析 9.4 睡意阑珊的小猪 自主练习 9.4 睡意阑珊的小猪 小结 9.5 光影划过动画效果 学习任务 9.5 光影划过动画效果 知识要点 9.5 光影划过动画效果 知识解析 9.5 光影划过动画效果 9.5 光影划过动画效果 作业 9.6 制作背景透明的图片 学习任务 9.6 制作背景透明的图片 知识要点 9.6 制作背景透明的图片 知识解析 9.6 制作背景透明的图片 知识解析 9.6 制作背景透明的图片 自主练习 9.6 制作背景透明的图片 小结 9.7 网页切片 学习任务 9.7 网页切片 知识要点 9.7 网页切片 知识解析 9.7 网页切片 知识解析 9.7 网页切片 自主练习 9.7 网页切片 小结 2. 载入画笔 练习一、制作背景透明的图片 根据自己喜好，制作一幅背景透明的PNG格式的图片，在Flash和FrontPage中利用多张图片叠加，验证透明情况。 练习二、载入画笔 从网络上收集自己需要的笔刷，并安装到Photoshop环境中，试用各种笔刷进行创意设计。 1. PNG格式的概念和应用。 2. 载入画笔。 作业 复习本课内容，完成课后练习相关内容。 我们这里所说的切片（Slice）就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来，成为一幅完整的图像。这样做可以减低图像的大小，减少网页的下载时间，并且能创造交互的效果，还能将图像的一些区域用html来代替。 首先设计网页背景，再使用切片工具分割画面，最后存储为Web所有格式。打开第9章第7节的素材，浏览切片后的存储结果。 在目前互联网带宽还受到条件限制的情况下，运用切片来减少网页下载时间而又不影响图片的效果。除了减少下载时间之外，切片也还有其他一些优点： （1）优化图像：完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。例如，如果需要以Gif格式优化图像的某一区域以便支持动画，而图像的其余部分以Jpg格式优化更好时，就可以使用切片隔离动画。 （2）创建链接：使用且片制作网页，可以在网页制作软件中对不同的切片制作不同的链接，而不需要在大的图片上创建热区。 网页色彩搭配： 制作页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，是明度，纯度还是色相。 利用附带CD中的素材图片“素材.jpg”,利用切片的方法进行切片并保存为Web所用格式。 作业 复习本课内容，完成课后练习相关内容。 1.【切片工具】 2. 输出格式 第 9 章 Photoshop在网页中的应用 网站LOGO主要是互联网上各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。对于一个网站来说，LOGO是网站的名片，也是网站的灵魂所在，即所谓的“点睛”之处。 使用【渐变工具】填充选区，使用【图层样式】设置网站LOGO的初步效果，利用图层混合模式制作高光部分。 LOGO的定义： LOGO顾名思义就是站点的标志图案，LOGO最重要的就是用图形化的方式传递网站的定位和经营理念、同时便于人们识别。网站LOGO的设计过程中一般有以下三种思路： （1）直接以网站网址作为LOGO。 （2）根据网站提供的产品/服务特点展开LOGO设计。 （3）以传递网站运营商的经营理念为特色。 LOGO的制作工具和方法: 目前没有专门制作LOGO的软件，其实也