在Adobe Illustrator 創(chuàng)建一個井字游戲的APP（上）
在接下來的步驟里你將會在Adobe Illustrator 里創(chuàng)建一個詳細的井字游戲的界面。
按commend/ctrl+N 創(chuàng)建一個新文檔，在寬度框里輸640，高度框里輸990，然后按下”高級“按鈕，選擇RGB，屏幕（72ppi），確認”使新建對象和像素網(wǎng)格對齊“沒被選中，然后按”確定“。
啟用網(wǎng)格（視圖>顯示網(wǎng)格）和對齊網(wǎng)格（視圖>對齊網(wǎng)格），首先你將需要一個間隔是10px的網(wǎng)格，所以去編輯>首選項>參考線和網(wǎng)格，在網(wǎng)格線間隔填10，次分格線填8。你也要打開信息面板（窗口>信息）來預覽大小和形狀所在位置。不要忘了在 編輯>首選項>單位>常規(guī) 設(shè)置”像素“為標準的計量單位。所有這些選擇都將大大的加快你的工作速度。
2.創(chuàng)建一個錐形漸變效果（Conical Gradient） Step 1
在工具欄里選擇矩形工具（M），刪除描邊顏色然后填色設(shè)置為R=29 G=166 B=224，移到畫布上，簡單的華哥640px的正方形，位置如下圖所示，對其網(wǎng)格應(yīng)該會減輕你的工作。
請確保你的藍色正方形仍然被選中并復制一層在前面（CTRL+C > CTRL+F）,選擇拷貝的那層并向下圖所示用景象漸變代替藍色，確保這圖層被選中并在拷貝一層在前并用白色填充，去圖層面板使這圖層不可見。
選擇漸變矩形的正方形，然后選擇對象>擴展，在擴展窗口選擇漸變網(wǎng)格按確定。移到圖層面板你將會發(fā)現(xiàn)一個組里有一個網(wǎng)格和剪貼路徑，刪除剪貼路徑并取消組只保留網(wǎng)格（CTRL+SHIET+G）。獲取選擇工具（V），選擇你的網(wǎng)格并向左移動一點，這樣使他吸附到網(wǎng)格。
禁用對齊網(wǎng)格（視圖>對齊網(wǎng)格），選擇你的網(wǎng)格，獲取網(wǎng)格工具并按下圖所示增加一些新的網(wǎng)格點。
繼續(xù)注意你的網(wǎng)格并選中直接選擇工具（A），一個一個的選擇網(wǎng)格的點并設(shè)置顏色如下圖所示
注意圖層面板并讓白色方形圖層可見，同時選中該圖層和網(wǎng)格圖層，打開透明度面板，然后在收縮菜單選擇“建立不透明蒙版”，最后看起來就像第二張圖。
注意圖層面板，選擇藍色方形，將他置前（SHIFT+CTRL+]），然后注意外觀面板，首先用一個簡單的黑色代替藍色，選擇黑色填充，降低不透明度為5%，混合模式改成“疊加”，去“效果>藝術(shù)效果>膠片顆粒”，按下圖填屬性后按確定。
回到外觀面板并用”添加新填色“（下圖中藍色箭頭指出的）按鈕增加新填色，選中這個新填色，確保顏色是黑色，不透明度降至40%，混合模式改成“疊加”，去“效果>藝術(shù)效果>海綿”，按下圖填寫屬性后按確定并回到外觀面板，增加2pt的描邊，“使描邊內(nèi)側(cè)對其”，顏色設(shè)置為R=219 G=224 B=227。繼續(xù)來到外觀面板并按"添加新描邊"（下圖中由綠色箭頭指出），選中該描邊，使描邊寬為1pt，“使描邊內(nèi)側(cè)對其”，顏色設(shè)置R=113 G=123 B=126。確保這些紋理形狀仍被選中，打開圖形樣式面板，點擊“新建圖形樣式”，雙擊這個心的圖層樣式并命名為”texture“。
確信texture形狀仍被選中并拷貝一份在前面。選擇拷貝的那個并按鍵盤上的D鍵，外觀面板便出現(xiàn)默認的狀態(tài)（白色填充，1pt的黑色描邊）。接下來你就需要一個內(nèi)置的藝術(shù)筆刷，去畫筆面板，打來收縮菜單，去打開畫筆庫>藝術(shù)效果>藝術(shù)效果_粉筆炭筆鉛筆，在新的面板里你需要找到”炭筆_變化“筆刷，重新選擇這個形狀然后看外觀面板，選擇描邊，加入”炭筆_變化“筆刷并設(shè)置”R=50 G=50 B=50“。確定這個形狀在這步仍被選中，移到圖形樣式面板，講新的圖形樣式命名為”mask“。
重新將”mask“圖層樣式和textured方形選中，在透明度面板的收縮菜單選擇”建立不透明度蒙版“
啟用對齊網(wǎng)格（視圖>對齊網(wǎng)格），在這步你講需要一個間隔是5px的網(wǎng)格，所以去編輯>首選項>參考線和網(wǎng)格，在網(wǎng)格線間隔中輸入“5”。用矩形工具（M），創(chuàng)建一個160px的方形，填充色為“R=83 G=93 B=96”，將它如下圖放置，去“效果>扭曲和變換>變換”，按左窗口（下圖）填寫參數(shù)，按確定并再一次選擇“效果>扭曲和變換>變換”按確定，去“對象>擴展外觀”，選擇生成后的組并按三次“CTRL+SHIFT+G”。
選擇九個方形，加入“炭筆_變換“筆刷并設(shè)置顏色”R=50 G=50 B=50“，如第二張圖所示一個個的選擇并隨機的旋轉(zhuǎn)他們，一旦你完成里就給他們編組（CTRL+G）。選擇該新組，使不透明度降至15%，并將混合模式變成”顏色減淡“
確保這個九個方塊的組仍被選中并將它拷貝一份置前（CTRL+C>CTRL+F）。打開新組，選中所有的九個方塊并用”粉筆_涂寫“筆刷代替”炭筆_變化“。重新選擇整個拷貝組，將混合模式變成”柔光“，不透明度增加到50%。
確保這個在前一步做好的組仍被選擇，并將它復制置前，取消這個新組,選中這九個方形，出去藝術(shù)筆刷的描邊，填充色為”R=83 G=93 B=96“。移到圖層面板按下圖以”1“到”9“給這些形狀命名。
看到方形”1“并選中，增加一個1pt的邊，”使描邊外側(cè)對齊“，設(shè)置顏色為”R=103 G=113 B=116“。用矩形工具（M），創(chuàng)建一個15 x 160px的形狀并按下面第二張圖所示的位置放置。切換到直接選擇工具（A）并注意到這個新矩形的頂部一面，選中右邊的描點并將它往下拉15px。一旦完成這個形狀就按下圖所示用線性漸變填充。確保這個形狀的線性漸變?nèi)阅芑顒樱P(guān)注顏色面板并按新建色板按鈕來保存這個漸變。用矩形工具（M）創(chuàng)建一個160 x 15px的形狀并按第四張圖所示的位置放置。切換到直接選擇工具（A）并看到新矩形的左邊部分，選中下面的描點并向右移動15px。一旦完成就用保存的漸變填充。
重新選擇方形”1“，拷貝一份并置前。選中這個拷貝，移除顏色的描邊并選中剩下的填充。按下圖所示用徑向漸變來替換原有的顏色。降低不透明度至50%，混合模式變成”柔光“。回到外觀面板并增加第二個填充，選中它，填充黑色，不透明度降至3%，講混合模式變成疊加在去”效果>藝術(shù)效果>膠片顆粒“，按下圖所示設(shè)置屬性然后按確定。確保在這步完成的形狀仍被選中，轉(zhuǎn)到圖形樣式面板，保存為一個新的圖層樣式，命名為”shading“。
重新選擇方形”1“和其他三個加亮的形狀，將他們編組（CTRL+G），切換到圖層面板，命名這個新組為”frameOne“，選擇它并去”效果>風格化>投影“，按下圖所示設(shè)置屬性，按”確定“，然后去”對象>變換>對稱”，按“垂直”選項并按復制按鈕，這應(yīng)該創(chuàng)建了一個水平快速翻轉(zhuǎn)的復制組。選中它，把它拉到如第三張圖所示的位置。移到圖層面板并命名新組為“frameThree”，繼續(xù)關(guān)注圖層面板并移除方形“3“。
重新選擇”frameOne”和“frameThree“兩組并去”對象>變換>對稱“，選中”水平“選框并按下”復制“按鈕。把生成的組按第三張圖所示的位置。分別命名為”frameSeven“和”frame”然后移去方形“7“和“9“
注意看方形”2“，選中它，加上1pt的描邊，”使描邊外側(cè)對齊“，顏色設(shè)置”R=103 G=113 B=116“。用矩形工具，創(chuàng)建兩個10 x 160px的形狀如下第二張圖所示擺放。切換到直接選擇工具（A）并注意左邊矩形的上面部分。選擇右邊描點并將它往下拉15px。移到右邊矩形，注意頂部，選中左邊的描點并向下拉15px。一旦完成了就將這兩個形狀用保存的漸變來填充。重新選擇矩形工具（M），創(chuàng)建一個160 x 15px的形狀并按如下第四張圖所示擺放。切換到直接選擇工具（A）并注意著新矩形的下面部分，選擇左邊的描點向右拉10px并將右邊的描點向左拉10px，完成后就用以保存的漸變填充。
重新選擇方形”2“，復制一層置前，選中這拷貝，增加”shading“圖形樣式并注意到外觀面板。選擇底部填充并按下圖所示調(diào)整漸變填充。
重新選擇方形”2“和四個提亮的形狀并組合他們（CTRL+G）。移到圖層面板。命名為”frameTwo”，選擇它并去“效果>風格化>投影”，按下圖所示設(shè)置屬性，點擊“確定”，然后去“對象>變換>對稱",選中“水平”（horizontal）并按復制按鈕。這將創(chuàng)建拉一個垂直翻轉(zhuǎn)的組。選中它，把它拉至如第三張圖所示的位置。移到圖層面板并命名新組為“frameEight”。別忘了移除方形“8“。
重新選擇”frame Two“和”frameEight”組并去“對象>變換>旋轉(zhuǎn)（rotate）“，輸入90并按復制按鈕。一旦你完成就移到圖層面板，命名左邊的組為”frameFour”和另外個組為“frameSix“并刪除方形”4”和“6”。
注意方形“5“，選中它并加上1pt的描邊，”使描邊外側(cè)對齊“，顏色設(shè)置”R=103 G=113 B=116“。使用矩形工具（M），創(chuàng)建兩個10 x160px的形狀并按下面第二張圖所示位置擺放。切換到直接選擇工具（A）并注意左邊矩形的右側(cè)，選中上面描點并往下拉10px，下面描點往上拉10px，移到右邊矩形并注意它的左側(cè)，選中頂部描點往下拉10px，底部描點往上拉10px，一旦完成就用已經(jīng)保存的漸變填充。
重新選擇矩形工具（M），創(chuàng)建兩個160 x 10px的形狀并按下面第四張圖所示位置擺放。切換到直接選擇工具（A）并注意上面矩形的底部，選中左描點并往右拉10px，右面描點往左拉10px，移到下面矩形并注意它的頂部，選中左描點往右拉10px，右描點往左拉10px，一旦完成就用已經(jīng)保存的漸變填充。
重新選擇方形”5“，并拷貝一份置前，選中拷貝，并加入”shading”圖形樣式然后看外觀面板。選中底部填色并按下圖所示調(diào)整徑向漸變填充。重新選擇方形“5“和上面提亮的圖形并編組（CTRL+G）。移到圖層面板，命名新組為”frameFive“，選中它并去”效果>風格化>投影“，按下圖所示設(shè)置參數(shù)并按確認。
選中這所有九個frame組和有九個方形（兩個藝術(shù)筆刷）的兩個組并編組（CTRL+G）。移到圖層面板并將該新組命名為”Frames”。
關(guān)注“frameOne”并選擇矩形工具（M）。創(chuàng)建一個25 x 115px的形狀，用“R=39 G=170 B=225”并按第一張圖所示位置放置。確保這藍色矩形被選中并去“對象>變換>旋轉(zhuǎn)“。輸入90度按復制鍵。選中這兩個藍色矩形并按“路徑查找器”面板的“聯(lián)集（unite）”按鈕。選中最后的形狀去“效果>風格化>圓角“。輸入12.5px的半徑，單擊確定。然后去“對象>變換>旋轉(zhuǎn)“，輸入45度按確定。移動這藍色形狀如下第四張圖所示。
確保那個藍色形狀仍被選中并去“效果>扭曲和變換>變換”。輸入左窗口（下圖）的屬性，點確定并繼續(xù)去“效果>扭曲和變換>變換“，輸入右窗口（下圖）的屬性，點擊確定并去”效果>3D>凸出和斜角“,按下圖所示輸入屬性，確保選中”繪制隱藏表面“并按確定。
確保藍色形狀仍被選擇并去”對象>擴展外觀“，選擇生成后的組并按”SHIFT+CTRL+G“取消所有編組，查看圖層面板你將會看到一大串藍色形狀。
選取選擇工具（V），，選中九個頂部的”x”形狀并編組（CTRL+G），確保該新組被選擇，并用“R=142 G=150 B=155”代替藍色。移到圖層面板讓改組不可見。
選取選擇工具（V），選中其他的九個“x“形狀并編組（CTRL+G），確保該新組被選中，并用”R=72 G=80 B=85”來代替藍色。移到圖層面板，把這新組拉到不可見的組下面，也讓它不可見。
注意存在著的藍色形狀，選中一個形狀并去“選擇>相同>外觀（將會選中所有藍色形狀）”然后敲下鍵盤的"DELETE"鍵。在到圖層面板，打開兩個有“x”的兩個不可見的組然后取消編組（CTRL+SHIFT+G）。
注意“frameOne“，選擇更深的”x“形狀并復制在后面（CTRL+C>CTRL+B）。確保復制的那層仍被選中并注意外觀面板。移除顏色填充，增加一個”2pt“的邊并選中它。顏色設(shè)置黑色，不透明度降低至“10%”，混合模式設(shè)置“柔光“。繼續(xù)注意外觀面板并為這形狀增加第二個描邊。選中它，確保顏色為”黑色“，寬度為”4pt“，不透明度降至”5%“，混合模式設(shè)置為”柔光“。確保這個形狀在這部仍被選中，移到圖形樣式面板，保存這個新的圖形樣式并命名為”back“。
繼續(xù)注意”frameOne“，選中頂部的”x“形狀并復制一層在前（CTRL+C>CTRL+F）。確保這個形狀選中，注意外觀面板并增加第二個填充，選中它，顏色設(shè)置”白色“，混合模式變?yōu)?rdquo;疊加“，并去”效果>路徑>偏移路徑“，輸入”-1px“偏移限制，按”確定“，回到外觀面板。增加第三個填充并選中，用如下圖所示的徑向漸變，去”效果>路徑>偏移路徑“，輸入”-1px“偏移設(shè)置，按”確定“，去”效果>扭曲和變換>變換“，輸入按下圖所示的屬性，按”確定“，并去”效果>風格化>內(nèi)發(fā)光“，如下輸入屬性，按確定并回到外觀面板，增加”1pt“的描邊，”使描邊內(nèi)側(cè)對齊“，顏色設(shè)置為”R=102 G=110 B=115“，不透明度降至”15%“。
確保頂部的”x“形狀仍被選中。注意外觀面板，增加一個新填充并選中，使用如下圖一所示的徑向漸變，不透明度降至”70%“，去”效果>路徑>偏移路徑“，輸入”-1px“偏移限制并按確定。返回到外觀面板并增加一個填充。用下圖二所示的徑向漸變，不透明度降至為”10%“，混合模式變?yōu)?rdquo;疊加“，去”效果>路徑>偏移路徑“，輸入”-1px”便宜設(shè)置并按“確定”�；氐酵庥^面板并增加最后一個填充并選中。用如圖三所示的線性漸變，不透明度降至“25%”，混合模式變?yōu)?ldquo;疊加”，去“效果>路徑>偏移路徑”,輸入“-2px“偏移設(shè)置并按”確定“，確保被編輯到這部的形狀仍被選擇，移到圖像樣式面板，將新的圖形樣式保存為”frontGrey“。
注意工具欄并雙擊混合工具（blend tool）（或去對象>混合>混合選項..），在下拉框中選擇”指定的步數(shù)“，，在白框輸入”25“，按”確定“。注意”frameOne“，同時選擇原始的”x“形狀（一個只有一個填充），并敲”ALT+CTRL+B“，最后應(yīng)該如圖二所示。移到圖層面板，選擇這個新的混合仍被選擇，移到圖形樣式面板，保存新圖形樣式為”blendShadow“�；氐疆嫴�，重新選擇兩個曾調(diào)亮的”x“形狀的混合并編組（CTRL+G），移到圖層面板并命名該新組為”X1“。
接下來你應(yīng)該重復的給”x“形狀做”X1“的技術(shù)。這些將會更快應(yīng)為你保存了這些圖形樣式。這些是你需要做的事。注意”frameTwo”，選擇更深的“x”并復制一層置后“CTRL+C>CTRL+B”。選中這些復制并增加“back”圖形樣式�；氐疆嫴迹x中頂部的“x”并復制一層置前"CTR+C>CTRL+F"。選中該新復制的并增加“frontGrey”圖形樣式。回到圖層面板，注意“frameTwo”，選中原來的“x”形狀（一個就一個填充），敲“ALT+CTRL+B”并給新創(chuàng)建的混合增加“blendShadow”圖形樣式。選中該混合和兩個圖層并編組（CTRL+G）。移到圖層面板并命名改組為“X2"。繼續(xù)重復給其他的“x”進行這些技巧。一旦完成就將整個“x”組編組為（CTRL+G），并命名為“Xgrey”。
選擇“Xgrey”組，復制一層置前（CTRL+C>CTRL+F）并注意圖層面板。讓原來的“XGrey”組不可見，將拷貝的組命名為“XYellow”并打開它。選中一個“x”用“R=72 G=80 B=85”填充的，去“選擇>相同>外觀”，并用“R=192 G=108 B=13”代替“R=72 G=80 B=85”
繼續(xù)看“XYellow”組，選中一層用“R=142 G=150 B=155”，去“選擇>相同>外觀”并用“R=249 G=174 B=53”代替“R=142 G=150 B=155”。
繼續(xù)注意“XYellow”組，選中用“frontGrey”圖形樣式的"x"并用下圖所示的外觀代替，確保那些黃色形狀仍被選中，移到圖形樣式面板，保存新的圖形樣式并用“frontYellow”命名。.
繼選中其他用“frontGrey”圖形樣式的8個“x”，并用“frontYellow”圖形，一旦完成，就讓“XYellow”組不可見。
用橢圓工具（Ellipse tool（L）），創(chuàng)建一個100px的圓并按圖一所示位置放置。填充為“無”，但加上25pt的描邊，“使描邊向內(nèi)對齊”，并設(shè)置顏色為“R=29 G=166 B=224”。
確保100px的圓仍被選中并增加變換和“3D凸出和斜角（3D extrude & bevel）”
確保藍色形狀仍被選中并去“對象>擴展外觀”。選中最后生成的一組形狀并按（SHIFT+CTRL+G）三次去掉所有這些組。現(xiàn)在注意最后生成的藍色形狀并簡單的重復之前“x”形狀的技巧。移除不要的藍色形狀并給頂部和底部的“o”重新上色。
確保這些“o”應(yīng)用之前的“x”的技巧并確保用之前保存的圖形樣式減輕你的工作。不要忘了編組，命名和組織這些形狀，最后你應(yīng)該有個名為“OGrey”的組。
復制（duplicate）“OGrey”組并命名為“OYellow”，打開新組并用“frontYellow”圖形樣式和用黃色的“XYellow“組的重新上色技巧。
先告一段落...喝喝茶繼續(xù)...
