译文教程——在Adobe Illustrator 创建一个井字游戏的APP（下）

花吃泰戈尔

杭州/设计爱好者/10年前/485浏览

版权

花吃泰戈尔

继续上半段吧

7. 创建菜单框架

Step 1

使用矩形工具（M），创建一个550px，用”R=83 G=93 B=96“并按下图一所示的位置放置。确保新的形状仍被选择，注意外观面板并增加两个描边。选择下面的一个，使宽为1pt，设置颜色为”R=103 G=113 B=116“，”是描边向外对齐“，移到上面的描边，设置宽度为”11pt“，”使描边向内对齐“并设置颜色为”R=78 G=88 B=91“。

Step 2

使用矩形工具（M），创建两个”15 x 550px“的形状并按下图一所示位置摆放。切换到直接选择工具（A）并注意左边矩形的右边部分，选中顶部的描点并向下拉15px，然后选择底部的描点并向上拉15px。移到右边的矩形并注意它的左边部分。选中顶部描点并向下拉15px，然后选择底部的描点向上拉15px。一旦完成都用已保存的渐变填充。

Step 3

使用矩形工具（M），创建两个”550 x 15px“的形状并按下图一所示位置摆放。切换到直接选择工具（A）并注意上边矩形的底部部分，选中左边的描点并向右拉15px，然后选择右边的描点并向左拉15px。移到下边的矩形并注意它的顶部部分。选中左边描点并向右拉15px，然后选择右边的描点向左拉15px。一旦完成都用已保存的渐变填充。

Step 4

重新选择550px的方形，并复制一层置前，并将它放在最前。选中该拷贝，加上”shading“的图形样式并注意外观面板。选中底部填充并按下图所示调整径向渐变的位置。选中该新图形和550的方形和四个不规则图形并编组（CTRL+G）。选中该新组并命名为”frame“。

8. Create the Menu and the End Screen Text

Step 1

使用文字工具（T），增加”PLAY“,"SCORE"和”ACHIEVEMENTS“这些文本如下图所示。用”American Purpose font“字体，56px的尺寸和黑色。

Step 2

选择一段文本，注意外观面板并加一个新填充。选择该新填充并设置颜色为”R=142 G=150 B=155“。增加该文本的第二个填充，设置颜色为白色，混合模式为”叠加“，去”效果>路径>偏移路径“，输入”-1px“的便宜限制并按”确定“。回到外观面板并增加第三个填充。选中它，用如图所示的左边线性渐变，去”效果>路径>偏移路径“，输入”1px“的便宜限制，按”确定“并去”效果>扭曲和变换>变换“，按下图所示设置特性，按确定并回到外观面板，确定顶部填充被选中，并点击”复制属性“去复制选择的填充。选择新的，用右边下面图所示的线性渐变代替。降低不透明度到”75%“并将混合模式变为”柔光“。

回到外观面板，新建一个新填充，使它变黑，把它拉到外观面板的底部，降低不透明度为“5%”，去“效果>路径>偏移路径”，输入“1px”的偏移限制按“确定”。给这个文本增加第二个黑色填充，把它拉至外观面板底部，降低不透明度为“10%”，并去“效果>扭曲和变换>变换”，输入下图所示的特性，按“确定”并回到外观面板。增加最后一个填充并将它拉至外观面板底部。降低不透明度为“10%”去“效果>扭曲和变换>变换”，按图所示填写特性，点击“确定”并去“效果>模糊>高斯模糊”，输入“2px”的半径，按“确定”并最后看看外观面板里面，加“1pt”的描边，“使描边向内对齐”，设置颜色为“R=102 G=110 B=115”。确保该部分的文本仍被选中，移到图形面板，保存新图形面板为“greyText”。

Step 3

选择另外两个文本并增加“greyText”图形样式。选择这三快文字并编组。移到图层面板并将该新组命名为“menu”。

Step 4

复制之前做的组，移到图层面板并命名新图层为“menuHover”。选择该新组的一块文字，注意外观面板并用下图所示的特性代替。确保那黄色的文本仍被选中，移到图形样式面板，保存新的图形样式并命名为“yellowText”。

Step 5

使用文字工具（T），增加新的文本用相同的颜色和特性。

Step 6

选择这些新的文本，增加“greyText”图形样式并编组。移到图层面板并命名新组为“endScreen”。

Step 7

复制之前做的组，移到图层面板并命名新图层为“endScreenHover”。选择该新组的一块文字，注意外观面板并用下图所示的特性代替。确保那黄色的文本仍被选中，移到图形样式面板，保存新的图形样式并命名为“yellowText”。

Step 8

重新选择四个组和“frame”组并编组，移到图层面板并命名新组为“menuAndEndScreen”，现在，注意图层面板并确保所有图层可见。选中所有组，形状和网格，并编组，移到图层面板并命名新组为“main”。

9. 创建一个简单的图案（pattern）

Step 1

这一步你需要网格间距为1px，所以去“编辑>首选项>参考线和选项”，输入网格线间距为“1”，用矩形工具(M),创建一个2 x1px的形状并用“R=237 G=28 B=36”填充。继续用矩形工具（M），创建一个方形，用黑色填充并按图二所示放置。重新选择红色矩形并移除填充的颜色。选中这两个形状并拉他们至色板（swatches）将他们保存为图案。一旦你有拉图案就从画布上移除这些矩形。

Step 2

回到“网格线间隔为5px”，所以去“编辑>首选项>参考线和网格”，输入5。用矩形工具（M），创建一个“640 x15px“的形状，按如图所示用线性渐变填充，并按图所示将他放置”main“组下面。增加第二填充。降低不透明度为”40%“，混合模式变成”柔光“并用上保存的图案。移到图层面板并命名该黑色矩形为”divider“，复制”divider“，选择拷贝部分，按下图所示把他拉至”main“组的下方。

10. 创建分数Score Bar

Step 1

注意图层面板，打开”mian“组，并复制存在的网格。选中该网格，把他拉出组（图层面板的顶部），打开飞出菜单的透明面板并释放不透明蒙版。删除白色矩形并选中网格。把他拉到上面并按图一所示位置放置。用矩形工具创建一个”640 x 220px“的形状，用白色填充并按图二位置放置。选中该白色矩形和新的网格，打开透明面板的飞出按钮，并建立不透明度蒙版。最后就会做的如图三所示。

Step 2

使用举行面板（M），创建一个新的”640 x220px“的形状，按图一所示放置并增加”texture“图形样式。复制新的矩形，选择拷贝的并添加”mask“图形样式。重新选择这些矩形，打开透明面板的飞出按钮并建立不透明度蒙版。

Step 3

使用矩形工具（M），创建一个”105px“的方形，用”R=83 G=93 B=96“并按下图所示放置。给该形状增加1pt的描边，”使描边向外对齐，设置颜色为”R=103 G=113 B=116“。

Step 4

使用矩形工具（M），创建一个”15 x 105px“的形状并按图一位置放置。切换直接选择工具（A）并注意该新矩形的顶部，选中右边描点并向下拉10px。一旦完成就用保存的渐变填充。用矩形工具创建一个”105 x10px“的形状并按图三所示位置摆放。切换直接选择工具（A）并注意新矩形的左边部分。选中底部描点并下拉15px。一旦完成用保存的渐变填充。重新选择105px的方形，复制一层置前。选中该拷贝，增加”shading“图形样式并注意外观面板，选中底部填充并按下图所示调整径向渐变的位置。

Step 5

重新选择105px的方形和三个调亮的形状并编组（CTRL+G）。移到图层面板并将新组命名为“leftFrame”。选中它并去“效果>风格化>投影”。按下图所示输入属性,按“确定”并去“对象>变换>对称”，选中垂直并按复制键。选中生成后的翻转组，把它拉至图三所示位置。移到图层面板并命名该新组为“rightFtame”。

Step 6

注意“leftFrame”并选用矩形工具（M），创建一个15 x 65px的矩形，用“R=39 G=170 B=225”并按图一位置所示。确保蓝色的矩形仍被选中并去“对象>变换>旋转”，输入90度并按复制键。同时选中蓝色矩形并在路径查找器面板中按组合按钮。选中最后得到的形状并去“效果>风格化>圆角”，输入“7.5px”的半径，按确定并去“对象>变换>旋转"，输入45度角度按确定。注意”rightFrame“并选用椭圆工具（L），创建一个60px的圆并按图五所示位置放置。无填充，但加15px的边，使描边向内对齐，并设置颜色为”R=29 G=166 B=224“。

Step 7

选中这两蓝色的形状并去”对象>扩展外观“。选择生成后的形状进行复合路径（CTRL+8或"对象>复合路径>建立"）。确保该新复合路径仍被选中并去”效果>3D>凸出和斜角“。并按下图输入属性按确定。

Step 8

选择蓝色复合路径并去”对象>扩展外观“，取消编组（CTRL+SHIFT+G），得到的形状并用之前的”X“"O"的3D形状的图层样式填充。

Step 9

使用钢笔工具（P），按图一所示的位置创建一个45px的垂直路径。增加1pt的边，设置颜色为”R=113 G=123 B=126“，并去”效果<扭曲和变换<变换“，按下图所示输入属性，按确定并去”效果>风格化>投影“，按下面输入属性按确定。

Step 10

选取文字工具（T），并按下图给这些文字增加些样式。用”R=53 G=63 B=66”，在字符面板上输入下面所示的属性。一旦完成就选择这些文本并去“对象<风格化<投影”，按下图所示输入属性并按“确定”，选中所有的文字部分和网格，形状，组并使他们移至顶部并编组（CTRL+G）。移到图层面板并命名新组为“scoreBar”。

11. 创建停止栏

Step 1

重新打开“main”组并复制存在的网格，选中拷贝，移除存在的装饰。选中仍存在的网格，将它移出组，按图一所示拉至底部位置。用矩形工具(M),创建一个640 x 70px形状，用白色填充按图二所示位置放置。选中这些白色的矩形和新的网格，打开透明度面板的飞出菜单，选“建立不透明度蒙版”，最后应该如图三所示。

Step 2

使用矩形工具（M），创建一个640 x 70px的形状，按图一所示位置摆放，并添加“texture”图形样式。复制该矩形，选中拷贝的并添加“mask”图形样式。重新选择这两个矩形，打开透明度面板的飞出菜单，选中“建立不透明度蒙版”。

Step 3

使用矩形工具（M），创建一个100 x 40px的形状，按下图填充线性渐变并按下图所示位置放置。确保矩形仍被选中并注意外观面板。选中已经存在的填充并去“效果>风格化>内阴影”。按下图所输入属性，按确定并回到外观面板。增加第二个填充，降低它的不透明度为“40%”，改变混合模式为“柔光”并用你已经保存过的图案。

继续注意外观面板，增加1pt的边并选中它，用白色填充，“是描边向外对齐”，改变混合模式为“柔光”并降低不透明度为“50%”。回到外观面板，选中完整路径（按外观面板顶部的“路径”文字）并去“效果>风格化>圆角”，输入“5px“的半径，按确定并去”效果>风格化>投影”，按下图输入属性并确定。

Step 4

使用文字工具，穿件“STOP”文本并按图一位置放置。用“Agency FB”字体，15pt大小，粗体，间距为600。确保文本仍被选中并注意外观面板。增加新填充，选中并按图所示用线性渐变填充。继续注意外观面板并增加第二个填充。颜色设置为白色，降低不透明度为50%，改变混合模式为“叠加”并去“效果>路径>位移路径”，输入-1px的偏移设置按确定。回到外观面板并增加第三个填充。，选中它，增加按图下所示的线性渐变填充，并按（SHIFT+CTRL+E）去增加-1px的偏移路径，然后去“效果>扭曲和变换>变换”，按下图输入属性按确定并回到外观面板，并选中完整文字去“效果>风格化>投影”。按下图输入属性按确定。

Step 5

选择该文本、网格和底部部分并编组（CTRL+G），移到图层面板并命名新组为“StopBar”。

12. 创建螺丝

Step 1

使用椭圆工具，创建一个10px的圆，用“R=133 G=143 B=146”并按图一所示位置放置。确保这圆仍被选择并注意外观面板，增加第二个填充，选中它，并设置颜色为“R=93 G=103 B=106”并去“效果>转化为形状>矩形”，按下图输入属性，按确定并去“效果>扭曲和变换<变换”，输入下面的数据，按确定并回到外观面板。增加2pt的边，设置颜色为“R=93 G=103 B=106”，“使描边向内对齐”。回到外观面板，确保完全路径仍被选择并去“效果>风格化>投影”。按下图所示输入属性并按确定。移到图层面板并命名为“screw”。

Step 2

复制“screw”并按下图扩展，对齐网格将减轻你的工作。选中这些一个接一个的复，注意外观面板，打开存在的变换效果制随意的用旋转变换。一旦完成，选中这些“screw”并编组（CTRL+G）。移到图层面板并命名新组为“screws”。

Step 3

选中所有形状并创建组（CTRL+G），移到图层面板并命名新组为“640x 990”,这将是iphone4的视图

。

13. 创建iphone5的页面

Step 1

接下来，你需要创建一个iphone5的视图，首先，第一步您需要1px每格的网格，所以去“编辑>首选项>参考线和网格”，在网格线间隔输入1。选用画板工具（shift+o），注意有部分的画板并按图一创建一个640 x1136px的画板。复制“640 x960”的组，选中拷贝，把它拉至按图二所示的位置。锁定原来的“640 x 960”组并注意图层面板将拷贝的重命名为“640 x1136”。