建立網頁圖形的最佳作法

  1. Illustrator 使用手冊
  2. 認識 Illustrator
    1. Illustrator 簡介
      1. Illustrator 新增功能
      2. 常見問題
      3. Illustrator 系統需求
      4. 適用於 Apple Silicon 的 Illustrator
    2. 工作區
      1. 工作區基本介紹
      2. 建立文件
      3. 工具預設鍵盤快捷鍵 | Illustrator
      4. 自訂鍵盤快速鍵
      5. 工作區域
      6. 自訂工作區
      7. 屬性面板
      8. 工具收藏館
      9. 設定偏好設定
      10. 觸控工作區
      11. Illustrator 中的 Microsoft Surface Dial 支援
      12. 復原、還原與自動化
      13. 旋轉檢視
      14. 尺標、格點和參考線
      15. Illustrator 協助工具
      16. 安全模式
      17. 檢視圖稿
      18. 搭配 Illustrator 使用 Touch Bar
      19. 檔案和範本
      20. 使用 Adobe Creative Cloud 進行同步設定
  3. iPad 版 Illustrator
    1. iPad 版 Illustrator 簡介
      1. iPad 版 Illustrator 概觀
      2. iPad 版 Illustrator 常見問題集
      3. 系統需求 | iPad 版 Illustrator
      4. 在 iPad 版 Illustrator 上可以和不可以做的事
    2. 工作區
      1. iPad 版 Illustrator 工作區
      2. 觸控快捷鍵與手勢
      3. iPad 版 Illustrator 鍵盤快捷鍵
      4. 管理您的應用程式設定
    3. Documents
      1. 在 iPad 版 Illustrator 中處理文件
      2. 讀入 Photoshop 和 Fresco 文件
    4. 選取和排列物件
      1. 建立重複物件
    5. 繪圖
      1. 繪製及編輯路徑
      2. 繪製及編輯形狀
    6. 文字
      1. 使用類型和字體
      2. 沿路徑建立文字設計
      3. 新增自有字體
    7. 處理影像
      1. 處理影像
    8. 顏色
      1. 套用顏色和漸層
  4. 雲端文件
    1. 基本概念
      1. 使用 Illustrator 雲端文件
      2. 共用 Illustrator 雲端文件和協作
      3. 升級 Adobe Illustrator 的雲端儲存空間
      4. Illustrator 雲端文件 | 常見問題
    2. 疑難排解
      1. 疑難排解 Illustrator 雲端文件的建立或儲存問題
      2. 疑難排解 Illustrator 雲端文件問題
  5. 新增並編輯內容
    1. 繪圖
      1. 繪圖基本介紹
      2. 編輯路徑
      3. 繪製像素級最佳化線條圖
      4. 使用筆型、曲線或鉛筆工具繪圖
      5. 繪製簡單線條和形狀
      6. 影像描圖
      7. 簡化路徑
      8. 定義透視格點
      9. 建立 3D 物件
      10. 符號工具和符號組
      11. 調整路徑區段
      12. 以 5 個簡單步驟設計花朵
      13. 透視繪圖
      14. 符號
      15. 繪製網頁工作流程的像素對齊路徑
    2. 顏色
      1. 關於色彩
      2. 選取顏色
      3. 使用及建立色票
      4. 調整顏色
      5. 使用「Adobe Color 主題」面板
      6. 顏色群組 (調協)
      7. 顏色主題面板
      8. 重新上色您的圖稿
    3. 上色
      1. 關於上色
      2. 使用填色與筆畫上色
      3. 即時上色群組
      4. 漸層
      5. 筆刷
      6. 透明度和漸變模式
      7. 將筆畫套用至物件
      8. 建立和編輯圖樣
      9. 網格
      10. 圖樣
    4. 選取和排列物件
      1. 選取物件
      2. 圖層
      3. 群組和展開物件
      4. 移動、對齊和均分物件
      5. 堆疊物件    
      6. 鎖定、隱藏及刪除物件
      7. 複製物件
      8. 旋轉及鏡射物件
    5. 改變物件外框
      1. 裁切影像
      2. 將物件變形
      3. 組合物件
      4. 剪下、分割和剪裁物件
      5. 操控彎曲
      6. 縮放、傾斜及扭曲物件
      7. 漸變物件
      8. 使用封套改變外框
      9. 使用效果改變物件外框
      10. 使用 Shaper 和形狀建立程式工具建立形狀
      11. 使用即時轉角
      12. 增強型改變外框工作流程和觸控支援
      13. 編輯剪裁遮色片
      14. 即時形狀
      15. 使用「形狀建立程式」工具建立形狀
      16. 整體編輯
    6. 文字
      1. 建立文字
      2. 字體和印刷樣式
      3. 設定文字格式
      4. 讀入和轉存文字
      5. 格式化段落
      6. 特殊字元
      7. 建立路徑文字
      8. 字元與段落樣式
      9. 定位點
      10. 文字
      11. 尋找遺失字體 (Typekit 工作流程)
      12. 更新來自 Illustrator 10 的文字
      13. 阿拉伯文和希伯來文文字
      14. 字體 | 常見問答和疑難排解提示
      15. 營造 3D 文字效果
      16. 創意印刷樣式設計
      17. 縮放與旋轉文字
      18. 行和字元間距
      19. 連字和分行符號
      20. 文字增強功能
      21. 拼字及語言字典
      22. 設定亞洲字元格式
      23. 亞洲撰寫程式字體
      24. 使用漸變物件建立文字設計
      25. 使用影像描圖建立文字海報
    7. 建立特效
      1. 使用效果
      2. 繪圖樣式
      3. 建立陰影
      4. 外觀屬性
      5. 建立素描和馬賽克
      6. 陰影、光暈和羽化
      7. 效果摘要
    8. 網頁圖形
      1. 建立網頁圖形的最佳作法
      2. 圖表
      3. SVG
      4. 建立動畫
      5. 切片和影像地圖
  6. 讀入、轉存及儲存
    1. 讀入
      1. 讀入圖稿檔案
      2. 讀入點陣影像
      3. 從 Photoshop 讀入圖稿
      4. 置入多個檔案 | Illustrator CC
      5. 取消嵌入影像
      6. 讀入 Adobe PDF 檔案
      7. 讀入 EPS、DCS 及 AutoCAD 檔案
      8. 連結資訊
    2. Illustrator 中的 Creative Cloud 資料庫 
      1. Illustrator 中的 Creative Cloud Libraries
    3. 儲存
      1. 儲存圖稿
    4. 轉存
      1. 轉存圖稿
      2. 以批次方式收集資產及轉存
      3. 封裝檔案
      4. 建立 Adobe PDF 檔案
      5. 摘取 Extract CSS | Illustrator CC
      6. Adobe PDF 選項
      7. 檔案資訊和中繼資料
  7. 列印
    1. 準備列印
      1. 設定列印的文件
      2. 變更頁面大小和方向
      3. 指定剪裁或對齊的裁切標記
      4. 開始使用大型畫布
    2. 列印
      1. 疊印
      2. 使用色彩管理進行列印
      3. PostScript 列印
      4. 列印預設集
      5. 印表機的標記和出血
      6. 列印和儲存透明圖稿
      7. 補漏白
      8. 分色列印
      9. 列印漸層、網格及色彩漸變
      10. 白色疊印
  8. 自動化工作
    1. 使用「變數」面板進行資料合併
    2. 以指令碼自動化
    3. 以動作自動化
  9. 疑難排解 
    1. 啟動時當機問題
    2. 當機後復原檔案
    3. 檔案問題
    4. GPU 裝置驅動程式問題
    5. Wacom 裝置問題
    6. DLL 檔案問題
    7. 記憶體問題
    8. 偏好設定檔案問題
    9. 字體問題
    10. 印表機問題
    11. 與 Adobe 分享當機報告

Illustrator 提供多種工具,可讓您建立網頁版面,或建立網頁圖像並最佳化。例如,使用網頁安全色、平衡影像品質和檔案大小,以及選擇最佳的繪圖檔案格式。網頁圖形可利用切片和影像地圖等功能,且您可使用多種最佳化選項,確保您的檔案能夠完美地顯示在網頁上。

關於網頁圖形

設計網頁用的圖形時,必須考慮與設計列印圖形時不同的問題。 

牢記下列三項原則,可幫助您收集足夠資訊做出有關網頁圖形的適當決定:

使用網頁安全色彩。

色彩通常是圖稿中重要的部份。但是,您在畫板上所看到的色彩,並不一定是出現在別人系統網頁瀏覽器中的色彩。您在建立網頁圖形時可以採取兩種預防措施,以防止發生混色 (模擬無法使用色彩的方法) 及其他色彩問題。首先,一律使用 RGB 色彩模式。第二,使用網頁安全色彩。

平衡影像畫質和檔案大小。

要在網頁上流通影像,建立檔案大小較小的圖形檔是要素。檔案越小,網頁伺服器就的儲存和影像傳送更有效率,瀏覽者也可以更快速下載影像。您可以在「儲存為網頁及裝置用」對話框中檢視網頁圖形的大小及預估下載時間

為圖形選擇最佳檔案格式。

不同的圖形類型必須要以不同的檔案格式儲存,才能顯示其最佳效果,並建立適合網頁使用的檔案大小。如需有關特定格式的詳細資訊,請參閱網頁圖像最佳化選項

註解:

Illustrator 許多範本都是特別為網頁所設計的,包括網頁和橫幅。選擇「檔案 > 從範本新增」,以選擇範本。

關於像素預視模式

為讓網頁設計者可建立精確的像素設計,所以在 Illustrator 中新增像素對齊屬性。為某個物件啟用像素對齊屬性時,在物件中的所有水平和垂直區段都會對齊像素格點,可為筆畫提供明晰的外觀。在任何變形上,只要為物件設定這個屬性,就會根據其新座標重新對齊至像素格點。您可以從「變形」面板選取「對齊像素格點」選項以啟用此屬性。Illustrator 也會在文件層級提供「使新物件對齊像素格點」選項,預設會針對 Web 文件啟用。在啟用這個屬性後,繪製的任何新物件預設都會設定像素對齊屬性。

如需詳細資訊,請參閱繪製網頁工作流程的像素對齊路徑

當您將圖稿儲存成點陣圖格式 (如 JPEG、GIF 或 PNG) 時,Illustrator 會將圖稿點陣化為每英吋 72 個像素。您可以選擇「檢視 > 像素預視」,預視點陣化時,物件將會如何顯示。當您想要控制點陣化圖形中物件的精確位置、尺寸和消除鋸齒等項目時,這項功能尤其實用。

若要瞭解 Illustrator 如何將物件分割成像素,請開啟含有向量物件的檔案,選擇「檢視 > 像素預視」,然後將圖稿放大,這樣便可以看到其中的個別像素。像素的位置取決於像素格點,這些格點會將工作區域分成 1 點 (1/72 英吋) 的增量。如果您放大顯示為 600% 檢視,便可以檢視像素格點。如果移動、新增或變形物件,該物件就會靠齊像素格點。最後的結果,所有緊鄰物件「靠齊」邊緣的消除鋸齒 (通常是左上角邊緣) 都會消失。現在,取消選取「檢視 > 靠齊像素」指令,然後移動物件。此時,您將無法在格線間放置物件。請注意對物件消除鋸齒作用的影響。如您所見,即使相當微小的調整也可能會影響物件點陣化的方式。

關閉「像素預視」(上) 與開啟「像素預視」(下) 的比較
關閉「像素預視」(上) 與開啟「像素預視」(下) 的比較

註解:

像素格點很容易受尺標原點 (0,0) 的影響。任意移動尺標原點將會變更 Illustrator 點陣化圖稿的方式。

建立行動裝置 Illustrator 影像的提示

若要最佳化行動裝置的圖形內容,請以任何 SVG 格式 (包括針對行動裝置特別設計的 SVG-t) 來儲存 Illustrator 建立的圖稿。

若要確保 Illustrator 建立的影像能在行動裝置上正常顯示,請參考以下的提示:

  • 使用 SVG 標準建立內容。如果使用 SVG 在行動裝置上發佈向量圖形,將有檔案小巧、顯示獨立性、更好的顏色控制、縮放能力,以及可編輯的文字 (在原始程式碼中) 等優點。此外,SVG 以 XML 為基礎,所以您可以將互動內容整合到影像中,例如反白、工具提示、特殊效果、音效和動畫。

  • 一開始建立影像時,便盡量以目標行動裝置的最終尺寸為考量。雖然 SVG 可縮放,不過以正確尺寸建立影像,將能確保最終圖形在目標裝置上擁有最佳的品質與尺寸。

  • 將 Illustrator 色彩模式設定為 RGB。SVG 是在 RGB 點陣顯示裝置上檢視,例如監視器。

  • 若要減少檔案大小,請嘗試減少物件 (包括群組) 數量,或是降低物件的複雜度 (較少點)。使用較少的點,將能大幅減少描述 SVG 檔案圖稿所需的文字資訊量。若要減少點數,請選取「物件 > 路徑 > 簡化」,然後嘗試不同組合以在品質和點數之間取得平衡。

  • 盡可能使用符號。符號只會定義一次描述物件的向量,而非定義多次。如果圖稿含有按鈕背景等會重複使用的物件,這會很有用處。

  • 將圖形製作成動畫時,請限制使用的物件數量,並且盡可能嘗試重複使用物件,以減少檔案大小。將動畫套用到物件群組中 (而不是套用到個別物件),避免產生重複的程式碼。

  • 考慮使用 SVGZ,也就是 GZIP 壓縮版的 SVG。根據檔案內容,使用壓縮可以有效減少檔案大小。文字通常可以大幅壓縮,不過如內嵌點陣 (JPEG、PNG 或 GIF 檔) 等二進位編碼的內容,則無法大幅壓縮。只要應用程式能展開以 GZIP 壓縮的檔案,便可用來解壓縮 SVGZ 檔。若要順利使用 SGVZ,請確認目標行動裝置可以解壓縮 GZIP 檔。

Adobe 標誌

登入您的帳戶