多态图标(1)-PS制作
2015-11-23 18:17
351 查看
前言
我们不论是在软件或者WEB中经常会看到按钮的多态情况,即按钮的正常(Normal)、移入(Hover)、按下(Press)、失能(Disabled)四态,如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/5c20cbdefad1234c5cf0bd3e50cb47fb)
如果在开发软件的过程中没有设计师帮你做图标,就有些淡淡的忧桑了(Like me),于是乎我就自己设计按钮图标了,好记性不如烂笔头,写下这一系列,希望对看到这篇文章的你有帮助,本系列原本的初衷是将Web\WPF\Android\IOS的都写上,其中WPF涉及到自定义用户控件,看时间吧,争取多写。
PS版本
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/1bd5a82fc3f82d817be62b4a2724012a)
PS制作步骤
首先打开PS,
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/859bde65f37dbfebaa21201c87794543)
选择“文件\新建”
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/434860de86698f68d9c9874f237a2f47)
点击“确定”
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/2e0c0b3554cbc6be03c120c3289b739d)
记得将该工程保存一下先
然后选择“视图\新建参考线”,这是为了放置图层时位置的精准度
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/ad77e7034dc125ec3a533ce9415ae07b)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/d334a5b180273feff94d65a6d4879357)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/5f19d68a091e9059a20e0d18eecd77d5)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/3a34859cf9d0a2a1f12e17741d0f5efb)
这里我们建了4个参考线
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/9fb00742ee03640430371d7d6d7e60d3)
然后新建圆角矩形
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/edf2e6ef323001067504f59f6b9ee212)
在画布上任意位置点击,设置圆角矩形属性
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/eefb1e157b1f757e0e315a4ebdabf00b)
点击“确定”,此时画布中出现圆角矩形
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/5f59d154d49897c0ac5304b705f2f2fd)
这里圆角矩形默认填充色为白色,将其改为红色,
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/e7a636437cc7ac403535ab5dbdca9964)
双击白色方框
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/99acb5c85bfd94ea17cd1bb772c806e4)
设置颜色后,点击“确定”,此时可以看到圆角矩形变为红色
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/5222ff5eadcb77af381a01f5d275e420)
然后选择“移动工具”,将圆角矩形移动到第一条参考线
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/01ef56c50112db201c85de5e8d94445c)
由于咱们是四态图,左到右依次为:Normal、Hover、Press、Disabled
复制3个该圆角矩形图层,放置好位置
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/c62c5586c28812bb5cae983b4f437cf6)
注意Disabled的填充为灰色RGB(96,96,96)
下面再往上添加一些自定义形状工具(你也可以直接添加1234)
选择右边工具栏的自定义形状工具
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/cef2b4433d80dee56e67a41cd00e3e46)
此时工具栏变为
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/cfff3f16a12657046db3af51111a9c8a)
选择形状里的任意形状,这里我选择其中一种(你随意选择就可以了,只是为了看出多态效果)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/bebdf245b2f91135a1c8ac3330f22652)
选择完后,单击画布上的Normal区域,设置属性如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/c8b6171d5d7d4db7f095edcef2fd1723)
点击“确定”
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/a4292e0ea101fbcbf2f0a99d832be30c)
用同样的方法在Press和Disabled上创建25*25的图标,在Hover上创建30*30的图标,创建完后如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/8d13bdd225fe218089cb7f2cc6210a7b)
你可能发现红色三角形图标不在中间,可以适当的右移微调一下。
接下来就行生成咱们用的PNG图像了,首先隐藏背景
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/4fdc4e9366c402d80f61e5f1a1559160)
然后选择“文件\存储为(A)..”
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/fb5ac132b8cb6cc82e7165cfc1fc8c33)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/66e25cc0bd38864450e48a733c235a0e)
点击“保存”,可能会出现如下对话框
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/ee921fef86d9eeba18b5d91d70d70548)
按照默认,点击确定,此时就可以看到咱们保存的背景透明的四态图标了
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/03/3f3d7a294862a50701d8783916c32bd2)
完
下一节,用WPF设计自定义ImageButtoon控件,将这个四态图标用上。
/*********************************************************************************************************
如需转载请注明出处:http://blog.csdn.net/mybelief321/article/details/49998311
*********************************************************************************************************/
我们不论是在软件或者WEB中经常会看到按钮的多态情况,即按钮的正常(Normal)、移入(Hover)、按下(Press)、失能(Disabled)四态,如下
如果在开发软件的过程中没有设计师帮你做图标,就有些淡淡的忧桑了(Like me),于是乎我就自己设计按钮图标了,好记性不如烂笔头,写下这一系列,希望对看到这篇文章的你有帮助,本系列原本的初衷是将Web\WPF\Android\IOS的都写上,其中WPF涉及到自定义用户控件,看时间吧,争取多写。
PS版本
PS制作步骤
首先打开PS,
选择“文件\新建”
点击“确定”
记得将该工程保存一下先
然后选择“视图\新建参考线”,这是为了放置图层时位置的精准度
这里我们建了4个参考线
然后新建圆角矩形
在画布上任意位置点击,设置圆角矩形属性
点击“确定”,此时画布中出现圆角矩形
这里圆角矩形默认填充色为白色,将其改为红色,
双击白色方框
设置颜色后,点击“确定”,此时可以看到圆角矩形变为红色
然后选择“移动工具”,将圆角矩形移动到第一条参考线
由于咱们是四态图,左到右依次为:Normal、Hover、Press、Disabled
复制3个该圆角矩形图层,放置好位置
注意Disabled的填充为灰色RGB(96,96,96)
下面再往上添加一些自定义形状工具(你也可以直接添加1234)
选择右边工具栏的自定义形状工具
此时工具栏变为
选择形状里的任意形状,这里我选择其中一种(你随意选择就可以了,只是为了看出多态效果)
选择完后,单击画布上的Normal区域,设置属性如下
点击“确定”
用同样的方法在Press和Disabled上创建25*25的图标,在Hover上创建30*30的图标,创建完后如下
你可能发现红色三角形图标不在中间,可以适当的右移微调一下。
接下来就行生成咱们用的PNG图像了,首先隐藏背景
然后选择“文件\存储为(A)..”
点击“保存”,可能会出现如下对话框
按照默认,点击确定,此时就可以看到咱们保存的背景透明的四态图标了
完
下一节,用WPF设计自定义ImageButtoon控件,将这个四态图标用上。
/*********************************************************************************************************
如需转载请注明出处:http://blog.csdn.net/mybelief321/article/details/49998311
*********************************************************************************************************/
相关文章推荐
- linux tar的用法
- linux socket 缓冲区默认大小
- android中的http通信(1)
- CCBPM对业务型SaaS客服领域的支持
- STL中map,multimap,hashmap的区别。
- Effective STL
- tapestry 016
- 【整理】FFMPEG相关开源项目
- iOS 取相册照片/打开相机
- 矩阵运算的GPU加速!!求教各位大神帮忙!在此谢过
- java对word各种文件类型的转换
- 【Leet Code】64. Minimum Path Sum---Medium
- C#之猴子吃桃儿问题的解法——猴子吐桃儿
- 随机出算术题
- 设置Bitmap平铺效果
- [leetcode]Factorial Trailing Zeroes
- Gson的使用
- flask-hello 程序
- 集合框架
- windows server 2012配置MySQL 和 tomcat