第五章Android系统的界面设计.ppt

第五章：Android系统的界面设计（八） 5.4.2 超强立体感的界面设计 设计思维解析 Android系统开放式设计，具有立体化的设计风格。观察按钮的形状，以仿真式设计为基准，构思界面中的元素。通过图层样式，图层的叠加来制作出立体、逼真的界面元素。 设计要点展示 层次感：通过渐变、内阴影、投影等表现方式，增强界面元素的层次感，使其与显示中的实物外观类似，展示出逼真的视觉效果。 逼真的视觉 增加按钮的厚度，制作出立体的视觉效果，并且模拟出真实按钮在按下、弹起时的外观变化，真实地再现按钮的形状。 制作步骤详解 在Photoshop中创建一个新的文档，使用“矩形工具”绘制一个矩形，作为界面的背景，使用“内发光”、“内阴影”和“投影”图层样式对其进行修饰，并在相应的选项卡中设置参数，在图像窗口中可以看到编辑的效果。 使用“矩形工具”绘制出一个矩形，利用“内发光”和“内阴影”、“投影”图层样式对其进行修饰，在相应的选项卡中设置参数。 选择工具箱中的“圆角矩形工具”，绘制出按钮的背景，接着使用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式对绘制的圆角矩形进行修饰，在相应的选项卡中设置参数，在图像窗口中可以看到编辑后的效果。 使用“钢笔工具”绘制出设置图标，设置其填充色为白色，无描边色，接着使用“投影”和“渐变叠加”图层样式对其进行修饰，在相应的选项卡中设置参数，将图标放在适当的位置，在图像窗口中可以看到编辑的效果。 使用“钢笔工具”绘制出按钮的背景，接着双击该图层，在打开的“图层模式”对话框中勾选“内发光”、“渐变叠加”、“内阴影”和“投影”复选框，并在相应的选项卡中对各个选项的参数进行设置，在图像窗口中可以看到编辑的效果。 使用“横排文字工具”输入“返回”字样，打开“字符”面板对文字的属性进行设置，再利用“投影”图层样式对文字进行修饰。 使用“横排文字工具”输入所需的其他的文字，打开“字符”面板堆文字的属性进行设置，再使用与“返回”字样相同的“投影”图层样式对文字进行修饰，最后创建图层组，对编辑后的图层进行管理和分类。 使用07.jpg素材添加到图层窗口中，适当调整其大小，接着使用“圆角矩形工具”绘制形状，并将绘制的形状转换为选区，再为“人像”图层添加上图层蒙版，控制图像的显示，在图像窗口中可以看到编辑的效果。 使用“横排文字工具”输入所需的文字，接着打开“字符”面板堆文字的属性进行设置，在使用“投影”图层样式对文字进行修饰，在图像窗口中可以看到文字编辑的效果。 使用“圆角矩形工具”绘制出所需的形状，接着利用“内阴影”和“投影”样式对圆角矩形进行修饰，在相应的选项卡中设置参数，调整该图层的“填充”选项的参数为15%。 选择工具箱中的“圆角矩形工具”，在其选项栏中设置参数，接着绘制出所需的形状，使用“内阴影”、“渐变叠加”和“投影”图层样式对形状进行修饰，并在相应选项卡中对参数进行设置，在图像窗口中可以看到编辑的效果。 使用“圆角矩形工具”绘制出圆角矩形，利用“内发光”、“投影”、“描边”和“内阴影”图层样式对其形状进行修饰，并在相应的选项卡中设置各个选项的参数。 选择工具箱中的“画笔工具”，在该工具的选项栏中设置参数，调整前景色为白色，新建图层，命名为“光”，使用“画笔工具”绘制出按钮上的光泽。 选择工具箱中的“横排文字工具”，在按钮上单击，输入所需的文字，打开“字符”面板堆文字的属性进行设置，并利用“投影”图层样式对文字进行修饰。 参考前面的绘制按钮的方法和设置，绘制出界面上所需的其他按钮，放在界面适当的位置，并创建图层组，对绘制后的图层进行管理。 对前面绘制的界面背景，导航栏等元素进行复制，接着对导航栏中的文字进行更改，接着对导航栏中的文字进行更改，删除不需要的按钮，开始设置界面的制作。 选择工具箱中的“矩形工具”，绘制出所需的矩形，使用“内发光”、“内阴影”和“投影”图层样式对其进行修饰，并在相应的选项卡中设置参数，在图像窗口中将绘制的矩形放在适当的位置。 使用“矩形工具”绘制矩形，接着设置该图层的“填充”选项的参数为0%，使用“内阴影”和“投影”图层样式对绘制的矩形进行修饰。使用“矩形工具”绘制出所需的线条，分别使用“投影”和“内阴影”图层样式对线条进行修饰，放在矩形的上下两个位置。 选中工具箱中的“圆角矩形工具”，绘制出所需的形状，设置图层的“填充”选项的参数为10%，利用“内发光”、“内阴影”和“投影”图层样式对圆角矩形进行修饰，并在相应的选项卡中设置参数，在图像窗口中可以看到编辑的效果。 选中“椭圆工具”绘制一个圆形，使用“内阴影”、“渐变叠加”和“投影”图层样式对圆形进行修饰，并在相应的选项卡中设置参数，最后把圆形放在圆角矩形的左侧。 使用“椭圆矩形”绘制出所需的图形，使用“斜面