.sidebar h2

.post-outer h3

.post-outer h3 a

.post-footer

.post-body

今日上課重點

鋼筆工具：
利用「點、放」跟「點、拉、放」畫出線段的工具，鋼筆工具可畫出「尖角點」與「曲線點（把手對稱）」，畫出來的線段要調整則要使用「直接選取工具」。另外可以讓尖角點有把手（把手不對秤），但要使用「轉換錨點工具」。

轉換錨點工具：
在錨點上點一下，轉換成尖角點。點、拉、放轉換成曲線點。把轉換成曲線點的把手用轉換錨點工具拉開，就轉成有把手的尖角點。

增加錨點、減少錨點：
這是針對已經存在的線條，在線條上增加或減少錨點。只要用鋼筆工具，移到已經選取的線段上，在沒有錨點的位置點一下就會自動增加錨點，在已經有錨點的位置點一下就會自動減少錨點。

鉛筆工具：
利用按著滑鼠拖曳的方式，畫出自由曲線，電腦會自動在線條上產生相關的錨點跟把手。預設鉛筆工具在畫圖的時候若很靠近被選取的線條，可以直接修飾線條曲線，因此適合搭配手寫版來潤飾線條。

筆劃面板：
可設定筆劃粗細與虛線。

線段區域工具：
使用方式是在畫面上按著滑鼠拖曳後放開。如果要顯示線段工具的設定，則在畫面上用滑鼠點一下不要拖曳馬上放開就可以看到。

縮放工具、傾斜工具：
使用方法與旋轉、鏡射工具類似，都要先用選取工具把要調整的物件選好，在使用縮放（傾斜）工具訂基準點，接著移動後就可以進行縮放（傾斜）。跟選取工具的縮放（傾斜）功能的差異在於縮放（傾斜）工具可以一邊變形、一邊複製。選取工具則沒有辦法。如果訂基準點時要手動輸入倍率（角度），在訂基準點之前要先按著Alt才用滑鼠點一下訂基準點，那設定對話框就會跳出來。

任意變形工具：
主要是可以做透視、拉單一角延伸的變形。若要做透視變形。步驟如下
1.用滑鼠點一下角落控制點，但先不要拖曳
2.按著Alt+Ctrl+Shift
3.用滑鼠拖曳

橡皮擦工具、美工刀工具：
橡皮擦工具可以將原本封閉曲線的色塊擦除，擦除之後如果分成兩塊，兩塊依舊是封閉曲線。
美工刀工句可以將封閉曲線的色塊切兩半，切開之後兩塊依舊是封閉曲線。

路徑橡皮擦、剪刀工具：
路徑橡皮擦可以將封閉曲線的線條擦「斷」，變成開放曲線。
剪刀工具可以將封閉曲線剪「斷」，變成分開的開放曲線。

今天是永和社大illustrator向量插畫好好玩第一天上課～課程重點說明如下，

0.整體軟體環境介紹：
了解軟體整體功能的配置，開新檔案的設定選項說明，如何調整面板位置（點選面板名稱後，按著滑鼠拖曳即可）。以及檢視工具（手形工具、放大鏡工具、導覽器）的使用。常用快速鍵：
A.切換到檢視工具 z
B.臨時切換到手形工具 space（空白鍵）

1.選取工具練習：
了解選取工具的操作，使用選取工具選取多個物件、移動物件。選取工具選擇的對象是整體物件，群組選取工具選取的對象是已經群組的物件中的單一物件。
常用快速鍵：
A.群組 Ctrl+G
B.解散群組 Ctrl+Shift+G
C.切換到選取工具 v

2.直接選取工具練習：
直接選取工具的選取對象是錨點與把手，主要是拿來調整物件的外框曲線。直接選取工具跟群組選取工具放在同一個位置，但是群組選取工具的使用對象比較接近選取工具，是針對一個物件的整體做選擇。直接選取工具則是針對一個物件的細部做選取，兩個功能不一樣喔！

3.排列順序練習：
利用選取工具，選取物件後的右鍵選單內「排列順序」調整物件的層疊順序。
常用快速鍵
A.移到最上層 Ctrl+Shift+]
B.移到最下層 Ctrl+Shift+[

4.上色練習：
了解工具列底下填色與外框色的差異，利用選取工具替物件調整填色與外框色。
在填色（外框色）快速點兩下，會出現撿色器，挑選好顏色後按確定，
該顏色就會填滿到填色（外框色）。

5.旋轉鏡射練習：
旋轉鏡射工具使用步驟
A.先用選取工具將要旋轉（鏡射）的物件選起來
B.點選旋轉（鏡射）工具
C.游標呈現十字，在物件附近點一下，定下旋轉（鏡射）的基準點，點完游標會變成箭頭
D.用箭頭去移動物件，物件就會依照基準點旋轉（鏡射）
F.如果要一邊旋轉（鏡射）一邊複製，用箭頭移動物件前先按著Alt，再用箭頭去移動物件

用輸入數值的方式設定旋轉（鏡射）角度的步驟
A.先用選取工具將要旋轉（鏡射）的物件選起來
B.點選旋轉（鏡射）工具
C.游標呈現十字，先按著Alt再接著於要設定基準點的位置點一下，會出現旋轉設定對話框。
輸入要設定的角度。
D.如果只是要旋轉（鏡射）不複製，那在對話框按確定即可，如果要同時旋轉（鏡射）跟複製，
那按拷貝
F.如果要重複旋轉（鏡射）跟複製的動作，按Ctrl+D即可
快速鍵說明：重複上一個動作 Ctrl+D

6.路徑管理員練習：
練習基礎的形狀模式（連集、剪去上層、交集、差集）
了解圖片ICON的解析，利用形狀模式畫出簡易插畫。

這裡提供永和社大剩下幾週的上課內容大綱～

圖片上傳

1. 如何使用google+的相簿功能？
2. 上傳好的圖檔如何找出圖片路徑？

Dreamweaver應用

1. 如何將圖片使用在部落格的外觀上？
2. 部落格的CSS設定要怎麼使用？
3. 如何使用firefox找出選取器的名稱？

photoshop排版

1. 使用photoshop製作部落格排版
2. 如何使用ps將部落格要使用的圖檔擷取出來？

因為上週開始講部落格了，所以接下來的課程進行方式會倒過來。就是我會先把圖片都切好，教同學怎麼用到部落格上。會用之後，在回頭來學怎麼用photoshop排版，以及切圖。因為ps上次教已經有一陣子了，可能大家也都比較生疏，所以我們從比較近期已經開始講的部落格先進行完畢之後，再回頭來用綜合應用複習ps。希望讓同學可以比較了解photoshop、dreamweaver再製作網頁的過程中，所扮演的角色跟功能為何～

部落格選取器的名稱先在這裡預告，以下是這次上課會講到要設定的名稱。到時候同學可以直接從這裡拷貝貼上使用～

文章標題
h3.post-title

文章標題顏色
.post-title a

邊欄標題
.column-right-inner .widget h2
（只有.widget h2 時會包含文章裡面的日期）

邊欄超連結
.widget-content a

文章內容
.entry-content

banner製作步驟解析

A.構圖

1. 用白紙大概隨手畫一下想要的圖片文字配置

B.圖片去背

1. 檔案>開啟舊檔
2. 使用筆型工具把要去背的圖片框起來
3. 在圖層面板先拷貝一份新的圖層
4. 切換到路徑面板，點選「轉換為選取範圍」
5. 選取>反轉選取
6. 切換到圖層面版，選擇剛剛拷貝的圖層，按delete把背景刪除
7. 把底下的圖層眼睛關掉

C.在banner上使用去背的圖形

1. 先開新檔案，以760*200像素大小為例子
2. 先切換回剛剛去背的檔案，在去背圖層的名稱上按右鍵，選擇複製圖層
3. 在複製圖層對話框中，選擇banner檔案名稱
4. 切回banner檔案，就會看到剛剛的圖形
5. 選擇複製過來的圖形所在的圖層，按編輯>任意變形
6. 如果拷貝過來的圖檔大於banner很多，
7. 先在工具選項上設定縮放的百分比，直到可以看到圖片的外框
8. 按著鍵盤的shift然後按著滑鼠拖曳邊框角落，調整圖片大小
9. 按enter確認大小
10. 使用移動工具，移動圖片位置

D.文字

1. 使用文字工具，在畫面上輸入文字
2. 使用字元面板，調整文字大小、顏色
3. 使用移動工具，調整文字的位置
4. 在文字圖層名稱上按右鍵，選擇混合模式，設定樣式。

E.背景色調整

1. 先選擇背景圖層
2. 使用漸層工具，在工具選項設定顏色
3. 在背景圖層上上漸層色

F.背景裝飾

1. 使用形狀工具畫幾何圖形
2. 使用筆刷工具畫不規則背景圖樣

G.動畫效果製作

1. 從視窗>動畫，開啟動畫面版
2. 在動畫面板新增影格
3. 在圖層選擇要變化的文字圖層、複製一份之後，調整顏色
4. 在動畫面版設定秒數
5. 播放測試

H.匯出成可使用的gif圖檔

1. 檔案>儲存為網頁裝置用
2. 格式選擇gif，儲存

1. 筆刷應用
2. 顏色面板
3. 油漆桶與漸層色

自訂筆刷

1. 檔案>開新檔案，以50*50像素大小為例子
2. 用基本筆刷，選擇黑、灰色在畫布上畫出新筆刷的圖樣（此一步驟亦可使用形狀工具或其他工具繪製）
3. 編輯>定義筆刷預設集。替自訂筆刷命名，按確認後完成
4. 之後在使用筆刷的時候，筆刷的下拉選單就會存著之前自訂的筆刷在裡面可以選擇

自訂圖樣

1. 檔案>開新檔案，以100*100像素大小為例子
2. 用基本筆刷，選擇顏色色在畫布上畫出新的圖樣（此一步驟亦可使用形狀工具或其他工具繪製）
3. 編輯>定義圖樣。替自訂圖樣命名，按確認後完成
4. 之後使用圖樣印章，或是其他可以選擇圖樣的功能，在圖像的下拉選單就會存著之前自訂的圖樣在裡面

圖層樣式

1. 在要設定樣式的圖層的圖層名稱上按右鍵，選擇「混合選項」
2. 勾選要套用的項目，點選項目的名稱，可在右邊看到該項目可以設定的內容參數
3. 設定完畢後按確定

下次上課預告：banner綜合練習

• 去背練習
• 在banner上使用去背的圖形
• 增加漸層背景
• 增加形狀圖層作為裝飾
• 加文字
• 製作動畫效果
• 匯出成可使用的gif圖檔

以下是今天的上課內容～因為操作影片暫時還來不及錄製，同學可以在操作的時候，先參考以下的操作流程。

基礎工具說明

1. 圖層的使用與說明
2. 文字工具應用
3. 移動工具
4. 形狀工具
5. 簡易Gif動畫製作

以「文字閃動的Gif動畫」為例子，操作流程如下：

1. 開新檔案：以200*50像素為例
2. 使用文字工具，在畫面上點一下，輸入文字
3. 使用「字元面板」調整文字的大小、顏色、字型，如果要針對整個文字圖層做調整，要先切換回一般圖層模式。如果要針對某幾個文字做調整，要切換到文字編輯模式。
4. 複製一個文字圖層，重新調整該圖層的文字色彩
5. 從「視窗>動畫」把動畫面把打開
6. 從動畫面版新增影格
7. 點選到不同的影格，回到圖層面版調整不同圖層在不同影格的顯示、隱藏狀態。
8. 從動畫面版設定每個影格的播放時間
9. 按播放預覽動畫
10. 從「檔案>儲存為網頁裝置用」，選擇gif，按儲存。

以「移動的愛心gif動畫」為例子，操作流程如下：

1. 開新檔案：以 200*200 像素為例
2. 使用「自訂形狀工具」在畫面上畫一個愛心，從工具選項調整愛心的顏色
3. 使用移動工具將愛心移動到指定位置，例如希望愛心從左往右移動，那一開始要先放在畫面左邊
4. 從動畫面版新增影格
5. 點選到第二個影格，再使用移動工具將愛心移動到別的位置，例如希望愛心從左往右移動，這時候要把愛心放到畫面右邊
6. 從動畫面版，按 crtl 點選開頭與結尾的影格，點選「補間動畫影格」，輸入要增加的影格數，按確定
7. 從動畫面版設定每個影格的播放時間
8. 按播放預覽動畫
9. 從「檔案>儲存為網頁裝置用」，選擇gif，按儲存。

沉寂了一陣子，這裡要重新開張囉！

未來教學影片的部分，會同步發佈在這裡跟blogger的hsu‧小講師的教課學習筆記，所以兩邊基本上內容是相同的，只是這邊會多聯絡我跟一些教課資訊，那hsu‧小講師的教課學習筆記就純粹是放教學影片的內容。

教學影片清單最後會全部整合成這裡的的連結（不然要維護兩份太累了），最終是希望流量還是導到這裡為主，但是hsu‧小講師的教課學習筆記不會收掉～

還在想以後這裡要不要放討論區什麼的…不過之後再說吧！總之未來這裡會陸續更新更多photoshop跟dreamweaver的教學影片內容。至於flash跟illustrator，是曾經有想過但目前暫時不考慮。因為之所以會整理影片的初衷，是想要提供給社區大學的學生在回去練習時有個可以參考複習的東西、而寫文字有時候總會有遺漏，那不如就錄影片吧。

但目前並沒有在社大教flash跟illustrator的打算，所以暫時就不錄製囉！

歡迎同學來這裡逛逛:)