第章手机界面设计.pdfVIP

第9章手机UI界面设计

主讲人：

本例将介绍社交通信应用登录界面的设计思路及制作方法，在通讯网络

高速发展的当前，我们的生活进入了移动互联网时代，社交通讯类软件在文

字传输的基础上，逐渐被事实语音所替代。

本章概述

社交aPP登录界面★★★

锁屏界面★★★

手机来电界面★★★

要点难点

本章内容

9.1社交aPP登录界面设计）课时

7.2锁屏界面课时

7.3手机来电界面（）课时

跟我学

案例名称.1社交aPP登录界面设计

本实例讲解如何制作社交APP登录界面，效果如图所示。

作品描述

中国移动109:16

案例预览

9.1.1制作界面主体效果听我讲

本节制作社交通讯应用登录界面的背景效果，将使用【自然饱和度】来调整图层、

圆角矩形工具、图层样式和渐变工具等。

（1）在菜单栏中选择【文件】！【打开】命令，打开随书附带光盘中的CDROM|素材

Cha09|社交APP登录界面.psd素材文件，如图所示

（2）在【图层】面板中单击【创建新图层】按钮，新建【图层1】，如图所示。

09:16

P耀○H

不透明度：100%

层1填充：100%

自然饱和度1

背号

0

9.1.1↑制作界面主体效果听我讲

（3）在工具栏中单击前景色，并在打开的【拾色器（前景色）】面板中设置前景

色为【白色】，单击确定，关闭【拾色器（前景色）】面板。在工具栏中选择【圆角

矩形工具】，然后在工具属性栏中设置【选择工具模式】为【像素】，【半径】为10

像素，然后再视图中依照如图所示绘制一个白色圆角矩形。

（4）在图层面板中双击【图层1】图层，在弹出的【图层样式】面板中，选择【描

边】复选框，在【描边】选项面板中将【大小】设置为2像素，【位置】为【外部】，

单击【颜色】为右侧的色块，并在打开的【拾色器（描边颜色）】面板中将RGB参数值

分别设置为16、93、198，如图所示。

②素模式：正常不透明度：100%消余锡齿半径：10像素

录界面1psd@30.3%（图层2.RGB/8）×样式