Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adobe Indesign CS5 iPad magazine 電子雜誌製作流程

12,521 views

Published on

Adobe Indesign CS5 iPad magazine 電子雜誌製作流程,iPAD Magazine

Published in: Technology
  • Be the first to comment

Adobe Indesign CS5 iPad magazine 電子雜誌製作流程

  1. 1. Adobe Indesign CS5Adobe Indesign CS5 電子雜誌製作流程電子雜誌製作流程 國立新竹教育大學 數位學習科技研究所 研二生 李芸茹;信箱 yunjuli@gmail.com 2010/11/15 yunjuli@gmail.com
  2. 2. 教學方向教學方向 本次實體課程將會分三部份介紹本次實體課程將會分三部份介紹 1. 工作介面介紹 2. 版面內容設計的技術2. 版面內容設計的技術 ▫ 版面設定與設計、排文 、框架、樣式設定(文字、 段落、物件)、建立表格、Adobe Kuler 色票應用、 Matadata設定等等 3. 如何導入多媒體元素 超連結 影片與圖片導覽 按鈕製作 書籤製作▫ 超連結、影片與圖片導覽、按鈕製作、書籤製作、 Action 應用 、頁面切換、轉存SWF & PDF 、360 度影像元件導入(Pano2 VR)等等度影像元件導入(Pano2 VR)等等yunjuli@gmail.com
  3. 3. 1 工作介面介紹(依本書講解)1. 工作介面介紹(依本書講解) • 推薦書籍:跟Adobe徹底研究InDesign CS5• 推薦書籍:跟Adobe徹底研究InDesign CS5 • 購買廠商: 益大資訊 • 出版社:上奇資訊• 出版社:上奇資訊 • 出版日期:2010年08月26日 語言:繁體• 語言:繁體 • ISBN:9789862570784 • 定價:650元,75折價:488元 圖片來源:益大資訊網站 yunjuli@gmail.com
  4. 4. 2 版面內容設計的技術2. 版面內容設計的技術 新增 文件 圖像 運用文件 運用 文字 設定 色票 應用設定 應用yunjuli@gmail.com
  5. 5. 新增文件新增文件 • 文件基本設定• 文件基本設定 • 多重頁面大小 (CS5 新功能) • 圖層功能• 圖層功能 yunjuli@gmail.com
  6. 6. 文字設定文字設定 • 套用文字樣式• 套用文字樣式 • 設定文字間距 yunjuli@gmail.com
  7. 7. 圖像運用圖像運用 • 圖片置入• 圖片置入 • 圖片多種符合功能 • 圖片選取方法• 圖片選取方法 • 圓角製作方法 快速套用物件樣式• 快速套用物件樣式 • 物件框之間的間隙應用 yunjuli@gmail.com
  8. 8. 色票應用色票應用 • 建立色票• 建立色票 • 導入Adobe Kuler 網站色票 yunjuli@gmail.com
  9. 9. 3 如何導入多媒體元素3. 如何導入多媒體元素 動畫 製作 聲音 處理 影片 導入 輸出 設定製作 處理 導入 設定 按鈕 物件 影片 第三 製作 狀態 導覽 方軟 體的 應用應用 yunjuli@gmail.com
  10. 10. 動畫製作動畫製作 • 動畫面板功能介紹動畫面板功能介紹 ▫ 名稱 ▫ 預設集預設集 ▫ 事件 ▫ 時間 ▫ 播放 ▫ 速度 縮放▫ 縮放 ▫ 不透明度 可見度▫ 可見度yunjuli@gmail.com
  11. 11. 按鈕製作按鈕製作 • 圖形轉為按鈕• 圖形轉為按鈕 • 按鈕的三種外觀設定 • 樣本按鈕應用• 樣本按鈕應用 • 按鈕事件應用 按鈕跨界遇視• 按鈕跨界遇視 yunjuli@gmail.com
  12. 12. 聲音處理聲音處理 • 格式支援:MP3• 格式支援:MP3 • 載入頁面時播放 • 翻頁時停止• 翻頁時停止 • 重複播放 yunjuli@gmail.com
  13. 13. 物件狀態物件狀態 • 圖層內容排法• 圖層內容排法 • 製作物件狀態 • 切換物件狀態• 切換物件狀態 • 製作Slideshow展示 yunjuli@gmail.com
  14. 14. 影片導入影片導入 • 支援格式:F4V、FLV、MP4、SWF、MOV• 支援格式:F4V、FLV、MP4、SWF、MOV.. • 轉檔工具:格式工廠、Adobe Media Encoder 媒體面板影片控制• 媒體面板影片控制 yunjuli@gmail.com
  15. 15. 影片導覽影片導覽 • 影片導覽點製作技巧(TIP) • 影片結合自製按鈕 yunjuli@gmail.com
  16. 16. 輸出設定(一般)輸出設定( 般) • Flash (SWF)翻頁輸出• Flash (SWF)翻頁輸出 • 頁面切換 • 互動式頁面捲曲• 互動式頁面捲曲 yunjuli@gmail.com
  17. 17. 輸出設定(進階)輸出設定(進階) • 影格速率設定• 影格速率設定 • 文字轉像素與外框 • 影像點陣化與平面化• 影像點陣化與平面化 • 各類影像輸出設定 yunjuli@gmail.com
  18. 18. 輸出設定(PDF)輸出設定(PDF) • 書籤與超連結啟用• 書籤與超連結啟用 • Matadata的設定 yunjuli@gmail.com
  19. 19. Create Magazines for iPADCreate Magazines for iPAD immersive content 現場實作 TIP現場實作 TIP yunjuli@gmail.com
  20. 20. 360 Vi Image PViewer Pan Web i Panorama View Panorama yunjuli@gmail.com
  21. 21. AND MORE yunjuli@gmail.com
  22. 22. 製作流程手冊製作流程手冊 yunjuli@gmail.com
  23. 23. 新增文件新增文件 新增文件前請務必確定您的文件大件 件 小將於哪個設備呈現,若有明確方 向,是最好的,若無,建議直接採 用 般螢幕大小 * 68 i l用一般螢幕大小:1024*768 pixel yunjuli@gmail.com
  24. 24. 新增文件:文件基本設定 STEP 1 Indesign 選單 檔案 新增 文件檔案>新增>文件 STEP 2 STEP 3 彈出式對話視窗 方式>網頁、不需對頁與主版文字框 頁面大小> 1027*768 邊界>全部設為0像素yunjuli@gmail.com
  25. 25. 新增文件:多重頁面大小 CS5 新功能,同一檔案中可設定不同的 頁面大小,以利同時製作不同表現型式 STEP 1 STEP 2 選擇面板中的頁面>選擇面板中的頁面> 編輯頁面大小 再選擇自訂頁面大小 在彈出式視窗中輸入 名稱與頁面大小,再 按下新增按鈕,方能 設定多種型態頁面 yunjuli@gmail.com
  26. 26. 新增文件:圖層功能 CS5 新功能,同一區的圖形能透過圖層 來做順序的調整,有點像是illu & Ph的 圖層概念 三角形展開後,可看到每個物件的前後 序 若需 序 直接 拖曳方式順序,若需調整順序,直接用拖曳方式 到所想擺放的位置就可 yunjuli@gmail.com
  27. 27. 文字設定文字設定 yunjuli@gmail.com
  28. 28. 文字設定:套用文字樣式 先把要用的幾個樣式 文字 做好規劃接著文字,做好規劃接著 再依序建立新樣式, 建議不要設定太多種 樣式以免混淆或太過樣式以免混淆或太過 於花俏,在每個樣式 名稱前,一定要以數 位為代號,中間為英位為代號,中間為英 文縮寫,最後才是中 文縮寫。 yunjuli@gmail.com
  29. 29. 圖形運用圖形運用 yunjuli@gmail.com
  30. 30. 圖像運用:置入圖片 製作電 雜誌 讀都 透 幕製作電子雜誌時,因閱讀都是透過螢幕, 因此在色域上請轉為RGB模式 STEP 1 STEP 2 先在物件樣式把圖片 做好樣式規劃,請選 擇基本圖形框架擇基本圖形框架 選項式窗中,請選擇基本屬性>框架符合選項 在內容符合區 符合 選擇等比例填滿框架在內容符合區>符合,選擇等比例填滿框架yunjuli@gmail.com
  31. 31. 圖像運用:置入圖片 檔案 多 的 作 排透過檔案>置入 多張的圖片作編排 STEP 1 STEP 2 用滑鼠拖曳一個較大 範圍後,按下鍵盤方 向鍵往右三次,往上 一次,便能自動做圖 框分割。 PS:整個過程中,滑 鼠不能放掉 完成範例圖示 yunjuli@gmail.com
  32. 32. 圖像運用:自動符合 在上方狀態列勾選  自動符合 圖片就會按照框架的縮放來調整 大小與比例大小與比例 yunjuli@gmail.com
  33. 33. 圖像運用:選取圖片方法 選擇圖片時,若出現中間透明甜甜圈, 用滑鼠對著它拖曳,便可移動框架內的 圖片 yunjuli@gmail.com
  34. 34. 圖像運用:物件樣式 在圖片上先設定自己歡的樣式, 如利用線條與效果的相關設定, 設定完成後,再點選圖片。 選擇要新增的圖形樣式 選擇物件樣式>新增物件樣式 設定完成後,再點選圖片。 yunjuli@gmail.com
  35. 35. 圖像運用:物件樣式 在彈出式對話框中命名此樣式名稱在彈出式對話框中命名此樣式名稱 並點選下方的套用樣式至選取範圍 yunjuli@gmail.com
  36. 36. 圖像運用:圓角樣式 對著黃點向下拖曳對著黃點向下拖曳, 一次改變四個框 按下黃點前 請按點選圖片 右下腳會出現一個 方框小黃點 點擊一下 式 會 成右邊 方框小黃點 會出現在 四個角落區 按下黃點前,請按 Shift鍵,再對它拖 曳,便可只改單獨 的圖形框角圖式就會變成右邊 的圖形框角 yunjuli@gmail.com
  37. 37. 圖像運用:間隙工具 (間隙工具) 此工具可同時移動多個框此工具可同時移動多個框 架之間的間隙及維持寬度 yunjuli@gmail.com
  38. 38. 色票運用色票運用 yunjuli@gmail.com
  39. 39. 色票運用:新增色票 yunjuli@gmail.com
  40. 40. 色票運用:Adobe的色彩設計和管理工具色票(FREE) 強烈推薦給無美學基礎的朋友 http://kuler adobe com/ 使用 Adobe kuler 是一種網頁代管色彩產生 主題網站,使用者只要輸入英文關鍵字就可 http://kuler.adobe.com/主題網站 使用者只要輸入英文關鍵字就可 以找到與此主題搭配之色彩。 非常適合視覺設計領域人士應用,網站上的 主題顏色幾乎每天都有新的色彩搭配,整個 網站的顏色主題約有數千個。yunjuli@gmail.com
  41. 41. 動畫製作動畫製作 yunjuli@gmail.com
  42. 42. 動畫製作:面板功能 • 動畫設定的實體名稱,若有運用到 計時的功能時,非常重要 名稱: • 內建多種動畫之動作(見下頁) 預設集: 事件: • 跟按鈕做搭配的功能 • 動畫播放長度 持續時間: • 可設定播一次或多次的動作 播放: 速度: • 有緩慢移入與移出 速度 • 動畫設定可接受大於360度 旋轉: 動畫設定可接受大於360度 • 動畫在最後秒針的大小 縮放 可見度: • 動畫執行動作的前與後設定 可見度: yunjuli@gmail.com
  43. 43. 動畫製作:面板功能細部分類 預設集 yunjuli@gmail.com
  44. 44. 動畫製作:計時功能面板 • 載入頁面執行動畫功能 事件: 動畫延遲播放時間 可 延遲: • 動畫延遲播放時間,可 一次指定多個動畫延遲 播放,製造效果 • 設定動畫播放次數 播放: 預覽動畫 • 設定動畫播放次數 yunjuli@gmail.com
  45. 45. 動畫製作:計時功能連結面板 同時播放 移除連結 yunjuli@gmail.com
  46. 46. 動畫製作:按鈕轉換與按鈕面板 yunjuli@gmail.com
  47. 47. 動畫製作:按鈕轉換與面板 yunjuli@gmail.com
  48. 48. 動畫製作:加入按鈕樣本 yunjuli@gmail.com
  49. 49. 動畫製作:按鈕事件-/2 yunjuli@gmail.com
  50. 50. yunjuli@gmail.com
  51. 51. 影片處理影片處理 yunjuli@gmail.com
  52. 52. 動畫製作:按鈕轉換與面板 yunjuli@gmail.com
  53. 53. yunjuli@gmail.com
  54. 54. 影片製作:導覽點設法 yunjuli@gmail.com
  55. 55. 轉檔工具轉檔工具 AdobeAdobe Media EncoderMedia Encoder yunjuli@gmail.com
  56. 56. yunjuli@gmail.com
  57. 57. yunjuli@gmail.com
  58. 58. FLV F4V4 yunjuli@gmail.com
  59. 59. H.264 yunjuli@gmail.com
  60. 60. MPEG2 yunjuli@gmail.com
  61. 61. MPEG2 DVD yunjuli@gmail.com
  62. 62. MPEG2 Blu-rayy yunjuli@gmail.com
  63. 63. 物件狀態物件狀態 yunjuli@gmail.com
  64. 64. 物件狀態製作:Slideshow 11 22 33 44 55 66 yunjuli@gmail.com
  65. 65. Adobe Indesign CS5 外掛Adobe Indesign CS5 外掛 Overview of publishingp g workflow yunjuli@gmail.com
  66. 66. 電子雜誌製作:流程圖 Indesign iPADg CS5 (Adobe VW) Content .issue Bundle Overlay CreatorCreator yunjuli@gmail.com
  67. 67. 電子雜誌製作:必須安裝的程式 PCPC • Indesignplugin • Contentbundler• Contentbundler • Overlaycreator d b i iPADiPAD • Adobe viewer (FREE) http://labs.adobe.com/technologies/digitalpublishing/ yunjuli@gmail.com
  68. 68. http://blogs.adobe.com/digitalpublishing/ 資料與圖片來源 http://www.adobe.com/products/digitalpublishingsuite/ yunjuli@gmail.com

×