課程連結:Adobe XD 網頁設計好容易| 六角學院

一、向量是什麼?

  • 點陣圖
    • 繪圖原理:由一格格的「像素(Pixel)」組成,每格都是獨立色彩
    • 優點:色彩層次表現細緻
    • 缺點:縮放後會失真、檔案較大
    • 用途:照片、精細插畫
    • 副檔名:png/jpeg/bmp/tiff/gif
  • 向量圖
    • 繪圖原理:由點、線等數學方程式產生的幾何圖形
    • 優點:無尺寸限制可任意縮放、檔案較小
    • 缺點:細節表現不如點陣圖
    • 用途:插畫、網頁、商標
    • 副檔名:ai/cdr/eps/svg

二、RGB 與 CMYK

  • RGB(色光三原色)
    • 組成:紅(Red)、綠(Green)、藍(Blue),越疊越亮
    • 應用:色彩涵蓋範圍較廣,螢幕顯示
    • 色彩色階:0-255
    • 混色模式:加色混和
  • CMYK(印刷四色)
    • 組成:青(Cyan)、洋紅(Magenta)、黃(Yellow)、黑(Black),越疊越暗
    • 應用:模擬印刷油墨的色彩,印刷輸出
    • 色彩色階:0-100
    • 混色模式:減色混和

三、解析度

  • 解釋:影像中所含的像素數目,數目越高代表影像品質越好
  • 單位:
    • ppi(pixels per inch):每英吋有幾個「像素」,用於電腦顯示
    • dpi(dots per inch):每英吋有幾個「點」,用於印刷輸出
  • 常用解析度:
    • 電腦:1920 x 1080
    • 平板:768 x 1024
    • 手機:360 x 640
  • 圖片輸出格式:建議 PNG

四、網頁設計與平面設計的差異

  • 平面設計
    • 實體印刷輸出
    • 固定尺寸
    • 印刷技術、材質表現
  • 網頁設計
    • 需符合多種裝置尺寸
    • 透過滾動視窗瀏覽內容
    • 常有互動狀態視覺回饋

五、字體介紹:襯線、無襯線

  • 歐文體系
    • 襯線體(Serif):較明顯的筆畫粗細對比
    • 無襯線體(Sans-serif):粗細比較一致
  • 漢字體系
    • 黑體:粗細比較一致,容易和無襯線體混用,但不等於無襯線體
    • 明體(宋體):外型方正,橫筆細、縱筆粗
      推薦網路字體:Google Fonts