5.3.733的横向widget框架设计.ppt

* 第五章：Android系统的界面设计 5.3.4 3*3的widget框架设计 素材：02.jpg源文件：3#215;3的Widget框架设计.psd设计关键词：立体、渐变、阴影、Android系统软件功能提要：矩形工具、钢笔工具、椭圆工具、横盘文字工具，以及多种图层样式的应用 在Photoshop中打开素材02.jpg素材，接着使用“矩形工具”绘制出所需的形状，设置“不透明度”选项的参数为70%，使用“内发光”、“内阴影”、“投影”和“渐变叠加”图层样式对绘制的矩形进行修饰。 使用“椭圆工具”绘制圆形，设置其“不透明度”选项的参数为45%，利用“内阴影”和“渐变叠加”图层样式对其进行修饰。 再次绘制一个圆形，使用“内发光”和“内阴影”图层样式进行修饰，将其放在界面适当的位置。 使用“椭圆工具”绘制一个圆形，填充上适当的颜色，接着使用“钢笔工具”，在其选项栏中选择“排除重叠形状”命令，绘制出所需的形状。使用“渐变叠加”和“描边”图层样式对绘制的形状进行修饰，并在相应的选项卡中对其参数进行设置。 使用“椭圆工具”绘制出所需的圆形，放在适当的位置，接着使用“图案叠加”、“外发光”、“斜面浮雕”、“内阴影”和“投影”对图层样式对其进行修饰，并在相应的选项卡中对参数进行设置，在图像窗口中可以看到编辑后的效果。 使用“横排文字工具”输入所需的文字，接着打开“字符”面板对文字的字体、字号和字间距等进行设置，在使用“渐变叠加”图层样式对文字进行修饰，并在相应的选项卡中设置参数，在图像窗口中可以看到绘制的结果。 使用“矩形工具”制作出长条，放置适当位置，如下图 新建一个图层，在之前制作好的格子里制作出渐变效果，使用“渐变叠加”图层样式。 使用“横排文字工具”添加其他的文字，并绘制出所需的形状作为图标，放在界面适当的位置，在图像窗口中可以看到本例最终的编辑效果。 5.3.5 2*2的widget框架设计 素材：03.jpg 源文件：2*2的widget框架设计 设计关键词：线性、阴影、Android系统 软件功能提要：椭圆工具、矩形工具、横排文字工具、“内发光/内阴影/渐变叠加/投影”图层样式 制作步骤详解 在Photoshop中打开素材03.jpg，接着使用“矩形工具”绘制一个矩形，设置其“不透明度”选项的参数为70%，使用“内发光”、“内阴影”、“渐变叠加”和“投影”图层样式对其进行修饰，并在相应的选项卡中设置参数。 使用“矩形工具”绘制一个矩形，填充上黑色，无描边色，再设置该图层的“不透明度”选项参数为15%。 选中工具箱中的“横排文字工具”，在适当位置上单击，输入所需的文字，打开“字符”面板对文字的属性进行设置。 使用“椭圆工具”绘制出需要的图标，接着为输入的文字和绘制的圆环应用相同的“投影”图层样式，并在相应的选项卡中设置参数，在图像窗口中可以看到编辑的效果。 使用“横排文字工具”输入所需的文字，打开“字符”面板堆文字的属性进行设置，接着利用“钢笔工具”绘制出天气的图标，填充上白色，无描边色，最后使用相同设置的“投影”图层样式对天气图标和文字进行修饰，在图像窗口中可以看到编辑的效果。 使用“横排文字工具”输入文字，再绘制出天气图标，放在适当的位置，并利用“投影”图层样式进行修饰。利用这个设置和制作方法，为界面添加上其余的信息，通过图层组对图层进行管理和分类，在图像窗口可以看到最终编辑效果。 5.3.6 4*1的加长widget框架设计 素材：04.jpg 源文件：4*1的加长widget框架设计 设计关键词：立体、层次、Android系统 软件功能提要：多种图层样式、钢笔工具、照片滤镜、色彩平衡 在Photoshop中创建一个新的合成，导入04.jpg素材。将背景图层填充为淡黄色铺底，把04.jpg素材放在上面，降“低不透明度”为70%，添加“镜头滤镜”将其效果调至如下。 使用“圆角矩形工具”绘制出所需的形状，接着调整“填充”选项的参数为0%，使用“渐变叠加”和“描边”图层样式对其进行修饰，并在相应选项卡中对参数进行设置。 使用“圆角矩形工具”绘制出所需的形状，设置“填充”选项的参数为0%，利用“投影”和“颜色叠加”图层样式对其进行修饰，在图像窗口中可以看到编辑的效果。 使用“圆角矩形工具”绘制出按钮的形状，接着使用“渐变叠加”、“斜面浮雕”、“颜色叠加”图层样式对绘制的形状进行修饰。对绘制的按钮进行复制，适当调整图层中按钮的位置。 使用“钢笔工具”绘制出所需的循环图标，填充上适当的颜色，并使用“外发光”图层样式对其进行修饰，在相应的选项卡中对参数进行设置。用相同方式，制作完剩下的所有图标。完成后效果如下。 完成图标绘制后，使用“色彩平衡”、“曲线”等调色命令，进行最后一步调色处理，效果如下。 5