这个教程里，我将向大家展示如何为iPad客户端创建一个flat UI风格的App应用。

教程准备

为完成这个教程，大家需要准备一些素材和插件，图片素材大家可以自行下载替代品。附件中的素材包括以下文件：

Ÿ -  Photoshop 参考线插件

Ÿ - 50 Mini Icons Set

Ÿ -  Additional Icons

Ÿ - 字体Pacifico

 - 字体Avenir (Black, Medium, Roman)

1.    创建商品页面

第1步

创建一个768*1024px的文档，如下所示：

第2步

下载安装好文档附件中的GuideGuide参考线插件。窗口 > 扩展 > GuideGuide，按照以下参数设置参考线，点击MakeGrid生成参考线：

接下来我们将再创建一些参考线。清除GuideGuide面板中所有参数，将Top margin区域的值设置为100px，如下所示，点击MakeGrid生成参考线：

使用矩形选框工具（M），在20px至100px的水平参考线之间拉出一个矩形选区，在GG面板中，将上边距设为10px，下边距设为10px，点击Make Grid生成参考线：

完成以上网格设置之后，使用矩形选框工具（M），在100px水平参考线以下的整个区域拉上选区，在GG面板中，将上边距设为20px，行数设为3，行间距设为20px，如下如所示：

现在，你的界面应该如下所示：

第3步

1. 创建一个新图层，填充颜色#5f666b，命名为bg。

2. 使用矩形工具（U），创建一个大小为257*1024px的矩形区域，填充颜色设为#292c2e，命名为Nav bg。

3. 使用矩形工具（U），创建一个大小为768*100px，颜色为#ffffff的矩形区域。这将是顶部栏的背景，将其命名为Topbg。

第4步

1. 打开Additional Icons（教程准备的素材） PSD文档，将status bar图层拖拽或拷贝到画布中，将其放在顶部高度20px的区域内。

2. 在AdditionalIcons PSD文档中，将logo组复制到画布中。

3. 接下来，用文字工具（T），写上“Sticks & Stones”字样，文字属性设为：字体—Pacifico，大小—20px，颜色—#292c2e。

为Top bg图层添加投影。右键单击Top bg图层，打开图层样式面板，选择投影，按以下参数进行设置：

第5步

现在我们将向文档中添加图标了。

1. 我们先来添加设置图标。从Additional Icons PSD中拷贝setting icon 图层到画布中。将其对齐右参考线，并垂直居中。

2. 在setting icon左边拉一条新的参考线，在距其20px的左边再拉一条参考线。

3. 使用文字工具（T），写上“James”字样，文字属性设置为：字体—Avenir Black，大小—14pt，颜色—#6d767c，全大写，右侧对齐2步中拉好的参考线。

4. 打开 50 Mini Icons（教程准备中的素材），拷贝User图层到画布中，放在距“James”5px的位置。

5. 重复以上过程，将Cart和Heart图标及相应文字加上。完成后显示如下：

第6步

1. 使用圆角矩形工具创建一个圆角为5px，大小为230*30px，颜色为#1c1f20的区域，将其命名为search bg。

2. 将Search图标（从50Mini Icons PSD中）拷贝到画布中。

3. 为searchbg 图层添加投影，参数设置如下：

第7步

1. 使用矩形工具（U）创建一个大小为230*310px，颜色为#1c1f20的矩形区域，命名为MENS bg。将search bg的图层样式拷贝到MENS bg上，为MENS bg添加投影样式。

2. 使用椭圆工具（U）创建一个大小为7*7px，颜色为#88e2d2的圆形。

3. 使用文字工具（T）写上“MENS ”字样，字体：Avenir Roman, 大小：14pt，颜色： #ffffff，全大写。

第8步

1. 使用矩形工具（U），创建一个大小为1*1px，颜色为#464d51的矩形区域。按住Shift+Alt+Enter键，复制dot的同时将其下移5px，重复7次，得到一个8个点组成的线，选择8个点，右键>合并形状图层，将其命名为dotted_line_x 。

2. 复制图层，Ctrl+T将其旋转90度，将其命名为dotted_line_y。

3. 将dotted_line_x及dotted_line_y复制7次，按下图排列好后，将所有dotted图层合并为一个新图层，将其命名为dotted line。

使用文字工具（T）， 键入文字"Shorts, Tops, Sweaters, Coats, Pants, Swim, Accessories"，并垂直排列，如下图设置文字属性：

从Additional Icons中复制check-mark 图标至画布中，并放在距Sweaters 5px的位置。

将所有这些图层放到一个组中，并将其命名为Mens。

第9步

1. 复制组Mens，并下移至上边缘距组Mens下边缘15px的位置。

2. 将Mens副本改名为Womens，并删掉除背景图层、圆点图层及MENS文字图层之外所有的图层。

3. 将Mens bg图层重命名为Womens bg。Ctrl+T将其高度调整至54px。

4. 复制Womens组，将其下移至距上图层15px的位置，并将其命名为Surf。

5. 同理创建Home 组。

第10步

1. 创建一个大小为236*288px，颜色为#ffffff的矩形区域，命名为product bg。

2. 将image01复制至画布中。

3. image01右键 > 创建剪切蒙版，调整图片大小及位置如下图所示，将图层image01及product bg组合到组product bg中。

1. 复制productbg组并将其重命名为pricebg。

2. 将price bg组内的product bg图层重命名为price bg。

3. Ctrl+T调整price bg图层高度至70px。

4. 选择image01图层，滤镜 > 模糊 > 高斯模糊，模糊半径设为20px。

双击image01 图层打开图层样式面板，按如下参数设置颜色叠加：

为price bg图层添加投影效果，参数设置如下：

第11步

1. 创建一个大小为50*70px，颜色为#88e2d2的矩形区域。

2. 使用直线工具，拉出一条粗细1px，宽度30px，颜色#ffffff的水平直线，使其水平居中且垂直居中于矩形区域内。

3. 使用文字工具（T），嵌入文字“$36”，文字属性为：Avenir Black, 14pt, #292c2e；以及文字“Simple Tee”，属性为：Avenir Black, 14pt, #3b4244；文字“White Tee”，属性为：Avenir Medium, 12pt, #6d767c.

4. 从Top Bar 中复制Cart Ic，移到price bg组中，将颜色调整为#ffffff；

5. 从Top Bar中复制Heart Ic至组price bg中。最终调整效果如下图所示：

重复最后两个步骤来完成剩余的5张图片区域，将图片区域所有图层集中到新建的组Product Page中，至此，我们的商品界面就已经完成了，接下来我们再来看一下设置界面和登录界面的设计。

1.    创建设置页面

第1步

1. 创建一个新组，命名为Settings，并且确保它在组Top Bar之下，组Product Page之上。

2. 在Settings组里，新建一个颜色为#ffffff的图层，将其命名为Overlay，图层不透明度调整为80%。

3. 使用圆角矩形工具（U），创建一个半径为5px，大小为450*300px，颜色为#f0eff5的区域。

4. 为圆角矩形图层添加投影样式，参数设置如下：

第2步

1. 复制Settings bg图层，并将其重命名为Settings Top bg。双击图层将颜色调整为#ffffff。

2. 使用直接选择工具（A），选中Settings Top bg最下面的两个锚点，右键 > 删除锚点。

使用转换点工具，将这两个点转为直角。

使用转换点工具选中最下面的两个锚点，按住Ctrl键，按住鼠标左键往上移动至形状高度为245px的位置，如下图所示：

为图层添加投影效果，参数设置如下：

1. 添加标题文字Settings，使其水平居中且垂直居中于SettingsTop bg图层内。

2. 添加文字“Done”，放在离边框右边缘20px的位置，如下图所示：

第3步

1. 创建标题文字“General”：Helvetica Regular, 14pt, #4f4f4f，全大写。放在离Settings Top Bar 20px的位置。

2. 使用圆角矩形工具（U），创建一个半径为5px，大小为410*88px，颜色为#ffffff的区域，命名为Setting Section 01，放在离“General”10px的位置。

3. 使用直线工具，创建一条粗细为1px，宽度为390px的直线，垂直居中图层Setting Section 01，并贴近右边缘。

4. 添加文字“About”“Version”：Helvetica Regular，18pt，#292c2e；

5. 添加文字“2.3”： Helvetica Regular ，18pt ，#b4b4b4；

6. 从Icons PSD文件中复制图标chevron ic至画布中，位置如图所示；

第4步

1. 创建标题文字“LocationService”： Helvetica Regular, 14pt, #4f4f4f，放在离Setting Section 0120px的位置；

2. 使用圆角矩形工具创建一个半径为5px，大小为410*44px，颜色为#ffffff的区域，将其放在离Location Services 10px的位置；

3. 添加“Auto-detectLocation”文字：HelveticaRegular, 18pt, #292c2e；

4. 使用圆角矩形工具创建一个半径为60px，大小为51*31px，颜色为#88e2d2的形状区域；

5. 使用椭圆工具创建一个大小为30*30px，颜色为#ffffff的区域，并为其添加投影效果，参数设置如下：

至此，设置页面就已经完成了：

1.    创建登录页面

第1步

1. 复制组 Top Bar，并将其重命名为Login，隐藏除Login之外的其它组；

2. 在Login组里，删除Like，Shopping，settingsic以及User组；

3. 创建新图层，命名为bg，置于图层Top Bg之下，填充颜色#292c2e；

4. 选中图层Topbg，Ctrl+T，将其高度调整为500px；

5. 展开Logo组，将Logo按如图位置进行摆放；

6. 将所有图层（不包括bg）添加至组Top Area中。

第2步

1. Ctrl + ；恢复所有参考线；

2. 使用直线工具创建一条粗细为1px，宽度为236px，颜色为#3d4144的直线，命名为Text field line，放置在离Top bg 150px的位置；

3. 新建Username文字图层：Avenir Roman, 14pt，#88e2d2。放置在靠近左侧参考线，离Text field line高20px的位置；

4. 选中Username及Text field line图层，复制图层，下移至离Text field line48px的位置，将Username修改为Password；

5. 复制Password图层，文字修改为Forgot Password？，颜色修改为#3d4144.

第3步

1. 使用矩形工具创建一个大小为236*50px，颜色为#1c1f20的矩形区域，命名为Login btn。添加文字Sign In（参数设置见下图），并使其垂直居中且水平居中于Login btn；

2. 为图层Login btn添加投影样式；

3. 将图层都添加到新组Signin btn中；

第4步

1. 复制Sign in btn组，并下移20px，重命名为Sign up btn；

2.  将图层Login btn重命名为Signup btn，将颜色调整为#88e2d2，将文字改为Sign Up，颜色修改为#292c2e；

3. 按如下参数设置投影样式。

登录界面最终如下：

结束语

在这个教程里，我向大家展示了如何在Photoshop中使用插件、参考线、矢量形状以及图层样式为一款ipad App应用创建3个不同的界面，我希望大家从教程中学习到的技巧能让你更好的完善自己的移动应用界面。

思考

最后大家思考一个问题：在购物图片部分，作者使用高斯模糊加白色透明的方式来处理图片，如果我们在用代码实现它的时候，该怎么做呢？