1 / 37

網頁設計基本概念

網頁設計基本概念. 網頁圖檔的處理 按鈕製作 背景製作. 網頁製作工具介紹. Ulead PhotoImpact PhotoImpact 影像處理 圖形製作 網頁設計 Gif Animator 動畫 簡報 多媒體光碟 Album 管理多媒體檔案. 網頁製作工具介紹. PhotoImpact 工作區簡介. 功能表列. 一般工具列. 屬性工具列. 工具面板. 狀態列. 網頁圖檔的處理. 檔案格式. 網頁圖檔的處理. 檔案格式 BMP GIF JPGE PNG. 網頁圖檔的處理. BMP (Bit-Mapped) 壓縮

verlee
Download Presentation

網頁設計基本概念

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 網頁設計基本概念 網頁圖檔的處理 按鈕製作 背景製作

  2. 網頁製作工具介紹 • Ulead PhotoImpact • PhotoImpact • 影像處理 • 圖形製作 • 網頁設計 • Gif Animator • 動畫 • 簡報 • 多媒體光碟 • Album • 管理多媒體檔案

  3. 網頁製作工具介紹 • PhotoImpact 工作區簡介 功能表列 一般工具列 屬性工具列 工具面板 狀態列

  4. 網頁圖檔的處理 • 檔案格式

  5. 網頁圖檔的處理 • 檔案格式 • BMP • GIF • JPGE • PNG

  6. 網頁圖檔的處理 • BMP (Bit-Mapped) • 壓縮 • 無 • REL (Run-Length Encoding) • REL4 • REL8 • 優點 • 檔讀檔速度是最快 • 圖形品質最好 • 缺點 • 檔案十分龐大 • 沒有透明格式 • 應用 • 正方型圖片 • 按鈕 • 較小的背景圖

  7. 網頁圖檔的處理 • GIF (圖形交換格式) • 壓縮 • 256色調色盤 • REL (Run-Length Encoding) 全彩 769KB 256 188KB 32 94KB 4 34KB

  8. 網頁圖檔的處理 • GIF (圖形交換格式) • 壓縮 • 256色調色盤 • REL (Run-Length Encoding) • 優點 • 有透明及動畫的格式 • 較同規格(256色)的BMP還小 • 缺點 • 顏色流失 • 不適合作「會移動的圖形」 • 應用 • 不規則的圖形 • 按鈕 • 色彩簡單的背景圖 bmp gif

  9. 網頁圖檔的處理 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) 全彩 769KB Q30 17KB Q90 58KB Q50 24KB

  10. 網頁圖檔的處理 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) • 優點 • 全彩壓縮 • 可自定壓縮比 • 漸進式呈現

  11. 網頁圖檔的處理 • JPEG (靜態影像壓縮標準) • 壓縮 • DCT (Discrete Cosine Transform) • 優點 • 全彩壓縮 • 可自定壓縮比 • 漸進式呈現 • 缺點 • 圖形品質可能因壓縮而變差 • 沒有透明格式 • 應用 • 大型背景圖 • 照片

  12. 網頁圖檔的處理 • PNG • 壓縮 • 全彩調色盤 • 優點 • 有透明格式 • 較同規格(256色)的BMP還小 • 無失真 • 缺點 • 圖形品質可能因壓縮而變差 • 無動畫格式 • 應用 • 不規則的圖形 • 按鈕 • 色彩簡單的背景圖

  13. 網頁圖檔的處理 GIF JPEG • 綜合比較

  14. 網頁圖檔的處理 • JPEG檔的影像最佳化 • STEP 1 • 檔案另存新檔 • STEP 2 • 存檔類型 • JPG/JPEG/JPE (JPEG檔案交換格式) • STEP 3 • 選項 • 啟用選項對話方塊

  15. 網頁圖檔的處理 • JPEG檔的影像最佳化 • STEP 4 • 設定品質

  16. 網頁圖檔的處理 • GIF檔的影像最佳化 • STEP 1 • 檔案另存新檔 • STEP 2 • 存檔類型 • GIF (圖形交換格式) • STEP 3 • 選項 • 啟用選項對話方塊

  17. 網頁圖檔的處理 • GIF檔的影像最佳化 • STEP 4 • 選擇色彩數

  18. 網頁圖檔的處理 • GIF檔的影像最佳化 • STEP 5 • 調整調色盤

  19. 按鈕製作 • 簡單的按鈕 • Rollover按鈕製作

  20. 按鈕製作 • 簡單的按鈕製作 • STEP 1 開啟圖形檔 • STEP 2 選取基底影像

  21. 按鈕製作 • 簡單的按鈕製作 • STEP 3 按鈕設計師 • 網路按鈕設計師矩形

  22. 按鈕製作 • 簡單的按鈕製作 • STEP 4 按鈕設計 • 樣式 • 預設按鈕 • 方向 • 向內 • 向外 • 選項(按鈕邊界) • 寬度 • 上左下右 • 全部相等 • 全部自訂 • 透明度 • 色彩 • STEP 5 確定

  23. 按鈕製作 • LAB A: 製作一個簡單的按鈕 • 使用圖形檔 Spanner.jpg • 修改 mean.htm 之超連結 main1 為新的按鈕

  24. 按鈕製作 • Rollover按鈕製作 • STEP 1 • STEP 2

  25. 按鈕製作 • Rollover按鈕製作 • STEP 3 選項 • 按鈕是採用相同文字 • 調整MouseOver/MouseDown按鈕位移量

  26. 按鈕製作 • Rollover按鈕製作 • STEP 4 超連結 • 指定URL位置合相關選項

  27. 按鈕製作 • Rollover按鈕製作 • STEP 5 圖層 • 按其他標籤與圖層進行所需的修改

  28. 按鈕製作 • Rollover按鈕製作 • STEP 6 預覽 • 在整個製作過程皆可使用滑鼠在預覽標籤中測試rollover按鈕

  29. 按鈕製作 • Rollover按鈕製作 • STEP 7 匯出 • 選擇「至HTML」，儲存JavaScript與相關影像檔 • STEP 8 選擇儲存位置

  30. 按鈕製作 • Rollover按鈕製作 • STEP 9 影像品質 • JPEG圖形格式

  31. 按鈕製作 • LAB B: Rollover按鈕製作 • 標題文字:main2 • URL: main2.htm • 目標:main • 修改 mean.htm 之超連結 main2 為新的按鈕

  32. 背景製作 • 無接縫的並排背景

  33. 背景製作 • 無接縫的並排背景 • STEP 1 開啟JPEG圖形檔 • STEP 2 建立一選取區(非物件)

  34. 背景製作 • 無接縫的並排背景 • STEP 3 按鈕設計師 • 網路建立無接縫並排背景

  35. 背景製作 • 無接縫的並排背景 • STEP 4 背景影像設計 • 合併大小 • 影像選取區和本身的重疊強度 • 合併率 • 影像選取區和本身的混合強度 • 預覽 • 檢視並排後的外觀 • STEP 5 確定

  36. 背景製作 • LAB C: 製作無接縫並排背景 • 使用 lena.jpg 為原始檔 • 修改 foot.htm 之背景

  37. 參考資料 • JPEG Images & their applications on watermarking • 吳大鈞 • 影像數位化及處理 • 林景瑞 • PhotoImpact 8 使用手冊 • 友立資訊

More Related