项目三 绘制与修饰工具的使用电子课件 网页图片与移动界面（WebApp)的UI设计.ppt

《项目三 绘制与修饰工具的使用电子课件 网页图片与移动界面（WebApp)的UI设计.ppt》由会员分享，可在线阅读，更多相关《项目三 绘制与修饰工具的使用电子课件 网页图片与移动界面（WebApp)的UI设计.ppt（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目三绘制与修饰工具的使用电子课件网页图片与移动界面（WebApp)的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计项目三目三 绘制与修制与修饰工具的使用工具的使用演讲人：XXX时间：2020.X网网页图片与移片与移动界面界面(Web/App)的的UI设计网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计u理解画笔工具、理解画笔工具、铅笔工具、填充工具、笔工具、填充工具、颜色色替替换工具、修工具、修图工具以及修工具以及修补等工具的作用，等工具的作用，以及其使用；以及其使用；u使用使用绘制工具和修制工

2、具和修饰工具完成漂亮画笔的制工具完成漂亮画笔的制作与使用、花作与使用、花纹背景背景图案的案的设计以及以及QQ卡通卡通图案的案的设计与制作，以与制作，以进一步提高学生一步提高学生对常常用用绘制与修制与修饰工具的使用。工具的使用。教学目教学目标 网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.1.1任任务引入引入要对图像进行有效绘制和修改效果，首先需熟练掌握图像的一系列绘图工具，包括画笔工具、铅笔工具、图章图案工具、橡皮擦工具以及修补工具等的正确使用。从而能够快捷、精确的选择图像中对应部分，以提高图像绘图和修改的质量，实现图像的不同效果。本任务主要利

3、用画笔工具及其他绘图工具实现形成画笔的创建，以及利用其漂亮的效果实现画笔的使用，从而实现漂亮的图案效果,同时在知识分析过程中引入简洁的实例，以增强对部分知识的理解。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.1.2知知识引入引入1.画笔工具画笔工具(1)作用能够绘制出边缘柔和的线条，效果像用毛笔绘制的线条，即使用前景色绘制带有艺术效果的笔触或线条。不仅能够用来绘制图画，还可以用来修改通道和蒙版。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.1 绘图工具工

4、具(2)画笔选项网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(3)画笔的设置 执行“窗口画笔”，即可调出“画笔”面板，即可选择“画笔设置”选项卡，以实现对画笔的设置。(4)画笔的创建3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.铅笔工具笔工具使用“铅笔”工具可以模拟铅笔的效果进行绘画。启用“铅笔”工具，有以下两种方法：单击工具箱中的“铅笔”工具。反复按ShifB组合键。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设

5、计3.颜色替色替换工具工具“顔色替换”工具可以对图像的颜色进行改变。启用“颜色替换”工具，有以下两种方法：单击工具箱中的“颜色替换”工具。反复按ShifB组合键。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计4.橡皮擦的使用橡皮擦的使用(1)橡皮擦工具用来擦除图像中的像素，擦除过的区域可以是背景色也可以是透明区域，这要取决于被擦除的图层。单击工具箱中的“橡皮擦”工具。反复按ShifE组合键。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(2)背景色橡皮擦工具背景色

6、橡皮擦工具 用来擦除图像指定的颜色，擦除后将会变成透明效果，所不同的是，如果擦除的是背景层，那么被擦除后背景层将变成普通图层“图层0”。启用“背景橡皮擦”工具，选项栏状态的设置如图3-13所示；其设置项有：3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(3)魔魔术橡皮擦工具橡皮擦工具 与“背景色橡皮擦工具”类似，都是用来擦除背景的，“魔术橡皮擦”工具能擦除颜色相近的像素。使用“魔术橡皮擦工具”时，只需在要擦除的颜色上单击即可。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI

7、设计设计5.修修图工具的使用工具的使用(1)仿制仿制图章工具章工具将一幅图像全部复制到另一幅图像中 选择“仿制图章工具”，按住Alt键在图片中单击得到复制图像的源点，在新建的文件中拖动鼠标。复制图像的部分内容到自身图像中 选择“仿制图章工具”，按住Alt键的同时在桃心上单击鼠标，得到复制图像的源点，在其他位置拖动鼠标，实现复制效果。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(2)图案案图章工具章工具“图案图章工具”可以将自定义的图案复制到图像中，也可以直接使用Photoshop中定义好的图案。例用“图案图章工具”实现将图片“

8、礼花广场”的烟花复制到一个新图片中；3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计6.修修补工具的使用工具的使用(1)污点修复画笔工具“污点修复画笔工具”用来修复图像中的斑点。(2)修复画笔工具“修复画笔工具”用来修复图像中的杂质、污点和褶皱等，修复后的图像不会改变原图像的光照、纹理等效果，让其效果达到自然和逼真。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(3)修修补工具工具“修补工具”也可用来修复图像中的杂质和污点，只是使用方法与“修复画笔”工具稍有不同。(

9、4)红眼工具“红眼工具”工具主要用来修复照片中的红眼。3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.1.3 任任务实现-漂亮画笔的漂亮画笔的创建及建及应用用1.任任务分析分析利用画笔工具，以及其画笔载入、预设功能、画笔面板的选项实现画笔的定义，利用定义出来的特定效果，再利用移动工具等制作图案的漂亮效果，最终效果如图所示；3.1 绘图工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.任任务操作操作(1)文件打开(2)画笔的制作(3)画笔的使用3.1 绘图工具工具网网页图页图

10、片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.2.1任任务引入引入在工具箱中不在工具箱中不仅有有强大的大的绘图工具，同工具，同时还有有对图案案进行修行修饰功能的修功能的修饰工具，工具，能能对图案一些特殊效果的案一些特殊效果的设置：置：颜色色渐变、颜色减淡和加深以有填充定色减淡和加深以有填充定义好的好的图案。案。本任本任务主要利用主要利用渐变工具、工具、图案定案定义、填充命令等功能、填充命令等功能实现对图案的定案的定义，分，分别QQ图案的各个案的各个图形，最形，最终形成形成QQ卡通的卡通的设计与与实现；3.2 修修饰工具工具网网页图页图片与移片与移动动界面界

11、面(Web/App)(Web/App)的的UIUI设计设计3.2.2知知识引入引入1.渐变工具的使用工具的使用使用“渐变”工具可以在图像或图层中形成一种色彩渐变的图像效果。启用“渐变”工具，有以下两种方法：单击工具箱中的“渐变”工具；反复按ShiftG组合键；3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计渐变颜色的色的设置置3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.油漆桶工具的使用油漆桶工具的使用使用“油漆桶”工具可以在图像或选区中对指定色差范围内的色

12、彩区域进行色彩或图案填充。启用“油漆桶”工具，有以下两种方法：单击工具箱中的“油漆桶”工具；反复按ShiftG组合键；3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.减淡减淡/加深和海加深和海绵工具的使用工具的使用(1)减淡工具“减淡”工具用于使图像的亮度提高。(2)加深工具“加深”工具用于使图像的亮度降低。3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计(3)“海海绵”工具工具“海绵”工具用于增加或减少图像的色彩饱和度。使用“海缩”工具：启用“海绵”工具，在

13、“海绵”工具属性栏中进行设定。在图像中单击并按住鼠标左键，拖曳鼠标使图像产生增加色彩饱和度的效果。3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计4填充命令的使用填充命令的使用主要对选定区域进行颜色的填充和修改；3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计3.2.3 任任务实现-QQ卡通卡通图案的案的绘制制1.任任务分析分析利用选区、绘图工具、修饰工具以及“变形”命令进行QQ卡通背景，QQ妹和QQ仔图案各元素图画的制作，如图3-34所示；主要通过绘制底纹图案Q

14、Q妹身体设计QQ妹脚、嘴、眼睛的绘制绘制QQ仔的快捷制作玫瑰花及桃心的设计QQ卡通图案。3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计2.任任务实现(1)文档创建(2)背景的制作(3)QQ妹身体(4)QQ妹脚、嘴、眼睛的绘制(5)绘制QQ仔(6)花及桃心的绘制至此QQ卡通图案的设计与制作完成。3.2 修修饰工具工具网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计要求：要求：使用画笔工具、绘制工具、填充工具绘制小草图形，使用横排文字工具添加文字，并将相关元素有效组合到相应的位置，最终效果如图3-58所示。课后练习课后练习 时尚装饰图案的设计与制作时尚装饰图案的设计与制作网网页图页图片与移片与移动动界面界面(Web/App)(Web/App)的的UIUI设计设计感谢各位演讲人：XXX