网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院

情境2：书法家庄辉个人网站建设 任务2：书法家庄辉个人网站主页效果图设计与制作 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目开发策略与技巧 网页制作与网站设计教程

网站效果图的设计主要使在理解用户的需求的基础上，通过技术手段（Photoshop图像处理）来完成设计者的创意。 1任务解析与项目目标 网站效果图的设计主要使在理解用户的需求的基础上，通过技术手段（Photoshop图像处理）来完成设计者的创意。

2. 核心技能与概念 渐变工具的使用法 “渐变工具” 的作用是产生逐渐变化的色彩,在图像中选择需要填充渐变的区域，起点（按下鼠标处）和终点（松开鼠标处）会影响外观，具体取决于所使用的渐变的工具。 起点 渐变拾色器 渐变方式 渐变效果 终点

2. 核心技能与概念 渐变工具的使用法 单击渐变样本旁边的三角可以挑选预设的渐变填充。如果在这里找不到合适的渐变颜色，可以单击“可编辑渐变”按钮，将打开“渐变编辑器”，如图所示。 不透明度 色标 颜色

2. 核心技能与概念 图层的使用 不透明度 混合模式 图层可见性 蒙板图层 普通图层 蒙板图层 添加图层 蒙板图层 连接图层 添加图层样式

2. 核心技能与概念 核心技能1：图层样式的使用 字体变形 使用字体 文字工具属性 字体对齐 字符段落 使用字体 字体颜色 文字大小 字体样式

2. 核心技能与概念 核心技能1：图层样式的使用

2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —色调调整 自动调节色阶 执行“图像”→“调整” →“色阶”命令 高光 打开“自动颜色校正选项”对话框 中间调 暗部 设置白场 设置灰场 设置黑场

2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —色调调整

2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —色调调整

2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —亮度对比度 执行“图像”→“调整”→“亮度/对比度”命令 a）庐山原图 b）降低亮度 c）增加亮度

2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —色相/饱和度 “图像”→“调整”→“色相/饱和度”命令

核心技能2 ：色调与色彩的调整 —色相/饱和度 2. 核心技能与概念 核心技能2 ：色调与色彩的调整 —色相/饱和度 a）书法原图 b）去色效果 c）阈值效果 d）反相效果 a） b） c） d）

2. 核心技能与概念 核心技能3：图像混合方式的使用 Photoshop将混合模式分为6大类23种混合形式，即：组合模式（正常、溶解），加深混合模式（变暗、正片叠底、颜色加深、线性加深），减淡混合模式（变亮、滤色、颜色减淡、线性减淡），对比混合模式（叠加、柔光、强光、亮光、线性光、点光、实色混合），比较混合模式（差值、排除），色彩混合模式（色相、饱和度、颜色、亮度）。现进行简单介绍： 1）组合混合模式：组合模式中包含“正常和溶解”模式，它们需要配合使用不透明度才能产生一定的混合效果。 正常模式：在“正常”模式下调整上面图层的不透明度可以使当前图像与底层图像产生混合效果，在此模式下形成的合成色或者着色作品不会用到颜色的相减属性。 溶解模式：特点是配合调整不透明度可创建点状喷雾式的图像效果，不透明度越低，像素点越分散。

2. 核心技能与概念 核心技能3： 图像混合方式的使用 2）加深混合模式：加深混合模式可将当前图像与底层图像进行比较使底层图像变暗。 变暗模式：自动检测颜色信息，选择基色或混合色中较暗的作为结果色，其中比结果色亮的像素将被替换掉，就会露出背景图像的颜色，比结果色暗的像素将保持不变。 正片叠底：特点是可以使当前图像中的白色完全消失，另外，除白色以外的其它区域都会使底层图像变暗。无论是图层间的混合还是在图层样式中，正片叠底都是最常用的一种混合模式。 颜色加深：特点是可保留当前图像中的白色区域，并加强深色区域。 线性加深：线性加深模式与正片叠底模式的效果相似，但产生的对比效果更强烈，相当于正片叠底与颜色加深模式的组合。

2. 核心技能与概念 核心技能3： 图像混合方式的使用 3）变亮混合模式：在Photoshop中每一种加深模式都有一种完全相反的减淡模式相对应，减淡模式的特点是当前图像中的黑色将会消失，任何比黑色亮的区域都可能加亮底层图像。 变亮模式：特点是比较并显示当前图像比下面图像亮的区域，变亮模式与变暗模式产生的效果相反。 滤色模式：特点是可以使图像产生漂白的效果，滤色模式与正片叠底模式产生的效果相反。 颜色减淡模式：特点是可加亮底层的图像，同时使颜色变得更加饱和，由于对暗部区域的改变有限，因而可以保持较好的对比度。 线性减淡模式：它与滤色模式相似，但是可产生更加强烈的对比效果。

2. 核心技能与概念 4）对比混合模式：它综合了加深和减淡模式的特点，在进行混合时50%的灰色会完全消失，任何亮于50%灰色区域都可能加亮下面的图像，而暗于50%灰色的区域都可能使底层图像变暗，从而增加图像对比度。 叠加模式：特点是在为底层图像添加颜色时，可保持底层图像的高光和暗调。 柔光模式：柔光模式可产生比叠加模式或强光模式更为精细的效果。 强光模式：强光模式特点是可增加图像的对比度，它相当于正片叠底和滤色的组合。 亮光模式：特点是混合后的颜色更为饱和，可使图像产生一种明快感，它相当于颜色减淡和颜色加深的组合。 线性光：特点是可使图像产生更高的对比度效果，从而使更多区域变为黑色和白色，它相当于线性减淡和线性加深的组合。 点光：特点是可根据混合色替换颜色，主要用于制作特效，它相当于变亮与变暗模式的组合。 实色混合：特点是可增加颜色的饱和度，使图像产生色调分离的效果。

2. 核心技能与概念 核心技能3：图像混合方式的使用 5）比较混合模式：比较混合模式可比较当前图像与底层图像，然后将相同的区域显示为黑色，不同的区域显示为灰度层次或彩色。 差值模式：特点是当前图像中的白色区域会使图像产生反相的效果，而黑色区域则会越接近底层图像。 排除模式：排除模式可比差值模式产生更为柔和的效果。

2. 核心技能与概念 核心技能3：图像混合方式的使用 6）色彩混合模式：色彩的三要素是色相、饱和度和亮度，使用色彩混合模式合成图像时，PS会将三要素中的一种或两种应用在图像中。 色相模式：它适合于修改彩色图像的颜色，该模式可将当前图像的基本颜色应用到底层图像中，并保持底层图像的亮度和饱和度。 饱和度模式：饱和度模式特点是可使图像的某些区域变为黑白色，该模式可将当前图像的饱和度应用到底层图像中，并保持底层图像的亮度和色相。 颜色模式：特点是可将当前图像的色相和饱和度应用到底层图像中，并保持底层图像的亮度。 亮度模式：特点是可将当前图像的亮度应用于底层图像中，并保持底层图像的色相与饱和度。

2. 核心技能与概念 核心技能3： 图像混合方式的应用实例 a）正常模式显示效果 b）正常模式下的图层面板

2. 核心技能与概念 核心技能3：图像混合方式的应用实例 a）柔光模式显示效果 b）柔光模式下的图层面板

2. 核心技能与概念 核心技能3：图像混合方式的应用实例 配合不透明度24% a）柔光模式显示效果 b）柔光模式下的图层面板

3. 项目计划与决策 庄辉个人网站项目主要是通过网络媒体提高知名度。网站要反映出书法的文化气息，包括个人简介、国画作品、书法作品、联系方式四个主要栏目的超级连接。同时为满足浏览需要建议图像大小设置为宽：984像素，高：600像素，项目效果图计划采用褐色为背景，采用能反映中国传统书法的文房四宝体现网站特征，后期设计以古典音乐作为网页的背景体现艺术气息。

4. 任务实施 1）启动Photoshop 软件，然后执行“文件”→“新建”命令，创建“书法家庄辉个人网站主页效果图.psd”文件，宽度：984像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色。 2）在背景层中，从工具箱中选择“渐变工具”，取前景色为#b27516（十六进制的RGB表示法），背景色# c9ac78，接着在选项栏中选取渐变填充（对称渐变），拖动鼠标后形成渐变的背景图像（如图3-54中的背景）。 3）打开图片“书法1.jpg”，然后对其执行“图像”→“调整”→“反相”命令，最后将其拖入效果图，设置层名为“书法”，设置混合模式为：柔光，不透明度为24%（图3-67b所示），采用同样的方法将“国画.jpg”进行类似的操作，调整图层的大小与位置后的效果如图3-68所示。

4. 任务实施 4）打开图片“墨迹.jpg”，使用魔术棒工具，选择白色区域，然后执行“选择”→“反向”命令（快捷键<Ctrl+Shift+I>），选取墨迹将其复制并粘贴到效果图中：打开图片“毛笔.jpg”，同样的方法选取图中的毛笔图像，同样将其复制并粘贴到效果图中，调整好毛笔与墨迹的位置，墨迹与毛笔图层合成的效果如图3-69所示，将毛笔图层设置图层样式，设置投影效果增加立体感，具体参数是：不透明度：44%，角度：90，距离：8像素，大小：2像素，放入效果图中的效果如图3-70所示。

4. 任务实施 5）打开图片“无名山人.jpg”，使用魔术棒工具，选择黑色字体区域局部区域，例如选中“山”字，然后执行“选择”→“选取相似”命令选中“无名山人作品集”的题字的黑色区域（如图3-71所示），复制黑色区域，粘贴到效果图中，最后将“无名山人作品集”文字图层执行“描边”图层样式（颜色：白色，大小：3像素），效果如图3-72所示。

4. 任务实施 6）打开图片“庄辉原图.jpg”，由于照片曝光不足，所以照片的亮度不够，人物不够清晰，执行“图像”→“调整”→“色阶”命令，在“色阶”对话框中调亮照片，然后使用“多边型套索工具”将照片中人物选取出来（如图3-73所示），复制并粘贴到的效果图中，调整人物的大小与位置，最后设置人物的图层样式：外发光效果（不透明度50%，颜色：白色渐变为透明，扩展：14%，大小：21像素），如图3-74所示。

4. 任务实施 7）新建一个图层，选择“椭圆套索工具”，设置工具属性（样式：固定大小，宽度：10像素，高度10像素），然后在新图层中选择四个选区并对其填充为红色，分别给每个小红点设置外发光效果（与人物发光相似），最后添加“个人简介”、“书法作品”、“国画作品”、“联系方式”文字（字体：方正大黑简体，大小：18点，颜色：白色），并对文字添加描便效果，如图3-75所示。

4. 任务实施 8）打开“落款.psd”与“印章.jpg”照片分别将它们拷贝到效果图中，并将其大小进行调整，整个效果图完成，如图3-76所示。

5.项目检查与评估 学习目标 评价项目 掌握渐变工具的使用 能够熟练使用渐变工具与填充工具以及属性的设置等 掌握色阶的调整 能够理解直方图并通过色阶、对比度、颜色自动调整图像 能够手工调整色阶、掌握曲线调整的技巧 图像亮度与对比度的调整技巧 掌握色彩的调整 掌握图像色相与饱和度的调整技巧，掌握去色、阈值、替换颜色、反相等的技巧 掌握混合模式 图层混合模式的使用（理解常用图层混合模式的使用方法与技巧）

6.项目开发策略与技巧 ：混合模式强化训练

6.项目开发策略与技巧 ：混合模式强化训练

6.项目开发策略与技巧 ：混合模式强化训练

情境2：书法家庄辉个人网站建设 任务2：主页效果图设计与制作小结 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目策略与经验 网页制作与网站设计教程

谢谢大家