--- 资 源 包 的 入 门 到 入 土 ---
- 04 表盘的花样设计 -
- 如何做表盘? -
我们先在米坛下载一个官方底包
[米坛不知道有没有]
然后再下载一个表盘解包/打包工具
链接:
www.bandbbs.cn
下载之后我们打开这个
就是下面这个样子了
![1585394201620.png 1585394201620.png](https://www.bandbbs.cn/data/attachments/6/6644-328315e8de3ddf259b0cf1a7cbabf24e.jpg)
再打开我们解好的官方包
是这个样子[这里用我的画的为例子]
![1585394482262.png 1585394482262.png](https://www.bandbbs.cn/data/attachments/6/6645-17a4027b6687012b4f08a48136548a63.jpg)
这里已经帮你们分好类啦!
来解释一下吧
红色:主时间
橙色:日期数字及横杠
绿色:周几及上下午
蓝色:状态栏显示
紫色:电池部分
第一个图片
就是表盘的主图片了
后面5个我们是关于打包的
第一个图片
我们来讲讲他
![1585394967729.png 1585394967729.png](https://www.bandbbs.cn/data/attachments/6/6646-fe8509ebd47296fed1e71c6d03f52e77.jpg)
宽120高240
经典的2:1尺寸
尺寸不可更改!!!!
颜色推荐:
黑色为底的沉浸感最强
但是如果我们要用亮色怎么办?
![1585395455824.png 1585395455824.png](https://www.bandbbs.cn/data/attachments/6/6647-75a6944d063e396db441ecddd9a4da7a.jpg)
以我这张为例
新建一张图层
![1585395559837.png 1585395559837.png](https://www.bandbbs.cn/data/attachments/6/6648-90d7d731ce0bdcbe264f8bdc135c203f.jpg)
![1585395582790.png 1585395582790.png](https://www.bandbbs.cn/data/attachments/6/6649-38916bd06a522fc73fe5226c87fca7ed.jpg)
调整你的圆角矩形工具的半径参数
我这里调成10
颜色设置成和你背景很突出的颜色
比如黑对白
再从左上角长按到右下角
![1585395777140.png 1585395777140.png](https://www.bandbbs.cn/data/attachments/6/6652-b0226c422a686f0020b47a3055c41504.jpg)
再选择选框工具
![1585395826190.png 1585395826190.png](https://www.bandbbs.cn/data/attachments/6/6653-2b4e85381b8463bb1d4845818e979f24.jpg)
点击刚刚创建圆角矩形的图层
右键文字
选择栅格化图层
![1585395911775.png 1585395911775.png](https://www.bandbbs.cn/data/attachments/6/6654-a841b80f66416978009cae2d762b0529.jpg)
也是从左上角到右小角
但是要在图片外面
再点击移动工具
![1585395981912.png 1585395981912.png](https://www.bandbbs.cn/data/attachments/6/6656-ec9fcec26574a91484ac471830e36ea3.jpg)
将这个图片小小的拖动一下再放回原位
这时候选取就会变成了这个样子
![1585396028640.png 1585396028640.png](https://www.bandbbs.cn/data/attachments/6/6658-b6aa233db67b4457e8f1233f868bd4f9.jpg)
是不是觉得有点麻烦?
我们也可以用魔棒工具
![1585396062015.png 1585396062015.png](https://www.bandbbs.cn/data/attachments/6/6659-aa86a83d0305c8d204388cb17fcb009a.jpg)
点击那个白色的
同样可以到达刚刚的效果。
按下Ctrl+Shift+I
或者点击菜单里面的反选
![1585396115494.png 1585396115494.png](https://www.bandbbs.cn/data/attachments/6/6660-07e56ddb041e4bb2041b43a9c0da4614.jpg)
你就可以发现
这个选取到外面的四个角了
![1585396143598.png 1585396143598.png](https://www.bandbbs.cn/data/attachments/6/6661-14eaf838a9c5f3704659db3e46a0d0ee.jpg)
现在点击你表盘的那一图层
![1585396246923.png 1585396246923.png](https://www.bandbbs.cn/data/attachments/6/6662-8b490c8faef69d005f098acec3d07bab.jpg)
再用画笔工具
调成黑色 把四角涂成黑色
![1585396278216.png 1585396278216.png](https://www.bandbbs.cn/data/attachments/6/6663-205e40d23cc03fb0c8f760b7f9c2d38b.jpg)
我们再把这个圆角矩形的图层删掉
取消选区
就可以拿到这一张图了
![1585396320047.png 1585396320047.png](https://www.bandbbs.cn/data/attachments/6/6664-f3c3ae7f8976460d58a4117bdb159a55.jpg)
![1585396366187.png 1585396366187.png](https://www.bandbbs.cn/data/attachments/6/6665-66d934bd88951f8bb9a23562310f0b98.jpg)
让我们把这张图片保存
放到上期讲到的模拟器里面
![1585396438810.png 1585396438810.png](https://www.bandbbs.cn/data/attachments/6/6666-94af083af2bc32d0a08fd24464b6106b.jpg)
![1585396514923.png 1585396514923.png](https://www.bandbbs.cn/data/attachments/6/6668-32c2b8b4d4c1ce3425721465f897b077.jpg)
就是这个样子啦!
是不是很和谐!
来
让我们再讲讲打包里面的Json吧!
如何打包?
![1585396700958.png 1585396700958.png](https://www.bandbbs.cn/data/attachments/6/6669-fb3ada997476802e9c1f4130a2e6d094.jpg)
你就可以得到
![1585396752556.png 1585396752556.png](https://www.bandbbs.cn/data/attachments/6/6670-f38c7beb6ac626410b5dbcfdf70ee73d.jpg)
这四个文件
后面的gif和png都是预览图
log是打包日志 报错的时候可以看
第一个就是你刷的bin文件了
让我们来看看这个JSON吧
- 表盘JSON详解 -
我们用notepad++打开这个Json
看到如下画面
![1585396917781.png 1585396917781.png](https://www.bandbbs.cn/data/attachments/6/6671-5d2c4615b68eafa362baaa48c187ae2e.jpg)
让我们一步步详解
![1585397062263.png 1585397062263.png](https://www.bandbbs.cn/data/attachments/6/6672-5924c62a3b32bb41f2983be20aae1be1.jpg)
这个是第一张表盘图片的位置信息
ImageIndex就是编号了
尽量不动这个第一张的
![1585397115578.png 1585397115578.png](https://www.bandbbs.cn/data/attachments/6/6673-8f207a590560ad31049894ee9df6842d.jpg)
Times 就是时间部分
hours minutes ones
分别是 小时 分钟 秒
X Y就是他们的坐标 可以慢慢来调
ImagesCount就是从第一张图数下去
比如ImagesCount 3就是显示三个数字
![1585397285213.png 1585397285213.png](https://www.bandbbs.cn/data/attachments/6/6674-925177e792fb10bc88544e1b66ed577e.jpg)
再往下面翻翻
![1585397341992.png 1585397341992.png](https://www.bandbbs.cn/data/attachments/6/6675-e90c8251cc4db86adba635754d94a71b.jpg)
都是差不多的原理
没什么好说的啦
往下面再翻下
![1585397511559.png 1585397511559.png](https://www.bandbbs.cn/data/attachments/6/6676-6c80b18d41a9de177e98e8083716d516.jpg)
周几周几的
和时间差不多 不多说
![1585397593537.png 1585397593537.png](https://www.bandbbs.cn/data/attachments/6/6677-0f08f68c424fbd8e68d6c3a69675ce82.jpg)
上午和下午的显示
![1585397697901.png 1585397697901.png](https://www.bandbbs.cn/data/attachments/6/6678-39c519fea3ac020ca0cfbbf6b9780129.jpg)
前面分别是
锁定状态
蓝牙状态
勿扰状态
后面的Icon就是电池了
这些就是详解了啊!!!
怎么做出有质感的时间?
![1585397861401.png 1585397861401.png](https://www.bandbbs.cn/data/attachments/6/6679-ca3abb6fd93d4fd6f60f0ac311c95102.jpg)
怎么做出这种阴影
做出质感
![1585398010542.png 1585398010542.png](https://www.bandbbs.cn/data/attachments/6/6682-5af31b1f83421a0a0eefda12945ef8ea.jpg)
打开PS
打开一张数字
点击图层下面的特效
![1585398095642.png 1585398095642.png](https://www.bandbbs.cn/data/attachments/6/6684-2b68a7096055d83aa6f1fd0b949bba53.jpg)
点击投影
![1585398134604.png 1585398134604.png](https://www.bandbbs.cn/data/attachments/6/6685-5e7f0d73b6a6760cd7fce64fe4e16af6.jpg)
我自己是这样设置的
![1585398242878.png 1585398242878.png](https://www.bandbbs.cn/data/attachments/6/6686-e24aebb4f8f96aff226ce423ee244079.jpg)
你就可以看到这样的了
![1585398285893.png 1585398285893.png](https://www.bandbbs.cn/data/attachments/6/6687-a8d4441457a58259c96e8605e2281fa5.jpg)
利用我们第二期讲到的批处理
就可以让他们批量阴影啦!
- 下 期 预 告 -
下期我们将讲讲如何正确的配色
敬请期待吧!
最后来推一波我的资源包 100%覆盖率与原创率
欢迎支持呀
![1586147684458.png 1586147684458.png](https://www.bandbbs.cn/data/attachments/6/6827-da29239f3788dd9c925f552dbb53f327.jpg)
www.bandbbs.cn
www.bandbbs.cn
- 04 表盘的花样设计 -
- 如何做表盘? -
我们先在米坛下载一个官方底包
[米坛不知道有没有]
然后再下载一个表盘解包/打包工具
链接:
米环4工具 - 【0630更新】米环4自定义表盘工具AmazfitBipTools_Mi4_1.0.3(支持1677万种颜色)
不知道工具怎么使用的,且看前情回顾: 【0623首发】【原创】米4手环表盘自定义工具,支持官方表盘解压打包 【6-24更新】米环4自定义表盘工具amazfitbiptools_mi4_0-0-2-支持动态图 这次版本,跟上次一样,没什么大变化,却又处处不一样,可以说是质的飞越。 本次更新内容: 1.支持1677万种颜色!!! 早在发布会的时候就听说米环4支持1600万种颜色,当时不以为然。 直到在后面的DIY中才发现,这是多么重要! 由于该工具的前身,是不记得为哪个手环开发的了,颜色支持较少,且不支持透明通道。...
![www.bandbbs.cn](https://static.cloudflare.ltd/Bandbbs_CDN/bandbbslogo/favicon.png)
下载之后我们打开这个
就是下面这个样子了
![1585394201620.png 1585394201620.png](https://www.bandbbs.cn/data/attachments/6/6644-328315e8de3ddf259b0cf1a7cbabf24e.jpg)
再打开我们解好的官方包
是这个样子[这里用我的画的为例子]
![1585394482262.png 1585394482262.png](https://www.bandbbs.cn/data/attachments/6/6645-17a4027b6687012b4f08a48136548a63.jpg)
这里已经帮你们分好类啦!
来解释一下吧
红色:主时间
橙色:日期数字及横杠
绿色:周几及上下午
蓝色:状态栏显示
紫色:电池部分
第一个图片
就是表盘的主图片了
后面5个我们是关于打包的
第一个图片
我们来讲讲他
![1585394967729.png 1585394967729.png](https://www.bandbbs.cn/data/attachments/6/6646-fe8509ebd47296fed1e71c6d03f52e77.jpg)
宽120高240
经典的2:1尺寸
尺寸不可更改!!!!
颜色推荐:
黑色为底的沉浸感最强
但是如果我们要用亮色怎么办?
![1585395455824.png 1585395455824.png](https://www.bandbbs.cn/data/attachments/6/6647-75a6944d063e396db441ecddd9a4da7a.jpg)
以我这张为例
新建一张图层
![1585395559837.png 1585395559837.png](https://www.bandbbs.cn/data/attachments/6/6648-90d7d731ce0bdcbe264f8bdc135c203f.jpg)
![1585395582790.png 1585395582790.png](https://www.bandbbs.cn/data/attachments/6/6649-38916bd06a522fc73fe5226c87fca7ed.jpg)
调整你的圆角矩形工具的半径参数
我这里调成10
颜色设置成和你背景很突出的颜色
比如黑对白
再从左上角长按到右下角
![1585395777140.png 1585395777140.png](https://www.bandbbs.cn/data/attachments/6/6652-b0226c422a686f0020b47a3055c41504.jpg)
再选择选框工具
![1585395826190.png 1585395826190.png](https://www.bandbbs.cn/data/attachments/6/6653-2b4e85381b8463bb1d4845818e979f24.jpg)
点击刚刚创建圆角矩形的图层
右键文字
选择栅格化图层
![1585395911775.png 1585395911775.png](https://www.bandbbs.cn/data/attachments/6/6654-a841b80f66416978009cae2d762b0529.jpg)
也是从左上角到右小角
但是要在图片外面
再点击移动工具
![1585395981912.png 1585395981912.png](https://www.bandbbs.cn/data/attachments/6/6656-ec9fcec26574a91484ac471830e36ea3.jpg)
将这个图片小小的拖动一下再放回原位
这时候选取就会变成了这个样子
![1585396028640.png 1585396028640.png](https://www.bandbbs.cn/data/attachments/6/6658-b6aa233db67b4457e8f1233f868bd4f9.jpg)
是不是觉得有点麻烦?
我们也可以用魔棒工具
![1585396062015.png 1585396062015.png](https://www.bandbbs.cn/data/attachments/6/6659-aa86a83d0305c8d204388cb17fcb009a.jpg)
点击那个白色的
同样可以到达刚刚的效果。
按下Ctrl+Shift+I
或者点击菜单里面的反选
![1585396115494.png 1585396115494.png](https://www.bandbbs.cn/data/attachments/6/6660-07e56ddb041e4bb2041b43a9c0da4614.jpg)
你就可以发现
这个选取到外面的四个角了
![1585396143598.png 1585396143598.png](https://www.bandbbs.cn/data/attachments/6/6661-14eaf838a9c5f3704659db3e46a0d0ee.jpg)
现在点击你表盘的那一图层
![1585396246923.png 1585396246923.png](https://www.bandbbs.cn/data/attachments/6/6662-8b490c8faef69d005f098acec3d07bab.jpg)
再用画笔工具
调成黑色 把四角涂成黑色
![1585396278216.png 1585396278216.png](https://www.bandbbs.cn/data/attachments/6/6663-205e40d23cc03fb0c8f760b7f9c2d38b.jpg)
我们再把这个圆角矩形的图层删掉
取消选区
就可以拿到这一张图了
![1585396320047.png 1585396320047.png](https://www.bandbbs.cn/data/attachments/6/6664-f3c3ae7f8976460d58a4117bdb159a55.jpg)
![1585396366187.png 1585396366187.png](https://www.bandbbs.cn/data/attachments/6/6665-66d934bd88951f8bb9a23562310f0b98.jpg)
让我们把这张图片保存
放到上期讲到的模拟器里面
![1585396438810.png 1585396438810.png](https://www.bandbbs.cn/data/attachments/6/6666-94af083af2bc32d0a08fd24464b6106b.jpg)
![1585396514923.png 1585396514923.png](https://www.bandbbs.cn/data/attachments/6/6668-32c2b8b4d4c1ce3425721465f897b077.jpg)
就是这个样子啦!
是不是很和谐!
来
让我们再讲讲打包里面的Json吧!
如何打包?
![1585396700958.png 1585396700958.png](https://www.bandbbs.cn/data/attachments/6/6669-fb3ada997476802e9c1f4130a2e6d094.jpg)
你就可以得到
![1585396752556.png 1585396752556.png](https://www.bandbbs.cn/data/attachments/6/6670-f38c7beb6ac626410b5dbcfdf70ee73d.jpg)
这四个文件
后面的gif和png都是预览图
log是打包日志 报错的时候可以看
第一个就是你刷的bin文件了
让我们来看看这个JSON吧
- 表盘JSON详解 -
我们用notepad++打开这个Json
看到如下画面
![1585396917781.png 1585396917781.png](https://www.bandbbs.cn/data/attachments/6/6671-5d2c4615b68eafa362baaa48c187ae2e.jpg)
让我们一步步详解
![1585397062263.png 1585397062263.png](https://www.bandbbs.cn/data/attachments/6/6672-5924c62a3b32bb41f2983be20aae1be1.jpg)
这个是第一张表盘图片的位置信息
ImageIndex就是编号了
尽量不动这个第一张的
![1585397115578.png 1585397115578.png](https://www.bandbbs.cn/data/attachments/6/6673-8f207a590560ad31049894ee9df6842d.jpg)
Times 就是时间部分
hours minutes ones
分别是 小时 分钟 秒
X Y就是他们的坐标 可以慢慢来调
ImagesCount就是从第一张图数下去
比如ImagesCount 3就是显示三个数字
![1585397285213.png 1585397285213.png](https://www.bandbbs.cn/data/attachments/6/6674-925177e792fb10bc88544e1b66ed577e.jpg)
再往下面翻翻
![1585397341992.png 1585397341992.png](https://www.bandbbs.cn/data/attachments/6/6675-e90c8251cc4db86adba635754d94a71b.jpg)
都是差不多的原理
没什么好说的啦
往下面再翻下
![1585397511559.png 1585397511559.png](https://www.bandbbs.cn/data/attachments/6/6676-6c80b18d41a9de177e98e8083716d516.jpg)
周几周几的
和时间差不多 不多说
![1585397593537.png 1585397593537.png](https://www.bandbbs.cn/data/attachments/6/6677-0f08f68c424fbd8e68d6c3a69675ce82.jpg)
上午和下午的显示
![1585397697901.png 1585397697901.png](https://www.bandbbs.cn/data/attachments/6/6678-39c519fea3ac020ca0cfbbf6b9780129.jpg)
前面分别是
锁定状态
蓝牙状态
勿扰状态
后面的Icon就是电池了
这些就是详解了啊!!!
怎么做出有质感的时间?
![1585397861401.png 1585397861401.png](https://www.bandbbs.cn/data/attachments/6/6679-ca3abb6fd93d4fd6f60f0ac311c95102.jpg)
怎么做出这种阴影
做出质感
![1585398010542.png 1585398010542.png](https://www.bandbbs.cn/data/attachments/6/6682-5af31b1f83421a0a0eefda12945ef8ea.jpg)
打开PS
打开一张数字
点击图层下面的特效
![1585398095642.png 1585398095642.png](https://www.bandbbs.cn/data/attachments/6/6684-2b68a7096055d83aa6f1fd0b949bba53.jpg)
点击投影
![1585398134604.png 1585398134604.png](https://www.bandbbs.cn/data/attachments/6/6685-5e7f0d73b6a6760cd7fce64fe4e16af6.jpg)
我自己是这样设置的
![1585398242878.png 1585398242878.png](https://www.bandbbs.cn/data/attachments/6/6686-e24aebb4f8f96aff226ce423ee244079.jpg)
你就可以看到这样的了
![1585398285893.png 1585398285893.png](https://www.bandbbs.cn/data/attachments/6/6687-a8d4441457a58259c96e8605e2281fa5.jpg)
利用我们第二期讲到的批处理
就可以让他们批量阴影啦!
- 下 期 预 告 -
下期我们将讲讲如何正确的配色
敬请期待吧!
最后来推一波我的资源包 100%覆盖率与原创率
欢迎支持呀
![1586147684458.png 1586147684458.png](https://www.bandbbs.cn/data/attachments/6/6827-da29239f3788dd9c925f552dbb53f327.jpg)
小米手环4资源包 - [100%原创] Super Pixel UI 再次颠覆
-- Super Pixel UI -- - 再 次 颠 覆 - Super Pixel 他现在来了 你现在可能想知道 这个资源包为什么可以再次颠覆? 让我们看看 小爱同学3的再次升级 与黑色的手环融为一体 灵动的麦克风动画 犹如彩虹在手环上跳动 加载动画也重新升级 这里 是一个全新的小爱同学。 细节决定成败了 不放过任何一个按钮的机会 全局圆角按钮 全新的按钮样式 音乐图标大变样! 不管是从APP通知 还是到天气图标 全新的卡片样式 全新的更多图标...
![www.bandbbs.cn](https://static.cloudflare.ltd/Bandbbs_CDN/bandbbslogo/favicon.png)
小米手环4资源包 - <To Circle UI> 圆了 圆出风范 让圆角,再跨一步。
< To Circle > 让圆角,再跨一步。 不负众望 从方形 到圆角 去掉边边框框 得到了这款全新设计的 圆形资源包 这次还是 100%覆盖率 让我们看看他的设计吧 用白色和透明渐变 做出了这款资源包 从APP通知 到圆形天气 圆形显得是那么和谐 找手机的新版动画 让一切更加流畅 这是一张设置图片 用白色与白-透明的渐变 做出一种更加舒适的设计 这就是To Circle贯穿全局的设计 实拍图~ 从米坛创建开始 我的资源包也开始了 MEUI MYUI...
![www.bandbbs.cn](https://cdn.jsdelivr.net/gh/Bandbbs/Bandbbs_CDN@1.0/bandbbslogo/favicon.png)
附件
最后编辑: