教你用sketch和ps轻松打造高逼格ui设计
来源:站酷 作者:麦兜响当当o
第一次写文章，真的第一次，勿喷———————————————————————————————
之前都是看别人的教程和案例分享，那叫一个膜拜，什么时候我也能分享给大家，但大多数的原因估计是自尊心太强怕做的不好被喷，对，我就是那种心理素质极差的人。
做ui设计快1年的时间了，期间都是自己摸索没有师傅带真的是一件很悲催的事情，好在网上很多大婶的指点和心得分享才摸索着爬行前进。做了3个app项目，2个还没有上线，想分享估计得等到年底了，因为是初设计所以做的没有很大的亮点，而且是保守的蓝色系风格，感觉没有可圈可点之处。
第一次写文章才知道之前分享的大神们多么的辛苦，字字珠玑都是敲出来的啊，我是那种噜完东西就走的人，拿了别人的心血还不点赞的那种人。最近一直在琢磨ui设计的事情，其实说白了都是细节决定了最终做出来的产品的好坏，貌似啰啰唆唆写了那么多没切入正题，好了下面我用一个菜鸟小白到现在新手的经验写下我是怎样在这个不归路上走下去的。
这个设计用了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源文件。。。
