《网页美工设计》教案-第二章 网页图形图像设计与编辑第一节 网页图片设计制作

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第二部分技能提升篇第二章网页图形图像设计与编辑标题第一节网页图片设计制作第一讲网页图片设计制作（上）课时2课时教学目标教学内容与过程一、版面图片配色调整打开photoshop软件，导入素材1、对背景配色，定调为暖色调。将前景色RGB设置为132、121、112，对背景色进行填充。2、左边图片配色。添加图层样式—颜色叠加—将颜色调整为橙色，再按住ALT键复制颜色叠加的图层样式给花朵和文字。3、文字的颜色，为了突出色彩，将颜色调整为黄色。4、底部图文。选择图像调整—色相饱和度，移动色相滑块，调整为橙色，统一色调。按住ALT键，鼠标放在两个图层中间，使得色相饱和度只对底部图文修改颜色。二、主体人物图片处理对案例中主体人物的图片处理。将彩色变黑白照片很常见，那如何将黑白变成彩色照片，需要一些技巧。这个案例中主要使用的是“照片滤镜”，照片滤镜可以理解在相机镜头前面加彩色滤镜，以便调整通过镜头传输的色彩平衡和色温，使胶片曝光。使用加温滤镜（81）使图像变暖（变黄），使用冷却滤镜（82）使图像变冷（变蓝）。分步骤完成图片着色。第一步：整体定基调。选择调整图层—照片滤镜—橙色45%，将照片基调定为暖色调。第二步：突出五官分别对1、眼睛2、眼珠3、眼白4、嘴唇4个部分进行处理先使用快速选择工具选中眼睛，选择图层新建—通过拷贝的图层将眼睛复制到新的图层上，将图层的混合模式改为叠加，使眼睛变得深邃、立体感增强。使用磁性套索工具选中眼珠，选择调整图层—照片滤镜—深褐色100%，将图层的混合模式改为模式柔光，使眼珠变得清澈透明。使用套索工具选中眼白的部分，为了体现眼睛的层次感，建议分两次对眼白进行处理，选择调整图层—照片滤镜—冷却滤镜（80）浓度44%，另一只浓度34%。再使用快速选择工具选中嘴唇，选择调整图层—照片滤镜—深红100%，也可根据喜好调配颜色。做到这里，完成了五官的处理。第三步：脸妆分别添加眼影、腮红、光线三种效果。先选择调整图层—将色相饱和度设置为-21、-9，将色相饱和度图层的蒙版填充为黑色，因为黑色代表隐藏，用白色画笔涂抹眼部区域，完成眼影效果。如果色彩不够鲜艳，可以复制图层，加大对比度。选择调整图层—将色相饱和度-56、34，13，同眼影制作方法类似，填充黑色蒙版，涂抹脸部区域，将整体不透明度调整为37%左右，完成腮红制作。另外，为了突出脸部光感效果，可以通过通道进行处理。观察通道，对其中颜色对比最强烈的通道进行复制，图像调整色阶167-208，让黑白对比更强烈，载入选区，回到主通道，新建图层，填充白色。加蒙版，隐藏弱化对比。第四步：衣饰分别对衣服和头饰进行着色。使用快速选择选中衣服区域，填充大红色，将图层的混合模式改为饱和度。使用快速选择选中头饰，分别填充蓝色，叠加，紫色，叠加，黄色，叠加。这样，从整体定基调、突出五官、衣饰、脸妆四个步骤完成主体人物处理。修改主体图片后，将它放进界面中，调整其大小，放在合适的位置。教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第二部分技能提升篇第二章网页图形图像设计与编辑标题第一节网页图片设计制作第二讲网页图片设计制作（中）课时2课时教学目标教学内容与过程人们在浏览网站的时候，容易被图片吸引。合适、相关的图片，不仅仅是一种美观性，更重要就是传递出一种视觉性的用户体验。所以网页设计对于图片视觉效果提出了更高的要求。以“徽州文化旅游开发有限公司”网页界面为例。徽州文化是一个极具地方特色的区域文化，为了凸显徽州建筑的特质，把主题图片处理成一幅青山绿水间的天然水墨画、或者手绘的素描效果。一、天然水墨画效果制作打开Photoshop软件，导入素材，将素材复制3个图层，建议大家处理图像时，最好备份原始图层。将复制的图层小眼睛图标关闭，设为不可见。1、对图层1副本进行处理，选择图像调整去色命令，去除颜色。选择图像调整—亮度（亮度为78，对比度为8），选择滤镜—杂色—中间值（将半径设置为20像素），滤镜—模糊——高斯模糊（半径设置为15像素），打开滤镜-滤镜库—艺术效果—调色刀(描边大小25，描边细节3，软化度0)第1图层共做了5个小步骤，分别是去色、亮度对比度、中间值、高斯模糊、调色。2、将第2个图层小眼睛图标打开，图层混合模式调整为正片叠底，选择图像调整—亮度（亮度为100、对比度为100），选择滤镜—杂色—中间值（将半径设置为5像素），选择滤镜-滤镜库——艺术效果—水彩（画笔细节10、阴影强度1、纹理3），选择调整曲线命令，提高画面的亮度。第2图层也做了5个小步骤，正片叠底、亮度对比度、中间值、水彩、曲线3、将最上层的图层小眼睛图标打开，混合模式调整为叠加，选择滤镜—杂色—中间值（将半径设置为2像素），选择调整曲线命令，提高画面的亮度。4、将前景色设置为淡绿色（183、255、90），按住CTRL,载入素材的选区，新建图层，填充后，图层混合模式调整为颜色，不透明度为40%左右。5、打开文字素材，利用通道选取文字。我们先来了解关于通道的原理。通道的分类：包括颜色通道、Alpha通道。(专色通道、临时通道)使用较多的是前两个通道。（1）颜色通道：用来存储颜色信息。RGB颜色模式：颜色越深，表示这种颜色所占的比例越少。举个图例，大家观察一下，颜色越浅，表示这种颜色所占的比例越多。例如红色的字体，在红色通道中是白色，绿色字体，在绿色通道中是白色，而蓝色字体在蓝色通道中是白色。这是RGB模式。那么CMYK颜色模式，正好相反，颜色越深，表示这种颜色所占的比例越多。颜色越浅，表示这种颜色所占的比例越少。（2）Alpha通道：用来存储选区和修改选区。白色代表选区，黑色代表非选择范围，灰色是半透明效果。请大家注意的是，在Alpha通道中只有黑色、白色或者是灰色，不存在彩色信息。再回到原来的案例中，先观察对比较强烈的通道，再进行复制，选择图像—调整色阶，让黑白对比更为明显。选择图像—调整—反相，载入选区，回到主通道。将抠出的字体放在主图上。CTRL+T键控制字体的大小，放在合适的位置，这样，我们完成了水墨效果的制作。二、手绘素描图的制作1、将素材去除颜色，选择图像调整去色命令，并复制新图层。2、选择图像—调整—反相命令3、将图层的混合模式修改为颜色减淡。4、选择滤镜—其他—最小值（将半径设置为2像素）5、双击图层面板，在弹出的图层样式对话框中，按住ALT键，将下一个图层的小滑块向右拖移。如果需要加大对比度，可以同时选中两个图层，按住CTRL+ALT+E键,将图层的混合模式调整为正片叠底，再用不同明度控制画面效果。教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第二章网页图形图像设计与编辑标题第一节网页图片设计制作第三讲网页图片设计制作（下）课时2课时教学目标教学内容与过程本次网页设计的主题为珠宝首饰，这类网站布局排版的样式较简洁，包括LOGO、导航、图片、珠宝展示以及页脚的自然结合，为用户提供高价值的产品和服务的同时，还充分展示品牌的个性化形象。另外，当珠宝公司有新产品或新活动时，可以在网站上增加相关的专题图片页面，吸引更多用户的兴趣。珠宝网站的设计风格一定要符合高端大气的要求，特别是在颜色的搭配方面，因为它可以直接决定页面的视觉效果。一般珠宝网站的配色不超过三种颜色，否则就容易显得复杂庸俗。为了凸显产品高贵典雅的特点，今天的案例我选择的是沉稳的

冷色调。打开Photoshop软件，导入素材，一、设置背景色：选择矩形选框工具，用淡蓝到深蓝的渐变色填充，打开渐变编辑器，编辑渐变条的颜色，淡蓝色数值为（1、120、172）深蓝色数值为（0、56、90）新建图层，填充径向渐变。二、展示栏CTRL+R打开标尺，先从横向和纵向各拖出1条参考线。15、6.8，1、选择矩形选框工具，鼠标放在中心点的位置，按住ALT键，从中心绘制矩形选框，新建图层填充白色，将图层不透明度修改为60%2、选择矩形选框工具，新建图层，填充蓝到白到蓝的渐变（120、172、196）（153、198、219）（120、172、196）按住shift填充对称渐变。3、新建图层，选择画笔工具，前景色设为深蓝色（1、63、96）将笔头设置为1像素，硬度100%，按住shift绘制一条直线。选择滤镜-模糊-动感模糊，拖动小滑块，通过控制距离的大小，控制模糊大小。并按住ALT键，复制该图层。4、新建图层，选择画笔工具，同上面的方法一样，画笔大小设置为3像素5、再把相关文字和素材图片放进网页中，请大家在做的时候，注意下排版设计。6、制作展示栏的投影效果，选择椭圆选框工具，将羽化值设置为8，提醒大家，羽化值必须在绘制椭圆选框工具前设置，否则在绘制之后设置，羽化值没有效果。将选框填充深蓝色。添加蒙版，按住CTRL键，载入展示栏的选区，把蒙版填充黑色，隐藏上面的部分。三、制作月球1、选择椭圆选框工具，同时按住ALT键+shift键，从中心绘制正圆，新建图层，填充白色。2、给图层添加样式，选择渐变叠加，设置深蓝到蓝色的渐变色（0、26、52）（50、130、250）将混合模式调整为：线性光，角度调整为-1573、添加图层样式，内发光，大小924、制作月亮的光晕效果，选择图层样式外发光，颜色设置为蓝色，不透明度40%，扩展为0，大小90四、其他素材1、将花素材移动到画面中，放在适合的位置，缩