《图形图像处理》项目实训06-《项目实训六 界面设计》实习指导.docx
图形图像处理实习指导项目实训六：界面设计公司办公系统登录界面制作公司办公系统登录界面制作实习指导书任务名称联公司办公系统登录界面制作任务要求联本任务制作的是某公司办公系统的登录界面，整个界面以简洁、美观、大方、实用为主，没有太多的修饰性的元素，为体现立体感，整个界面渐变色的把握是设计重点。通过本任务的学习，要求掌握什么是界面设计、界面设计的原则及制作方法与技巧。技能目标1 .熟练掌握界面设计与制作的过程与方法；2 ,了解什么是界面设计及界面设计的三大组成部分；3 .能够准确把握界面风格，合理配色；4 .掌握路径、调整图层、形状图层、图层样式在界面设计中的综合运用方法与技巧。1 .新建文件。按CtrI+N键，在弹出的“新建”对话框中设置参数，如图67所示。图6-1新建文件2 .在“图层”面板中单击“创建新组”按钮，重命名为“背景”：选择“背景”组，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB(211,211,212)和RGB(255,255,255),色标位置依次为18%,100%；不透明度色标从左到右的不透明度值依次为100%，0%,位置依次为0%,30%,如图6-2所示，效果如图6-3所示，同时得到“渐变填充1”图层。图6-2设置“渐变”参数图6-3添加“渐变”调整层后的效果3 .选择“矩形选框工具”，在画布中心偏上位置绘制如图6-4所示的矩形选区。图6-4绘制矩形选区4 .在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB(201,202,202)和RGB(255,255,255),位置为86%,100%；不透明度色标数值从左到右依次为100%,0%,位置为65%,100%,如图6-5所示，效果如图6-6所示，同时得到“渐变填充2”图层。图6-5设置“渐变”参数图6-6添加“渐变”调整层后的效果5 .选择“矩形选框工具”，在画布左上方位置绘制如图6-7所示的矩形选区。图6-7绘制矩形选区6 .在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，勾选“反向”复选框；渐变色标从左到右依次为RGB(201,202,202)和RGB(255,255,255),位置为86%,100%；不透明度色标数值从左到右依次为100%,0乐位置为65%,100%,如图6-8所示，效果如图6-9所示，同时得到“渐变填充3”图层。上选择画笔200,在画布中左上角进行涂抹，以隐藏“渐变填充3”中多余的内容，并设置其填充值为87%,得到如图6-10所示的效果。图6-10调整图层蒙版后的效果8 .复制“渐变填充3”图层，得到“渐变填充3副本”图层，选择移动工具，将其移到画布的右边，选择菜单“编辑I变换I水平翻转”命令，如图6-11所示。图6T1”渐变填充3副本”图层9 .新建一个图层，得到“图层1”,选择“多边形套索工具”，在画布顶部分绘制如图6-12所示的选区，设置前景色为白色，按Alt+Delete键填充前景色，如图6-12所示。图6-12顶部形状10 .选择“钢笔工具”，在工具选项栏上单击“路径”按钮，在画布中绘制如图673所示的路径。11 .在“图层”面板中单击“创建新组”按钮，重命名为“界面”；新建一个图层，重命名为“界面线条”，设置前景色为RGB(224,224,224),切换到“路径”面板，选择“画笔工具”，在工具选项栏中选择“画笔3”，单击“用画笔描边路径”按钮，然后单击“路径”调板中的空白区域隐藏路径，并设置“界面线条”层的不透明度值为60%,如图6-14所示，此时图层面板如图6-15所示。图6-14界面线条图6-15当前图层面板状态12 .设置前景色为黑色，选择“圆角矩形工具”，在工具选项栏上单击“形状图层”按钮，半径设置为30,在画布中心偏上位置绘制如图6T6所示的形状，得到“形状1”图层。图6T6绘制“形状1”13 .选择“形状1”矢量蒙版，选择“圆角矩形工具”，在工具选项栏中单击“形状图层”按钮和“重叠形状区域除外”按钮，在画布中圆角矩形的内部绘制图形，得到如图6T7所示的效果。14 .单击“添加图层样式”按钮，在弹出菜单中选择“投影”命令，设置参数如图6-18所示：继续在对话框中选择“内阴影”、“描边”命令，分别设置参数如图6T9,其中内阴影颜色为RGB(254,253,253)、图6-20所示，其中描边颜色为RGB(191,189,189),效果如图6-21所示。图6T8 “投影”参数设置图6-20“描边”参数设置15 .在“图层”面板中，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为180度,色标从左到右依次为黑色和白色，位置为0乐93%,如图6-22所示，得到“渐变填充4”图层，按CtrI+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-23所示的效果。渐交扇谈器名制H):自定M(W)sa():再R *图6-22设置“渐变”参数图6-23创建剪贴蒙版后的效果16 .设置前景色为RGB(254,247,133),选择“圆角矩形工具”，在其工具选项栏上单击“形状图层”按钮，设置“半径”值为30,在画面中圆角矩形内绘制形状，如图6-24所示，得到“形状2”图层。图6-24"形状2”效果17 .选择“形状2”图层，单击“添加图层样样”按钮，在弹出的菜单中选择“内发光”命令，设置参数如图6-25所示，其中内发光颜色值为RGB(Il5,115,23)；继续在对话框中选择“斜面和浮雕”命令，设置参数如图6-26所示，效果如图6-27所示。图6-25设置“内发光”参数图6-26设置“斜面和浮雕”参数18 .选择“形状2”图层，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为O度,色标从左到右依次为RGB(126,125,50)和RGB(251,253,108),位置为0乐33%,如图6-28所示,得到“渐变填充5”图层，按CtrI+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-29所示的效果。图6-28设置“渐变”参数图6-29创建剪贴蒙版后的效果19 .设置前景色为RGB(41,227,48),选择“椭圆工具”，在其工具选项栏中单击“形状图层”按钮，按住Shift键，在画布中圆角矩形右下角位置绘制正圆，如图6-30所示，得到“形状3”图层。20 .选择“形状3”图层，单击“添加图层样样”按钮，在弹出的菜单中选择“内发光”命令，设置参数如图6-31所示,其中内发光颜色值为RGB(248,254,250)；继续在对话框中选择“斜面和浮雕”命令，设置参数如图6-32所示，其中阴影颜色为RGB(2,153,9),效果如图6-33所示。图6-31设置“内发光”参数图6-32设置“斜面和浮雕”参数笔工具”，在其工具选项栏中选择画笔27,在画布中正圆的右下角位置涂抹，设置“图层3”的混合模式为“亮光”，效果如图6-34所示。22 .新建一个图层，得到“图层4”，设置前景色为白色，选择“画笔工具”，在其工具选项栏中选择画笔27,在画布中正圆的左上角位置涂抹，效果如图6-35所示。23 .确认前景色保持为白色，选择“椭圆工具”，在其工具选项栏上单击“形状图层”按钮，在画面中绿色正圆外绘制正圆，得到“形状4”图层；选择“形状4”矢量蒙版，选择“椭圆工具”，在其工具选项栏上单击“形状图层”按钮和“重叠形状区域除外”按钮，将光标移到形状4中心点上，按住Shfit+Alt键绘制正圆，效果如图6-36所示。匚图6-36“形状4”效果24 .选择“形状4”图层，单击“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，设置参数，如图6-37所示，其中阴影颜色值为RGB(117,117,117)；继续在对话框中选择“斜面和浮雕”、“描边”命令，分别设置参数如图6-38、图6-39所示，其中描边颜色值为RGB(191,187,187),效果如图6-40所示。图6-37设置“投影”参数图6-39 “描边”参数设置图6-38设置“斜面和浮雕”参数图6T0添加图层样式后的效果25 .选择“形状4”图层，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为180度，色标从左到右依次为黑色和白色，位置为66%,93%,如图6-41所示，得到“渐变填充6”图层，按Clrl+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-42所示的效果。杂交透屋Qv'<u''IBKS舱:lg(cM MM(O)图6-41设置“渐变”参数图642创建剪贴蒙版后的效果26 .新建一个图层，得到“图层5”,选择“矩形选框工具"，按住Shift键，在画布中圆角矩形内绘制如图6-43所示的选区。图6-43绘制矩形选区28.选择“图层5”，单击“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，设置参数如图6-45所示；继续在对话框中选择“内发光”命令，设置参数如图6-46所示，其中发光颜色为RGB(39,39,5),效果如图6-47所示。图6-45设置“投影”参数图676设置“内发光”参数图6-47添加“图层样式”后的效果29.复制“图层5”,得到“图层5副本”，选择“移动工具”将其向下移动到如图6-48所示的位置。图6-48复制图层530 .设置前景色为白色，选择“圆角矩形工具”，在其工具选项栏中单击“形状图层”按钮，“半径”设置为20,在画布中黄色矩形内绘制如图6-49所示的矩形，得到“形状5”o31 .设置“形状5”图层的混合模式为“柔光”，不透明度值为90%；单击“添加图层蒙版”按钮，为“形状5”图层添加图层蒙版，设置前景色为黑色，选择“画笔工具”，在其工具选项栏中设置适当的画笔大小及不透明度，在图层蒙版中涂抹，效果如图6-50所/Jso图6-50“形状5”最终效果32 .设置前景色为RGB(170,170,68),选择“矩形选框工具”，在画布中圆角矩形内绘制矩形选区，并填充前景色，效果如图6-51所示。图6-51绘制矩形图案33 .选择“横排文字工具”，设置字体为rtAdobeGaramondProw,字号为56.67,在画布中圆角矩形内分别输入文字“G”、"L”、"S”和“J"，如图6-52所示。图6-52输入文字i34 .用同样的方法，设置适当的字体、字号、颜色输入其他文字，如图6-53所示。电求超凡价值就是我的成功之遒.我从不相信IiR谕的切就是全部，我们的K火L不止如此,我的生意刚刚起步我会拥I超凡价值的号物我自要我的电脑特超所值.用段Yj约成""找找f见<)0凡的品班W服分,我要我的电脑带给我更&“-V.图6-53添加其他文字35 .公司办公系统登录界面制作完成，效果如图6-54所示。II图6-54“公司办公系统登录界面”效果36 .最终图层面板，如图6-55所示。骸I穿透V不透朗度：100%,A当名码户入果击用进需00JCj界面*司1QQ-8.0。三eA界面g»CJ胃累一9IIH景Q«.OO,-Jal三图6-55最终图层面板
