直接上干货:
一、老鸟专享极简大气一目了然版 (*´╰╯`๓)♬
图层 → 图层样式 → 颜色叠加
(敲黑板,划重点,so easy ↑)
二、菜鸟尊享感人至深详细到哭版 (。◕ˇ∀ˇ◕)
素材:PNG格式镂空图标, 素材来源:某图标素材网站, 工具:Photoshop CC
原图如下:
步骤:
1、打开原图
2、用矩形选框工具选中整张图片(或者Ctrl+A)
3、图层 → 图层样式 →颜色叠加
4、点击箭头所指区域
5、设置叠加颜色
6、设置叠加颜色完毕,然后点击确定→确定
7、图标修改颜色完成
8、文件 → 存储为Web所用格式
注意如果是半透明的镂空图标右上角选择PNG-24,不要选择PNG-8。
完成后的效果:
注:
1.如果存储为PNG-8的,在网页上的效果可能会像下图这样惨烈:
PNG-8只有1位布尔透明通道,只支持像素级的纯透明,不支持alpha透明,说人话就是:只能完全透明或者完全不透明,不支持半透明。(上图中出现的白边就是图片保存为PNG-8后,原先半透明的边缘变成的不透明的部分)
PNG-24有8位布尔透明通道,支持半透明。
选择PNG-24格式不会出现上图问题。
2.图像模式要选“RGB颜色”。如果模式是“灰度”则无法进行颜色叠加。
致本汪没有设计师也没有程序员的单打独斗的时光。
为有猫而奋斗~(•̀ᴗ•́)و ̑̑