本節書摘來異步社群《響應式web圖形設計》一書中的第7章，第7.1節，作者： 【美】christopher schmitt 譯者： 曾斌 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
響應式web圖形設計
adobe illustrator是專為編輯矢量圖形而設計的軟體。大部分的網絡圖像目前仍然是基于栅格的，但随着浏覽器對svg圖像的支援日益增強，illustrator正逐漸成為網頁設計師首選的圖像處理軟體。
打開adobe illustrator，你會看到一系列頁籤和面闆，其中有一個用于網頁開發的浮動面闆。請按照以下操作步驟在illustrator中打開web工作區：“視窗>工作區>web”（見圖7.1）。
web工作區包括以下幾種面闆。
變形面闆（transform）可對标尺、尺寸或位置進行微調（見圖7.2）。
調色闆可用來收集和存儲顔色樣本。同時，你也可以通過“視窗>擴充功能>kuler”調出kuler擴充。該擴充支援從adobe社交媒體網站選取由社群中的海量配色方案（見圖7.3）。
符号面闆（symbols）收集了可以重複利用的圖形執行個體。如果你在文檔中放置了圖形執行個體後，又對其做了一些更改，那麼文檔中的圖形執行個體就會相應地自動更新（見圖7.4）。
外觀面闆（appearance）用于改變透明度和混合模式。單擊illustrator對象可以改變一個對象的筆觸、填充、透明度和其他屬性（見圖7.5）。
畫闆面闆（artboards）可用來調整文檔工作區域的尺寸，修改其名稱；圖層面闆用于維護同一個工作區域内的圖形，進而便于查找群組合（見圖7.6）。
在針對網頁進行設計的時候，你需要確定使用了正确的布局尺寸。和預先設定好的工作區設定一樣，illustrator預置了一系列文檔尺寸，這些尺寸涵蓋了浏覽器和移動裝置的寬度和高度設定。
1．桌面網站設計
選擇“檔案>建立”，打開“建立文檔”對話框（見圖7.7）。
從“建立文檔配置檔案”下拉菜單裡，選擇web（見圖7.8），設定文檔的尺寸。
硬體性能變得越來越強，品質也在變得更好，桌面顯示器亦是如此。目前較為流行的預設尺寸有1 024×768和1 280×800，當然，你也可以自己手動設定更大的尺寸，例如1 366×768（見圖7.9）。
！為retina螢幕定制illustrator文檔
illustrator并沒有為蘋果的retina或者其他高密度螢幕定制尺寸。不過，所幸retina的尺寸實際上就是一般尺寸的兩倍。是以，為iphone的retina顯示屏進行設定時，你應當将尺寸設為640×960。ipad的retina屏尺寸應該設定為1 536×2 048。如果你想要獲得更多與移動裝置圖形相關的資訊，請檢視第13章。
2．移動網頁設計
說到小尺寸，要是能夠提供手機和平闆的尺寸，自然最好不過了。而illustrator恰好内置了一套移動端裝置尺寸，從建立文檔配置檔案（profile）菜單中可以選擇所需的裝置（見圖7.10）。
在下拉菜單中，有ipad、iphone、fire/nook、galaxy s和xoom的尺寸。
3．檢查站點尺寸
通過google analytics分析來檢視網站的通路資料（第4章/“網頁設計中的挑戰”中有詳細的描述）。登入google analytics分析，選擇“内容（content）>頁面資料(in-page apalytics)”（見圖7.11）。
接下來，選擇“浏覽器尺寸browser size”（見圖7.12），并調整web使用者百分比滑塊，進而顯示有多少網站訪客可以看到網頁中沒有被遮蓋住的部分（見圖7.13）。
！網頁不需要留出血
由于網頁不需要留“出血”部分（印刷術語，意思是設計要包括印刷部分的邊緣，以便于裁剪），這裡将其設定為0即可。
4．設定畫闆
當你想要創造許多個相似圖像的時候，使用illustrator的畫闆（artboards）特性就再友善不過了。例如你需要設計一系列logo，以便應用于移動裝置、桌面計算機、黑白印刷或全彩印刷（見圖7.14）。建立的illustrator文檔通常隻有一個畫闆，不過你可以自己動手多添加幾個。
想要給illustrator檔案添加更多畫闆，請按照以下4個步驟進行。
① 單擊工具欄裡的“畫闆工具”。
② 單擊并拖曳一個盒子到文檔區域，進而建立一個新畫闆。
③ 在螢幕右上角部分填入相應數值，對畫闆尺寸進行微調。
④ 在畫闆面闆中輕按兩下畫闆名稱，重命名畫闆。
5．選擇像素精度
想要檢視圖像導出為光栅圖像的效果，請選擇“視圖>像素預覽”（見圖7.15）。
将一幅圖像從矢量圖導出為光栅圖像，中間會有一個轉換過程。盡管原圖像是基于矢量的，新導出的光栅圖像還是會有一圈光環狀的像素點（見圖7.16）。
為減少圖像周圍不必要的像素，選擇“視圖>像素預覽”（見圖7.17），然後對圖像進行縮放和微移，使之與像素點能對齊得更精準（見圖7.18）。
illustrator有很強大的導出能力，專為導出網頁适用的圖像而設計。
1．為導出的圖像去除多餘空白
想要将圖像導出為适合網頁釋出的格式時，選擇“檔案>存儲為web和裝置所用格式”。如果圖像比畫闆小，那麼圖像周圍的空白區域也會作為圖像的一部分導出，這會生成一張相當大的圖（見圖7.19）。
為了隻導出畫闆上的圖案，取消原本勾選的“剪切到畫闆”選項（見圖7.20），然後單擊應用。
想要從illustrator中導出光栅圖像，請遵從以下6步。
① 準備好圖像後，選擇“檔案>存儲為web和裝置所用格式”，調出對話框。
② 在右上角，選擇想要使用的圖像格式：gif、jpeg或者png-8。正如第6章中所說，生成的png-24通常在檔案大小上會比導出的jpeg格式大不少，但如果原計劃是用gif圖像的話，我們完全也可以使用png-8。
③ 如有需要，則可以對每種格式的設定做些調整。
④ 在“雙聯”或者“四聯”的視圖中比較不同格式的圖像效果，檢查品質和檔案大小。
⑤ 當準備妥當後，選中圖像格式，單擊“存儲”按鈕。
⑥ 在“将優化結果存儲為”對話框中，給檔案起個名字，單擊“儲存”按鈕即可。
2．導出兩倍大的圖像
鑒于蘋果公司把自家的顯示屏像素數增加了一倍，為了适配其裝置，我們需要導出原圖兩倍大的圖像才行。當設計是基于矢量圖形的時候，針對蘋果的retina螢幕來對圖像進行放大，便變成了一件非常輕松的事情。
在“儲存為web和裝置所用格式”對話框中，設定百分數為200（見圖7.21），然後單擊“确定”按鈕退出此頁籤。
使用illustrator除了可以導出正常光栅圖像之外，還可以導出基于矢量的svg圖像。是以我們得以儲存矢量資訊——允許圖像在放大或者縮小的同時，不丢失一絲一毫的畫質。
從illustrator導出矢量圖像要遵從以下6步：
① 如需删除圖像周圍多餘的空白，選擇“對象>畫闆>适合圖稿邊界”。
② 選擇“檔案>存儲為…”，調出對話框。
③ 從格式下拉菜單裡選擇svg格式。
④ 如果你的圖像裡有文本，選擇子集化下拉菜單中的“僅使用的字形”，這有助于減少檔案大小。
⑤“小數位數”這一欄内的數值越小，意味着圖像品質越差。增大此值可以提升圖像品質，但與此同時，檔案大小也會變大。比較能夠接受的值為1到7。
⑥ 單擊“确定”按鈕，儲存svg檔案。