电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

中文版Photoshop CS5案例与实训教程 教学课件 ppt 作者 李敏 第12章 优化Web图像

29页
  • 卖家[上传人]:E****
  • 文档编号:89185662
  • 上传时间:2019-05-20
  • 文档格式:PPT
  • 文档大小:1.14MB
  • / 29 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 1、第12章 优化Web图像,本章主要内容 :,网页图像及其概念 网页元素的制作 创建图像链接 图像的优化和输出,12.1学习任务:网页图像概述,网页图像,顾名思义,就是应用于网页中的图像。图形图像能将信息传达得更具体、更真实、更直接,且易于理解,从而高效率高质量的表达设计理念,使网页充满强烈的感情色彩。在网页中合理的应用图形图像,能够形成视觉信息的中心,有利于重要信息的传达。,12.1学习任务:网页图像概述,本节学习任务 理解网页图像的特点,掌握使用Photoshop优化网页图像的基本方法。 目前诸多的图形图像处理软件中,Photoshop以其强大的功能,受到业界的推崇。Photoshop提供的创建Web图像功能,更是令众多网页设计师欢欣鼓舞。利用Photoshop的图像功能,还可以制作出精美的Web图像。 虽然存在很多种图像文件格式,但网页中通常使用的只有3种,即 GIF、JPEG 和 PNG。,12.1学习任务:网页图像概述,JPEG(联合图像专家组):JPEG文件格式是用于摄影或连续色调图像的较好格式,这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高,文件的大小

      2、和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。JPEG文件的扩展名为.jpg或.jpeg。 PNG(可移植网络图形):PNG文件格式是一种替代GIF格式的无专利权限制的格式,它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是Adobe Fireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息(例如阴影),并且在任何时候所有元素都是可以完全编辑的。PNG文件的扩展名为.png。,12.1学习任务:网页图像概述,GIF(图形交换格式):GIF文件最多使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像,例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。GIF文件的扩展名为.gif。,12.2学习任务:图像的优化和输出,本节学习任务 了解影响文件大小的几个重要因素,掌握图像优化和输出的方法,能够编辑图页中使用的图像。,12.2学习任务:图像的优化和输出,网页图像和普通图像的主要区别是,由于网速问题,必须考虑网页图像大小。影响文件大小的几个重要因素是:分辨率、图像尺寸、颜色数目和

      3、图像格式,所以优化图像时,就必须考虑这些相关因素,特别是颜色数目和图像格式。 颜色数目不同,产生的文件大小也不一样。对于常见的Web图像格式,GIF格式的文件要小些,而PNG格式的文件要大些,JPEG格式的文件介于这两者之间。,在Photoshop CS5中,优化图像可以通过“文件存储为Web和设备所用格式”菜单命令实现。下面通过具体操作介绍优化图像的方法。 (1)在Photoshop中打开网页banner,将其优化输出。选择“文件存储为Web和设备所用格式”菜单命令,打开“存储为Web和设备所用格式”对话框。 (2)在“预设”选项下面的“优化的文件格式”列表中,优化格式有5种:GIF、JPEG、PNG-8、PNG-24和WBMP,根据需要选择优化的文件格式,本例选择优化的文件格式是JPEG格式。,12.2学习任务:图像的优化和输出,存储为Web和设备所用格式对话框,12.2学习任务:图像的优化和输出,(3)可以对优化的图像进行参数设置,比如,若图像的质量或大小不能满足用户的要求,可以通过调整“品质”、“模糊”的数值使之符合要求。设置时一定与原图进行比较,以达到最佳效果。 (4)对当前

      4、图像设置完优化格式后,还可以设置图像的颜色和大小。将图像优化为GIF格式、PNG格式和WBMP格式时,可以通过“储存为Web和设备所用格式”对话框中的“颜色表”对颜色进行进一步设置,颜色表如下图所示。,12.2学习任务:图像的优化和输出,图12-2 “颜色表”调板,12.2学习任务:图像的优化和输出,“颜色表”调板各项含义如下: 颜色总数:显示“颜色表”调板中颜色的总数量。 将选中的颜色映射为透明:在“颜色表”调板中选择相应的颜色后,单击该按钮,可以将当前优化图像中的选取颜色转换成透明。 Web转换:把在“颜色表”调板中选取的颜色转换成Web安全色。 颜色锁定:把在“颜色表”调板中选取的颜色锁定,被锁定的颜色样本在右下角会出现一个被锁定的方块图标。将锁定的颜色样本选取再单击“锁定颜色”按钮会将锁定的颜色样本解锁。,12.2学习任务:图像的优化和输出,新建颜色:单击该按钮可以将“吸管”工具吸取的颜色添加到“颜色表”调板中,新建的颜色样本会自动处于锁定状态。 删除:在“颜色表”调板中选择颜色样本后,单击此按钮可以将选取的颜色样本删除,或者直接拖曳到删除按钮上将其删除。,12.2学习任务:图

      5、像的优化和输出,提示:当图像较大时,优化的效果不会太理想,这时可以采取分片压缩功能,也就是说将较大的图像按照用户的要求裁成很多块,每一块图像都可以按照不同的设置进行优化压缩,并且每一块都可以连接不同的URL地址,存储后生成一段HTML代码,但在网页中还是一幅完整的图像,这样图像在网页中的显示速度就快多了。 (5)颜色设置完毕,可以通过“储存为Web和设备所用格式”对话框中的“图像大小”部分对优化的图像设置输出大小,设置完毕,单击【存储】按钮,将图像保存为Web图像格式。,12.2学习任务:图像的优化和输出,12.3学习任务:切片,本节学习任务 了解切片的含义,熟悉切片工具的使用方法,掌握为切片创建超链接的基本操作。 创建切片的方法非常简单,单击工具箱中“切片”工具,在打开的图像中,按住鼠标左键在图像需要切分的区域拖动鼠标,图像被自动分割成多个区域,并自动为各个分割区域自左向右、自上而下自动编号,默认设置下按照01、02、03顺序命名,其中1个区域为用户切片,另外的区域为自动切片。,使用“切片选择”工具可以选择分割后的切片,按下鼠标拖动即可移动切片。对于创建的切片,可以在Photosho

      6、p中为其设置图像超链接。 “切片选项”对话框中各选项的含义: 切片类型:在下拉列表中可选择所选切片的类型,默认为“图像”。 名称:设定所选切片的名称。 URL:设定所选切片的超链接地址。 目标:设定被链接目标的打开方式。,12.3学习任务:切片,Alt标记:指定当前切片的替代文本,在生成的HTML网页中,鼠标指向切片时可显示该文本。 尺寸:指定当前切片的位置、宽度和高度。 切片背景类型:指定当前切片背景的颜色。,生成的文件,浏览效果,12.3学习任务:切片,12.4案例制作制作网页banner,当浏览者访问网站的时候,网站首页效果是非常重要的,它在很大程度上影响了用户是否继续访问网站。因此,网页banner设计起到了至关重要的展示作用,特别是对于首页banner,有效的信息传达让用户和文字之间的互动变得生动而有趣。,案例分析本案例介绍某学院网页banner的制作方法。在制作过程中,要综合考虑图像素材的搜集与选用,图像配色方案的选择以及元素的布局,并要求和网页的主题协调一致。 案例效果网页banner最终效果图所示。,图12-8 网页banner效果图,12.4案例制作制作网页banne

      7、r,提示:banner的大小和网页的分辨率有关,目前主流分辨率为1024像素*768像素,通常将网页宽度设置为1002像素。在进行网页banner设计时,要注意色彩的搭配,确保其风格和网页整体风格是统一的。,12.4案例制作制作网页banner,12.5 实训演练,一、实训目的 掌握使用切片工具分割图像的方法 掌握创建图像超链接的方法 掌握图像优化和输出的方法 掌握使用Photoshop创建网页元素的方法,二、实训内容 1制作Web交互图像按钮 图像交互技术在网页制作中被广泛应用于图像按钮特效。当鼠标指向网页中的图像时,会触发另一幅图像的交互显示。交互式图像按钮可以使网页导航更加人性化和美观,深得网页设计者的喜爱。交互图像有两幅图像组成,鼠标经过前的图像 鼠标经过时的图像,12.5 实训演练,2制作Web网页背景 网页的背景设计非常重要。网页背景好比于一间房子的墙壁和地板,是整个房间的基础。网页背景不但影响浏览者对网页内容的接受程度,还能影响浏览者对整个网站的印象。 网页背景分为颜色背景和图片背景两种。颜色背景又称为纯色背景,使用一种纯色作为网页背景;图片背景分为渐变背景、图案背景、照片背景、复合背景等。,12.5 实训演练,网页设计中的渐变背景,12.5 实训演练,3设计一个展示家乡风采的网站首页。选择网站主色调及整体风格,用Photshop处理首页效果图,用切片工具分割图像并设计导航栏的超链接地址,最后通过Photoshop中的“文件存储为Web和设备所用格式”菜单命令将其发布为Web页。,12.5 实训演练,参考效果图,12.5 实训演练,12.6 习题,请完成本章最后列出的习题。,谢 谢 !,

      《中文版Photoshop CS5案例与实训教程 教学课件 ppt 作者 李敏 第12章 优化Web图像》由会员E****分享,可在线阅读,更多相关《中文版Photoshop CS5案例与实训教程 教学课件 ppt 作者 李敏 第12章 优化Web图像》请在金锄头文库上搜索。

      点击阅读更多内容
    最新标签
    发车时刻表 长途客运 入党志愿书填写模板精品 庆祝建党101周年多体裁诗歌朗诵素材汇编10篇唯一微庆祝 智能家居系统本科论文 心得感悟 雁楠中学 20230513224122 2022 公安主题党日 部编版四年级第三单元综合性学习课件 机关事务中心2022年全面依法治区工作总结及来年工作安排 入党积极分子自我推荐 世界水日ppt 关于构建更高水平的全民健身公共服务体系的意见 空气单元分析 哈里德课件 2022年乡村振兴驻村工作计划 空气教材分析 五年级下册科学教材分析 退役军人事务局季度工作总结 集装箱房合同 2021年财务报表 2022年继续教育公需课 2022年公需课 2022年日历每月一张 名词性从句在写作中的应用 局域网技术与局域网组建 施工网格 薪资体系 运维实施方案 硫酸安全技术 柔韧训练 既有居住建筑节能改造技术规程 建筑工地疫情防控 大型工程技术风险 磷酸二氢钾 2022年小学三年级语文下册教学总结例文 少儿美术-小花 2022年环保倡议书模板六篇 2022年监理辞职报告精选 2022年畅想未来记叙文精品 企业信息化建设与管理课程实验指导书范本 草房子读后感-第1篇 小数乘整数教学PPT课件人教版五年级数学上册 2022年教师个人工作计划范本-工作计划 国学小名士经典诵读电视大赛观后感诵读经典传承美德 医疗质量管理制度 2 2022年小学体育教师学期工作总结 2022年家长会心得体会集合15篇
    关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
    手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
    ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.