Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] 設計作品集製作--以InDesign為例

作者: JinJin 
  1. 1. 作品集製作前言
  2. 2. 作品集種類及內容
  3. 2.1 作品集的種類:
  4. 2.1.1 平面作品集(InDesign,列印pdf or互動swf)
  5. 2.1.2 網頁作品集
  6. 2.1.3 動態多媒體作品集(FLASH...)
  7. 2.1.4 簡報用作品集(POWERPOINT)
  8. 2.2 作品集內容:
  9. 2.2.1 個人簡介
  10. 2.2.2 作品分類目錄
  11. 2.2.3 單一作品介紹
  12. 2.3 作品集製作前準備
  13. 2.3.1 作品整理與內容撰寫
  14. 2.3.2 風格設定
  15. 2.3.3 個人LOGO
  16. 2.3.4 作品集主視覺設計
  17. 3. 作品集製作步驟
  18. 3.1 以InDesign製作作品集的基本步驟
  19. 3.1.1 檔案→新增→文件
  20. 3.1.2 設定為列印形式,及作品集的尺寸、頁數、出血範圍、裝訂方向(橫式左翻或直式右翻))等,作品集選擇『邊界與欄』即可
  21. 3.1.3 設定邊界與欄數(可依編排形式,自行決定是否需要欄數)
  22. 3.1.4 設定主版種類與項目
  23. 3.1.5 頁面面板→新增主版→新增主版B→命名為目錄
  24. 3.1.6 選擇第二頁→頁面面板→套用主版至頁面→
  25. 3.1.7 套用主版至頁面→選擇→套用至第二頁
  26. 3.1.8 頁面面板→新增主版→新增主版C→命名為電腦繪圖
  27. 3.1.9 選取頁面→套用置主版→C電腦繪圖
  28. 3.1.10 於主版頁面加入文字做編排設計
  29. 3.1.11 在T文字選項拉出文字框→打字→可分別填外框底色
  30. 3.1.12 也可分別設定文字顏色
  31. 3.1.13 加入底圖→按右鍵→排列順序→移至最後
  32. 3.2 新增主版並套用原有的主版做法
  33. 3.2.1 頁面→新增主版→新增主版D→命名為攝影→根據主版→C-電腦繪圖
  34. 3.2.2 選取其他頁面→套用至主版頁面→D-攝影
  35. 3.2.3 在D-攝影主版上→按右鍵→忽略所有的主版頁面項目
  36. 3.2.4 將D-攝影右邊的主版修改為攝影的編排
  37. 3.2.5 將D-攝影左邊的主版也→按右鍵→忽略所有的主版頁面項目
  38. 3.2.6 將D-攝影左邊的主版修改為攝影的編排
  39. 3.3 增加頁數
  40. 3.3.1 頁面→插入頁面
  41. 3.4 加入頁碼
  42. 3.4.1 文字→插入特殊字元→標記→目前頁碼
  43. 3.4.2 插入之後的頁碼,會呈現主版的字首符號
  44. 3.4.3 將頁碼做編排設計
  45. 3.4.4 將右邊設計好的頁碼複製到左邊的主版
  46. 3.4.5 依前述步驟,持續新增E-資訊概論主版
  47. 3.5 作品頁面編輯
  48. 3.5.1 檔案→置入
  49. 3.5.2 InDesign中的圖片框有兩層,一層是外框,一層是圖片內容
  50. 3.5.3 選擇外框→物件→效果→陰影
  51. 3.5.4 設定陰影的數值
  52. 3.5.5 拉出文字框,貼上設計說明文字
  53. 3.5.6 工具箱→矩形框架工具→拉出範圍→置入圖片
  54. 3.5.7 設定段落樣式
  55. 3.5.8 於照片上→按右鍵→效果→陰影
  56. 3.5.9 檢視→螢幕模式→預視
  57. 3.6 動畫效果
  58. 3.6.1 視窗→互動→動畫
  59. 3.6.2 選擇圖片或任一物件→預設集→選取任一動畫效果
  60. 3.6.3 頁面切換效果
  61. 3.6.4 頁面切換效果
  62. 3.7 將視訊作品由FLASH中增加播放面板
  63. 3.7.1 打開FLASH→檔案→匯入→匯入視訊
  64. 3.7.2 瀏覽→選取視訊檔案
  65. 3.7.3 設定外觀元素
  66. 3.7.4 完成視訊匯入
  67. 3.7.5 於屬性面版修改視訊寬度
  68. 3.7.6 設定文件尺寸符合視訊尺寸
  69. 3.7.7 檔案→匯出影片
  70. 3.7.8 匯出成swf影片
  71. 3.8 於InDesign置入影片
  72. 3.8.1 檔案→置入→選擇製作完成的影片
  73. 3.8.2 調整置適當大小
  74. 3.8.3 製作其他動態效果
  75. 3.9 文字框設定
  76. 3.9.1 於文字框上→按右鍵→文字框選項
  77. 3.9.2 文字框選項設定→內縮間距的設定
  78. 3.9.3 內縮間距的設定完成的效果
  79. 3.9.4 將文字框填入底色
  80. 3.10 作品集檔案匯出成動態格式
  81. 3.10.1 檔案→轉存
  82. 3.10.2 轉存成SWF動態檔案,可播放影片及呈現動態互動翻頁等效果
  83. 3.11 作品集檔案匯出成可列印的PDF格式
  84. 3.11.1 轉存成PDF(列印),可輸出成高品質作品集檔案
  85. 3.12 網路相關講義

1. 作品集製作前言


身為設計人,作品集是未來就業或求學非常重要的利器,無論要找設計相關工作,或者繼續念研究所,作品集都是必要條件,因此及早建立及準備可以讓自己的作品更有系統並更加完整。

作品集首先要確立的是:想給對方看到甚麼樣想法及風格的你?
穩重?大膽?多元?創意?活潑?細膩?....

作品風格的呈現及想法為何?

這些都是製作作品集之前必須考慮清楚的。
[hr]
現階段的作品集製作則是希望大家能累積、整理並檢視現階段的作品,必且把每次的作業都當作是未來可以放在作品集的心情去製作,用心認真去製作,並且依照設計原則、清楚的確定設計目標及設計理念為何,逐步的將作品分類並整理,未來將有更豐厚的作品資源可隨時取用,也許會隨著年級逐漸的增長,作品也將更成熟,但這成長的脈絡也會是作品成熟的重要推手,希望將來畢業時,都能有豐富且具有個人風格的作品呈現。

2. 作品集種類及內容



1. 作品集的種類:


1. 平面作品集(InDesign,列印pdf or互動swf)


2. 網頁作品集


3. 動態多媒體作品集(FLASH...)


4. 簡報用作品集(POWERPOINT)



[hr]

2. 作品集內容:


1. 個人簡介


2. 作品分類目錄


3. 單一作品介紹


(1)作品圖片 (系列作品、立體作品或攝影作品可放多張圖以表現整體感)
(2)發想草圖或色稿 (整理過後的發想過程,以表現創意發想的廣度與造型能力)
(3)作品說明:
<1>作品主題:
<2>作品類型:
<3>使用軟體(工具):
<4>設計(理念)概念:
<5>設計特色(風格、配色...):
<6>作品尺寸:

[hr]

3. 作品集製作前準備


1. 作品整理與內容撰寫


2. 風格設定



4. 作品集主視覺設計



[hr]

3. 作品集製作步驟


1. 以InDesign製作作品集的基本步驟


1. 檔案→新增→文件


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-01.jpg[/IMG]


2. 設定為列印形式,及作品集的尺寸、頁數、出血範圍、裝訂方向(橫式左翻或直式右翻))等,作品集選擇『邊界與欄』即可


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-02.jpg[/IMG]


3. 設定邊界與欄數(可依編排形式,自行決定是否需要欄數)


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-03.jpg[/IMG]


4. 設定主版種類與項目


EX:1.封面,2.目錄,3.電腦繪圖,4.攝影,5.設計素描,6.基礎造型,7.設計概論,8.網頁設計,9.資訊概論....



5. 頁面面板→新增主版→新增主版B→命名為目錄


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-04.jpg[/IMG]


6. 選擇第二頁→頁面面板→套用主版至頁面→


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-05.jpg[/IMG]


7. 套用主版至頁面→選擇→套用至第二頁


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-06.jpg[/IMG]


8. 頁面面板→新增主版→新增主版C→命名為電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-07.jpg[/IMG]


9. 選取頁面→套用置主版→C電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-08.jpg[/IMG]


10. 於主版頁面加入文字做編排設計


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-09.jpg[/IMG]


11. 在T文字選項拉出文字框→打字→可分別填外框底色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-10.jpg[/IMG]


12. 也可分別設定文字顏色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-11.jpg[/IMG]


13. 加入底圖→按右鍵→排列順序→移至最後


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-12.jpg[/IMG]



2. 新增主版並套用原有的主版做法


1. 頁面→新增主版→新增主版D→命名為攝影→根據主版→C-電腦繪圖


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-13.jpg[/IMG]


2. 選取其他頁面→套用至主版頁面→D-攝影


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-14.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-15.jpg[/IMG]


3. 在D-攝影主版上→按右鍵→忽略所有的主版頁面項目


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-16.jpg[/IMG]


4. 將D-攝影右邊的主版修改為攝影的編排


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-17.jpg[/IMG]


5. 將D-攝影左邊的主版也→按右鍵→忽略所有的主版頁面項目


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-18.jpg[/IMG]


6. 將D-攝影左邊的主版修改為攝影的編排


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-19.jpg[/IMG]



3. 增加頁數


1. 頁面→插入頁面


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-20.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-21.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-22.jpg[/IMG]



4. 加入頁碼


先在主板要插入頁碼的位置拉出文字框

1. 文字→插入特殊字元→標記→目前頁碼


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-23.jpg[/IMG]


2. 插入之後的頁碼,會呈現主版的字首符號


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-24.jpg[/IMG]


3. 將頁碼做編排設計


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-25.jpg[/IMG]


4. 將右邊設計好的頁碼複製到左邊的主版


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-26.jpg[/IMG]


5. 依前述步驟,持續新增E-資訊概論主版


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-27.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-28.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-29.jpg[/IMG]



5. 作品頁面編輯


將作品圖檔置入頁面

1. 檔案→置入


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-30.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-31.jpg[/IMG]


2. InDesign中的圖片框有兩層,一層是外框,一層是圖片內容


同時按Ctrl+Shift才可同時放大或縮小圖片內外框
選取工具選擇的是外框,直接選取工具選擇的是裡面的圖片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-32.jpg[/IMG]


3. 選擇外框→物件→效果→陰影


製作圖片外框的陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-33.jpg[/IMG]


4. 設定陰影的數值


製作圖片外框的陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-34.jpg[/IMG]


5. 拉出文字框,貼上設計說明文字




6. 工具箱→矩形框架工具→拉出範圍→置入圖片


於矩形框架工具中置入原照片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-35.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-36.jpg[/IMG]


7. 設定段落樣式


將內文設定共同使用的段落樣式

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-37.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-38.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-39.jpg[/IMG]


8. 於照片上→按右鍵→效果→陰影


在照片上設定陰影

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-40.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-41.jpg[/IMG]


9. 檢視→螢幕模式→預視


觀看預覽效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-42.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-43.jpg[/IMG]



6. 動畫效果


1. 視窗→互動→動畫


叫出動畫視窗

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-44.jpg[/IMG]


2. 選擇圖片或任一物件→預設集→選取任一動畫效果


製作動態效果

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-45.jpg[/IMG]


3. 頁面切換效果


翻頁的效果設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-46.jpg[/IMG]


4. 頁面切換效果


翻頁的效果設定

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-46.jpg[/IMG]

[hr]

7. 將視訊作品由FLASH中增加播放面板


1. 打開FLASH→檔案→匯入→匯入視訊


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-47.jpg[/IMG]


2. 瀏覽→選取視訊檔案


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-48.jpg[/IMG]


3. 設定外觀元素


選擇適合的播放器元素

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-49.jpg[/IMG]


4. 完成視訊匯入


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-50.jpg[/IMG]


5. 於屬性面版修改視訊寬度


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-51.jpg[/IMG]


6. 設定文件尺寸符合視訊尺寸


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-52.jpg[/IMG]


7. 檔案→匯出影片


設定完成匯出影片

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-53.jpg[/IMG]


8. 匯出成swf影片


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-54.jpg[/IMG]


8. 於InDesign置入影片


1. 檔案→置入→選擇製作完成的影片


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-55.jpg[/IMG]


2. 調整置適當大小


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-56.jpg[/IMG]


3. 製作其他動態效果







9. 文字框設定


1. 於文字框上→按右鍵→文字框選項


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-58.jpg[/IMG]


2. 文字框選項設定→內縮間距的設定


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-59.jpg[/IMG]


3. 內縮間距的設定完成的效果


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-60.jpg[/IMG]


4. 將文字框填入底色


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-62.jpg[/IMG]



10. 作品集檔案匯出成動態格式


1. 檔案→轉存


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-63.jpg[/IMG]


2. 轉存成SWF動態檔案,可播放影片及呈現動態互動翻頁等效果


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-64.jpg[/IMG]

[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-65.jpg[/IMG]




11. 作品集檔案匯出成可列印的PDF格式


1. 轉存成PDF(列印),可輸出成高品質作品集檔案


[IMG]http://i556.photobucket.com/albums/ss1/whc915/works-66.jpg[/IMG]



[hr]

12. 網路相關講義



如何使用 InDesign 製作電子書:http://www.myadobe.com.tw/Technique/InDesign/100811-001.asp



Edited 5 time(s). Last edit at 12/18/2011 10:45PM by JinJin.
(編輯記錄)