想要做出一个完整的app,除了app图标和启动图片外,其他比较重要的图片就是按钮图标了,如果公司没有美工,还想做出来比较好看的UI界面,那就只能自己动手了。下面记一下我是如何制作app按钮图标的。
1、在网上找现成的图标
2、拆包app找现成的图标
3、PS制作
1、在网上找现成的图标
百度一搜有很多这种app图标素材网站,比如千库网、千图网、iconpng等等,里面还有雪碧图/精灵图,可以在PS里面裁剪一下直接用。
我墙裂推荐easyicon,里面的图标可以选择像素下载,对iOS开发来说简直太好,直接2x,3x的图标都有了。

2、拆包app找现成的图标
做一个app的时候,在App Store上肯定有跟你类似的app,下载下来玩一玩,模仿下交互,模仿下UI,集百家之所长嘛....
下面记下如何拆包:
第一步:打开Mac上iTunes,下载该app
以我的app为例,下载后在app图标上右键点击“在Finder中显示”

第二步:解压ipa包
右键“打开方式”,选择“归档实用工具”

第三步:打开包内容
右键在Payload文件夹内的包,选择“显示包内容”

第四步:显示包内容
然后就会发现这个app内没有加密的图片素材了,有的公司会把资源加密打包成.nib包,那就没办法了

3、PS制作
Adobe Photoshop CC 2017 Mac 中文破解版下载
如果要做出精美的图片、特效等等,需要很多PS知识,我也不是专业的设计师,只记一下设计图标能用到的一点技巧。
1、app的按钮图标一般都是透明背景的,在新建一个图片时可以选择长、宽,以及单位是厘米还是像素,背景内容也可以选择透明。

2、再认识一下PS的主界面

3、最常用的就是工具栏,记下我常用的工具:






4、下面举个栗子,制作简单的导航栏按钮:
1>新建一个想要的按钮大小的底板,比如60*44像素的透明底板,放大底板到容易操作为止
2>然后用画图工具的“圆角矩形工具”画一条线,用“油漆桶工具”涂成白色,然后按住alt键拖出来两个相同的即可,可以按↑←↓→键盘一个像素一个像素挪动,调整好位置

3>如果你还想改变图片大小,可以选择“图像”的“图像大小”改变,改成2x、3x的大小

4>导出保存

5>拖入Xcode的Assets文件夹。如果是导航栏的话,要注意调整下Render As属性,否则系统会自动将图片变为系统的蓝色

效果图:

还有一些制作图标用到的小技巧:
如何使用Photoshop(PS)将图片的底色变为透明
怎么用Photoshop画半圆
怎样用PS画平滑的曲线
PS的知识很多,这里只是记下简单用法,做个简单的按钮图标应该够用了。希望对读者有启发作用。
网友评论