設計教程

Illustrator實例教程：設計一個天氣類的iOS APP

1714

設計APP的最終效果圖

1。設置你的AI文檔

我們將使用多個藝術委員會的意見不同的應用程序，一旦我們決定了從我們的開發(fā)人員幫助我們能去給我們創(chuàng)建的文檔。

步驟1

一開始我們需要創(chuàng)建一個文件，我們的移動設備的尺寸。因為我們在iOS平臺，我們將為iPhone 5具有比以前的更高的屏幕尺寸設計iPhone的化身。我發(fā)現(xiàn)很容易縮小后的其他設備的尺寸較大的工作。因為在所有的設計非常小，它會更容易消除空間而不是試圖擴大規(guī)模。為此，我們將文件640×1136分（而不是像素）。

在與開發(fā)商就決定，將有一個主屏幕會滑到左或右的透露更多信息的頭腦風暴。這一點我們也會建立多個藝術板以及這一次。每一個窗口將出現(xiàn)。一定要看看，徹底的細節(jié)的截圖。

步驟2

一旦文件被創(chuàng)造，我們將需要調整的顏色配置文件。所以去編輯>指定配置文件要禁用所有的顏色配置文件。當XCode準備你的資產被捆綁的應用程序完全帶任何資產關聯(lián)的顏色配置文件。因此最好是從你的文件，只需刪除任何顏色配置文件和定期測試你的設計在手機屏幕上以確保正確的顏色輸出。

2。創(chuàng)建背景

步驟1

我的背景是相當簡單的。因為我們有更多或更少的“平”的設計，我們將以純色和混合實現(xiàn)我們工作的影響。

我們將使用中等藝術委員會代表我們的應用程序的主頁。一個左就會發(fā)生在你選擇的位置。和一個右邊將出現(xiàn)在你選擇的日期。開始畫一個矩形相同的高度和寬度的藝術板中與我們的基準顏色填充它

步驟2

下一步，創(chuàng)建一個圓形，正是30×30pt填充顏色如下。

步驟3

復制這個新創(chuàng)建的圓并粘貼在其他?，F(xiàn)在調整大小2300×2300pt放下不透明度下降到0%。

步驟4

現(xiàn)在去對象>混合>混合選項…并選擇具體步驟然后將它設置為30。使（> >使共混物的物體）共混物。

步驟5

隨著共混還是選擇中心水平在畫板上然后中心圓在美工板頂如下圖。

步驟6

復制和粘貼在矩形平面背景混合我們剛剛創(chuàng)建的。現(xiàn)在選擇這兩個矩形和從圖層面板，選擇混合對象>剪貼蒙版>使。這樣我們就不用擔心我們的相當大的混合出血到其他藝術板。

步驟7

一個整潔的功能，我們會添加一些天賦的應用程序將有變化的背景的顏色取決于溫度。所以當我們剛才還當它是“熱”的背景下，我們現(xiàn)在要復制這些元素和調整顏色和位置代表一個更“冷”的感覺。

3。添加的主要信息文本

因為我們的混合界影響你可能會注意到一些落后的同時繼續(xù)創(chuàng)建你的應用程序設計的許多步驟。由于這只是審美的目的，我們可以先禁用混合層和離開平坦的背景顏色現(xiàn)在。要重新啟用混合層進行測試時，在您的移動設備，所以你可以看到你的文字作品的背景。

步驟1

我們將依靠類型獲取天氣信息在。因為這個原因，我選擇一些好的，干凈，易于閱讀的字體，真的給應用程序的某些個性。我會堅持兩個字體家庭和使用不同寬度的創(chuàng)造元素。

首先，我們需要表現(xiàn)出某種日期。選擇式工具（T）進入一個星期。我會用“星期二”，我們的“任務式”的字體設置為“薄”的重量。文本本身將是白色的，我們會添加一個陰影幫助它對峙的背景。然后我們的位置是以藝術板20px從頂部。要做到這一點，只是將它頂在包圍盒的接觸邊緣的藝術板，然后舉行移并按下來鍵盤上的箭頭兩次。

步驟2

選擇式工具（T）再讓我們創(chuàng)造我們的溫度計。我喜歡數字本身被集中在“度”符號是起飛的權利。因此，而不是圍繞在類型段落我一直保存著，左對齊面板只鍵入的數字我們會使用占位符。我會用“86”字體“Maven親”的以下信息：在下面的截圖中看到。

一旦創(chuàng)建，將其對齊到中心的藝術板頂部的。一旦對準到頂部，右鍵單擊文本和變換>移動…下來210pt?，F(xiàn)在選擇的類型和添加程度的標志。

小貼士一定要告訴你關于這個細節(jié)開發(fā)商以便他們能夠解決如何在應用程序本身創(chuàng)建不同的元素。

步驟3

現(xiàn)在我們已經有了溫度，讓我們添加一個位置。鍵入您的位置，這對我來說是“拿騷，呸”隨意使用自己的。給城市和國家的一些對比，我們將使用兩種不同的權重。該市將“任務式”設置為“常規(guī)”，該國將“任務式”設置為“瘦”。

至于位置，我說以前我喜歡的溫度圖為中心的思想，但所有其他文本我要對齊的基礎上的溫度圖的寬度的左。所以現(xiàn)在我將手動線這個地址到左邊的溫度和地方它20pt從底部。隨時按這個距離作為您認為合適的。一定要經常檢查您的移動設備上的元件。

步驟4

如果我們想在這里停止，但開發(fā)商想包括一些額外的信息。所以我們要創(chuàng)建的文本三個單獨的線。一個用于當前的時間，一個用于風速度，和另一個濕度。確保創(chuàng)建它們分別是我們要使用不同的字體大小和重量，這可以擺脫這些元素的行的高度。

我喜歡數字的形式從我們的“maven親”的字體，所以我會繼續(xù)使用這個字體在這些元素的數量只有我們會使用“媒體”的重量和對比他們的“任務哥特式”字體設置為“薄”，這更薄的字體我們也將它設置為“小型大寫“。你可以通過突出的合適的字體和點擊右上方的菜單圖標集的小帽子人物面板，然后選擇小型大寫。

4。添加的主要信息圖標

我們的排版得到我們的訊息相當好，但我們還需要創(chuàng)建圖標代表什么不同的數字，在應用程序指定的菜單。我愛上了我們的“專家親”的字體度符號的形狀，我以為我會把圖標元素結合在一起，通過重用該形狀可創(chuàng)建圖標的類型。

步驟1

隨著式工具（T）啟用類型度數符號。確切的大小并不重要，在這一點上我們會調整以適應我們的圖標大小。然后點擊右鍵并選擇“創(chuàng)建概要“為了轉換的類型為一個可編輯的形狀?，F(xiàn)在使直接選擇工具（一）并選擇較小的內部路徑并將其拆下。我們以后會使用行程為圖標得到適當的部件。一旦你有你的彎曲的方形一定要調整高度/寬度所以，他們是完全相同的。他們會稍微偏離我們需要確保它們是精確的時后添加元素。

步驟2

我們將使用和重用該形狀幾次，所以你要確保它的一個拷貝的情況下你松散的原始工作時?，F(xiàn)在我們將創(chuàng)建一個圖標來表示位置菜單。

我們的圓角方形復制，讓它縮小了32×32pt，并添加一個內中風的3

步驟3

使圓角矩形工具創(chuàng)建一個矩形，3×12增加圓角使兩端完全圓?，F(xiàn)在重復這三次以上的形狀和旋轉，從而形成一種十字形狀，然后組合在一起的對象。最后以組選，添加一個陰影并把它30pt無論從頂部和藝術板左。請務必檢查您的移動設備的間距和調整。

步驟4

我們復制我們的圓角方形圖標從我們的位置從其他的圖標會根據這個相同的形狀和尺寸。調整圓角矩形的位置到下我們的時間因素。像我想要的圖標，這些額外的細節(jié)也被外面的溫度只有這一次顯然將是左邊元素的測溫元件的實際程度的標志。

你可以想象，對于時間單元我們將創(chuàng)建一個時鐘圖標。我們的圓角方形將時鐘的臉，現(xiàn)在我們需要把這個鐘。選擇圓角矩形工具創(chuàng)建一個矩形，10×4PT并將其對齊的時鐘面中心。重復這一過程，只有這一次，讓它4×12。一旦你有了時鐘的手在一個舒適的黑子群元素結合在一起，并添加一個陰影。

步驟5

重復的圓形方再次從我們前面的圖標，并將其對齊的旁邊我們的風元素。這個圖標我們要達到好的效果，有助于進一步圖標本身風信息通過提供一個箭頭表示直接的風吹在。所以你也能猜到，我們會創(chuàng)建在這個特定的圖標中心箭。首先創(chuàng)建一個圓角矩形這是4×9pt和圍繞它的圓形廣場。其次，以創(chuàng)造一個完美的正方形圓角矩形工具這是12×12刪除一個角落。現(xiàn)在關閉，開放的路徑和旋轉它，所以它創(chuàng)造了我們的箭將中心點在箭頭的干部，確保頂圓角完全隱藏。

我們的箭完成，組干點在一起然后創(chuàng)建七多份。旋轉這些副本在季度增量，讓你有一個指向，一個指向右上方，另一個在右邊，等等。因為我們的主要形狀不完整的圓了簡單地旋轉形狀的箭頭不會工作，因此我們需要為每個方向的風可以吹箭頭圖標。一旦這些被創(chuàng)建您可以隱藏不需要的箭，然后組箭和圓形方共同申請陰影。

步驟6

貼一份我們的圓角方形的最后一次，它與我們的濕敏元件的線?，F(xiàn)在創(chuàng)建一個圓，8×8磅和中心對齊的主要形狀和把它更多的底部。使直接選擇工具（一）然后選擇最頂部的錨固點的圓拖起來創(chuàng)建一個下拉式的形狀，也將在處理一位作出更好的點滴。重復這一滴形狀兩次減小尺寸和放置在頂部和兩側的較大的液滴。最后組（控制+ G）元素組合在一起，并添加一個陰影。

步驟7

這一段的主要圖標我們需要一些代表日期。我們想出了一個日歷圖標也將顯示該月的日期。

開始創(chuàng)建一個圓角矩形這是40×36pt并給它一個內在的行程三分。現(xiàn)在去對象>擴展外觀將中風的實際形狀。隨著直接選擇工具（一）啟用，選擇頂部內錨點，把他們推向9px使用鍵盤上的箭頭鍵。隨著圓角矩形工具創(chuàng)建兩個圓形丸的形狀，9pt寬和任何高度你愿意的話，把它們放在更大的圓形廣場所以底部滿足一半大的空白區(qū)域之間。然后減去這些新的形狀從廣場的形態(tài)使用探路者面板。創(chuàng)建兩個藥丸的形狀，他們會在這段時間3×8磅并把它們在切出部分。最后，我們將添加以下設置一個占位符的日期，然后我們將這些元素并添加組陰影。

5。每小時的部件

當坡，開發(fā)商想有一套可滾動控件的應用程序的主頁顯示，預計每小時的天氣下那特別的一天。所以來結束我們的程序讓那些現(xiàn)在創(chuàng)建主頁。

步驟1

使圓角矩形工具創(chuàng)建一個白色矩形，165×250pt中心對齊，它與藝術委員會和地方它40px從藝術板底。

復制這個矩形和填補它與黑色。重復一遍，把它4px然后減去前面在探路者面板。你能把不透明度15%。

步驟2

我們再重復的白色矩形填充黑色，減少15%?不透明度。畫一個矩形形狀在這一個是79pt高和任何寬度和線到下面的矩形形狀的頂部。選擇他的新的矩形和較大的炭黑填充在下面再選擇相交的從探路者面板。

步驟3

使式工具（T）進入你選擇的溫度。我要確保有足夠的空間擴大，所以我選擇了數字“100”。我會用“失蹤的哥特字體在重的“黑”。文本本身也將是一個扁平的黑色不透明度下降到15%。然后我們將使它附近的容器的白色部分的頂。

步驟4

因為這是預計的天氣不會那么準確，所以我們會還包括可能的“低”和“高”。隨著式工具（T）再創(chuàng)造式你的估計，而不是使用“黑”的重量，而是將使用“瘦”。使這對底部，確保有足夠的喘息。

步驟5

暗桿的頂端，將我們的時間指示器。我們先前創(chuàng)建的副本在本教程中，并將其中心和這黑暗的酒吧區(qū)，左邊的時鐘圖標。您也可以復制文本的時間從以前一樣。一定要刪除陰影從這些元素，因為它是沒有必要的。

步驟6

最后，添加一個陰影對主要的白色矩形，然后這些元素組合在一起。你現(xiàn)在可以復制這種分組并將它們20px除了對核心要素確定調整為每一個新的復制時間的兩邊。作為一個額外的工具，我已經花時間去掉頁、減少它們的大小是235pt高如果你有約束鎖定時調整高度的部件將效仿。這將有一個十進制數，這是不確切的背后。由于這些是關閉頁面使用或遮蔽我們先前創(chuàng)建的隱藏到屏幕元素。

與我們的主頁是完整的。一定要打開背景混合和測試看它如何在您的移動設備。

6。創(chuàng)建菜單的位置

步驟1

現(xiàn)在讓我們開始工作，在我們的菜單。我發(fā)現(xiàn)很容易就復制層與主網頁的所有元素，然后選擇藝術委員會的主要頁面和粘貼復制的圖層左邊。它的立場，所以只有位置圖標在美工板的最右側可見。現(xiàn)在創(chuàng)建一個面具，是我國藝術董事相同的尺寸和隱藏了頁面的元素。

步驟2

由于我們的整體設計，而不是一個畢業(yè)的陰影表明主要頁面的菜單上的元素我們將使用一個扁平的黑色填充矩形設置為扁平的10%的不透明度這是4PT寬相同的高度，作為我們的藝術委員會。

步驟3

在這個菜單中，我們需要一個區(qū)域添加一個新的位置，以及列表我們的設置位置和開關來啟用/禁用自動定位檢測的單位，溫度顯示。讓我們通過創(chuàng)建新的位置開始。

選擇矩形工具（M）創(chuàng)建一個矩形，640×100pt并將其對齊的藝術板上面再添加一個陰影。

現(xiàn)在使圓角矩形工具創(chuàng)建一個矩形，8×32pt和填補它與黑色。復制這個矩形和旋轉它，所以它與以前的形狀形成了一個“+”符號。選擇矩形和團結他們從探路者面板。減少不透明度對25%中心垂直的矩形單元我們創(chuàng)造的陰影從之前。一旦把它在垂直居中，距左邊距離等同于頂部和底部的邊界。

最后選擇式工具（T）輸入一句“添加新的位置……”使用“任務式”字體發(fā)送到“瘦”和下降不透明度對15%。

步驟4

重復之前的矩形和調整它的前一個然后調整底陰影。

復制在我們圓角方形形狀，我們使用我們的圖標，而不是以前的中風，填補它與黑色扁平然后減少不透明度對15%。復制“+”符號，我們在上一步和旋轉，從而形成一個“X”，它在我們中心圓形方形然后選擇減去前面選擇從探路者面板。

現(xiàn)在在我們的主頁的副本定位元素和刪除文本陰影并設置字體顏色為黑色和減少不透明度對25%。隨意添加多個實例，這樣我們可以看到列表將填充添加新項目。

步驟5

讓我們?yōu)檫@個菜單上的開關元件的工作。此元素將堅持這個菜單無論位置列表變得多么長的底部。首先創(chuàng)建一個矩形，640×200pt添加一個陰影。

隨著式工具（T），型為我們要切換標簽。一個將自動定位檢測和其他設定溫度是否在華氏或攝氏度顯示。由于主元這些開關是坐在200pt高空間。

我們把這兩個標簽之間的隔板。隨著直線工具（），創(chuàng)建一條線，476pt寬，給它一個行程本文。此行程將黑色的不透明度減少到磅。

步驟6

創(chuàng)建自己的開關，我們會利用圓形方形之前。復制這個形狀和大小來50pt和填補它與黑色。右鍵單擊這種形狀的選擇變換>移動…然后將其水平80pt點擊“復制”，而不是“好”。你現(xiàn)在應該有兩個圓形廣場旁邊的另一個。

選擇矩形工具（M）繪制一個矩形，高度為圓角方形同樣滿足每個直接在中間。選擇所有這三個元素團結他們在探路者面板。減少不透明度這個形狀15%并將其對齊正確旁邊的標簽。

步驟7

在我們的圓角方形再次粘貼，填充白色，它和調整大小為40×40pt。對齊到左邊或右邊的一面，有邊緣的距離。你現(xiàn)在可以復制這些形狀和翻轉水平表明相反的開關狀態(tài)。接下來添加在您的文字來表示開關狀態(tài)。兩個和非這樣做。

最后，你可以重復這個元素為單位選擇器以及。與我們的位置菜單是完整的。讓我們繼續(xù)我們的約會菜單。

7。將日期菜單

步驟1

這個日期的菜單將顯示為即將到來的幾天天氣。讓我們重復前幾步從位置菜單和復制整個主頁層面具，然后去了頁面的元素和添加一個矩形來表示菜單陰影。

步驟2

現(xiàn)在創(chuàng)建一個矩形，640×160pt并將其對齊到頂部，然后給它一個藝術委員會陰影。

步驟3

我們需要一些東西來表示日期，就像之前讓我們創(chuàng)建一個日歷圖標。創(chuàng)建一個圓角矩形，120×120pt并添加一個內中風，8。現(xiàn)在去對象>擴展外觀將中風的實際形狀。隨著直接選擇工具（一）啟用，選擇頂部內錨點，把他們推向30px使用鍵盤上的箭頭鍵。然后減少不透明度對15%。