美文网首页
ui素材寻找和使用简单记录

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

作者: 梧叶已秋声 | 来源:发表于2019-07-10 16:44 被阅读0次

    这里记录一下寻找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

    相关文章

      网友评论

          本文标题:ui素材寻找和使用简单记录

          本文链接:https://www.haomeiwen.com/subject/okchkctx.html