【文档说明】(教学课件)chapter2利用Photoshop制作与处理图像.pptx，共(35)页，1.520 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2777.html

以下为本文档部分文字说明：

高等教育出版社学习目标➢掌握选取工具的使用及创建选区的方法➢掌握绘图工具的使用及填充颜色的方法➢掌握组、图层、图层样式、蒙版的概念与使用➢掌握文本工具的使用及修饰文本的方法➢了解网页背景图像、logo、banner的设计方法➢了解网页颜色的配色方法网页设计与制作实用教程（第3版）

实训项目深圳慧衡科技有限公司需要制作一个网站，需要设计:(1)网页页面效果图(2)页面需要用到的图像：网站logo、banner和网页中的其他图像。网页设计与制作实用教程（第3版）项目分析设计思路：（1）背景色方面，采

用深蓝色调，使用此色调中的各种深浅颜色来设计背景色及背景图像，并配有一些橙色来增添活力。（2）背景图像方面，制作渐变色的背景图像。（3）banner图像方面，在已有的公司标志图像基础上制作logo，然后再添加文本及线条来制作banner。（4）网页中的主图

方面，从公司提供的几个案例图像，利用图像合成技术制作了一个广告图像。网页设计与制作实用教程（第3版）设计目标网页设计与制作实用教程（第3版）预备知识：图像的格式1.网页中常用的图像格式有：（1）GIF：无损压缩，但只适合颜色单一的图像，支持透明背

景及动画。（2）JPEG：有损压缩，可以通过调整压缩等级改变文件大小。（3）PNG：支持24位和8位两种色深模式，支持1位和8位两种模式的透明度。2.Photoshop中处理的图像格式是：PSD格式：能够保

存图像的图层、通道等信息，但是其文件体积大，在其他图像处理程序中无法打开。网页设计与制作实用教程（第3版）预备知识：图像的分辨率1.像素：构成图像的最小单位，它的形态是一个小方点。无数个带色彩的像素点构成完整的一副图像。2.图像分辨率：度量图像内数据量多少的一个参数，通

常表示为ppi（像素/每英寸）。在用于电子屏幕输出时，一般设置图像分辨率为72ppi。网页设计与制作实用教程（第3版）预备知识：图像常用的颜色模式1.灰度模式：用0~255的不同灰度值来表示图像，0表示黑色，255表示白色，中间值表示灰色。2.

索引颜色模式：GIF格式的图像一般都属于索引颜色模式，图像中含有预先定义好的256种颜色。3.RGB颜色模式：由R（红）、G（绿）、B（蓝）三原色以不同的比例叠加来产生其他颜色。4.HSB颜色模式：H（色相）、S（饱和度）、B（亮度），在对色彩进行编辑时常常会用到这

种模式。网页设计与制作实用教程（第3版）预备知识：选区网页设计与制作实用教程（第3版）•选区就是使用工具箱中的各种选取工具来对图像进行选取，形成选区。•当对选区内的内容进行处理时，对选区以外的内容并不影响。•选区的形状并不

固定，灵活的使用各种工具，可以制作出任何形状的选区。制作流程任务1：设计网页的背景颜色任务4：提取页面元素任务5：制作网页中的主图任务3：制作含logo的banner任务2：制作网页的背景图像网页设计与制作实用教程（第3版）任务1——设计网页各区域的背景颜色1使用参考线对页面进行内容区域划分2

新建组和图层3设计页面背景颜色4设计网页footer区域的背景色网页设计与制作实用教程（第3版）STEP1：使用参考线对页面进行内容区域划分网页设计与制作实用教程（第3版）新建文件“网页效果图.psd”。配置“基

本功能”工作区，展开“历史记录”面板。编辑“首选项”，设置鼠标滚轮缩放图像、标尺单位为“像素”。新建1条水平参考线“1250像素”和2条垂直参考线“125像素”、“1125像素”。解锁“背景”图层，并更改其名称为“bg”。新建

“banner”组，并在组中新建“banner-bg”图层。新建“navigation”和“footer”图层。新建“display”组，并在组中新建“display-bg”图层。新建“conte

nt”组，并在组中新建“content-bg”图层。STEP2：新建组和图层网页设计与制作实用教程（第3版）STEP3：设计页面背景颜色网页设计与制作实用教程（第3版）通过“拾色器”选取颜色，设置颜色为#65768a，把颜色填充到“bg”图层。STEP

4：设计网页footer区域的背景色网页设计与制作实用教程（第3版）在“footer”图层根据参考线创建矩形选区。从拾色器拾取出和#65768a同一色系的颜色#304153，对矩形选区填充颜色。任务2——制作网页各区域的背景图像1使用渐变工具制作display区域的

背景图像2绘制圆角矩形制作navigation区域的背景图像3绘制圆角矩形制作content区域的背景图像网页设计与制作实用教程（第3版）STEP1：使用渐变工具制作display区域的背景图像网页设计与制作实用教程（第3版）将“fortrade.

jpg”图像移至“网页效果图.psd”中。创建矩形选区，并为其填充渐变颜色，颜色从#6083ac过渡到#ffffff。STEP2：绘制圆角矩形制作navigation区域的背景图像在“navigation”图层上绘制圆角矩形，并将其转化为选区。对圆角矩形选区填充颜色，颜色从#a6cdfa渐变

到#98bbe4。网页设计与制作实用教程（第3版）在“content-bg”图层左侧绘制圆角矩形，填充背景色#6083ab。将圆角矩形的下半区域填充成另外一种颜色#8dbod8。复制圆角矩形到conten

t中其他区域。对左侧第2个圆角矩形进行变形操作，效果如图所示。STEP3：绘制圆角矩形制作content区域的背景图像网页设计与制作实用教程（第3版）任务3——制作含logo的banner1设置banner的背景色2制作logo3设计banner底纹网页设计与制作实用教程（第3版）STEP1：使

用渐变工具设置banner的背景色在“banner-bg”图层新建矩形框选区，并填充渐变颜色，从#3e4c5c过渡到#5c6c7e。网页设计与制作实用教程（第3版）STEP2：制作logo网页设计与制作实用教程（第3版）

将“logo标志.png”中的图像移至“网页效果图.psd”中。添加文本“慧衡”、“InteMatrix”和“网络营销分析和优化专家”。设置字符段落格式。栅格化文本“InteMatrix”。STEP3：设计banner底纹绘制线条，填充橙色到

白色的渐变色。对线条设置高斯模糊滤镜并添加图层样式。输入文本“IM-DigiMarketing”，字体格式为“微软雅黑、12点、白色”，复制文本并对副本设置“动感模糊”滤镜效果。输入文本“IM-eCommerce”，字体格式为

“微软雅黑、14点、白色”，复制文本并对副本设置“动感模糊”滤镜效果。网页设计与制作实用教程（第3版）任务4——提取页面元素1使用切片工具切图2保存切片网页设计与制作实用教程（第3版）STEP1：使用切片工具切图网页设计与制作实用教程（第3版）使用切片工具创建“banner”切片。使用切片工具

创建“bg_nav”切片。创建“bg_display”、“bg_con_title”、“bg_con_bot”切片。STEP2：保存切片网页设计与制作实用教程（第3版）设置切片文件存储类型。存储选中的切片。任务5——制

作网页content中的主图1选取案例图像2使用“矩形选框工具”选取购物车3使用“魔棒工具”选取丝带圆环4使用“磁性套锁工具”选取书本5使用图层蒙版进行图像合成6输入文本“Magento”、“Mage

ntoishere”网页设计与制作实用教程（第3版）STEP1：选取案例图像将“onlinestore.jpg”中的图像移至“con_main.psd”中，添加“投影”图层样式。将“christmas.jpg”中的图像移至“

con_main.psd”中，添加“投影”图层样式。将“magikshoes.jpg”中的图像移至“con_main.psd”中，添加“投影”图层样式。网页设计与制作实用教程（第3版）STEP2：使用“矩形

选框工具”选取购物车使用“矩形选框工具”从“购物车.jpg”中选取购物车，并移至“con_main.psd”中。网页设计与制作实用教程（第3版）STEP3：使用“魔棒工具”选取丝带圆环网页设计与制作实用教程（第3版）使用“魔棒工具”从“丝带圆环.jpg”中选取丝带圆环。变换选区并将选

区移至合适的位置。STEP4：使用“磁性套锁工具”选取书本网页设计与制作实用教程（第3版）使用“磁性套锁工具”从“书本.jpg”中选取书本。STEP5：使用图层蒙版进行图像合成网页设计与制作实用教程（第3版）对“丝带

圆环”图层添加“图层蒙版”。STEP6：输入文本“MAGENTO”、“MAGENTOISHERE”网页设计与制作实用教程（第3版）输入文本“Magento”、“Magentoishere”并为其添加

“投影”效果。项目总结网页设计与制作实用教程（第3版）课后练习1.配套实训利用配套实训文件夹下提供的素材文件，根据所学的Photoshop知识，自主设计与制作一个介绍“深圳市柏拉图科技有限公司”的网页，要求如下：➢页面效果图含有logo、banner和各区域的背景图像。➢使

用图像合成技术设计制作一幅图像。2.同步测试通过教材第2章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）