UI设计教程!教你用sketch和ps轻松打造高逼格ui设

点击上方「平面设计Ps教程学习」一键关注认证平面设计Ps教程学习,PS尽在掌握。

这个设计用了ps和sketch软件，对于sketch可能很多人比较陌生，它是为ui设计量身定做的一款超轻便软件，并且为矢量图，可做图标设计切图、web、vi等设计，插件也在进一步的完善，一般熟悉ps的一周就可以入手该软件。自从用了sketch，几乎快抛弃了ps 和ai。

切入正题——————————

这次临摹的demo发现站酷已经有人临摹并上传了，但没有写些什么东西，只是展示了几个不同的样机，那我就说一下这个东西怎么做的。

最终效果（如上图）：

效果总体来说还是很赞的，用到的工具：PS、Axure、Sketch

这个界面分析下来可以看出是先做好ui界面，然后置入样机内，可圈可点之处是左边3D效果的外框，这个点击psd源文件就知道是怎么回事了，感谢原作者做出这么好的东西，不知道是谁可以和我说下。

首先是界面的制作

首先是页面背景图，我在网上下载后处理过得到最终效果，因为整体是紫色色调，所以修改成下面的效果：

ps的图片处理大部分应该都知道，就是修改饱和度、添加紫色的渐变映射、调整亮度对比度调整色彩平衡最终达到上图效果，然后剪切到app 界面规定的尺寸贴上去就可以了。

ps处理完毕我在sketch上面做的demo：1134*750规格的，上面的导航栏：with：40px，font：46px，小图标44px，在下面的标题栏88px，下面的按照自己的感觉调整好。

有时候做app要用到很多头像、风景、字体等，对于此类的制作分享给大家一个很快捷的方式，以图片为例：sketch里面添加插件：content generator sketch plugin，先拖出很多原形或矩形然后选中他们，选择插件plugin：content generator sketch plugin，然后

如下图，选中photo：male female等 就会产生下面的效果

：会发现选中的图形都变成了图片，很神奇对不对！文字、邮件类型、手机类型批量修改以后都不用害怕了，很湿提高工作效率的。

这个是侧边栏做的一个效果，这个是安卓的一个很常见的导航栏显示方式，方便快捷不占空间布局，也没什么亮点：左侧导航栏是图片处理过的，

把图片在ps修改，参照上面图片的修改方式变成紫色的，最后可以根据自己的喜好添加高斯模糊或者渐变达到上面的效果

这个也是，主要是一些细节，左边栏目文字图标要对其会显得很公整。

这个背景图也是用的上面的图片。

这个是看到别人灰色的，我觉得做成紫色的会更好看然后修改的，细节估计一般，但整体感觉还不错，sketch软件的确很强大，所有的小图标的制作都是在上面完成的，直接到处@2x或者@3x等的图标大小，后缀也可以自定义，为ui设计量身定做的一样。

最后做完倒入到样机psd文件里面：如下图的效果（一个替换界面文件，再替换侧边文件，无论你是什么样的界面都可以达到下面3D的效果）

顿时感觉高大上了有木有～～

再来个

呀，第一篇文章写完啦，希望能给大家带来好的感悟，

对了压缩包在下面，样机也在里面，因为不是ps做的所以图层不在里面，是sketch源文件。。。

源文件下载:点击左下角“阅读原文”下载