【課程簡介】

Fireworks 是由Adobe公司出品的網頁圖形設計開發的處理軟體,Fireworks 可以幫您製作網頁圖像處理網頁圖像與網頁版型開發設計、GIF動畫製作,或是建立網頁上的互動效果。同時支援點陣圖與向量圖,設計滑鼠變換影像、彈出式選單等網頁效果,裁切和最佳化圖像,以減少檔案大小,以及自動產生 JavaScript 程式碼,縮短設計專案所需要的時間。而最新版的Fireworks CS6還可以讓您快速的設計出目前最熱門的行動裝置UI操作介面JQuery Mobile,讓您可以輕鬆的開發在iPhone與Android智慧型手機APP介面上,撇步王在本次的課程中有詳細的教學介紹唷!

如果您想要設計網頁您一定要學… 
如果您要開發行動裝置您也要學習Fireowrks CS6

【試看影片】

《02-07繪製一個「回到首頁」的按鈕圖示》

《04-01影像變換效果範例實作:步驟一、插入參考線》

【課程目錄】

01.Fireworks CS6必學技巧
01-01啟動Fireworks CS6與建立新的文件檔案
01-02Fireworks CS6操作環境介紹
01-03如何開啟我自己拍的照片檔案?
01-04如何將多個檔案匯集在一個檔案中?
01-05工具的切換與簡單幾何圖形的產生
01-06如何將物件選取起來?
01-07何謂自動圖形?要如何調整?
01-08如何讓物件加上「陰影」與「光暈」效果?
01-09如何應用與區分「點陣圖」與「向量圖」的工具使用?
01-10為何我的物件不會顯示邊緣?

點我點我進入課程

02.物件的繪製技巧教學
02-01「組合路徑」的操作介紹
02-02「合併路徑」的操作與編輯技巧
02-03使用工具來接合與分割物件
02-04繪製一個加號
02-05繪製一個放大鏡物件
02-06繪製一個「座標圖示」
02-07繪製一個「回到首頁」的按鈕圖示
02-08如何將路徑轉換成封閉的填色物件?
02-09繪製一個「郵件」圖示吧!
02-10路徑的接合與分離的技巧操作介紹
02-11繪製一個「重新整理」圖示
02-12繪製一個人物造型圖案
02-13繪製可愛人物,步驟一:繪製臉部
02-14繪製可愛人物,步驟二:使用『貼入範圍內』完成臉部繪製
02-15繪製可愛人物,步驟三:完成物件繪製
02-16繪製一個小貨車,步驟一:繪製車體
02-17繪製一個小貨車,步驟二:繪製後車廂
02-18將小貨車再做一個變化!

點我點我進入課程

03.GIF動畫實做範例
03-01如何製作一個自轉動畫?
03-02準備製作GIF動畫與「符合畫布」的用法
03-03如何調整動畫的變化時間?
03-04如何正確的將GIF動畫匯出?
03-05準備製作閃字動畫:步驟一文字的建立
03-06產生閃字效果的方式
03-07將閃字動畫輸出成動畫檔案
03-08將文字轉換成動畫元件
03-09改變動畫位置與時間
03-10讓文字消失的動畫效果製作
03-11我們也可以使用CS6內建的動畫物件

點我點我進入課程

04.簡單好用的影像變換範例實做
04-01影像變換效果範例實作:步驟一、插入參考線
04-02步驟二:繪製版面方塊
04-03步驟三:匯入四張小圖片
04-04步驟四:匯入四張大圖片
04-05步驟五:套用『創造性』特效
04-06步驟六:重製『狀態』並且調整圖層顯示
04-07步驟七:插入矩形分割的方式
04-08步驟八:套用影像變換效果
04-09步驟九:將大圖片也套用調換影像效果
04-10步驟十:文字的插入方式
04-11步驟十一:完成製作並且匯出成網頁檔案
04-12補充步驟:如何在小圖示加入超連結?

點我點我進入課程

05.用Fireworks CS6設計網頁畫面
05-01準備使用Fireworks CS6設計網頁版型
05-02步驟一:繪製白色矩形物件
05-03步驟二:繪製一個圓角矩形方塊
05-04步驟三:將物件轉成遮色片
05-05步驟四:加入文字位置
05-06步驟五:匯入小圖示並改成白色
05-07步驟六:貼成遮色片的技巧
05-08步驟七:標題文字的插入
05-09步驟八:匯入AI與PSD圖檔的方式
05-10按鈕元件的概念介紹
05-11步驟九:將文字轉換成按鈕元件
05-12步驟十:再製按鈕的技巧
05-13步驟十一:更改按鈕文字與圖示插入
05-14步驟十二:套用『簡易變換影像』效果
05-15完成版型設計步驟

點我點我進入課程

06.重要的分割操作
06-01分割的基本操作方式介紹
06-02Fireworks CS6網頁版型分割的規則
06-03匯出預設值的儲存方式
06-04如何調整輸出品質與格式?
06-05用表格式方式匯出我們的網頁版型技巧
06-06如何使用CSS樣式的方式匯出版型?
06-07分割重點整理說明

點我點我進入課程

07.網頁範本的建立
07-01開啟Dreamweaver CS6建立網站準備編輯版型
07-02步驟一:將網頁版型置中
07-03步驟二:把上方橫幅變成背景圖片
07-04步驟三:製作網頁內容區域的延伸
07-05步驟四:完成最後頁尾區域的設定

點我點我進入課程

08.用CSS來建立網頁範本
08-01準備用CSS來製作網頁版型的整理動作
08-02步驟一:建一個新的網頁檔案
08-03步驟二:建立DIV區塊
08-04步驟三:插入TOP的背景圖片
08-05步驟四:將內容區的背景圖片加入
08-06步驟五:將按鈕文字貼入
08-07將按鈕文字加上超連結功能
08-08將清單範圍標示出來
08-09準備製作導覽列按鈕的命名方式
08-10完成按鈕超連結文字的隱藏
08-11將按鈕圖示全部加入進來
08-12增加Wrapper讓按鈕正常顯示
08-13用DIV去補上按鈕列的區塊
08-14準備用CSS製作影像調換效果
08-15將圖片的區塊移動到指定位置
08-16完成第一個影像變換效果
08-17製作完成第二個影像變換效果
08-18完成第三個按鈕

點我點我進入課程

09.新功能!JQuery Mobile主題設計教學
09-01Fireworks CS6全新功能介紹JQuery Mobile主題建立方式
09-02如何預覽與測試JQuery Mobile主題畫面?
09-03如何更改JQuery Mobile的圖示顏色?
09-04如何建立一個新的JQuery Mobile圖示
09-05如何快速有效的修改主題色彩?
09-06匯出JQuery Mobile主題樣式
09-07如何將Fireworks的JQuery Mobile樣式套用到網頁中?
09-08如何增加JQuery mobile的頁面
09-09自行設計回到MENU的按鈕
09-10將MENU按鈕複製到所有頁面
09-11修改MENU底線的問題,完成設計

點我點我進入課程

 

還有出教學光碟呦》》》Fireworks CS6教學 網頁版型設計實例課程光碟

 

文章標籤
創作者介紹

pebopebo的部落格

pebopebo 發表在 痞客邦 PIXNET 留言(0) 人氣()