ui素材寻找和使用简单记录

这里记录一下寻找ui素材的过程。

通过搜索发现，ui素材获取可以参考如下2个链接。
如何解决Android开发过程中缺乏UI素材的问题
https://www.jianshu.com/p/c549c5cb6d6d
有哪些可以收集不错的PSD素材的网站？
https://www.zhihu.com/question/20668161/answer/146267094

使用photoshop获取的文件是psd格式文件，但是软件开发过程中需要的是普通的图片格式png等。那么有了psd后，如何转成png图片呢？
这里我参考了这篇文章。
psd格式图片保存自己需要的png图片
https://blog.csdn.net/u010356768/article/details/77894890

image.png

把这个素材截一下图，通过谷歌识图，找到psd格式的素材。
出处链接：
返回首页按纽PSD素材
http://www.sj33.cn/s.php?q=home
把素材下载下来，一个Home-10.psd文件。

image.png

psd文件下载下来后在Photoshop中打开。
图层相关概念可以看这几个。
关于 Photoshop 图层
https://helpx.adobe.com/cn/photoshop/using/layer-basics.html

PS的基石 － 图层与蒙板
https://zhuanlan.zhihu.com/p/24494824

home下这十个图层就是这10个图标。选中每个图层后通过调节不透明度就可以看得出来。

image.png

例如选中1，把不透明度调节到0，第一个图标就消失了。

image.png

对photoshop中的图层有了一定认知后，就可以开始用了。
首先，新建一个60x60像素大小的文件，分辨率72，rgb颜色为8位，背景颜色为黑色（因为home的图标是白色的所以黑色背景比较显眼）。

image.png

新建后把2窗口拖成并排状态。

image.png

选择移动工具。

image.png

选中home-10.psd文件窗口，鼠标左键点击选中home这个组下的1这个图层.

image.png

鼠标左键按住不放，拖到新建文件的窗口中。

image.png

拖进来后如下所示。

image.png

此时背景是锁定状态，点击那把小锁，取消锁定状态。

image.png

取消锁定后如下图所示。

image.png

此时，将在图层面板选择1，然后按住ctrl键再单击选中 图层0 。

image.png

保持选中2个图层的状态，选择水平和垂直居中对齐。

image.png

最后再将图层0 的眼睛标志（即可视性）取消，背景就是透明的了。

image.png

最后存储为png格式图片，如下图所示。

image.png

参考链接：
有哪些可以收集不错的PSD素材的网站？
https://www.zhihu.com/question/20668161/answer/146267094

如何解决Android开发过程中缺乏UI素材的问题
https://www.jianshu.com/p/c549c5cb6d6d

psd格式图片保存自己需要的png图片
https://blog.csdn.net/u010356768/article/details/77894890

在PS里怎样使图层居中对齐?
https://blog.csdn.net/yang3wei/article/details/7489802

在PS里怎样使图层居中对齐?
https://zhidao.baidu.com/question/80047247