天津博奥教育首页>培训课程学习辅助资料>天津UI设计培训学习辅助教程>UI设计师培训UI学习技巧状态栏图标设计
注重实战经验传授,打造设计精英
UI设计培训天津博奥教育全新五合一教学模式线上下同时授课
1.十多年教学经验,由设计行业专家授课
2.UI设计采用WORKSHOP授课方式,更好吸收教学内容
3.有问题可以随时提出,不积压问题及时解决问题
4.UI设计培训学习期满后可推荐就业
5.在工作中遇到技术或者设计上的问题给予免费指导
6.UI设计培训课程可免费重修
UI设计师培训_平面设计培训精品设计课程推荐
高端平面设计培训课程
UI设计师培训一对一
天津平面设计软件培训
天津平面设计C4D培训
UI设计师培训UI学习技巧状态栏图标设计_天津博奥教育UI设计培训学习辅助资料
本文章摘自天津UI设计培训全程实例教学小班精讲十多年教学经验的天津博奥教育官网www.boaoit.com
UI设计师培训UI学习技巧状态栏图标设计,UI设计在使用过程中会遇到很多问题,为了让大家更好的使用UI设计软件,天津博奥教育培训为大家提供一些UI设计使用心得,UI学习技巧状态栏图标设计_天津博奥教育UI设计培训学习辅助资料
UI设计师培训UI学习技巧状态栏图标设计_天津博奥教育UI设计培训学习
UI学习技巧-状态栏图标设计:状态栏图标用于应用程序在状态栏的信息。正如“提供特定精度图标集”所描述 ,需要创建适用于低、中和高三种精度屏幕的特定图标集。这是确保应用程序在多种设备上能正常显示和安装 。参考“设计师建议”章节的建议如何创建多精度图标集。最后应不包括颜色背景导出透明的PNG图标。创建图标需要AdobePhotoshop文件模板在“图标模板包”里。
警:Android2.3 以前版本在装叹了图标的样式和尺寸上有所不同,提供所有Android版本支持的开发者必须注意:1.Android2.3及更高版本的状栏图标放于drawable-hdpi-v9,drawable-mdpi-v9,和drawable-ldpi-v9三个文件中。2.之前版本的状态栏图标放于drawable-hdpi,drawable-mdp ,和drawable-ldpi三个文件中
Android2.3 及更高版本:一些描述在 Android2.3 及更高版本如何设计状态栏图标;大小和位置:状态栏图标要使用简单的图像和框架,这些图标将缩放在最终资源所在的位置。
状态栏图标的宽度可能会有一点点的不同。为了指出图标的推荐尺寸,每个例子都包括两种不同的矩形指导框:1.红色的框代表资源的完整尺寸;2.蓝色的框代表图标的实际尺寸。图标框的垂直方向的尺寸比实际资源框略小,为了让多种图标形状保持视觉权重的一致性。
高精度屏幕(hdpi)的状态栏图标大小:
完整尺寸:24wx38hpx(首选,宽度会有所变化);
图标尺寸:24wx24hpx 首选,宽度会有所变化;
中精度屏幕(mdpi的状态栏图标大小:
完整尺寸:16w x25hpx(首选,宽度会有所变化)
图标尺寸: 16w x 16h px (首选,宽度会有所变化);
低精度屏幕( ldpi )的状态栏图标大小:
完整尺寸:12wx19hpx(首选,宽度会有所变化);
图标尺寸:12w x 12h px (首选,宽度会有所变化)
样式、色调和特效:状态栏图标是平的、亚光的和正视图的。注所有的像素尺寸都是以中精度表示的,因此其他精度的需要适当缩放1.渐变填充:90°从 #828282 到 #919191 2. 内 阴 影 #ffffff ,10%不透明度 角度90 °距离 1px大小0px
3.内部内容:内部内容通过减法减去外部形状,内部完全透明像素组成。
该做什么,不该做什么:以下是一些创建状态栏图标时的一些 “ 该做和不该做 ” 的例子。
图标示例如下展示在 Android平台中标准的高精度的状态栏图标。
警:由于这些资源在各个版本中可能有所不同,所以不要把这些资源与用于Android平台资源的设计指导中。如果想用任何图标或者内置绘制资源,你可以把这些图标存储备份或者在应用程序资源中绘制,然后从应用程序代码中引用本地副本。这样一来,即使系统的副本更改了仍能保持图标外观一致。注意以下格子不是完整的。
Android2.2 及更早版本:接下来介绍如何设计Android2.2 及更早版本的状态栏图标;结构1.圆角必须始终运用于状态栏图标的基本形状。2.所有的特定尺寸基于25x25px的画板尺寸中;3.并有2px的安全边框;4.状态栏图标可以在安全边框范围内重叠左右两边,但是顶部和底部不能重叠。5.最后应以带透明度的PNG文件输出;6.创建状态栏图标所需要的ps模板在“图标模板包”里
发光、特效和阴影:状态栏图标有略微凸出,高对比度且图片正视图以便能在小尺寸中更清晰的表示;1.前部:使用色调的颜色渐变填充;2.内斜面:深度100%、方向向下大小0px 角度90 ° 高度30 °;高光:白色75%不透明度;阴影:黑色75%不透明度;3.细节:白色;4.不可用细节:色调中的灰色渐变;内斜面:平滑、 深度 1% 、方向 向下、大小 0px 、角度 117 ° 、高 度42 °、高光白色70%不透明度、无阴影
色调:只有一小部分手机的状态栏图标使用全彩,其他状态栏图标都使用纯色。
步骤:1.用ps创建一个25x25px透明背景的基本形状,留出安全边界,保持上部和下部都留有 2px 空间
2. 增加圆角如图3 。3.增加高光、特效和阴影如图4; 4. 导出 25x25 的带透明度图标的 PNG 文件
UI设计学习技巧Tab图标怎么设计 UI设计师培训UI学习技巧状态栏图标设计
相关培训:天津市平面设计培训、天津市平面设计培训就业班、天津UI设计培训、天津PS培训、天津C4D培训、天津AI培训、天津犀牛Rhino培训、 天津Solidworks培训、SolidWorks培训全科班、天津素描培训、天津CAD培训、天津室内设计培训、天津建筑Rhino参数化设计培训、天津办公软件培训、天津各所大学到天津博奥教育的乘车路线
天津博奥教育地址:天津市南开区鞍山西道百脑汇科技大厦23楼2307室。
培训咨询电话:022-58697923,022-58697932,18222233399。
天津博奥教育网址:www.boaoit.com
乘车路线:45、50、609、662、678、661、829、851、867、879(卧龙里站下)
640、687、859、705、829、849、847(世通大厦站下)