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

《图形图像处理》实习指导

项目实训六：界面设计

公司办公系统登录界面制作

《公司办公系统登录界面制作》实习指导书

本任务制作的是某公司办公系统的登录界面，整个界面以简洁、美观、大方、实用为

主，没有太多的修饰性的元素，为体现立体感，整个界面渐变色的把握是设计重点。通过

本任务的学习，要求掌握什么是界面设计、界面设计的原则及制作方法与技巧。

技能目标淤

1.熟练掌握界面设L与制作的过程与方法：

2.了解什么是界面设计及界面设计的三大组成部分：

3.能够准确把握界面风格，合理配色；

4.掌握路径、调整图层、形状图层、图层样式在界面设计中的综合运用方法与技巧。

制作流程於

1.新建文件。按Ctrl+N键，在弹出的“新建”对话框中设置参数，如图6-1所示。

图6-1新建文件

2.在“图层”面板中单击“创建新组”按钮，重命名为“背景”；选择“背景”组,

在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变”

命令，在弹出的“渐变填充”*1话框中设置线性渐变色，从左到右依次为RGB(211,211,

212)和RGB(255,255,255),色标位置依次为18%,100%；不透明度色标从左到右的不

透明度值依次为100%,0%,位置依次为0%,30%,如图6-2所示，效果如图6-3所示，同

时得到“渐变填充1”图层。

渐爻®m器--°KB

ssaaxn：XR*

VM(H):100•%

&。&

不盘硼UK。)：o•%tiB(c)：30%

枝色;I|Ttea：%H«(O}

图6-2设置“渐变”参数图6-3添加“渐变”调整层后的效果

3.选择“矩形选框工具”，在画布中心偏上位置绘制如图6-4所示的矩形选区。

图6-4绘制矩形选区

4.在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择

“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，从左到右依次为RGB

(201,202,202)和RGB(255,255,255),位置为86%,100%；不透明度色标数值从左

到右依次为100乐05位置为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),位置为8断,

100%；不透明度色标数值从左到右依次为100%,0%,位置为65%,100$,如图6-8所示,

效果如图6-9所示，同时得到“渐变境充3”图层。

图6-8设置“渐变”参数图6-9添加“渐变”调整层后的效果

7.选择“渐变填充3”图层蒙版，设置前景色为黑色，选择画笔工具，在工具选项栏

上选择画笔200,在画布中左上角进行涂抹，以隐藏“渐变填充3”中多余的内容，并设置

其填充值为87%,得到如图6T0所示的效果。

图6T0调整图层蒙版后的效果

8.复制“渐变填充3”图层，得到“渐变填充3副本”图层，选择移动工具，将其移

到画布的右边，选择菜单“编辑|变换I水平翻转”命令，如图671所示。

S6-11”渐变填充3副本”图层

9.新建一个图层，得到“图层I”，选择“多边形套索工具”，在画布顶部分绘制如

图6T2所示的选区，设置前景色为白色，按Alt+Delete键填充前景色，如图6T2所示。

图6-12顶部形状

10.选择“钢笔工具”，在工具选项栏上单击“路径”按钮，在画布中绘制如图6T3

所示的路径。

图6-13绘制路径

11.在“图层”面板中单击“创建新组”按钮，重命名为“界面”；新建一个图层,

重命名为“界面线条”，设置前景色为RGB(224,224,224),切换到“路径”面板，选

择“画笔工具”，在工具选项栏中选择“画笔3”，单云“用画笔描边路径”按钮，然后

单击“路径”调板中的空白区域隐藏路径，并设置“界面线条”层的不透明度值为60$,

如图674所示,此时图层面板如图675所示。

图展^_____________2

正常V不透明度：60%»

锁定：口/+自填充：100%»

修匚|期景3"

A.O©.-I3一^^

图6T4界面线条图675当前图层面板状态

12.设置前景色为黑色，选择“圆角矩形工具”，在工具选项栏上单击“形状图层”

按钮，半径设置为30,在画布中心偏上位置绘制如图6T6所示的形状，得到“形状1”图

层。

图6-16绘制“形状1”

13.选择“形状1”矢量蒙版，选择“圆角矩形工具”，在工具选项栏中单击“形状

图层”按钮和“重叠形状区域除外”按钮，在画布中圆角矩形的内部绘制图形，得到如图

6T7所示的效果。

图6T7绘制“形状1”

14.单击“添加图层样式”按钮，在弹出菜单中选择“投影”命令，设置参数如图6-

18所示；继续在对话框中选择“内阴影”、“描边”命令，分别设置参数如图679,其中

内阴影颜色为RGB(254,253,253)、图6-20所示，其中描边颜色为RGB(191,189,

189),效果如图6-21所示。

到2旺式

tan

a4

提台tix的：正意口

*«口式”.

不晌度9）：B~~l%

SW：0H®(v)

*G^”贸@使烟£**桃5

mw<o：

大小⑤；

&n

和川/[[旃恒tw

SrftM：o

图6-18“投影”参数设置图619“内阴影”参数设置

图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所示。

内发光

姑村

—9~体K6内仪蠢V

不喇魔9上f>«]%ittl/式”・・*«口式”.

匚内局同方^口干•〜

谯於)--------------|0\%画侬(V)

口外发光学皮防IU*

•C1T1方由⑥上OT

日内发先■

大4S

软化TX

口依理聪

・成m

mean](：・)□使用全配8)

7g«

CESfttc田M联口0I琳屿第

：时

嬴无檀式值上配3P

不解那19：，

不MftlG；

女作为ltu・■氏如U1W[»□*

"!!碗U值■位魂U值

图6-31设置''内发光"参数图632设置“斜面和浮雕”参数

图6-33添加“图层样式”后的效果

21.新建一个图层，得到“图层3”，设置前景色为RGB(41,227,48),选择“画

笔工具”，在其工具选项栏中选择画笔27,在画布中正圆的右下角位置涂抹，设置“图层

3”的混合模式为“亮光”，效果如图6-34所示。

图6-34“图层3”效果

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-38设置“斜面和浮雕”参数

图6-39“描边”参数设置图6To添加图层样式后的效果

25.选择“形状4”图层，单击“创建新的填充或调整图层”按钮，在弹出的菜单中

选择“渐变”命令，在弹出的“渐变填充”对话框中设置线性渐变色，“角度”值为180

度，色标从左到右依次为黑色和白色，位置为66%,93%,如图6-41所示，得到“渐变填

充6”图层，按Ctrl+AlUG键,执行“创建剪贴蒙版”命令,得到图6-42所示的效果。

图6-41设置“渐变”参数图6-42创建剪贴蒙版后的效果

26.新建一个图层，得到“图层5”，选择“矩形选框工具"，按住Shift键，在画

布中圆角矩形内绘制如图6-43所示的选区。

图6-43绘制矩形选区

28.选择“图层5”，单击“添加图层样式”按钮，在弹出的菜单中选择“投影”命

令，设置参数如图6-45所示；继续在对话框中选择“内发光”命令，设置参数如图6-46

所示，其中发光颜色为RGB(39,39,5),效果如图6-47所示。

到2旺式

c内局同

。外发光

□的发儿

口依If

匚心

匚it色am

CESfttc

cfto

图6-45设置“投影”参数图6-46设置“内发光”参数

图6-47添加“图层样式”后的效果

29.复制“图层5”，得到“图层5副本”，选择“移动工具”将其向下移动到如图

6-48所示的位置。

图6-48复制图层5

30.设置前景色为白色，选择“圆角矩形工具”，在其工具选项栏中单击“形状图层”

按钮，“半径”设置为23在画布中黄色矩形内绘制如图6-49所示的矩形，得到“形状

5”。

图6-49绘制“形状5”

31.设置“形状5”图层的混合模式为“柔光”，不透明度值为90乐单击“添加图层

蒙版”按钮，为“形状5”图层添加图层蒙版，设置前景色为黑色，选择“画笔工具”，

在其工具选项栏中设置适当的画笔大小及不透明度，在图层蒙版中涂抹，效果如图6-5()所

不O

图6-50“形状5”最终效果

3