前言
應用程序的圖標主要用來表達應用程序的用途，傳達應用程序的意念，也是博取使用者的好感的第一道門面。一個良好的應用程序圖標不但要能夠成功吸引使用的目光，還要能夠成為應用程序的最佳銷售員，成功的把應用程序營銷給用戶。有意開發 Windows Phone 7 應用程序的企業或個人除了要用心設計功能優良的應用程序以外，也要努力為應用程序制作一個吸引人的圖標，打點好應用程序的門面。有意發展 Windows Phone 7 應用程序的程序設計師可以參考本文的步驟為所開發好的 Windows Phone 7 應用程序制作專用的圖標，供 Microsoft 在線軟件商店及軟件目錄使用。請注意 Windows Phone 7 應用程序的圖標必須符合Windows Phone 7 Application Certification Requirements 文件內容的規范，Windows Phone 7 應用程序的圖標有兩種規范，一種是針對 Windows Phone 7 應用程序本身使用的圖標的規范，另外一種是提供給 Microsoft 在線軟件商店使用的應用程序圖標的規范。
Windows Phone 7 應用程序圖標的規范請參考表1 的說明：
表1：Windows Phone 7 應用程式圖示的規範
| XAP 封包中的圖示 | 寬 x 高 (單位：像素) | 檔案類型 |
| 應用程式圖示 |
62 x 62
|
PNG
|
| 顯示在 Windows Phone 7 桌面的並排圖示 |
173 x 173
|
PNG
|
提供給 Microsoft 線上軟體商店使用的應用程式圖示規範可以參考表2 的說明：
表2：提供給 Microsoft 線上軟體商店使用的應用程式圖示規範
| 圖示 | 寬 x 高 (單位：像素) | 檔案類型 |
| 提供給 Microsoft 線上軟體商店型錄使用的 Windows Phone 7 應用程式小型圖示 |
99 x 99
|
PNG
|
| 提供給 Microsoft 線上軟體商店型錄使用的 Windows Phone 7 應用程式大型圖示 |
173 x 173
|
PNG
|
| 提供給 Microsoft 線上軟體商店型錄使用的 Windows 應用程式圖示 |
200 x 200
|
PNG
|
程序設計師可以使用 Microsoft Expression Ultimate 4.0 版提供的 Microsoft Expression Design 4.0 為所開發的 Windows Phone 7 應用程序設計圖示，您可以視需要點選以下的連結到 Microsoft 網站購買 Expression Studio 4 Ultimate 或下載 Expression Studio 4 Ultimate 的試用版，以便設計應用程序專用的圖標。
首先請啟動 Microsoft Expression Design 4.0，並執行[編輯 | 選項 | 一般]功能，設定 Expression Design 4.0 的基本編輯特性。請點選左方窗口中的 [一般] 項目，於 [消除矩形鋸齒] 下拉選項中選擇：平滑，表示要以平滑的處理技術消除矩形鋸齒的現象。設定好的畫面如圖1 所示：
圖1： 設定消除矩形鋸齒的畫面
完成設定後請按下 [確定] 鍵關閉設定基本編輯特性的畫面。
設定妥基本編輯特性之後，我們就可以利用 Expression Design 4.0 設計 Windows Phone 7 應用程序的圖標了。
要使用 Expression Design 4 制作 Windows Phone 7 應用程序的圖標，請選擇 [檔案 | 開新檔案] 功能，執行建立新圖標檔案的工作，屏幕上就會出現如圖2的畫面，要求輸入欲建立的圖標檔案的相關信息：
圖2：要求輸入欲建立的圖標檔案相關信息的畫面
請於 [名稱] 字段輸入圖示檔案的名稱，於 [寬度] 字段輸入：1024，於 [高度] 字段輸入：1024，輸入完畢後請按下 [確定] 鍵，執行建立圖示檔案的動作。
建立好圖示檔案之後，我們要為新建立的圖示檔案加入一個 [矩形]，做為圖示的背景。請使用鼠標的左鍵點中 [工具箱] 窗口中的矩形圖標，再從出現的菜單選擇 [矩形] 功能，如圖3 所示：
圖3：選擇工具箱中的 [矩形] 功能的畫面
選妥 [矩形] 功能之後，請在編輯畫面中畫出一個矩形，大小不拘，畫好之後請使用鼠標的左鍵點選畫面右方的 [屬性] 窗口中的色彩面板，為所繪制的矩形選擇背景色彩。您可以先點選如圖4 所示的色彩列，挑選背景色彩的色系：
圖4：色彩列
再點選色彩列左方的色彩當做矩形的背景色彩，例如圖5 所示即為選擇綠色色調做為矩形的背景色彩的畫面：
圖5：選擇背景色彩的畫面
選妥背景色彩的矩形的畫面如圖6 所示：
圖6：選妥背景色彩的矩形的畫面
設定好矩形的背景色彩之後，接下來我們要調整矩形的大小，令其填滿整個圖示檔案的大小。請按下鍵盤的 V 鍵切換至選取模式，再點選畫面中的矩形。
鍵，切換至選取模式，再點選畫面中的矩形亦可。
選妥所繪制的矩形之後，您就可以利用 Expression Design 4.0 編輯窗口下方的[設定列]設定矩形的大小。圖7 所示即為可以用來設定對象大小的 [設定列]：
圖7：可以用來設定對象大小的 [設定列]
首先請點選 [設定列] 中的 [取消連結寬度和高度滑桿] 按鈕 (圖標為：
)，讓矩形的高度和寬度可以獨立設定，不會為了維持一定的高寬比例而產生連動，然後將矩形的高度和寬度都設定成 1024，使其填滿全部的編輯空間。
)，調整編輯畫面的顯示比例，方便進行編輯的工作。
設定妥矩形的大小之後請使用鼠標左鍵連按 Expression Design 4.0 右下方的 [圖層] 窗口中名稱為 [圖層1] 的圖層兩下，將圖層的名稱更名為：Base Layer，然後點選圖層右方的 [切換鎖定] 鈕 (圖示為
)，將編輯妥的圖層鎖定，防止被不慎修改，同時也可以避免圖層的內容變成應用程序圖標內容的一部分。
圖8 所示即為編輯好的 Base Layer 圖層：
圖8：編輯好的 Base Layer 圖層
完成編輯 Base Layer 圖層的工作之後，請使用鼠標的左鍵點選 [圖層] 窗口左下角的 [圖層選項] 按鈕 (圖標為
)，從出現的菜單選擇 [新增圖層] 功能，為圖標檔案加入新的圖層，並把新加入的圖層命名成：Square Base。我們將要在名稱為 Square Base 的圖層上設計應用程序的圖標。
加入好新圖層之後請於剛加入的圖層的中央加入一個矩形，為矩形指定不同於背景色彩的色彩，再利用 [設定列] 將矩形的高度和寬度都設定為 600 像素。
加好矩形後的編輯畫面如圖9 所示：
圖9：加好矩形後的編輯畫面
這個矩形就是設計應用程序圖標的區域。首先請切換至選取狀態，選擇剛剛加入的矩形之後，再將右方的 [屬性] 窗口中的 [不透明度] 字段的內容值設定為 0，將矩形設定成完全透明。
接下來我們就要進行設計圖示的工作了。首先請利用 [圖層] 窗口再加入一個名稱為 Windows Phone Icon 的圖層，您可以在這個圖層上繪制任意的圖案，當做應用程序圖標，或是視需要加入其他的圖層，以便設計出想要的圖示外觀。
圖12 所示即為繪制妥的應用程序圖標，其四周圍的黑色邊線即為 Square Base 圖層中的矩形，圖示的內容恰好在矩形的正中央。
圖12：繪制妥的應用程序圖標
完成設計應用程序圖標的工作之後，我們必須使用 Expression Design 4.0 提供的 [切片] 功能將繪制妥的圖示儲存成符合 Windows Phone 7 應用程序圖標規范以及 Microsoft 在線軟件商店圖示規范的圖文件大小與圖檔類型。透過 [切片] 功能的幫助，我們可以將圖示的某部分內容存成檔案，並指定匯出的檔案類別，而不是只能夠將圖示所有的內容儲存成檔案。
首先請使用鼠標圈選欲儲存成檔案的圖示內容，請注意您可以圈選部分圖示內容，也可以圈選全部的圖示內容，圖13 所示即為圈選全部的圖示內容的畫面：
圖13：圈選全部的圖示內容的畫面
完成圈選欲儲存成檔案的圖示內容之後，請執行 [對象 | 從選取建立切片] 功能，或是直接按下 Ctrl+Shift+K 組合鍵，被圈選的內容上方就會罩上一層半透明的屏蔽，如圖14 所示：
圖14：建立妥切片的圖示畫面
完成圖示切片之後，您可以在 [圖層] 窗口中看到一個名稱為 [切片圖層] 的新圖層，展開這個圖層，可以看到一個名稱為 [切片1.png] 的檔案，如圖15 所示：
圖15：檢視切片圖層內容的畫面
請使用鼠標的左鍵連按 [圖層] 窗口中名稱為 [切片1.png] 的檔案兩下，將文件名更名成：Marketplace_Desktop_200x200.png，並透過 [屬性] 窗口顯示的編輯切片屬性的 [高度] 和 [寬度] 字段將所建立的切片的高度和寬度皆設定為 200px，如圖16 所示：
圖16：設定切片屬性的畫面
做好之後您就已經擁有大小為 200x200 像素，文件類型為 PNG，可以提供給 Marketplace 軟件商店使用的桌上型應用程序的圖標了。
建立好第一個切片之後，請使用鼠標的左鍵點選 [圖層] 窗口中名稱為 [切片圖層] 的圖層右方的 [切換可見度] 按鈕 (圖標為
)，將 [切片圖層] 暫時隱藏起來，避免後續繼續建立切片時選擇到現有的切片的內容。
請依據表3 的圖標名稱和圖標大小將繪制妥的圖示內容另外切割成四張不同的切片，做為 Windows Phone 7 應用程序的圖標：
表3：Windows Phone 7 應用程序需要的圖標名稱和規格范
切片名稱
切片大小
Marketplace_Device_173x173.png
173 x 173
Marketplace_Device_99x99.png
99 x 99
Application_TileImage_173x173.png
173 x 173
Application_IconImage_62x62.png
62 x 62
切割妥應用程序需要的圖標後，您可以從 [圖層] 窗口看到一共五個切片檔案，如圖17 所示：
圖17：切割妥應用程序需要的圖標後的[圖層]窗口的內容
切割好 Windows Phone 7 應用程序需要的所有圖標之後，接下來我們就要將切片的成果導出成 PNG 類型的圖示檔案。您可以執行 [檔案 | 導出] 功能，Expression Design 4.0 就會以預覽的方式顯示所有的切片內容供您檢視，如圖18 所示：
圖18：匯出並預覽切片內容的畫面
您可以利用 [瀏覽] 鍵瀏覽到儲存圖示檔案的文件夾，再按下 [全部匯出] 鍵，就能夠將所有的切片檔案成功地導出成圖示檔案，供 Windows Phone 7 應用程序本身和 Marketplace 軟件商店使用。
准備好 Windows Phone 7 應用程序專用的圖標之後，您可以啟動 Visual Studio 2010 Express for Window Phone 或 Expression Blend for Windows Phone Beta，開啟 Window Phone 7 應用程序項目，然後執行 [Project | Add Existing Item] 功能，瀏覽並選擇到利用 Expression Design 4.0 建立的圖示檔案，將以下兩個圖示檔案加入到項目的根目錄中：
Application_IconImage_62x62.png
Application_TileImage_173x173.png
將上述兩個圖示檔案加入到 Windows Phone 7 應用程序項目之後，請使用鼠標分別點選 [Solution Explorer] 窗口中的剛剛加入的兩個圖示檔案，再到 [屬性] 窗口將圖標檔案的 [Build Action] 屬性的內容值設定成：Content，將 [Copy to Output Directory] 屬性的內容值設定成：Copy if newer，設定好圖標文件屬性的屬性窗口如圖19 所示：
圖19：設定好圖標文件屬性的屬性窗口
設定好圖標檔案的屬性之後，請使用鼠標的右鍵點中 [Solution Explorer] 窗口中的項目名稱，從出現的菜單選擇 [Properties] 功能，執行設定項目屬性的動作，然後於 [Icon] 下拉選項中選擇 Application_IconImage_62x62.png 圖示檔案，於 [Background Image] 下拉選項中選擇 Application_TileImage_173x173.png 圖示檔案，設定好的畫面如圖20 所示：
圖20：設定好 Windows Phone 7 應用程序項目欲使用的圖標的畫面
設定好項目欲使用的圖示檔案之後，程序設計師只要執行建置項目的動作，就可以成功地指定 Windows Phone 7 應用程序使用的圖標。
引用自：豬八戒網 http://www.zhubajie.com/wp7/view-id-91.html
為 Windows Phone 7 應用程序設計圖示
了解 Windows Phone 7 應用程序需要的圖標規格之後，接下來我們就要利用 Microsoft Expression Design 4.0 版進行設計應用程序圖標的工作。首先請啟動 Microsoft Expression Design 4.0，並執行[編輯 | 選項 | 一般]功能，設定 Expression Design 4.0 的基本編輯特性。請點選左方窗口中的 [一般] 項目，於 [消除矩形鋸齒] 下拉選項中選擇：平滑，表示要以平滑的處理技術消除矩形鋸齒的現象。設定好的畫面如圖1 所示：
圖1： 設定消除矩形鋸齒的畫面
完成設定後請按下 [確定] 鍵關閉設定基本編輯特性的畫面。
設定妥基本編輯特性之後，我們就可以利用 Expression Design 4.0 設計 Windows Phone 7 應用程序的圖標了。
要使用 Expression Design 4 制作 Windows Phone 7 應用程序的圖標，請選擇 [檔案 | 開新檔案] 功能，執行建立新圖標檔案的工作，屏幕上就會出現如圖2的畫面，要求輸入欲建立的圖標檔案的相關信息：
圖2：要求輸入欲建立的圖標檔案相關信息的畫面
請於 [名稱] 字段輸入圖示檔案的名稱，於 [寬度] 字段輸入：1024，於 [高度] 字段輸入：1024，輸入完畢後請按下 [確定] 鍵，執行建立圖示檔案的動作。
[說明]
大小為 1024 x 1024 的圖示檔案超過我們需要的圖示檔案的實際大小，這是為了提供足夠的圖示設計空間所做的設定，我們所設計的圖示的大小仍然必須符合表1 和表2 所列的圖示規范。建立好圖示檔案之後，我們要為新建立的圖示檔案加入一個 [矩形]，做為圖示的背景。請使用鼠標的左鍵點中 [工具箱] 窗口中的矩形圖標，再從出現的菜單選擇 [矩形] 功能，如圖3 所示：
圖3：選擇工具箱中的 [矩形] 功能的畫面
選妥 [矩形] 功能之後，請在編輯畫面中畫出一個矩形，大小不拘，畫好之後請使用鼠標的左鍵點選畫面右方的 [屬性] 窗口中的色彩面板，為所繪制的矩形選擇背景色彩。您可以先點選如圖4 所示的色彩列，挑選背景色彩的色系：
圖4：色彩列
再點選色彩列左方的色彩當做矩形的背景色彩，例如圖5 所示即為選擇綠色色調做為矩形的背景色彩的畫面：
圖5：選擇背景色彩的畫面
選妥背景色彩的矩形的畫面如圖6 所示：
圖6：選妥背景色彩的矩形的畫面
設定好矩形的背景色彩之後，接下來我們要調整矩形的大小，令其填滿整個圖示檔案的大小。請按下鍵盤的 V 鍵切換至選取模式，再點選畫面中的矩形。
[提示]
您也可以使用鼠標的左鍵點中左方 [工具箱] 窗口最上緣的鍵，切換至選取模式，再點選畫面中的矩形亦可。 選妥所繪制的矩形之後，您就可以利用 Expression Design 4.0 編輯窗口下方的[設定列]設定矩形的大小。圖7 所示即為可以用來設定對象大小的 [設定列]：
圖7：可以用來設定對象大小的 [設定列]
首先請點選 [設定列] 中的 [取消連結寬度和高度滑桿] 按鈕 (圖標為：
)，讓矩形的高度和寬度可以獨立設定，不會為了維持一定的高寬比例而產生連動，然後將矩形的高度和寬度都設定成 1024，使其填滿全部的編輯空間。 [要訣]
您可以利用編輯畫面左下角的比例設定下拉選項 (圖標為：)，調整編輯畫面的顯示比例，方便進行編輯的工作。 設定妥矩形的大小之後請使用鼠標左鍵連按 Expression Design 4.0 右下方的 [圖層] 窗口中名稱為 [圖層1] 的圖層兩下，將圖層的名稱更名為：Base Layer，然後點選圖層右方的 [切換鎖定] 鈕 (圖示為
)，將編輯妥的圖層鎖定，防止被不慎修改，同時也可以避免圖層的內容變成應用程序圖標內容的一部分。 圖8 所示即為編輯好的 Base Layer 圖層：
圖8：編輯好的 Base Layer 圖層
完成編輯 Base Layer 圖層的工作之後，請使用鼠標的左鍵點選 [圖層] 窗口左下角的 [圖層選項] 按鈕 (圖標為
)，從出現的菜單選擇 [新增圖層] 功能，為圖標檔案加入新的圖層，並把新加入的圖層命名成：Square Base。我們將要在名稱為 Square Base 的圖層上設計應用程序的圖標。 加入好新圖層之後請於剛加入的圖層的中央加入一個矩形，為矩形指定不同於背景色彩的色彩，再利用 [設定列] 將矩形的高度和寬度都設定為 600 像素。
加好矩形後的編輯畫面如圖9 所示：
圖9：加好矩形後的編輯畫面
這個矩形就是設計應用程序圖標的區域。首先請切換至選取狀態，選擇剛剛加入的矩形之後，再將右方的 [屬性] 窗口中的 [不透明度] 字段的內容值設定為 0，將矩形設定成完全透明。
接下來我們就要進行設計圖示的工作了。首先請利用 [圖層] 窗口再加入一個名稱為 Windows Phone Icon 的圖層，您可以在這個圖層上繪制任意的圖案，當做應用程序圖標，或是視需要加入其他的圖層，以便設計出想要的圖示外觀。
[特別注意]
- 在設計圖示內容之前請特別注意先使用鼠標的左鍵點選 [圖層] 窗口中名稱為 [Windows Phone Icon] 的圖層，確保所繪制的圖示內容會出現在正確的圖層上。請注意 [圖層] 窗口中被點選的圖層會有一圈淡藍色的外框，做為識別之用，例如圖10 所示的 [圖層] 窗口中，Windows Phone Icon 就是目前被選中的圖層：
圖10：
- 除了要確定圖示內容必須繪制在正確的圖層以外，您還必須將圖示的內容畫在名稱為 Square Base 的圖層上的矩形的正中央。您可以在完成繪制應用程序圖標的工作之後，使用鼠標的左鍵點選 [圖層] 窗口中名稱為 Square Base 的圖層右方的三角箭頭圖示，展開圖層的內容再選擇其中的矩形，如圖11 所示：
圖11：選擇 Square Base 圖層中的矩形
圖12 所示即為繪制妥的應用程序圖標，其四周圍的黑色邊線即為 Square Base 圖層中的矩形，圖示的內容恰好在矩形的正中央。
圖12：繪制妥的應用程序圖標
完成設計應用程序圖標的工作之後，我們必須使用 Expression Design 4.0 提供的 [切片] 功能將繪制妥的圖示儲存成符合 Windows Phone 7 應用程序圖標規范以及 Microsoft 在線軟件商店圖示規范的圖文件大小與圖檔類型。透過 [切片] 功能的幫助，我們可以將圖示的某部分內容存成檔案，並指定匯出的檔案類別，而不是只能夠將圖示所有的內容儲存成檔案。
首先請使用鼠標圈選欲儲存成檔案的圖示內容，請注意您可以圈選部分圖示內容，也可以圈選全部的圖示內容，圖13 所示即為圈選全部的圖示內容的畫面：
圖13：圈選全部的圖示內容的畫面
完成圈選欲儲存成檔案的圖示內容之後，請執行 [對象 | 從選取建立切片] 功能，或是直接按下 Ctrl+Shift+K 組合鍵，被圈選的內容上方就會罩上一層半透明的屏蔽，如圖14 所示：
圖14：建立妥切片的圖示畫面
完成圖示切片之後，您可以在 [圖層] 窗口中看到一個名稱為 [切片圖層] 的新圖層，展開這個圖層，可以看到一個名稱為 [切片1.png] 的檔案，如圖15 所示：
圖15：檢視切片圖層內容的畫面
請使用鼠標的左鍵連按 [圖層] 窗口中名稱為 [切片1.png] 的檔案兩下，將文件名更名成：Marketplace_Desktop_200x200.png，並透過 [屬性] 窗口顯示的編輯切片屬性的 [高度] 和 [寬度] 字段將所建立的切片的高度和寬度皆設定為 200px，如圖16 所示：
圖16：設定切片屬性的畫面
做好之後您就已經擁有大小為 200x200 像素，文件類型為 PNG，可以提供給 Marketplace 軟件商店使用的桌上型應用程序的圖標了。
建立好第一個切片之後，請使用鼠標的左鍵點選 [圖層] 窗口中名稱為 [切片圖層] 的圖層右方的 [切換可見度] 按鈕 (圖標為
)，將 [切片圖層] 暫時隱藏起來，避免後續繼續建立切片時選擇到現有的切片的內容。 請依據表3 的圖標名稱和圖標大小將繪制妥的圖示內容另外切割成四張不同的切片，做為 Windows Phone 7 應用程序的圖標：
表3：Windows Phone 7 應用程序需要的圖標名稱和規格范
切片名稱
切片大小
Marketplace_Device_173x173.png
173 x 173
Marketplace_Device_99x99.png
99 x 99
Application_TileImage_173x173.png
173 x 173
Application_IconImage_62x62.png
62 x 62
[注意]
每一次完成切片的動作之後，[切片圖層] 會自動解除隱藏的狀態，回復到可見的狀態，您必須自行將 [切片圖層] 再度隱藏，再切割下一張切片，以免選取到現有的切片的內容。切割妥應用程序需要的圖標後，您可以從 [圖層] 窗口看到一共五個切片檔案，如圖17 所示：
圖17：切割妥應用程序需要的圖標後的[圖層]窗口的內容
切割好 Windows Phone 7 應用程序需要的所有圖標之後，接下來我們就要將切片的成果導出成 PNG 類型的圖示檔案。您可以執行 [檔案 | 導出] 功能，Expression Design 4.0 就會以預覽的方式顯示所有的切片內容供您檢視，如圖18 所示：
圖18：匯出並預覽切片內容的畫面
您可以利用 [瀏覽] 鍵瀏覽到儲存圖示檔案的文件夾，再按下 [全部匯出] 鍵，就能夠將所有的切片檔案成功地導出成圖示檔案，供 Windows Phone 7 應用程序本身和 Marketplace 軟件商店使用。
准備好 Windows Phone 7 應用程序專用的圖標之後，您可以啟動 Visual Studio 2010 Express for Window Phone 或 Expression Blend for Windows Phone Beta，開啟 Window Phone 7 應用程序項目，然後執行 [Project | Add Existing Item] 功能，瀏覽並選擇到利用 Expression Design 4.0 建立的圖示檔案，將以下兩個圖示檔案加入到項目的根目錄中：
Application_IconImage_62x62.png
Application_TileImage_173x173.png
將上述兩個圖示檔案加入到 Windows Phone 7 應用程序項目之後，請使用鼠標分別點選 [Solution Explorer] 窗口中的剛剛加入的兩個圖示檔案，再到 [屬性] 窗口將圖標檔案的 [Build Action] 屬性的內容值設定成：Content，將 [Copy to Output Directory] 屬性的內容值設定成：Copy if newer，設定好圖標文件屬性的屬性窗口如圖19 所示：
圖19：設定好圖標文件屬性的屬性窗口
設定好圖標檔案的屬性之後，請使用鼠標的右鍵點中 [Solution Explorer] 窗口中的項目名稱，從出現的菜單選擇 [Properties] 功能，執行設定項目屬性的動作，然後於 [Icon] 下拉選項中選擇 Application_IconImage_62x62.png 圖示檔案，於 [Background Image] 下拉選項中選擇 Application_TileImage_173x173.png 圖示檔案，設定好的畫面如圖20 所示：
圖20：設定好 Windows Phone 7 應用程序項目欲使用的圖標的畫面
設定好項目欲使用的圖示檔案之後，程序設計師只要執行建置項目的動作，就可以成功地指定 Windows Phone 7 應用程序使用的圖標。
引用自：豬八戒網 http://www.zhubajie.com/wp7/view-id-91.html
沒有留言:
張貼留言