(教学课件)chapter2利用Photoshop制作与处理图像.pptx

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第2章 利用Photoshop制作与处理图像制作“慧衡科技”网站的图像计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 掌握选取工具的使用及创建选区的方法 掌握绘图工具的使用及填充颜色的方法 掌握组、图层、图层样式、蒙版的概念与使用 掌握文本工具的使用及修饰文本的方法 了解网页背景图像、logo、banner的设计方法 了解网页颜色的配色方法网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室实训项目深圳慧衡科技有限公司需要制作一个网站，需要设计:(1

2、)网页页面效果图(2)页面需要用到的图像：网站logo、banner和网页中的其他图像。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室项目分析设计思路：（1）背景色方面，采用深蓝色调，使用此色调中的各种深浅颜色来设计背景色及背景图像，并配有一些橙色来增添活力。（2）背景图像方面，制作渐变色的背景图像。（3）banner图像方面，在已有的公司标志图像基础上制作logo，然后再添加文本及线条来制作banner。（4）网页中的主图方面，从公司提供的几个案例图像，利用图像合成技术制作了一个广告图像。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工

3、程学院计算机基础教研室设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：图像的格式1.网页中常用的图像格式有：（1）GIF：无损压缩，但只适合颜色单一的图像，支持透明背景及动画。（2）JPEG：有损压缩，可以通过调整压缩等级改变文件大小。（3）PNG：支持24位和8位两种色深模式，支持1位和8位两种模式的透明度。2.Photoshop中处理的图像格式是：PSD格式：能够保存图像的图层、通道等信息，但是其文件体积大，在其他图像处理程序中无法打开。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：图

4、像的分辨率1.像素：构成图像的最小单位，它的形态是一个小方点。无数个带色彩的像素点构成完整的一副图像。2.图像分辨率：度量图像内数据量多少的一个参数，通常表示为ppi（像素/每英寸）。在用于电子屏幕输出时，一般设置图像分辨率为72ppi。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：图像常用的颜色模式1.灰度模式：用0255的不同灰度值来表示图像，0表示黑色，255表示白色，中间值表示灰色。2.索引颜色模式：GIF格式的图像一般都属于索引颜色模式，图像中含有预先定义好的256种颜色。3.RGB颜色模式：由R（红）、G（绿）、B（蓝）三原色以不同

5、的比例叠加来产生其他颜色。4.HSB颜色模式：H（色相）、S（饱和度）、B（亮度），在对色彩进行编辑时常常会用到这种模式。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：选区网 页 设 计 与 制 作 实 用 教 程（第 3 版）选区就是使用工具箱中的各种选取工具来对图像进行选取，形成选区。当对选区内的内容进行处理时，对选区以外的内容并不影响。选区的形状并不固定，灵活的使用各种工具，可以制作出任何形状的选区。计算机工程学院计算机基础教研室制作流程任务1：设计网页的背景颜色任务4：提取页面元素任务5：制作网页中的主图任务3：制作含logo的bann

6、er 任务2：制作网页的背景图像网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室任务1 1 设计网页各区域的背景颜色1使用参考线对页面进行内容区域划分2新建组和图层3设计页面背景颜色4设计网页footer区域的背景色网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP1：使用参考线对页面进行内容区域划分网 页 设 计 与 制 作 实 用 教 程（第 3 版）F新建文件“网页效果图.psd”。F配置“基本功能”工作区，展开“历史记录”面板。F编辑“首选项”，设置鼠标滚轮缩放图像、标尺单位为“像素”。F新建1条水平参考

7、线“1250像素”和2条垂直参考线“125像素”、“1125像素”。计算机工程学院计算机基础教研室F 解锁“背景”图层，并更改其名称为“bg”。F 新建“banner”组，并在组中新建“banner-bg”图层。F 新建“navigation”和“footer”图层。F 新建“display”组，并在组中新建“display-bg”图层。F 新建“content”组，并在组中新建“content-bg”图层。STEP2：新建组和图层计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）STEP3：设计页面背景颜色网 页 设 计 与 制 作 实 用 教 程（第 3

8、 版）F通过“拾色器”选取颜色，设置颜色为#65768a，把颜色填充到“bg”图层。计算机工程学院计算机基础教研室STEP4：设计网页footer区域的背景色网 页 设 计 与 制 作 实 用 教 程（第 3 版）F在“footer”图层根据参考线创建矩形选区。F从拾色器拾取出和#65768a同一色系的颜色#304153，对矩形选区填充颜色。计算机工程学院计算机基础教研室任务2 2 制作网页各区域的背景图像1使用渐变工具制作display区域的背景图像2绘制圆角矩形制作navigation区域的背景图像3绘制圆角矩形制作content区域的背景图像网 页 设 计 与 制 作 实 用 教 程（第

9、 3 版）计算机工程学院计算机基础教研室STEP1STEP1：使用渐变工具制作displaydisplay区域的背景图像网 页 设 计 与 制 作 实 用 教 程（第 3 版）F将“fortrade.jpg”图像移至“网页效果图.psd”中。F创建矩形选区，并为其填充渐变颜色，颜色从#6083ac过渡到#ffffff。计算机工程学院计算机基础教研室STEP2STEP2：绘制圆角矩形制作navigationnavigation区域的背景图像F在“navigation”图层上绘制圆角矩形，并将其转化为选区。F对圆角矩形选区填充颜色，颜色从#a6cdfa渐变到#98bbe4。计算机工程学院计算机基础

10、教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）F在“content-bg”图层左侧绘制圆角矩形，填充背景色#6083ab。F将圆角矩形的下半区域填充成另外一种颜色#8dbod8。F复制圆角矩形到content中其他区域。F对左侧第2个圆角矩形进行变形操作，效果如图所示。STEP3：绘制圆角矩形制作content区域的背景图像计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）任务3 3 制作含logologo的bannerbanner1设置banner的背景色2制作logo3设计banner底纹网 页 设 计 与 制 作 实 用 教 程（第 3

11、 版）计算机工程学院计算机基础教研室STEP1STEP1：使用渐变工具设置bannerbanner的背景色F在“banner-bg”图层新建矩形框选区，并填充渐变颜色，从#3e4c5c过渡到#5c6c7e。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP2STEP2：制作logologo网 页 设 计 与 制 作 实 用 教 程（第 3 版）F将“logo标志.png”中的图像移至“网页效果图.psd”中。F添加文本“慧衡”、“InteMatrix”和“网络营销分析和优化专家”。F设置字符段落格式。F栅格化文本“InteMatrix”。计算机工程学

12、院计算机基础教研室STEP3STEP3：设计bannerbanner底纹F 绘制线条，填充橙色到白色的渐变色。F 对线条设置高斯模糊滤镜并添加图层样式。F 输入文本“IM-DigiMarketing”，字体格式为“微软雅黑、12点、白色”，复制文本并对副本设置“动感模糊”滤镜效果。F 输入文本“IM-eCommerce”，字体格式为“微软雅黑、14点、白色”，复制文本并对副本设置“动感模糊”滤镜效果。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室任务4 4 提取页面元素1使用切片工具切图2保存切片网 页 设 计 与 制 作 实 用 教 程（第 3 版）计

13、算机工程学院计算机基础教研室STEP1STEP1：使用切片工具切图网 页 设 计 与 制 作 实 用 教 程（第 3 版）F使用切片工具创建“banner”切片。F使用切片工具创建“bg_nav”切片。F创建“bg_display”、“bg_con_title”、“bg_con_bot”切片。计算机工程学院计算机基础教研室STEP2STEP2：保存切片网 页 设 计 与 制 作 实 用 教 程（第 3 版）F设置切片文件存储类型。F存储选中的切片。计算机工程学院计算机基础教研室任务5 5 制作网页contentcontent中的主图1选取案例图像2使用“矩形选框工具”选取购物车3 使用“魔棒工

14、具”选取丝带圆环4 使用“磁性套锁工具”选取书本5 使用图层蒙版进行图像合成6 输入文本“Magento”、“Magento is here”网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP1STEP1：选取案例图像F将“onlinestore.jpg”中的图像移至“con_main.psd”中，添加“投影”图层样式。F将“christmas.jpg”中的图像移至“con_main.psd”中，添加“投影”图层样式。F将“magikshoes.jpg”中的图像移至“con_main.psd”中，添加“投影”图层样式。网 页 设 计 与 制 作 实

15、用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP2STEP2：使用“矩形选框工具”选取购物车F使用“矩形选框工具”从“购物车.jpg”中选取购物车，并移至“con_main.psd”中。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP3STEP3：使用“魔棒工具”选取丝带圆环网 页 设 计 与 制 作 实 用 教 程（第 3 版）F使用“魔棒工具”从“丝带圆环.jpg”中选取丝带圆环。F变换选区并将选区移至合适的位置。计算机工程学院计算机基础教研室STEP4STEP4：使用“磁性套锁工具”选取书本网 页 设 计 与 制 作 实 用 教

16、 程（第 3 版）F使用“磁性套锁工具”从“书本.jpg”中选取书本。计算机工程学院计算机基础教研室STEP5STEP5：使用图层蒙版进行图像合成网 页 设 计 与 制 作 实 用 教 程（第 3 版）F对“丝带圆环”图层添加“图层蒙版”。计算机工程学院计算机基础教研室STEP6STEP6：输入文本“MAGENTOMAGENTO”、“MAGENTO IS HEREMAGENTO IS HERE”网 页 设 计 与 制 作 实 用 教 程（第 3 版）F输入文本“Magento”、“Magento is here”并为其添加“投影”效果。计算机工程学院计算机基础教研室项目总结计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的Photoshop知识，自主设计与制作一个介绍“深圳市柏拉图科技有限公司”的网页，要求如下：页面效果图含有logo、banner和各区域的背景图像。使用图像合成技术设计制作一幅图像。2.2.同步同步测试测试通过教材第2章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室