《图形图像处理》项目实训06-《项目实训六 界面设计》实习指导

项目实训六：界面设计《图形图像处理》实习指导《公司办公系统登录界面制作》实习指导书公司办公系统登录界面制作本任务制作的是某公司办公系统的登录界面，整个界面以简洁、美观、大方、实用为主，没有太多的修饰性的元素，为体现立体感，整个界面渐变色的把握是设计重点。通过本任务的学习，要求掌握什么是界面设计、界面设计的原则及制作方法与技巧。1.熟练掌握界面设计与制作的过程与方法；2.了解什么是界面设计及界面设计的三大组成部分；3.能够准确把握界面风格，合理配色；4.掌握路径、调整图层、形状图层、图层样式在界面设计中的综合运用方法与技巧。1.新建文件。按Ctrl+N键，在弹出的“新建”对话框中设置参数，如图6-1所示。图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”图层。图6-8设置“渐变”参数图6-9添加“渐变”调整层后的效果7.选择“渐变填充3”图层蒙版，设置前景色为黑色，选择画笔工具，在工具选项栏上选择画笔200，在画布中左上角进行涂抹，以隐藏“渐变填充3”中多余的内容，并设置其填充值为87%，得到如图6-10所示的效果。图6-10调整图层蒙版后的效果8.复制“渐变填充3”图层，得到“渐变填充3副本”图层，选择移动工具，将其移到画布的右边，选择菜单“编辑|变换|水平翻转”命令，如图6-11所示。图6-11“渐变填充3副本”图层9.新建一个图层，得到“图层1”，选择“多边形套索工具”，在画布顶部分绘制如图6-12所示的选区，设置前景色为白色，按Alt+Delete键填充前景色，如图6-12所示。图6-12顶部形状10.选择“钢笔工具”，在工具选项栏上单击“路径”按钮，在画布中绘制如图6-13所示的路径。图6-13绘制路径11.在“图层”面板中单击“创建新组”按钮，重命名为“界面”；新建一个图层，重命名为“界面线条”，设置前景色为RGB（224，224，224），切换到“路径”面板，选择“画笔工具”，在工具选项栏中选择“画笔3”，单击“用画笔描边路径”按钮，然后单击“路径”调板中的空白区域隐藏路径，并设置“界面线条”层的不透明度值为60%，如图6-14所示，此时图层面板如图6-15所示。图6-14界面线条图6-15当前图层面板状态12.设置前景色为黑色，选择“圆角矩形工具”，在工具选项栏上单击“形状图层”按钮，半径设置为30，在画布中心偏上位置绘制如图6-16所示的形状，得到“形状1”图层。图6-16绘制“形状1”13.选择“形状1”矢量蒙版，选择“圆角矩形工具”，在工具选项栏中单击“形状图层”按钮和“重叠形状区域除外”按钮，在画布中圆角矩形的内部绘制图形，得到如图6-17所示的效果。图6-17绘制“形状1”14.单击“添加图层样式”按钮，在弹出菜单中选择“投影”命令，设置参数如图6-18所示；继续在对话框中选择“内阴影”、“描边”命令，分别设置参数如图6-19，其中内阴影颜色为RGB（254，253，253）、图6-20所示，其中描边颜色为RGB（191，189，189），效果如图6-21所示。图6-18“投影”参数设置图6-19“内阴影”参数设置图6-20“描边”参数设置图6-21添加图层样式后的效果15.在“图层”面板中，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为180度，色标从左到右依次为黑色和白色，位置为0%，93%，如图6-22所示，得到“渐变填充4”图层，按Ctrl+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-23所示的效果。图6-22设置“渐变”参数图6-23创建剪贴蒙版后的效果16.设置前景色为RGB（254，247，133），选择“圆角矩形工具”，在其工具选项栏上单击“形状图层”按钮，设置“半径”值为30，在画面中圆角矩形内绘制形状，如图6-24所示，得到“形状2”图层。图6-24“形状2”效果17.选择“形状2”图层，单击“添加图层样样”按钮，在弹出的菜单中选择“内发光”命令，设置参数如图6-25所示，其中内发光颜色值为RGB（115，115，23）；继续在对话框中选择“斜面和浮雕”命令，设置参数如图6-26所示，效果如图6-27所示。图6-25设置“内发光”参数图6-26设置“斜面和浮雕”参数图6-27添加“图层样式”后的效果18.选择“形状2”图层，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为0度，色标从左到右依次为RGB（126，125，50）和RGB（251，253，108），位置为0%，33%，如图6-28所示，得到“渐变填充5”图层，按Ctrl+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-29所示的效果。图6-28设置“渐变”参数图6-29创建剪贴蒙版后的效果19.设置前景色为RGB（41，227，48），选择“椭圆工具”，在其工具选项栏中单击“形状图层”按钮，按住Shift键，在画布中圆角矩形右下角位置绘制正圆，如图6-30所示，得到“形状3”图层。图6-30绘制“形状3”20.选择“形状3”图层，单击“添加图层样样”按钮，在弹出的菜单中选择“内发光”命令，设置参数如图6-31所示，其中内发光颜色值为RGB（248，254，250）；继续在对话框中选择“斜面和浮雕”命令，设置参数如图6-32所示，其中阴影颜色为RGB（2，153，9），效果如图6-33所示。图6-31设置“内发光”参数图6-32设置“斜面和浮雕”参数图6-33添加“图层样式”后的效果21.新建一个图层，得到“图层3”，设置前景色为RGB（41，227，48），选择“画笔工具”，在其工具选项栏中选择画笔27，在画布中正圆的右下角位置涂抹，设置“图层3”的混合模式为“亮光”，效果如图6-34所示。图6-34“图层3”效果22.新建一个图层，得到“图层4”，设置前景色为白色，选择“画笔工具”，在其工具选项栏中选择画笔27，在画布中正圆的左上角位置涂抹，效果如图6-35所示。图6-35“图层4”效果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-38设置“斜面和浮雕”参数图6-39“描边”参数设置图6-40添加图层样式后的效果25.选择“形状4”图层，单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为180度，色标从左到右依次为黑色和白色，位置为66%，93%，如图6-41所示，得到“渐变填充6”图层，按Ctrl+Alt+G键，执行“创建剪贴蒙版”命令，得到图6-42所示的效果。图6-41设置“渐变”参数图6-42创建剪贴蒙版后的效果26.新建一个图层，得到“图层5”，选择“矩形选框工具”，按住Shift键，在画布中圆角矩形内绘制如图6-43所示的选区。图6-43绘制矩形选区27.设置前景色为白色，按Alt+Delete键填充前景色，如图6-44所示。图6-44填充白色后的效果28.选择“图层5”，单击“添加图层样式”按钮，在弹出的菜单中选择“投影”命令，设置参数如图6-45所示；继续在对话框中选择“内发光”命令，设置参数如图6-46所示，其中发光颜色为RGB（39，39，5），效果如图6-47所示。图6-45设置“投影”参数图6-46设置“内发光”参数图6-47添加“图层样式”后的效果29.复制“图层5”，得到“图层5副本”，选择“移动工具”将其向下移动到如图6-48所示的位置。图6-48复制图层530.设置前景色为白色，选择“圆角矩形工具”，在其工具选项栏中单击“形状图层”按钮，“半径”设置为20，在画布中黄色矩形内绘制如图6-49所示的矩形，得到“形状5”。图6-49绘制“形状5”31.设置“形状5”图层的混合模式为“柔光”，不透明度值为90%；单击“添加图层蒙版”按钮，为“形状5”图层添加图层蒙版，设置前景色为黑色，选择“画笔工具”，在其工具选项栏中设置适当的画笔大小及不透明度，在图层蒙版中涂抹，效果如图6-50所示。图6-50“形状5”最终效果32.设置前景色为RGB（170，170，68），选择“矩形选框工具”，在画布中圆角矩形内绘制矩形选区，并填充前景色