UI教你怎么制作PSD图

超、凢脫俗 2022-06-06 06:09 243阅读 0赞

其实ui设计说简单也简单，但是如果要做一套好的ui界面，需要考虑的东西就很多，界面，风格，颜色，人机交互，用户心理，所以，这些东西在这里先不谈，因为太多，而且需要很长时间，但如果你想真正学习ui设计的话，这些又不得不学，（虽然这里面有的东西很虚）你以后有时间先慢慢看吧。

这里就说怎么速成，其实我觉得你见过的ui设计应该也不少，平时咱们用的app，网页，就有很多，所以你懂得，“抄”最快，但不是照抄，因为ui这个东西，万一你出名了，你做的app出名了，别人一看有抄袭嫌疑就不好了，名誉影响不好，搞不好吃官司，所以要学学腾讯，把你觉得好看的ui设计拿来稍加改动（审美要练练，昨天给你说的网站先看看，熏陶一下，ui中国，站酷，还有花瓣什么的，微博上可以关注一下一个叫优秀网页设计，还有几个记不得了都差不多），就是最快的ui设计方法，当然你学会方法后觉得好的网站，可以自己照着做做，就是一模一样的练习，这叫临摹。

这几年流行扁平化设计，这种设计让人觉得ui设计变得简单多了，是的，从技术上来说简单多了，但是从设计上说，越简单的越难，不知道你理解不理解，但是这个你先不用管，这里说的是技术上的东西，学习设计需要很长的周期，是不可能速成的。

进入正题，假设现在，你找到了一个好看的模板，（先不说设计怎么改动了，你就是想要这样的，一模一样）下载先来，它就是个图片，我找了个扁平化设计的页面

![Center][]

就像这张，这是好多app页面的集合，你先看看这些页面，哪些能用编程实现，哪些不好实现，你比我清楚，我就不在这说了，我先不管这些，下面我要做的就是用ps把它做出

来，首先你要弄清你的分辨率，手机因为屏幕尺寸不同，这个不说了，假设你要做给iPhone6s，大概13几几\*750吧，就当1300\*750，然后我要做上图第一排从左数第二个。

![Center 1][]

就是这个。

第一步，打开ps，新建，长度1300像素，宽度750像素，分辨率300就好，这个长宽以后可以改，图像\---画布大小，就可以改（画布大小是只改背景大小，背景就是新建项目后的背景图层，图像大小是连同背景外加其他图层一起改）

现在，你得到了一个手机屏大小的画布，接下来，把上面那张下好的图直接拖上去（也可以不拖，直接画，但是作为新手建议有个底板，比着画比较好）

拖上去了之后，你看看ps界面的右下角有个图层窗口，是不是除了背景，多了一层，这就是你刚才拖上来的图片，这个图片可能因为尺寸关系，并没有占满屏幕，没关系，可以调整它的大小，可能刚拖上来的时候图片上有的有用于调整的框，有时候没有，没关系，如果没有，选中图层，ctrl+T，这时候你会看到图片外多了个框，然后鼠标放到四个角的点上，拖拽就可以方法缩小了，注意：按住shift拖动是等比例缩放，做ui的时候一般拖动都要加shift，然后鼠标放在图片上拖动是移动图片，放在框外四个角拖动是旋转。你可以试试，这时，下载的图片需要和背景图层基本对齐，（下方不管，上面对齐就行），先移动图片让它紧靠左边（ps可以自动捕捉到边界），然后按住shift拖动右上或右下的调整点，让图片等比例放大或缩小，直至右边与背景的右边对齐，最后调整上边，拖动对齐即可（ctrl+T状态下，按键盘方向键可以对图片位置进行微调）。这样就把下载的图片和背景对齐了，图片上面的东西的大小，就是你要的大小了

![Center 2][]

就是这个样子，下面没对齐不用管，千万不能只做竖直方向的拉伸，比例就不对了。

你可能要问了，这样尺寸都没问题了，直接切可以吗，可以的，只要你能找到高清图片就行，速度快是优点，但不建议直接切，主要是万一有个不合适没法改，还有就是分辨率的问题（因为你下的是位图不是矢量图，关于位图矢量图区别自行百度），直接切的方法先不说了，以后有机会再说。

第二步，开始画，首先你看看上面这个页面，想象把图标去掉，文字去掉，头像去掉，还剩什么（感觉没什么了，哈哈），剩下的这些可能你根本不需要作图就可以用编程实现，但是这里还是做一下，一个是构图都是矩形，简单，用这个演示比较好，另一个是万一以后遇到一个实现不了的，对吧。

新建图层，这是必须的，看到图层栏下方的那一排了吗，垃圾桶左边的就是新建图层，垃圾桶的功能是删除图层，当然删除还能用键盘delete，再左边是建立图层文件夹，你可以把相关的图层放在一个文件夹里，方便管理，再往左先不管，你可以自己试试。

这时你可以看到，图层二，新建的都是透明图层，在ps里透明处是用灰白格表示的，图层的关系是，图层位置在上面的，图层列表的位置也在上面，有时候你在图中会找不到东西，其实是因为他所在的图层被其他图层覆盖住了，左侧的眼睛是隐藏/显示，右上角可以调某图层整体透明度，按住ctrl可以多选，图层多的情况下，选中一个图层，再按住shift选远处的另一个图层，你就可以选中这两个图层中间的所有图层。

然后，你要做一个矩形框，点击ps左边的矩形工具（T按钮向下两个，T是文字工具），如果那个位置不是矩形按钮，就长按，可以选椭圆工具（画圆用）等等，然后在屏幕中拖拽就可以产生一个矩形（注意：画之前，ps左上角填充左边那里，选形状），然后填充那里可以选填充颜色，描边可以选描边颜色，右边的点数表示描边宽度，白色红斜杠表示透明

![Center 3][]

这时，你可以试试把这个矩形调节成图片里蓝绿色矩形的样子，填充里选蓝绿色，描边不要了，点击填充会出现以下窗口，你可以直接选色，也可以点右上角的图标，会出现调色

![Center 4][]

什么颜色都能选

![Center 5][]

这时，你把鼠标放到画布上，还可以拾取画布颜色，效果如下

![Center 6][]

然后可以把它拖到下面相应的位置，上面填色的右边有个W：几几H：几几，那是长宽，也可以ctrl+T手动调，也可以选文字按扭下面那个箭头拖动（这个先不建议用，你可以试试，这要配合ctrl，shift之类的按键用，不熟的话用着很难受，但是熟练了就都用这个，比较方便，以后再说吧）

![Center 7][]

效果是这样，同样的方法，把其他框都做出来，效果如下

![Center 8][]

上面那部分原图里好像是图片，里面有内容，看不清，我就把它当做纯色了，加上文字，就是这样

![Center 9][]

图标还没有，图标如果要做的话需要钢笔工具，讲这个是个大工程，你可以网上找点专门讲钢笔工具的，不行的话，我下次再给你讲，这个比较复杂，页面就先这样。

第三步，切图

昨天让你下了cutterman，这是一个插件，选中图层，直接点就好了，就没什么讲的了。

这里主要讲没有cutterman怎么办，方法有很多种，

方法一：我比较常用的方法，将图层选中（可以多个图层），右键—转化成智能对象\--再右键—编辑内容

![Center 10][]

这时会新开一个文档，后缀psb（正常ps源文件后缀psd，效果相同），然后文件—储存为，选png，确定，这样就把透明背景的图片切出来了。

方法二：不是画矩形的时候，都调过矩形的长宽吗，上面可以看到，新建一个文件，把它的长宽设为矩形长宽（非矩形图形设置成刚好能放进该图形的大小），然后选中要切的图层，右键—复制图层，在目标里选中你新建的文件，点确定，然后进入新建的文件，调整复制过来的图层位置即可，将背景图层左边的眼睛点掉（不点掉就是白背景），然后存成png。

![Center 11][]

其他方法不好用，这儿就不说了，这两种是我比较常用的，并不是正规切图的方法，没用到切图工具（其实我也不怎么会用）。但是比较方便。

感谢谭哥专门写的这个文档教我如何制作PSD图，这里分享给大家。不喜勿喷。

[Center]: /images/20220606/edd8e2b3415e4556886b836ba8217d45.png
[Center 1]: /images/20220606/d5058b54a1e44c3793a92a449cf1dbe3.png
[Center 2]: /images/20220606/8546fde4692343d497add5bec3e5316f.png
[Center 3]: /images/20220606/9d52cc5a4765450caa5d359f2f02d505.png
[Center 4]: /images/20220606/d65b3ba6777b40f99b3dfb7dfb200f2e.png
[Center 5]: /images/20220606/0c9e663870284a9e82eaeebabe280ff3.png
[Center 6]: /images/20220606/85ea947f805b43518c17310055f19ebd.png
[Center 7]: /images/20220606/2b9668e2d229486b96af3a1b49bf1d8c.png
[Center 8]: /images/20220606/270027f5c7c249878aaaef2edb4ad640.png
[Center 9]: /images/20220606/00442540d76d4096b006c59f845d7b2a.png
[Center 10]: /images/20220606/51e769d39a0349f7adf334dd68fe2f12.png
[Center 11]: /images/20220606/70fb5ccc517b4c7385a3895ce033fecf.png