篇一:icon制作
第7个月:
Week01-week02:
目标:两套图标:剪影一套(20个)和主题图标一套(30个)
软件:第一周AI/第二周PS
实现方式:剪影图标:通过AI实现,主题图标:通过PS实现
01day:
1、 图标分类:用途和设计形式
按照用途分类,以下三类:
功能图标:在应用程序内部,强调某个功能的,例如:搜索、定位
启动图标:开启应用程序的入口,可以当做应用程序的LOGO设计
装饰图标:页面内部用途装饰,一般出现在启动页面中,加载页面中
按照设计形式分类:
剪影:点线面,针对功能图标,注意视觉等大关系,交互行为(线面转换/变色等)
设计形式:闭合路径/非闭合路径
也包含启动图标
扁平:启动图标,强调色块关系,大小、明暗、饱和度,长投影角度45
拟真:启动图标,例如锤子,尽量模拟现实生活的物体,注意光影关系
写实:启动图标,注意:真实材质及光影应用
手绘:细分游戏icon
3D
功能:剪影、扁平(较少)
启动:剪影、扁平、拟真,
装饰:剪影、扁平、拟真,写实
订阅号:小金狮的UI分享、豆腐丝
2、 AI软件:
基础设置:单位:像素,增效工具和暂存盘:改空间较大的盘符,
新建文件:色彩模式:RGB,单位:像素,使新建对象与像素网格对齐:不勾选
剪影图标:线构成:描边粗细不小于2像素
图形:方法1:图形变形:线面转换,闭合路径转非闭合路径
方法2:通过关键词:定位——能联想到哪些图形:例如:飞机、旗子、地图和 大头针、雷达等
线性图标:要图形的整体性,不要看起来过散
文字:无衬线字体:中文——微软雅黑、黑体。英文——Arial
复合路径:把没有任何联系的图形整合在一起,形成一个独立图形,独立图形的特征 拥有共同的填充颜色和描边颜色
偏移路径:在图形的外/内形成一个边距相等的新形状。
3、 练习作业:任选5个功能图标(关键词自定):以一变5。
02day:
1、AI当中的蒙版两种:
一种:剪切蒙版,
一种:图层蒙版,位置在透明度面板中
2、AI中的“组”形式:
编组、剪切蒙版、复合路径、混合对象:编辑方式——双击进入组内部
3、应用程序的启动图标:
尺寸:1024X1024px,
4、 晶格化工具:
画笔调整的快捷键:alt:调整画笔大小
alt+shift:正圆形调整画笔大小 /45°斜方向拖拽
5、自由变换工具:快捷键E:Ctrl:单个角点透视,ctrl+alt:平行四边形透视
Ctrl+alt+shift:等腰梯形透视
6、扁平化图标:
设计设计细节:注意配色:色彩可以用到5-8种,(色相)
长投影:投影角度尽量45°
立体效果:立体的厚度一致
折叠:也可以理解为折纸效果,纸张的对折效果
一般水平/垂直方向90°,也有45 °
03day:
1、图标设计三大原则:
识别性:强调认知度,图形选择:尽量选择生活/周边常接触的物体构成图形
类似上传/下载:尽量使用相接近的图形,或能表示动作的图形——向上箭头或 向下箭头
注意:主题选择——尽量图形接近功能表示
一致性:剪影图标构成形式相同,扁平/拟真风格构图形式一致+材质+光影都要相同,还 包含颜色饱和度、明暗接近
兼容性:移动端、网页端,
移动端:IOS(苹果)、安卓、WindowsPhone
IOS:圆角矩形,1024X1024
安卓:不受圆角矩形限制,并且在图标中有透明像素,1024X1024第三方图标:选取和主题相接近的元素(图形、色彩)做组合或者为第三方图标重新设计
目标规划:周五下午:确认主题(主题图标)
2、吸管工具:
RGB三个颜色同时调整:快捷键shift,当色值在255时无效。
3、扁平化图标细分:
纯平面:
折叠/折纸:折纸又称低面建模
长投影
轻质感
微立体
周四:下午:剪影图标绘制
周五:下午:每位同学确定主题,并且资料包(主题风格素材图、配色图、现有图标素材图片)
周日、周一、周二:PS阶段——涉及到内容PS矢量形状、扁平风格、拟真风格(木纹、玻璃等)
周三、周四:主题风格图标实现
周五:点评
AI :
1、缩放描边效果:可以理解为全局效果,针对的是整个文件的形状对象。
2、对齐像素网格:1、在新建文件中:此效果是全局效果
2、在变换面板中:此效果针对某个形状对象
3、如何关闭全局“对齐像素网格效果”?
在“变换”
与像素网格对齐
Week02:
本周安排:
周日、周一、周二:PS阶段——涉及到内容PS矢量形状、扁平风格、拟真风格(木纹、玻璃等)
周三、周四:主题风格图标实现
周五:点评
01day:
PS工具: 面板右侧下拉菜单中——使新建对象
1、三种图层形式:智能对象图层
位图图层
形状图层
2、形状的修剪:必须在同一图层,合并形状图层ctrl+E
形状图层只能有一个颜色,一个描边
修剪的对象,要有明确选择
形状的编辑:小黑:移动形状
小白:修改形状及锚点
小黑和移动工具的区别:小黑只能移动形状
移动工具移动的是整个图层
3、首选项中:参考线、网格和切片:网格线100像素,子网格100
案例1:
旋转复制:Ctrl+alt+T,输入角度,两次回车,结果:Ctrl+alt+shift+T
案例2:
Ctrl+J:复制形状并且创建新的形状图层(原形状还在)
Ctrl+shift+J:将当前形状从该图层中拆分出来,并且创建新的形状图层(原形状无)
填充:是形状的固有色
不透明度:是形状或形状+图层样式的,是可控整个图层的透明度的
剪切蒙版使用时:需要观察下层图层中是否有3个叠加:颜色、渐变、图案,如果有上述内容就会导致剪切蒙版的对象,无法显示
剪切蒙版失效解决办法:
1:用图层蒙版
2: 三个叠加方式直接使用形状本身的颜色、渐变、图案
形状外轮廓模糊“羽化”:窗口——属性——羽化
案例3:
02day:
案例1:拟真——日历
ICON中的文字当做形状对待:文字图层右键转为形状(注:文字字体不能是仿粗体样式)
仿粗体样式
执行透视效果,特别是未合并的形状,必须要先合并形状组件
路径线隐藏的快捷键:Ctrl+shift+H
渐变颜色的移动:需要打开渐变填充才可以移动
案例2:拟真——玻璃音符
步骤:由外向内,由下向上
篇二:修改mtz主题图标的方法
miui系统的mtz主题和安卓软件一样,也就是是一个压缩包,不过修改这玩意不需要签名啥的。
将自己喜欢的mtz主题后缀名修改为zip,然后用解压工具解压
得到一些文件
其中wallpaper是主题自带的锁屏和桌面壁纸,而preview是主题预览、
而图标都在icons文件里,将icons重命名,在后面加个zip后缀用解压缩工具解压
可以得到一堆图标,不同主题自带的图标数量也不同,拿我修改的主题为例,里面只有很少的几个图标
将你所要替换的png图标重命名后放进去,然后重新打包成zip压缩包,再删除zip后缀名即可
然后把所有文件用压缩工具打包成zip,然后改后缀名mtz,放入手机即可
ps:图标文件名参考手机data、system、customized-icons-1目录中的图标名称
如果想要程序背景透明的可以删除icons目录里所有以icon开头图标,然后再打包为zip 效果图如下
如果不嫌麻烦的童鞋可以用手机修改,我试过,就是打包之类的麻烦点
用re和zip压缩工具即可
注意打包一定要zip的,我听说rar的会出问题,没试过,反正打包zip正常
篇三:小米主题制作教程(完整版)
一、
MIUI主题定义
首先,我们手机的UI是由很多部分组成的,如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子,上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房,MIUI是在这之上的一个简装,自定义主题就是你自己给房子做的装修。 MIUI提供主题自定义功能,其实就相当于帮你请了一个工程队,你可以用从众多装修方案(主题包)中选择自己喜欢的效果,最后交给工程队实施。而装修方案可大可小,大至全屋翻新,小到只换一盏灯。目前MIUI会自带两个主题包,达人们也可以设计自己的主题包,大家就可以借用达人们共享出来的设计。(引用foxtail,很经典的说明)
二、MIUI主
题模板内文件说明
首先,咱们要需要一个模板来对应说明, 解压后你会发现它并不是我们熟悉的后缀,而是一个MTZ后缀的文件,不用急咱们把它重命名为XX.zip即:将原来的.mtz后缀改为.zip,然后解压即可显现原型如下图:
具备以上几个文件就可以做一个简单的MIUI主题了,下面我们对以上目录做一个中文说明:
description.xml(主题配置文件包括:主题作者、版本号信息icons (桌面图标,所有被改动的桌面图标都会放在这个文件夹内lockscreen (锁屏样式preview (应用主题时预览图wallpaper(存放锁屏、桌面壁纸com.android.launcher(启动器
)
) ) ) ) )
注:如果您在在线主题内下载主题,重命名为.zip解压后您会发现很多目录都成了无法识别的文件?例如文件夹icons变成了icons文件无法打开,简单处理方法:重命名为XX.zip解压后就能看到里面文件了。
三、MIUI
主题包具体制作说明
1.描述文件---description.xml制作说明
<?xml
<MIUI-Theme> < title>
version="1.0" 蓝
调
透
encoding="UTF-8"?> 明
</title>
< author>hfy166</author> < version>V3.0</version> < uiVersion>1</uiVersion> </MIUI-Theme>
step2.将以上内容中绿色文字修改为自己想要填写的文字。 <title>主题名字(你可以
取一个符合合适的主题名填写在此处)</title> <designer>设计者名字(如果你是设计者可以填写你的名字)</designer> < author>制作者名字(即为mtz主题包打包作者名)</author> <version>此主题的版本号</version> < uiVersion>1(此项默认填为1即可)</uiVersion>
step3.修改完后,将文本保存并关闭然后双击打开description.xml测试是否成功,如成功会出现如下显示:
至
此
咱
们
的
配
置
文
件
就
完
成
了
。
注:以上关于 <uiVersion>位置 使用方法详见:这里(简单制作主题时候可以直接填写1即可)
2.wallpaper
文件夹使用说明
wallpaper文件夹用于存放锁屏状态下壁纸和桌面壁纸,通常包含以下三个命名的图片:
default_wallpaper.jpg : 桌面壁纸,较佳图片尺寸:960X854(可其他尺寸) default_lock_wallpaper.jpg : 锁屏壁纸,图片尺寸要求:480X854 default_lock_wallpaper_800.jpg : 高度为800像素的锁屏壁纸,图片尺寸要求:480X800 注意: 1.所要使用的桌面壁纸和锁屏壁纸的名称必须严格重命名为以上对应的文件名。 2.default_lock_wallpaper_800.jpg 仅在主题包包含default_lock_wallpaper.jpg 且 手机屏幕高度为800像素时自动使用。
3.icons文件夹使用说明
icons用于存放系统图标或第三方图标,图标为90X90尺寸的PNG图片。 我们需要将您制作的图标名称按照下面名称重命名并放入icons文件夹内,如果以下图标名称有多个就说明该图标需要多个相同图标不同名称图标,例如:电话图标对应了三个名称,我们就需要先将电话图标复制三份,并将三份图标名称分别命名为这三个名称。(主要为了简化操作) 电
话
图
标
使
用
名
称
:
com.android.providers.telephony com.android.phone
com.android.contacts.TwelveKeyDialer 通讯录图标
使用名称:
com.android.contacts alias.ContactsShortcut
com.android.contacts.ContactShortcut
com.android.contacts.DialtactsContactsEntryActivity com.android.providers.contacts 短信图标使用com.android.mms 浏览器com.android.browser 日历图com.android.calendar 相机图com.android.camera
名称:
图标使用名称:
标使用名称:
(
标安
使卓
原用生
相
名机
称图
标: )
com.miui.camera 设
置
(图
MIUI标
相使
机用
图
名
标) 称
com.android.providers.settings com.android.settings 时钟图标使用名com.android.deskclock
com.android.deskclock.DeskClock
email图标使用名com.android.email 文件管理器图标使用名com.android.fileexplorer 电子市场图标使用名com.android.vending 主题风格
图标使用名com.android.thememanager 图库图标使用名com.android.gallery 录音图标使用名com.android.soundrecorder 计算器图标使用的名com.android.calculator2 地图图标使用的名com.google.android.apps.maps 天气图标使用的名com.miui.weather 音乐图标使用的名com.miui.player 备份图标使用的名com.miui.backup 便签图
标使用的名称:
称:
称:
称:
称:
称:
称:
称:
称:
称:
称:
称:
称:
com.miui.notes
除了以上常规图标,我们还能够看到以上文档内出现icon_background、
icon_border等名字的图标,下面我们来具体介绍下这类图标的作用和用法。MIUI为了统一第三方图标和系统自带图标风格的匹配给第三方图标定义了一个框架,分为三层上层、中间层、下层来约束第三方图标的风格。 第三方图标约束图标
: 下层(背景层)图标命名:icon_background,第三方图标会自动匹配在这个背景层之上。如下图:
:第三方图标背景图。
中间层图标命名:icon_mask,主要约束第三方图标显示范围,超过这个范围的将会被自动切掉。例如下图:
:黑色框框为第三方图标限
定范围,超出黑色框框将会被切掉。
上层图标命名:
icon_border,用于覆盖在第三方图标之上。如下图:
:由于图标上半部分透明故此图标只有下半部分将会遮挡住第三方图标。
综
合
以
上
图
标
结
合
就
会
出
现
如
下
效
果
:
:中间小鱼、微信、
超级兔子、微博小图标是第三方图标自带图标系统会自动提取。
快捷方式约束图标(效果如第三方图标约束图标一样):