需求
从网上下载图片很难下载到整套,包括一个按键的三种状态或者是多个图标非同色系,笔者没有整体配色,只讲述PS比较简单的制作方法,目前满足日常使用。
原理
使用PS进行修改制作
实现步骤
步骤一:打开图标文件
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/323807a180274cedac664c560f46e4c9.png?x-oss-process=image/resize,w_1400/format,webp)
步骤二:增加背景图层
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/d0fe8725f38f47eb9b49d26909f4397b.png?x-oss-process=image/resize,w_1400/format,webp)
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/acceb9021e1d4ea28a103b8d28c40959.png?x-oss-process=image/resize,w_1400/format,webp)
步骤三:修改背景图层的颜色和透明度(hover状态的)
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/b17afd3ac6be492e8fd84a1920aeb549.png?x-oss-process=image/resize,w_1400/format,webp)
步骤五:剪裁保存(可设置剪裁大小),最好是另外存储文件“文件”中的“存储为”,注意存储格式,hover状态的到此结束。
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/4790625fad8c4d019ed7f339133c8687.png?x-oss-process=image/resize,w_1400/format,webp)
步骤六:修改图标图标实体的颜色
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/0af7f4f5682a41329166e22b874f7cfb.png?x-oss-process=image/resize,w_1400/format,webp)
步骤七:删掉“背景”图层,直接选中“图层0”新建背景图层,对背景使用填充进行上色,保存参照 步骤五
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/9ce210498fc34db9a7a06551f3ca6037.png?x-oss-process=image/resize,w_1400/format,webp)
所制作的示例:
![图片.png 图片.png](https://ucc.alicdn.com/pic/developer-ecology/6b1aee7a202844c28e4a52dbca8d77e3.png?x-oss-process=image/resize,w_1400/format,webp)