《Photoshop CC图像处理》课件——第9章 手机UI界面设计.pptxVIP

第9章手机UI界面设计主讲人：

本章概述本例将介绍社交通信应用登录界面的设计思路及制作方法，在通讯网络高速发展的当前，我们的生活进入了移动互联网时代，社交通讯类软件在文字传输的基础上，逐渐被事实语音所替代。

要点难点社交APP登录界面★★★锁屏界面★★★手机来电界面★★★

本章内容9.1社交APP登录界面设计（）课时9.2锁屏界面（）课时9.3手机来电界面（）课时

跟我学案例名称作品描述案例预览9.1社交APP登录界面设计本实例讲解如何制作社交APP登录界面，效果如图所示。

9.1.1制作界面主体效果本节制作社交通讯应用登录界面的背景效果，将使用【自然饱和度】来调整图层、圆角矩形工具、图层样式和渐变工具等。（1）在菜单栏中选择【文件】|【打开】命令，打开随书附带光盘中的CDROM|素材|Cha09|社交APP登录界面.psd素材文件，如图所示。（2）在【图层】面板中单击【创建新图层】按钮，新建【图层1】，如图所示。听我讲

9.1.1制作界面主体效果（3）在工具栏中单击前景色，并在打开的【拾色器（前景色）】面板中设置前景色为【白色】，单击确定，关闭【拾色器（前景色）】面板。在工具栏中选择【圆角矩形工具】，然后在工具属性栏中设置【选择工具模式】为【像素】，【半径】为10像素，然后再视图中依照如图所示绘制一个白色圆角矩形。（4）在图层面板中双击【图层1】图层，在弹出的【图层样式】面板中，选择【描边】复选框，在【描边】选项面板中将【大小】设置为2像素，【位置】为【外部】，单击【颜色】为右侧的色块，并在打开的【拾色器（描边颜色）】面板中将RGB参数值分别设置为16、93、198，如图所示。听我讲

9.1.1制作界面主体效果（5）选择【投影】复选框并进入【投影】选项面板，选择【混合模式】右侧的【设置阴影颜色】色块，并在打开的【拾色器（投影颜色）】面板中将RGB值设置为：11、91、159，单击【确定】按钮，关闭拾色器，如图所示。（6）完成后的效果所示。听我讲

9.1.2制作表单控件接下来将制作APP登录界面中的表单控件效果。（1）新建【图层2】图层，然后再工具箱中选择【圆角矩形工具】，并将【选择工具模式】设置为【路径】，【半径】设置为【10像素】，然后依照图所示绘制图形。（2）按下键盘上的Ctrl+Enter键，将当前图形转换为选区，如图所示。听我讲

9.1.2制作表单控件（3）在工具箱中选择【渐变工具】，然后再属性栏中选择【点按可编辑渐变】色块，并在打开的【渐变编辑器】中双击左侧的色标，在打开的【拾色器（色标颜色）】面板中将RGB值设置为：75、160、231，单击【确定】关闭拾色器。鼠标双击右侧的色标，在打开的【拾色器（色标颜色）】面板中将RGB值设置为：16、90、153，单击【确定】按钮，为选区填充渐变后的效果如图所示。（4）确定当前图层处于选择状态，然后在菜单栏中选择【选择】【变换选区】命令，然后依照图所示对处于编辑状态的选区进行调整。听我讲

9.1.2制作表单控件（5）调整完毕后，按下键盘上的Enter键确认，按下键盘上的D键，恢复工具箱中前景色与背景色的默认设置，然后按下键盘上的Ctrl+Delete键，将背景色指定给当前选区，按下Ctrl+D键，取消选区，如图所示。（6）按下键盘上的Ctrl键，再图层面板中单击【图层2】左侧的缩略图，如图所示。听我讲

9.1.2制作表单控件（7）新建【图层3】图层，然后按下键盘上的Ctrl+Del键，将当前选区填充为白色，效果如图所示。（8）按下键盘上的Ctrl+D键，取消选区，然后在图层面板中双击选择【图层3】图层在打开的【图层样式】对话框中选择【描边】复选框，并进入【描边】选项面板，然后将【大小】设置为【2像素】，将【描边颜色】的RGB值设置为192、192、192，如图所示。听我讲

9.1.2制作表单控件（9）选择【内阴影】复选框，并进入【内阴影】选项面板，然后将【阴影颜色】的RGB值设置为213、213、213，【距离】设置为【1像素】，【大小】为【1像素】，效果如图所示。（10）最后单击【确定】按钮，完成设置图层样式，然后将其调整至如图所示的位置处。听我讲

9.1.3