本文件版權宣告 本文件的版權宣告受 GNU 一般授權許可 (GPL) 文件的保護。

Presentation on theme: "本文件版權宣告 本文件的版權宣告受 GNU 一般授權許可 (GPL) 文件的保護。"— Presentation transcript:

1 本文件版權宣告 本文件的版權宣告受 GNU 一般授權許可 (GPL) 文件的保護。
GNU一般授權許可文件是由開放軟體基金會 (FSF) 所提出，主要是用來防止有心人士阻礙軟體的散佈。簡而言之，就是說雖然軟體的拷貝 (copy) 可以酌收費用，但是收到這份拷貝的人，不能阻礙該軟體的開放。這也意味著該軟體的原始程式碼也必須開放。 這樣做對設計程式的人而言是有益的。任何人可以來修改、甚至可以散佈他/她所做的修改，而且允許他們將修改的程式碼放在相同的版權聲明之下。

2 Fireworks MX繪圖技巧 這個單元主要指導初學者如何開始使用繪圖軟體，利用繪圖 軟體本身強大的功能來完成一些圖片的編修工作，同時也可
以製作出花俏的文字特效來 授課教師：邵雲龍老師

3 ●點陣圖與向量圖 一般來說，經過掃描、數位相機等匯入的圖片，都是點陣圖 ，而由繪圖軟體所繪製的線條、造型，才可以繪出向量圖。 點陣圖 向量圖
點陣圖：以點素當作紀錄的對象，也就是紀錄每一個點的顏色 　資料，當圖形放大或旋轉時，很容易就失真。 向量圖：以數學運算式當作紀錄的對象，也就圖形的邊緣、 　內部等等都是使用數學公式來存取，當圖形放大或旋轉時， 　也會依照數學公式改變，甚至還可以隨意變形，相對點陣圖 　來講比較不會失真。

4 ●圖檔格式 在Fireworks裡面預設存檔格式是PNG，除此之外，在網頁運用上面最
常見到檔案格式還有GIF、JPG等等….以下是這幾種格式的比較： PNG GIF JPG 壓縮比例 一般 高(可能失真) 動畫 可以 不可 最高顏色 全彩 256色 適合 照片等複雜圖形 色彩或線條較簡單之圖 適合GIF儲存 的圖形 適合PNG及JPG儲存 的圖形

5 ●啟動Fireworks MX 安裝好Fireworks MX之後，請執行「開始」功能集「程式集」
「Macromedia 」「Macromedia Fireworks MX」 各種面板 工具箱 Fireworks啟動 的畫面 繪圖工作區 物件的屬性工具列 屬性工具列半高／全高

6 ●啟動Fireworks MX—面板的操作
工具面板暫時隱藏 工具面板展開 工具面板搬動 Macromedia系列的網頁製作軟體在MX前一版最令人詬病的就是工具面板，常常 會妨礙到工作區的網頁或圖片動畫編輯，而在MX這一版則可將工具面板「隱藏」

7 ●調整應該出現的視窗 建議除了保留原來「工具」、「屬性」外，增加「工具列」的「主要」及「修改」。其他的工具列視需要再開啟。 物件垂直翻轉
物件水平翻轉 物件順時針90度翻轉 物件逆時針90度翻轉 物件對齊方式 把物件移至最下層 把物件下推一層 把物件上推一層 把物件移至最上層 物件分離 物件結合 物件取消群組 物件群組 貼上 拷貝 剪下 重做(取消還原) 還原 列印 轉存(匯出檔案) 讀入(匯入檔案) 儲存檔案 開啟舊檔 開新檔案

8 ●工具箱 物件選取 縮放變形工具 選取細部工具 裁切工具 圈選(規則形狀) 魔術棒(圈選，程式判斷) 鉛筆繪圖工具
調整工具(模糊、銳利、塗抹) 滴管工具(選顏色) 套索(圈選不規則形狀) 筆刷工具 橡皮擦工具 印章工具 油漆桶工具(填滿) 線段工具 形狀工具 自由變形工具 鋼筆工具(貝玆曲線) 文字輸入 裁刀工具 筆刷與填滿顏色對調 不顯示線條或填充顏色 設為預設的顏色 矩形連結區工具 分割工具 顯示或隱藏分割區域 設定筆刷顏色 全螢幕顯示 選單全螢幕顯示 標準檢視 設定填滿顏色 手型工具(檢視位置) 縮放顯示比例

9 ●開新檔案 首先，我們開啟一個新的檔案，可以從「檔案」「開新檔案」 或者用滑鼠左鍵點選工具列上面的 填寫寬、高以及解析度
畫布顏色依需要選擇 解析度的計算：例如一張照片3x5吋，解析度為300 dpi，所以當匯入到繪圖軟體裡面，結果就變成(3x300) x (5x300) = 900 x 1500　像素構成的圖片 縮放顯示比例 也就是工具箱的

10 ●向量圖形的編輯—線段 可以畫出線段 點選「細部選取」 ，拖曳控制點，可 以調整大小，細部 的控制點可以在點 工具箱之線段工具
　，拖曳控制點，可 　以調整大小，細部 　的控制點可以在點　 　選後，使用Delete 　鍵刪除 工具箱之線段工具 點選「物件選取」 　可以搬移位置 框線顏色 　填滿顏色 選擇顏色的時候，也可以利用小滴管 到Fireworks工作區任何的位置來選取 小技巧：不要急著先選擇顏色、粗細，等畫好線段之後再來調整 ，或者也可以利用下一頁的「屬性」工具列進行調整。

11 ●向量圖形的編輯—造型工具 選取造型之後，就可以直接使用滑鼠的左鍵
　拖曳出需要的形狀。在「屬性」工具列的效 　果　設定上，可以選擇形狀的變化。 工具箱之造型工具 您也可以在繪製兩個造型圖案之後，使　 　用Shift鍵按住不放，加上滑鼠左鍵去點 　選這兩個物件，然後選擇工具列上的 　「結合」就可以把兩個物件結合在一起

12 ●向量圖形的編輯—屬性工具列的調整 物件擺放位置與 寬高資訊 混合效果 不透明度 筆刷顏色與方式 油漆桶設定(填滿) 筆刷設定 效果設定：
可以使用+號增加特效， 然後用來啟動特效 (次頁有一些效果的說明) 筆刷邊緣 處理方式 填滿顏色 與方式 填滿邊緣 處理方式 使用材質

13 ●向量圖形的編輯—屬性工具列的效果 內斜角 外斜角 光暈 凸起浮雕 凹下浮雕 陰影
提示：按鈕(ICON)或者標題(BANNER)就是先製作出造型，再輸入文字

14 ●儲存檔案 選擇檔案位置、輸入檔名 ，然後存檔 選取儲存格式 「檔案」 「轉存預覽」 重要的背景透明在下一頁說明
　，然後存檔 選取儲存格式 「檔案」 　「轉存預覽」 重要的背景透明在下一頁說明 轉存，不要按確定！ 注意：Fireworks一般預設是以png格式儲存，如果要存成GIF或JPG才 使用轉存的方法

15 ●儲存檔案 背景顏色 白底色 點選背景 選取透明色 背景從此變成透明色 轉存，不要按「確定」！ 透明底色 (選取白色為透明色)
●儲存檔案　背景顏色 白底色 點選背景 　背景從此變成透明色 選取透明色 轉存，不要按「確定」！ 透明底色 (選取白色為透明色) 選擇檔案位置、輸入檔名 　，然後存檔

16 ●圖形的編輯—變形與剪裁 縮放 傾斜 扭曲 旋轉 小技巧
選取剪裁工具 並且拖曳出想要 剪裁的大小。 完成後使用滑鼠 左鍵在剪裁區域 內快速點選兩下 小技巧 利用圖層做管理，可以提高效率， 圖層的運用類似Dreamweaver，如果 沒有看到圖層的視窗，請選擇 「視窗」「圖層」

17 ●向量圖形的編輯—自由變形 可以拖曳控制點做自由變形 選擇控制點(出現S)，代表可以 開始進行變形 工具箱之自由變形工具
由控制點或者壓力球變形 增加或減少控制點

18 ●向量圖形的編輯—鋼筆工具 可以繪製出不規則形狀的貝玆 工具箱之鋼筆工具(貝玆曲線) 曲線 點選「物件選取」 可以搬移位置
　曲線 工具箱之鋼筆工具(貝玆曲線) 點選「物件選取」 　可以搬移位置 　點選「細部選取」 　，拖曳控制點，可 　以調整大小 什麼是貝玆曲線？ 貝玆曲線就是運用數學公式，除了以兩點一條直線之外，還多一個向量線來幫助繪製有曲面的物體，例如，你可以先用掃描器把杯子的照片掃入，讀取到繪圖軟體內，然後依照 貝玆曲線慢慢描出邊緣。 當然也可以使用「物件」屬性 　視窗來進行調整。

19 ●建立文字與特效(一) 學習繪圖軟體最快入門的地方就是字型的運用，因為字型的 改變、特效是在所有的繪圖功能裡面最明顯的，也是最容易
去學習的！ 滑鼠左鍵點選要 　插入點 輸入文字 標記(mark)文字 　，改變字型屬性 選擇文字工具

20 ●建立文字與特效(二) 靠左對齊 可選擇指定的 某幾個字後， 再去選擇字型 大小與顏色 置中對齊 靠右對齊 加底線 斜體 粗體 齊行對齊
強制對齊 橫書 直書

21 ●建立文字與特效(三) 字寬縮放 未設定 段落前後之間距 更改字距 更改行距 上、下標 段落縮排

22 ●建立文字與特效(四) 修改文字大小 選取工具箱的 「物件選取」 點選 控制點 改變物件 大小 修改文字內容 直接使用滑鼠左鍵點選物件
　「物件選取」 點選 　控制點 改變物件 　大小 修改文字內容 調整文字的筆刷顏色與路徑 直接使用滑鼠左鍵點選物件 兩下就可以編輯文字囉

23 ●文字物件與路徑結合(一) 您可以在圖層 視窗看到共有 兩層 選擇顏色，然後畫出一段曲線(鋼筆工具向量路徑工具)
　視窗看到共有 　兩層 選擇顏色，然後畫出一段曲線(鋼筆工具向量路徑工具) 　也可以使用造型工具之橢圓形 使用工具箱的「物件選取」　　，然後按住Shift不放，使用滑鼠 　左鍵將兩個物件都選取來，或利用圖層視窗，將兩個圖層都選取 　起來(複選)也可以

24 ●文字物件與路徑結合(二) 選擇「文字」 「附加至路徑」 哈哈哈，成功囉 您也可以使用滑 鼠左鍵搬移位置 如果覺得位置不好看，可以
　「附加至路徑」 哈哈哈，成功囉 　您也可以使用滑 　鼠左鍵搬移位置 如果覺得位置不好看，可以 　選取「屬性」標籤，調整 　「文字位移」在路徑的位置 要解除文字物件與路徑的結合，請至「文字」「分離文字和路徑」

25 ●文字物件與路徑結合(三) 請試驗「文字」「方向」 　不同設定的差別 依路徑旋轉 垂直 垂直傾斜 水平傾斜

26 ●文字物件與路徑結合(四)—將文字轉換成路徑
「文字」 　「轉換為路徑」 選取文字物件 　(可點選圖層) 變成路徑的文字 　就可以隨意的變 　化顏色、大小、 　形狀(由筆畫視窗 　及控制點拖曳) 方法在下一頁，粉精采ㄜ

27 ●文字物件與路徑結合(五)—將文字轉換成路徑
　調整屬性視窗 　的屬性，就可以 　得到不錯的特效 將文字轉換成路徑之後，也 可以點選「細部選取工具」 來針對每一個文字做調整 練習：完成右圖 提示：要有兩張一模一樣的路徑，路徑選擇 　　　「非自然效果」「油漆潑濺」 　　　然後將其中一個路徑與文字做結合 　　　並且調整彼此的相對位置就完成囉

28 ●動畫製作(一) 新增一個動畫 Dreamweaver雖然可以利用時間軸的概念，把圖層製作出動畫來，
●動畫製作(一)　新增一個動畫 Dreamweaver雖然可以利用時間軸的概念，把圖層製作出動畫來， 但是，圖層並不是所有的瀏覽器都可以接受，並且圖層仍有許多缺 點，所以利用Fireworks製作出GIF動畫，才可徹底解決問題 檔案開新檔案 使用工具箱的 　「物件選取」 　選取物件 選擇「修改」 　「動畫」「動畫選取 　　　　　　 範圍」 選取造型工具，繪製一個 　內部填滿顏色的矩形

29 ●動畫製作(二) 新增一個動畫 影格：需要幾張圖製作出動畫 移動：移動距離(點素) 方向：移動的方向(度)
●動畫製作(二)　新增一個動畫 影格：需要幾張圖製作出動畫 　移動：移動距離(點素) 　方向：移動的方向(度) 　縮放至：最後的大小尺寸(百分比) 　不透明度：開始到結束的透明度(百分比) 　　　　　　(不透明度可以製作淡入淡出特效) 　旋轉：旋轉變化的角度(度) Fireworks會警告多一張影格，請按 　「確定」 完成囉，可以使用「播放」看看成果 您也可以利用 　影格看到每一 　張圖片的設定 　(名稱與時間)

30 ●動畫製作(三) 修改 影格 位置搬動 使用工具箱的「物 件選取」 當滑鼠點到哪一個 影格點，就會出現 該點的影像(配合影 格視窗可以編輯出
●動畫製作(三)　修改 影格 位置搬動 使用工具箱的「物 件選取」 當滑鼠點到哪一個 影格點，就會出現 該點的影像(配合影 格視窗可以編輯出 現時間) 使用工具箱的「物 件選取」 使用滑鼠左鍵拖曳 不放，就可以搬動 位置(按住最前端的 紅點或綠點就可以 改變移動方向) 修改整體設定 「修改」「製作動 畫」「設定」可以 修改整個動畫設定

31 ●儲存動畫檔案 選取儲存格式 切換到動畫標籤 「檔案」 「轉存預覽」 轉存，不要按確定！ 選擇只播放一次 或不停播放
　「轉存預覽」 轉存，不要按確定！ 選擇只播放一次 　或不停播放 選擇檔案位置、輸入檔名 　，然後存檔

32 ●點陣圖的編輯—圈選工具 這三個圈選工具的差別在於： 是矩形或圓形的圈選； 索套工具是不規則形狀圈選 魔術棒是程式自動判斷選取
這三個圈選工具的差別在於： 　　是矩形或圓形的圈選； 　 　索套工具是不規則形狀圈選 　　魔術棒是程式自動判斷選取 　而前兩者的圈選方式類似，都 　是利用滑鼠左鍵拖曳。 工具箱之圈選 與索套工具 設定選項，例如邊緣羽化 　，最大的好處就是當做複 　製、剪下，然後貼上時， 　在新圖邊緣產生羽化效果 通常圈選完成後，接下來要做的動作就是複製或者剪下….等等工作 注意：通常要先設定邊緣羽化效果，才能去做圈選的動作

33 ●點陣圖的編輯 鉛筆繪圖工具 筆刷工具 滴管工具(選顏色) 可畫線段 筆刷或填滿 顏色就會跟 被滴管選擇 的顏色依樣 調整工具 橡皮擦工具
油漆桶工具(填滿) 可調整點陣圖畫質 去除不要的背景 倒入指定的顏色 印章工具 再使用滑鼠左鍵將 複製位置的圖樣對 應到新位置 先決定 複製位置 (滑鼠左鍵)

34 ●圖片的編輯—改變大小 「修改」「畫布」選單下的 影像大小：可以成比例放大或縮小圖 畫布大小：原圖大小不改變，增加邊緣 畫布的大小調整，需
　影像大小：可以成比例放大或縮小圖 　畫布大小：原圖大小不改變，增加邊緣 畫布的大小調整，需 要自行輸入寬度或高 度，然後點選錨點， 以決定從哪個邊緣增 加畫布大小 影像大小的調整 ，可以輸入寬度 的改變，因為「 強制等比例」已 經被勾選，所以 高度也會跟著自 動改變

35 ●影像切割(一) 一般在網路上面傳輸大影像的圖檔速率會遠遠比小圖檔慢上許多，因此
就有工具專門將一張大的圖檔切割成為數個小圖檔，然後在使用HTML 語法的表格或者圖層…等等方式，把圖拼湊回去，實際上就像我們日常 在玩的拼圖一樣，由小塊的拼圖，慢慢拼成一張大圖，只不過幸運的是 ：我們有Fireworks幫忙完成工作 「檔案」 　「開啟舊檔」 使用工具箱的「物 　件選取」 　然後點選一下圖片 　或框選所有物件 選取檔案，然後確定

36 ●影像切割(二) 自動分割與手動切割 自動分割(向量圖) 手動分割(點陣圖) 點選工具箱 的分割工具 「編輯」「插入」 「分割」
●影像切割(二)　自動分割與手動切割 自動分割(向量圖) 手動分割(點陣圖) 點選工具箱 　的分割工具 「編輯」「插入」 　　　　　　　　　「分割」 依序拖曳 　區域完成 建立多重分割 如果切割錯誤，使用細部選取 　工具，點選該區域，按Delete 　就可以刪除分割，然後重新切 　割一次 就完成自動分割囉 注意：自動切割完畢，如果對切割不滿意，還可以使用手動切割

37 ●影像切割(三) 儲存切割結果 「檔案」「轉存」 選擇儲存位置、檔名，以及存檔類型為 HTML和影像，HTML為轉存HTML檔案
●影像切割(三)　儲存切割結果 「檔案」「轉存」 選擇儲存位置、檔名，以及存檔類型為 　HTML和影像，HTML為轉存HTML檔案 自動將剛剛切割的小圖檔存檔，您可以 　點選HTML檔案，看看是否真的是一張 　大的圖檔(也可以用Dreamweaver開啟， 　看看是不是以表格將小圖拼湊起來)