独家教程 | UI界面的PS“构建”指南

交互设计作品集中，在app设计方案成型后，同学们均会以平面形式来呈现最终产品效果。PS的灵活运用不仅能为app界面设计的美观程度加分，同时能够最大程度体现出app的产品特色与亮点。

汉艺2017届 T同学 交互设计专业 

获NYU（奖学金）、Pratt（奖学金）等名校录取offer

下面，本期康石石独家教程，教大家如何利用Photoshop软件制作作品集中的UI展示界面。

在制作UI界面之前，首先需要一个手机界面原型。由于不同手机的iOS、安卓系统有不同的尺寸要求，同学们可以通过查找不同手机的标准尺寸规格进行制作，或者利用现有相关素材进行制作。

不同手机型号标准尺寸规格

第一步

以iOS系统为例，使用iphone7手机外形素材

添加深灰色渐变背景

双击背景图层，弹出该图层的图层样式，设置灰色-深灰色渐变叠加。

第二步

按Ctrl+R调出标尺，从标尺拖动参考线，制作界面规格参考线。

建立新图层，按照参考线建立等比例大小的矩形作为界面背景。

第三步

利用矩形等形状工具插入图片

将图片拖入Ps中，调整图片大小，放到合适位置

图片的图层位置要在白色矩形上面

把鼠标放在两个图层之间，按Alt键，创建剪贴蒙版

第四步

新建图层，添加黑色矩形，调节透明度

在黑色矩形上添加白色字体

Tip：文字的添加需要考虑对比度，保证使用者能看清楚文字。

全选，按Alt+→，调节字母间隙

第五步

制作界面框架，建立一个矩形，在矩形下方添加文字

按住Alt+Shift键，用鼠标拖动该图层、文件夹等，进行平行复制（可通过建立参考线进行辅助）。

在交互设计中，要注意版式设计的整齐美观

第六步

重复第三步，为每个矩形添加图片，创建剪贴蒙版

第七步

检查整体排版并进行调整，发现主图与风格不符，修改为冷色调图片。

完成如下

制作UI界面，要考虑图片、按钮等素材与设计主题的匹配性，还要充分考虑设计的整体风格与色彩搭配。在制作过程中，对于不符合设计主题的元素要及时发现并作出调整，从而达到作品的整体性和一致性。

如有艺术留学&作品集创作的问题，请将自己的问题梳理好，以方便康石石能够更快捷地为大家解答。

提问方式很简单

• 问留学：

• 申请国家+院校+专业+个人情况

• 问作品集：

• 专业+申请学位+作品集相关疑问

• 参加作品集培训：

• 个人姓名+留学国家+专业

希望康石石能帮到每一名艺术生

无论艺术留学，还是艺术设计，或是认知世界